import React, { useMemo, useState, useEffect } from "react";

/**
 * 39DG Multi-Brand Mobile Demo
 *
 * What’s included:
 * - Global header that always shows 39DollarGlasses (parent identity)
 * - Brand ribbon on sub-brand pages with logo + “A 39DG company” (links to 39dg.co)
 * - Gap-style brand tabs (single-row, horizontally scrollable)
 * - Bottom-sheet brand switcher (logo grid) with endorsement under each logo
 * - Simple product grid + shared cart (to demonstrate one checkout for all brands)
 *
 * Notes:
 * - Mobile-first layout; use responsive devtools (375–430px wide) for best view
 * - TailwindCSS utility classes are used (no external imports required here)
 */

// --- Sample brand data (placeholder logos implemented as inline SVGs) ---
const BRAND_PALETTE = {
  neurolux: "#6E44FF",
  lumeo: "#0EA5E9",
  studyspecs: "#F59E0B",
  oculusleep: "#4F46E5", // unused; kept for example
  ocusleep: "#4F46E5",
  trailview: "#0EA44E",
};

const BRANDS = [
  {
    name: "Neurolux",
    slug: "neurolux",
    color: BRAND_PALETTE.neurolux,
    tagline: "Blue‑light filtering lenses for screen-heavy days.",
  },
  {
    name: "Lumeo",
    slug: "lumeo",
    color: BRAND_PALETTE.lumeo,
    tagline: "Clarity-forward optics for daily focus.",
  },
  {
    name: "StudySpecs",
    slug: "studyspecs",
    color: BRAND_PALETTE.studyspecs,
    tagline: "Durable, kid‑proof frames built for school.",
  },
  {
    name: "OcuSleep",
    slug: "ocusleep",
    color: BRAND_PALETTE.ocusleep,
    tagline: "Evening eyewear to support better sleep.",
  },
  {
    name: "TrailView",
    slug: "trailview",
    color: BRAND_PALETTE.trailview,
    tagline: "Adventure‑ready shades for the outdoors.",
  },
];

function BrandLogo({ brand, size = 24 }) {
  // simple letter-based logo circle; replace with real SVGs later
  const letter = brand?.name?.[0] || "?";
  const fill = brand?.color || "#111827";
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden>
      <circle cx="20" cy="20" r="20" fill={fill} />
      <text
        x="50%"
        y="54%"
        textAnchor="middle"
        fontSize="18"
        fontWeight="700"
        fill="#ffffff"
        fontFamily="ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto"
      >
        {letter}
      </text>
    </svg>
  );
}

function Pill({ active, color, children, onClick }) {
  const activeStyle = active ? { color, borderColor: color, boxShadow: `inset 0 -2px 0 0 ${color}` } : {};
  return (
    <button
      onClick={onClick}
      className="inline-flex items-center gap-2 px-3 py-2 rounded-full border border-gray-200 bg-white whitespace-nowrap text-sm"
      style={activeStyle}
      role="tab"
      aria-selected={active}
    >
      {children}
    </button>
  );
}

function BottomSheet({ open, onClose, children }) {
  useEffect(() => {
    function onEsc(e) { if (e.key === "Escape") onClose?.(); }
    if (open) document.addEventListener("keydown", onEsc);
    return () => document.removeEventListener("keydown", onEsc);
  }, [open, onClose]);

  return (
    <div
      className={`fixed inset-0 z-[100] ${open ? "pointer-events-auto" : "pointer-events-none"}`}
      aria-hidden={!open}
      role="dialog"
      aria-modal="true"
      onClick={(e) => { if (e.target === e.currentTarget) onClose?.(); }}
    >
      {/* overlay */}
      <div className={`absolute inset-0 transition ${open ? "bg-black/30" : "bg-transparent"}`} />
      {/* sheet */}
      <div
        className={`absolute left-0 right-0 bottom-0 bg-white rounded-t-2xl shadow-2xl transition-transform duration-200 ${open ? "translate-y-0" : "translate-y-full"}`}
      >
        <div className="w-10 h-1 rounded bg-gray-300 mx-auto mt-2 mb-3" />
        {children}
      </div>
    </div>
  );
}

function Products({ brand, onAdd }) {
  // sample product list (3 items per brand)
  const items = useMemo(() => {
    const base = [
      { name: "Classic", price: 39 },
      { name: "LiteFlex", price: 49 },
      { name: "ProShield", price: 69 },
    ];
    return base.map((b, i) => ({ ...b, id: `${brand?.slug || "home"}-${i}`, brand: brand?.name || "39DG" }));
  }, [brand]);
  return (
    <div className="grid grid-cols-2 gap-3">
      {items.map((p) => (
        <div key={p.id} className="rounded-2xl border border-gray-200 overflow-hidden bg-white">
          <div className="aspect-[4/3] bg-gray-100 flex items-center justify-center">
            <span className="text-xs text-gray-500">{p.brand} · {p.name}</span>
          </div>
          <div className="p-3">
            <div className="flex items-center justify-between">
              <div>
                <div className="text-sm font-medium">{p.name}</div>
                <div className="text-xs text-gray-500">by {p.brand}</div>
              </div>
              <div className="text-sm font-semibold">${p.price}</div>
            </div>
            <button
              onClick={() => onAdd?.(p)}
              className="mt-2 w-full rounded-xl bg-black text-white text-sm py-2"
            >
              Add to cart
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

export default function App() {
  const [currentBrand, setCurrentBrand] = useState(null); // null = Home
  const [sheetOpen, setSheetOpen] = useState(false);
  const [cart, setCart] = useState([]);

  const activeColor = currentBrand?.color || "#111827";

  const addToCart = (item) => setCart((c) => [...c, item]);

  // Simulate route changes when pressing back/forward (optional demo nicety)
  useEffect(() => {
    const onPop = () => {
      const hash = (location.hash || "").replace("#", "");
      const found = BRANDS.find((b) => b.slug === hash) || null;
      setCurrentBrand(found);
    };
    window.addEventListener("popstate", onPop);
    onPop();
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const goBrand = (brand) => {
    setCurrentBrand(brand);
    history.pushState({}, "", brand ? `#${brand.slug}` : "#");
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      {/* --- Global header: always 39DollarGlasses (parent identity) --- */}
      <header className="sticky top-0 z-50 h-14 bg-white border-b border-gray-200 flex items-center justify-between px-3">
        <button className="p-2" aria-label="Menu">☰</button>
        <div className="font-bold tracking-tight">39DollarGlasses</div>
        <div className="flex items-center gap-3">
          <button className="p-2" aria-label="Search">🔍</button>
          <button className="relative p-2" aria-label={`Cart (${cart.length})`}>
            🛒
            {cart.length > 0 && (
              <span className="absolute -top-1 -right-1 h-5 min-w-[1.25rem] px-1 rounded-full bg-black text-white text-[10px] flex items-center justify-center">
                {cart.length}
              </span>
            )}
          </button>
        </div>
      </header>

      {/* --- Brand ribbon (shows only on sub-brand pages) --- */}
      {currentBrand && (
        <div className="sticky top-14 z-40 h-10 bg-white border-b border-gray-200 flex items-center justify-between px-3">
          <button
            onClick={() => setSheetOpen(true)}
            className="inline-flex items-center gap-2"
            aria-label={`Switch brand (currently ${currentBrand.name})`}
          >
            <BrandLogo brand={currentBrand} size={26} />
          </button>
          <a
            href="https://39dg.co"
            className="text-xs text-gray-500 hover:text-gray-700"
            target="_blank" rel="noreferrer"
          >
            A 39DG company
          </a>
          <button onClick={() => setSheetOpen(true)} className="text-sm">Brands ▾</button>
        </div>
      )}

      {/* --- Brand tabs (Gap-style) --- */}
      <nav className={`sticky ${currentBrand ? "top-[96px]" : "top-14"} z-40 flex gap-2 px-3 py-2 overflow-x-auto bg-white border-b border-gray-200`} role="tablist" aria-label="39DG brands">
        <Pill active={!currentBrand} onClick={() => goBrand(null)}>
          <div className="w-4 h-4 rounded-full bg-gray-900" aria-hidden />
          <span>Home</span>
        </Pill>
        {BRANDS.map((b) => (
          <Pill key={b.slug} active={currentBrand?.slug === b.slug} onClick={() => goBrand(b)} color={b.color}>
            <BrandLogo brand={b} size={16} />
            <span>{b.name}</span>
          </Pill>
        ))}
        <Pill onClick={() => setSheetOpen(true)}>
          <span>More…</span>
        </Pill>
      </nav>

      {/* --- Page Content --- */}
      <main className="px-3 pb-24">
        {/* Hero */}
        <section className="mt-3">
          {currentBrand ? (
            <div className="rounded-2xl overflow-hidden" style={{ boxShadow: "0 10px 30px rgba(0,0,0,.06)" }}>
              <div
                className="h-44 sm:h-52 w-full flex items-center"
                style={{
                  background: `linear-gradient(135deg, ${activeColor} 0%, ${activeColor} 60%, #111827 120%)`,
                }}
              >
                <div className="p-4 text-white">
                  <div className="flex items-center gap-3">
                    <BrandLogo brand={currentBrand} size={28} />
                    <h1 className="text-xl font-semibold">{currentBrand.name}</h1>
                  </div>
                  <p className="mt-2 text-sm/relaxed max-w-[26ch] opacity-95">{currentBrand.tagline}</p>
                  <div className="mt-3">
                    <button className="px-3 py-2 rounded-xl bg-white text-gray-900 text-sm">Shop {currentBrand.name}</button>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="rounded-2xl bg-white border border-gray-200 p-4">
              <h1 className="text-lg font-semibold">Welcome to 39DollarGlasses</h1>
              <p className="text-sm text-gray-600 mt-1">Explore our family of brands – all with secure checkout, one cart, and the same great service.</p>
              <div className="grid grid-cols-2 gap-3 mt-3">
                {BRANDS.map((b) => (
                  <button key={b.slug} className="rounded-xl border border-gray-200 bg-white p-3 text-left" onClick={() => goBrand(b)}>
                    <div className="flex items-center gap-2">
                      <BrandLogo brand={b} size={22} />
                      <div className="font-medium text-sm">{b.name}</div>
                    </div>
                    <div className="text-[11px] text-gray-500 mt-1">A 39DG company</div>
                  </button>
                ))}
              </div>
            </div>
          )}
        </section>

        {/* Trust strip */}
        <section className="mt-4">
          <div className="rounded-xl bg-white border border-gray-200 p-3 flex items-center justify-between">
            <div className="text-sm"><span className="font-medium">Shop with confidence</span> — Secure checkout & 30‑day returns across all brands.</div>
            <div className="hidden sm:block text-xs text-gray-500">by 39DollarGlasses</div>
          </div>
        </section>

        {/* Products */}
        <section className="mt-4">
          <h2 className="text-base font-semibold mb-2">{currentBrand ? `${currentBrand.name} picks` : "Featured products"}</h2>
          <Products brand={currentBrand} onAdd={addToCart} />
        </section>

        {/* Cross-links */}
        {currentBrand && (
          <section className="mt-6">
            <h3 className="text-sm font-medium mb-2">More from 39dg</h3>
            <div className="flex gap-2 overflow-x-auto pb-2">
              {BRANDS.filter((b) => b.slug !== currentBrand.slug).map((b) => (
                <button key={b.slug} onClick={() => goBrand(b)} className="min-w-[150px] rounded-xl border border-gray-200 bg-white p-3 text-left">
                  <div className="flex items-center gap-2">
                    <BrandLogo brand={b} size={20} />
                    <div className="font-medium text-sm">{b.name}</div>
                  </div>
                  <div className="text-[11px] text-gray-500 mt-1">A 39DG company</div>
                </button>
              ))}
            </div>
          </section>
        )}
      </main>

      {/* --- Bottom-sheet brand switcher --- */}
      <BottomSheet open={sheetOpen} onClose={() => setSheetOpen(false)}>
        <div className="px-4 pb-5">
          <div className="grid grid-cols-2 gap-3">
            {BRANDS.map((b) => (
              <button
                key={b.slug}
                onClick={() => { setSheetOpen(false); goBrand(b); }}
                className="rounded-xl border border-gray-200 p-4 text-left bg-white"
              >
                <div className="flex items-center gap-2">
                  <BrandLogo brand={b} size={32} />
                  <div>
                    <div className="font-medium text-sm">{b.name}</div>
                    <div className="text-[11px] text-gray-500">A 39DG company</div>
                  </div>
                </div>
              </button>
            ))}
            <button
              onClick={() => { setSheetOpen(false); goBrand(null); }}
              className="rounded-xl border border-gray-200 p-4 text-left bg-white"
            >
              <div className="font-medium text-sm">All brands</div>
              <div className="text-[11px] text-gray-500">Explore our family</div>
            </button>
          </div>
        </div>
      </BottomSheet>

      {/* --- Footer (light) --- */}
      <footer className="mt-8 px-3 py-6 text-center text-xs text-gray-500">
        © 2025 39DollarGlasses · Part of <a href="https://39dg.co" className="underline" target="_blank" rel="noreferrer">39dg</a>
      </footer>
    </div>
  );
}