/**
 * HOW TO PROVIDE YOUR OWN SVGs:
 *
 * 1. Place your .svg files in src/app/assets/logos/
 * 2. Import each one as a React component using Vite's ?react suffix:
 *    import BicyclingLogo from "../assets/logos/bicycling.svg?react"
 * 3. Replace the placeholder <LogoPlaceholder> in the items array with your imported component:
 *    { id: 1, logo: BicyclingLogo, url: "https://bicycling.com", label: "Bicycling" }
 *
 * The logo component receives className="h-8 w-auto max-w-[120px]" for sizing.
 */

import React from "react";

interface GridItem {
  id: number;
  // Each logo is a React component (imported SVG or inline SVG component)
  logo: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  url: string;
  label: string;
}

// ─── Placeholder SVG logos ────────────────────────────────────────────────────
// These mimic the editorial wordmark style from your reference.
// Replace each one with: import MyLogo from "../assets/logos/mylogo.svg?react"

const makePlaceholder = (text: string, fontSize = 14, fontWeight = 700, letterSpacing = 0) =>
  function PlaceholderLogo(props: React.SVGProps<SVGSVGElement>) {
    return (
      <svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg" {...props}>
        <text
          x="50%"
          y="50%"
          dominantBaseline="middle"
          textAnchor="middle"
          fontFamily="Georgia, 'Times New Roman', serif"
          fontSize={fontSize}
          fontWeight={fontWeight}
          letterSpacing={letterSpacing}
          fill="currentColor"
        >
          {text}
        </text>
      </svg>
    );
  };

// Row 1
const Logo01 = makePlaceholder("Bicycling", 13, 700);
const Logo02 = makePlaceholder("BEST PRODUCTS", 11, 900, 1);
const Logo03 = makePlaceholder("CAR AND DRIVER", 11, 700, 0.5);
const Logo04 = makePlaceholder("COSMOPOLITAN", 11, 700, 1);
const Logo05 = makePlaceholder("Country Living", 12, 400, 0);
const Logo06 = makePlaceholder("Esquire", 14, 400, 0);

// Row 2
const Logo07 = makePlaceholder("Digital Spy", 13, 400, 0);
const Logo08 = makePlaceholder("delish", 16, 700, 0);
const Logo09 = makePlaceholder("ELLE", 22, 400, 4);
const Logo10 = makePlaceholder("≡DECOR", 14, 700, 1);
const Logo11 = makePlaceholder("Good Housekeeping", 10, 400, 0);
const Logo12 = makePlaceholder("BAZAAR", 15, 700, 2);

// Row 3
const Logo13 = makePlaceholder("Fotogramas", 13, 400, 0);
const Logo14 = makePlaceholder("GEAR PATROL", 12, 700, 1);
const Logo15 = makePlaceholder("Men's Health", 13, 700, 0);
const Logo16 = makePlaceholder("micasa", 16, 700, 0);
const Logo17 = makePlaceholder("Oprah Daily", 12, 400, 0);
const Logo18 = makePlaceholder("The Pioneer Woman", 10, 400, 0);

// Row 4
const Logo19 = makePlaceholder("POPULAR MECHANICS", 9, 700, 0.5);
const Logo20 = makePlaceholder("prima", 18, 400, 0);
const Logo21 = makePlaceholder("Prevention", 13, 400, 0);
const Logo22 = makePlaceholder("Quest", 16, 700, 0);
const Logo23 = makePlaceholder("redbook", 14, 700, 0);
const Logo24 = makePlaceholder("ROAD & TRACK", 11, 700, 1);

// Row 5
const Logo25 = makePlaceholder("RUNNER'S WORLD", 10, 700, 0.5);
const Logo26 = makePlaceholder("seventeen", 13, 400, 0);
const Logo27 = makePlaceholder("TOWN & COUNTRY", 10, 700, 1);
const Logo28 = makePlaceholder("VERANDA", 13, 700, 2);
const Logo29 = makePlaceholder("woman's day", 12, 400, 0);
const Logo30 = makePlaceholder("Women's Health", 11, 700, 0);

// ─── Grid data ─────────────────────────────────────────────────────────────
const gridItems: GridItem[] = [
  { id: 1,  logo: Logo01, url: "https://bicycling.com",         label: "Bicycling" },
  { id: 2,  logo: Logo02, url: "https://bestproducts.com",      label: "Best Products" },
  { id: 3,  logo: Logo03, url: "https://caranddriver.com",      label: "Car and Driver" },
  { id: 4,  logo: Logo04, url: "https://cosmopolitan.com",      label: "Cosmopolitan" },
  { id: 5,  logo: Logo05, url: "https://countryliving.com",     label: "Country Living" },
  { id: 6,  logo: Logo06, url: "https://esquire.com",           label: "Esquire" },
  { id: 7,  logo: Logo07, url: "https://digitalspy.com",        label: "Digital Spy" },
  { id: 8,  logo: Logo08, url: "https://delish.com",            label: "Delish" },
  { id: 9,  logo: Logo09, url: "https://elle.com",              label: "Elle" },
  { id: 10, logo: Logo10, url: "https://elledecor.com",         label: "ELLE Decor" },
  { id: 11, logo: Logo11, url: "https://goodhousekeeping.com",  label: "Good Housekeeping" },
  { id: 12, logo: Logo12, url: "https://harpersbazaar.com",     label: "Harper's Bazaar" },
  { id: 13, logo: Logo13, url: "https://fotogramas.es",         label: "Fotogramas" },
  { id: 14, logo: Logo14, url: "https://gearpatrol.com",        label: "Gear Patrol" },
  { id: 15, logo: Logo15, url: "https://menshealth.com",        label: "Men's Health" },
  { id: 16, logo: Logo16, url: "https://micasa.es",             label: "Micasa" },
  { id: 17, logo: Logo17, url: "https://oprahdaily.com",        label: "Oprah Daily" },
  { id: 18, logo: Logo18, url: "https://thepioneerwoman.com",   label: "The Pioneer Woman" },
  { id: 19, logo: Logo19, url: "https://popularmechanics.com",  label: "Popular Mechanics" },
  { id: 20, logo: Logo20, url: "https://prima.co.uk",           label: "Prima" },
  { id: 21, logo: Logo21, url: "https://prevention.com",        label: "Prevention" },
  { id: 22, logo: Logo22, url: "https://questmag.co.uk",        label: "Quest" },
  { id: 23, logo: Logo23, url: "https://redbookmag.com",        label: "Redbook" },
  { id: 24, logo: Logo24, url: "https://roadandtrack.com",      label: "Road & Track" },
  { id: 25, logo: Logo25, url: "https://runnersworld.com",      label: "Runner's World" },
  { id: 26, logo: Logo26, url: "https://seventeen.com",         label: "Seventeen" },
  { id: 27, logo: Logo27, url: "https://townandcountrymag.com", label: "Town & Country" },
  { id: 28, logo: Logo28, url: "https://veranda.com",           label: "Veranda" },
  { id: 29, logo: Logo29, url: "https://womansday.com",         label: "Woman's Day" },
  { id: 30, logo: Logo30, url: "https://womenshealthmag.com",   label: "Women's Health" },
];

export function GridComponent() {
  return (
    <div className="w-full">
      {/* Internal borders: each cell gets right + bottom border; last col/row borders are removed via CSS below */}
      <div className="logo-grid grid w-full border border-gray-200" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
        {gridItems.map((item, index) => {
          const Logo = item.logo;
          // We need to know the current column count to skip the right/bottom borders correctly.
          // Instead of JS column detection, we use CSS: every cell gets right + bottom borders,
          // then we hide the right border on nth-child multiples of each col count per breakpoint.
          return (
            <a
              key={item.id}
              href={item.url}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={item.label}
              className="logo-cell flex items-center justify-center p-6 border-b border-r border-gray-200 bg-white hover:bg-gray-50 transition-colors duration-150 group"
              style={{ minHeight: "80px" }}
            >
              <Logo
                className="h-8 w-auto max-w-[130px] text-gray-900 transition-opacity duration-150 group-hover:opacity-70"
                aria-hidden="true"
              />
            </a>
          );
        })}
      </div>

      <style>{`
        /* Remove bottom border from last row cells and right border from last col cells */

        /* 2-col layout (default) */
        .logo-grid .logo-cell:nth-child(2n)   { border-right: none; }
        .logo-grid .logo-cell:nth-last-child(-n+2):nth-child(2n+1),
        .logo-grid .logo-cell:nth-last-child(-n+2):nth-child(2n+1) ~ .logo-cell { border-bottom: none; }

        /* 3-col layout */
        @media (min-width: 480px) {
          .logo-grid { grid-template-columns: repeat(3, 1fr) !important; }
          .logo-grid .logo-cell:nth-child(2n)   { border-right: 1px solid #e5e7eb; }
          .logo-grid .logo-cell:nth-child(3n)   { border-right: none; }
          .logo-grid .logo-cell:nth-last-child(-n+3):nth-child(3n+1),
          .logo-grid .logo-cell:nth-last-child(-n+3):nth-child(3n+1) ~ .logo-cell { border-bottom: none; }
        }

        /* 4-col layout */
        @media (min-width: 640px) {
          .logo-grid { grid-template-columns: repeat(4, 1fr) !important; }
          .logo-grid .logo-cell:nth-child(3n)   { border-right: 1px solid #e5e7eb; }
          .logo-grid .logo-cell:nth-child(4n)   { border-right: none; }
          .logo-grid .logo-cell:nth-last-child(-n+4):nth-child(4n+1),
          .logo-grid .logo-cell:nth-last-child(-n+4):nth-child(4n+1) ~ .logo-cell { border-bottom: none; }
        }

        /* 6-col layout */
        @media (min-width: 900px) {
          .logo-grid { grid-template-columns: repeat(6, 1fr) !important; }
          .logo-grid .logo-cell:nth-child(4n)   { border-right: 1px solid #e5e7eb; }
          .logo-grid .logo-cell:nth-child(6n)   { border-right: none; }
          .logo-grid .logo-cell:nth-last-child(-n+6):nth-child(6n+1),
          .logo-grid .logo-cell:nth-last-child(-n+6):nth-child(6n+1) ~ .logo-cell { border-bottom: none; }
        }
      `}</style>
    </div>
  );
}