// Pages.jsx — brochure-style pages: Home, About, Coming Soon, Visit
const YEARS_IN_BUSINESS = new Date().getFullYear() - 1988;

const useSoonItems = () => {
  const [items, setItems] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    const url = (typeof TP_CONFIG !== "undefined" && TP_CONFIG.COMING_SOON_API)
      ? TP_CONFIG.COMING_SOON_API
      : "./coming-soon.json";

    fetch(url)
      .then(r => r.json())
      .then(data => setItems(data))
      .catch(() => setItems([]))
      .finally(() => setLoading(false));
  }, []);

  return { items, loading };
};

const SHOP_HOURS = [
  ["Monday", "11am – 6pm"], ["Tuesday", "11am – 6pm"], ["Wednesday", "11am – 6pm"],
  ["Thursday", "11am – 6pm"], ["Friday", "11am – 6pm"], ["Saturday", "10am – 5pm"], ["Sunday", "Closed"],
];

// ----------------------- HOURS / VISIT modules -----------------------
const HoursCard = ({ compact }) => {
  const today = new Date().getDay(); // 0 = Sun
  const map = [6,0,1,2,3,4,5]; // map JS Sun->index 6 in our array
  const todayIdx = map[today];
  return (
    <div style={{background: "var(--tp-paper)", border: "1px solid var(--border-1)", borderRadius: "var(--r-lg)", padding: compact ? 16 : 24, boxShadow: "var(--shadow-card)"}}>
      <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: compact ? 10 : 16}}>
        <Icons.Clock size={18} style={{color: "var(--tp-red)"}}/>
        <div style={{font: "var(--fw-bold) 13px/1 var(--font-body)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--tp-navy)"}}>Shop Hours</div>
      </div>
      <ul style={{listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: compact ? 2 : 8}}>
        {SHOP_HOURS.map(([d, h], i) => (
          <li key={d} style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            fontSize: compact ? 13 : 15, padding: compact ? "3px 8px" : "6px 10px", borderRadius: 4,
            background: i === todayIdx ? "rgba(200,35,44,0.08)" : "transparent",
            color: i === todayIdx ? "var(--tp-navy)" : "var(--fg-1)",
            fontWeight: i === todayIdx ? 600 : 400,
          }}>
            <span>{d}{i === todayIdx ? " · today" : ""}</span><span style={{fontVariantNumeric: "tabular-nums"}}>{h}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

const VisitCard = ({ compact }) => (
  <div style={{background: "var(--tp-cream)", border: "1px solid var(--border-1)", borderRadius: "var(--r-lg)", padding: compact ? 16 : 24, boxShadow: "var(--shadow-card)"}}>
    <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: compact ? 10 : 16}}>
      <Icons.Pin size={18} style={{color: "var(--tp-red)"}}/>
      <div style={{font: "var(--fw-bold) 13px/1 var(--font-body)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--tp-navy)"}}>Visit the Shop</div>
    </div>
    <div style={{fontSize: compact ? 15 : 18, fontWeight: 600, color: "var(--fg-1)", marginBottom: 2}}>399 S State St. #15</div>
    <div style={{fontSize: compact ? 13 : 15, color: "var(--fg-2)", marginBottom: compact ? 10 : 16}}>Westerville, OH 43081</div>
    <div style={{display: "flex", flexDirection: "column", gap: compact ? 6 : 8}}>
      <a href="https://www.google.com/maps/dir/?api=1&destination=399+S+State+St+%2315,+Westerville,+OH+43081" target="_blank" rel="noopener noreferrer" style={{display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--tp-navy)", fontWeight: 500}}>
        <Icons.ArrowRight size={13}/> Get directions
      </a>
      <a style={{display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--tp-navy)", fontWeight: 500}}>
        <Icons.ArrowRight size={13}/> (614) 899-7066
      </a>
      <a style={{display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--tp-navy)", fontWeight: 500}}>
        <Icons.ArrowRight size={13}/> TriplePlayOhio@gmail.com
      </a>
    </div>
  </div>
);

// ----------------------- SOCIAL FEED WIDGET (Curator.io) -----------------------
// Each feed runs inside its own iframe so multiple Curator embeds can coexist
// on the same page (the embed hardcodes id="curator-feed-default-feed-layout",
// which would collide if we rendered them inline).
// Drop a fresh embed snippet into ./socials/<feedFile>.html — no JS changes.
const CURATOR_ID_RE = /cdn\.curator\.io\/published\/([a-z0-9-]+)\.js/i;
const SOCIAL_FEED_WIDTH = 320;
const SOCIAL_FEED_HEIGHT = 460;

const SocialFeedWidget = ({ feedFile, icon: Icon, iconColor, label, handle, href }) => {
  const [status, setStatus] = React.useState("loading"); // loading | ready | empty

  React.useEffect(() => {
    let cancelled = false;
    fetch(`../../socials/${feedFile}.html`)
      .then(r => r.ok ? r.text() : Promise.reject(r.status))
      .then(text => {
        if (cancelled) return;
        setStatus(CURATOR_ID_RE.test(text) ? "ready" : "empty");
      })
      .catch(() => { if (!cancelled) setStatus("empty"); });
    return () => { cancelled = true; };
  }, [feedFile]);

  const card = {
    width: SOCIAL_FEED_WIDTH, height: SOCIAL_FEED_HEIGHT,
    background: "var(--tp-cream)",
    borderRadius: "var(--r-lg)",
    overflow: "hidden",
    display: "flex", flexDirection: "column",
    boxSizing: "border-box",
  };

  const header = (
    <a
      href={href} target="_blank" rel="noopener noreferrer"
      style={{
        display: "flex", alignItems: "center", gap: 10,
        padding: "12px 14px", textDecoration: "none",
        borderBottom: "1px solid rgba(26, 39, 71, 0.10)",
        color: "var(--tp-navy)", background: "var(--tp-cream)",
      }}
    >
      <span style={{
        width: 32, height: 32, borderRadius: 999,
        background: "var(--tp-navy)", color: iconColor,
        display: "flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>
        <Icon size={16}/>
      </span>
      <span style={{
        font: "var(--fw-semibold) 14px/1.2 var(--font-body)",
        color: "var(--tp-navy)", flex: 1, minWidth: 0,
        overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
      }}>
        {handle}
      </span>
      <Icons.ArrowRight size={14} style={{color: "var(--tp-navy)", opacity: 0.5}}/>
    </a>
  );

  if (status !== "ready") {
    return (
      <div style={card}>
        {header}
        <div style={{
          flex: 1, display: "flex", flexDirection: "column",
          alignItems: "center", justifyContent: "center",
          padding: 24, textAlign: "center", gap: 12,
        }}>
          <Icon size={28} style={{color: iconColor, opacity: 0.5}}/>
          <div style={{font: "var(--fw-bold) 11px/1 var(--font-body)", color: "var(--tp-navy)", textTransform: "uppercase", letterSpacing: "0.12em", opacity: 0.7}}>
            {status === "loading" ? `Loading ${label}…` : `${label} feed`}
          </div>
          {status === "empty" && (
            <div style={{fontSize: 12, color: "var(--fg-2)", lineHeight: 1.6}}>
              Paste a Curator.io embed into{" "}
              <code style={{fontFamily: "monospace", fontSize: 11}}>socials/{feedFile}.html</code>.
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div style={card}>
      {header}
      <iframe
        src={`../../socials/${feedFile}.html`}
        title={`${label} feed`}
        loading="lazy"
        style={{flex: 1, width: "100%", border: 0, display: "block", background: "var(--tp-cream)"}}
      />
    </div>
  );
};

const SocialFeedRow = () => (
  <div style={{display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap"}}>
    <SocialFeedWidget
      feedFile="tiktok_feed"
      icon={Icons.TikTok}
      iconColor="var(--tp-cream)"
      label="TikTok"
      handle="@tripleplayohio"
      href="https://www.tiktok.com/@tripleplayohio"
    />
    <SocialFeedWidget
      feedFile="insta_feed"
      icon={Icons.Insta}
      iconColor="var(--tp-cream)"
      label="Instagram"
      handle="@tripleplayohio"
      href="https://www.instagram.com/tripleplayohio"
    />
  </div>
);

// ----------------------- WHAT'S NEXT BANNER -----------------------
const WhatsNextBanner = () => (
  <div style={{
    maxWidth: 680, background: "var(--tp-navy)", color: "var(--tp-cream)",
    borderRadius: "var(--r-lg)", border: "2px solid var(--tp-red)",
    boxShadow: "var(--shadow-card-hover)", padding: "32px 36px", textAlign: "center",
  }}>
    <Eyebrow color="var(--tp-red)">What's next</Eyebrow>
    <h2 style={{font: "var(--h2)", fontSize: "clamp(24px, 3vw, 34px)", margin: "10px 0 14px", lineHeight: 1.15, color: "var(--tp-cream)"}}>
      More is coming to the Triple Play Sports website.
    </h2>
    <p style={{fontSize: 16, lineHeight: 1.55, color: "rgba(245,236,217,0.85)", margin: "0 0 6px"}}>
      Ecommerce, set checklists, product breakdowns, and more are on the way.
    </p>
    <p style={{fontSize: 14, lineHeight: 1.55, color: "rgba(245,236,217,0.65)", margin: 0}}>
      Stay tuned — and stop in the shop in the meantime.
    </p>
  </div>
);

// ----------------------- COMING SOON CARD -----------------------
const SoonCard = ({ p }) => (
  <div style={{
    background: "var(--tp-paper)", border: "1px solid var(--border-1)",
    borderRadius: "var(--r-lg)", overflow: "hidden",
    boxShadow: "var(--shadow-card)",
    transition: "box-shadow 200ms",
  }}
    onMouseEnter={(e) => e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"}
    onMouseLeave={(e) => e.currentTarget.style.boxShadow = "var(--shadow-card)"}
  >
    <div style={{position: "relative"}}>
      <ProductImage tone={p.tone} label={p.label}/>
      <div style={{position: "absolute", top: 10, left: 10}}>
        <Badge tone="navy">Coming Soon</Badge>
      </div>
    </div>
    <div style={{padding: "14px 16px"}}>
      <Eyebrow>{p.eyebrow}</Eyebrow>
      <div style={{font: "var(--fw-semibold) var(--fs-16)/1.3 var(--font-body)", color: "var(--fg-1)", margin: "6px 0 10px"}}>{p.title}</div>
      <div style={{display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--tp-red)", fontWeight: 600}}>
        <Icons.Clock size={14}/> {p.when}
      </div>
    </div>
  </div>
);

// ----------------------- PHOTO GALLERY -----------------------
const PHOTO_TILES = [
  { tone: "cream", label: "SHOP FRONT",   span: "tall" },
  { tone: "navy",  label: "DISPLAY CASE", span: "wide" },
  { tone: "red",   label: "ROOKIES" },
  { tone: "field", label: "PACKS WALL" },
  { tone: "cream", label: "AUTOGRAPHS",   span: "wide" },
  { tone: "navy",  label: "VINTAGE" },
];

const PhotoGallery = () => (
  <div className="photo-grid" style={{
    display: "grid",
    gridTemplateColumns: "repeat(4, 1fr)",
    gridAutoRows: "180px",
    gap: 12,
  }}>
    {PHOTO_TILES.map((t, i) => {
      const span = t.span === "wide" ? {gridColumn: "span 2"} : t.span === "tall" ? {gridRow: "span 2"} : {};
      return (
        <div key={i} style={{
          ...span, borderRadius: "var(--r-lg)", overflow: "hidden",
          border: "1px solid var(--border-1)", boxShadow: "var(--shadow-card)",
        }}>
          <ProductImage tone={t.tone} label={t.label} aspect="auto" style={{height: "100%"}}/>
        </div>
      );
    })}
  </div>
);

// Carousel reads the list of images from /uploads/shop_pictures/index.json.
// To add a slide: drop the file into that folder AND add its filename to index.json.
// To control order, prefix filenames (e.g. "01-storefront.jpeg") — the list is sorted.
const SHOP_PICTURES_DIR = "../../uploads/shop_pictures/";
const SHOP_PICTURES_MANIFEST = SHOP_PICTURES_DIR + "index.json";

const titleize = (filename) =>
  filename.replace(/\.[^.]+$/, "").replace(/[-_]+/g, " ").replace(/\b\w/g, c => c.toUpperCase());

const ShopCarousel = ({ height = 400 }) => {
  const [slides, setSlides] = React.useState([]);
  const [idx, setIdx] = React.useState(0);

  React.useEffect(() => {
    fetch(SHOP_PICTURES_MANIFEST)
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(files => {
        const sorted = [...files].sort();
        setSlides(sorted.map(name => ({ src: SHOP_PICTURES_DIR + name, alt: titleize(name) })));
      })
      .catch(() => setSlides([]));
  }, []);

  const n = slides.length;

  React.useEffect(() => {
    if (n < 2) return;
    const t = setInterval(() => setIdx(i => (i + 1) % n), 4500);
    return () => clearInterval(t);
  }, [n]);

  if (n === 0) {
    return (
      <div style={{height, borderRadius: "var(--r-lg)", border: "1px solid var(--border-1)", background: "var(--tp-paper)"}}/>
    );
  }

  const prev = () => setIdx(i => (i - 1 + n) % n);
  const next = () => setIdx(i => (i + 1) % n);
  const slide = slides[idx % n];

  return (
    <div style={{position: "relative", borderRadius: "var(--r-lg)", overflow: "hidden", border: "1px solid var(--border-1)", boxShadow: "var(--shadow-card)", background: "var(--tp-navy)", height}}>
      <img src={slide.src} alt="" aria-hidden="true" style={{position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "blur(28px) brightness(0.55) saturate(1.1)", transform: "scale(1.15)", display: "block"}}/>
      <img src={slide.src} alt={slide.alt} style={{position: "relative", width: "100%", height: "100%", objectFit: "contain", objectPosition: "center center", display: "block"}}/>
      <button onClick={prev} style={{position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", background: "rgba(0,0,0,0.45)", border: "none", color: "#fff", borderRadius: "50%", width: 36, height: 36, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, lineHeight: 1}}>‹</button>
      <button onClick={next} style={{position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", background: "rgba(0,0,0,0.45)", border: "none", color: "#fff", borderRadius: "50%", width: 36, height: 36, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20, lineHeight: 1}}>›</button>
      <div style={{position: "absolute", bottom: 12, left: "50%", transform: "translateX(-50%)", display: "flex", gap: 6}}>
        {slides.map((_, i) => (
          <button key={i} onClick={() => setIdx(i)} style={{width: 8, height: 8, borderRadius: "50%", border: "none", cursor: "pointer", padding: 0, background: i === idx ? "#fff" : "rgba(255,255,255,0.45)"}}/>
        ))}
      </div>
    </div>
  );
};

// ----------------------- SOCIAL STRIP -----------------------
const SocialStrip = () => (
  <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16}} className="social-grid">
    {[
      { Ic: Icons.Insta,    handle: "@tripleplayohio",                        blurb: "Daily card drops, pack rips, shop life.", color: "#E4405F", href: "https://www.instagram.com/tripleplayohio" },
      { Ic: Icons.Facebook, handle: "@tripleplaysportscardsandmemorabilia",    blurb: "Hours, events, and community posts.",   color: "#1877F2", href: "https://www.facebook.com/tripleplaysportscardsandmemorabilia" },
      { Ic: Icons.TikTok,  handle: "@tripleplayohio",                         blurb: "Pack rips, pulls, and shop content.",   color: "#010101", href: "https://www.tiktok.com/@tripleplayohio" },
    ].map((s, i) => (
      <a key={i} href={s.href} target="_blank" rel="noopener noreferrer" style={{
        display: "flex", flexDirection: "column", gap: 12,
        padding: 24, borderRadius: "var(--r-lg)",
        background: "var(--tp-paper)", border: "1px solid var(--border-1)",
        boxShadow: "var(--shadow-card)", cursor: "pointer",
        transition: "transform 200ms, box-shadow 200ms", textDecoration: "none",
      }}
        onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "var(--shadow-card)"; e.currentTarget.style.transform = "translateY(0)"; }}
      >
        <div style={{
          width: 44, height: 44, borderRadius: 999,
          background: s.color, color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}><s.Ic size={20}/></div>
        <div style={{font: "var(--fw-semibold) 16px/1.3 var(--font-body)", color: "var(--fg-1)"}}>{s.handle}</div>
        <div style={{fontSize: 14, color: "var(--fg-2)", lineHeight: 1.5}}>{s.blurb}</div>
        <div style={{display: "flex", alignItems: "center", gap: 6, color: "var(--tp-navy)", fontWeight: 600, fontSize: 14, marginTop: "auto"}}>
          Follow <Icons.ArrowRight size={14}/>
        </div>
      </a>
    ))}
  </div>
);


// ----------------------- BRANDS WE CARRY -----------------------
const BRANDS = [
  // Sports cards
  { name: "Topps",       cats: ["sports"], color: "#E51937", initials: "T",   note: "Baseball · Football · Basketball · Soccer · F1 · Other-Sports", logo: "../../uploads/product_brands/topps_logo.svg" },
  { name: "Panini",      cats: ["sports"], color: "#0033A0", initials: "P",   note: "Prizm · Donruss · Select", logo: "../../uploads/product_brands/Panini.jpeg" },
  { name: "Upper Deck",  cats: ["sports"], color: "#003DA5", initials: "UD",  note: "Hockey · Goodwin Champions", logo: "../../uploads/product_brands/upperdeck_dd.jpeg" },
  { name: "Leaf",        cats: ["sports"], color: "#2f6b3a", initials: "L",   note: "Premium hits & autos", logo: "../../uploads/product_brands/Leaf_cards_logo.png" },
  { name: "Onit Athlete", cats: ["sports"], color: "#1f7c7c", initials: "on",   note: "College Sports" },
  // TCG
  { name: "Pokémon",     cats: ["tcg"],    color: "#FFCB05", initials: "PKM", note: "Booster boxes · Loose packs · singles", dark: true, logo: "../../uploads/product_brands/pokemon_logo.png" },
  { name: "One Piece",   cats: ["tcg"],    color: "#D72B2B", initials: "OP",  note: "Booster boxes · Loose packs", logo: "../../uploads/product_brands/one_piece_logo.jpeg" },
  // Entertainment / Non-Sports
  { name: "Disney",      cats: ["entertainment"], color: "#1B4D8C", initials: "DIS", note: "Boxes, Singles and More", logo: "../../uploads/product_brands/disney_micky_mouse.jpg" },
  { name: "Marvel",      cats: ["entertainment"], color: "#791313", initials: "MAR", note: "Boxes, Singles and More", logo: "../../uploads/product_brands/marvel_logo.png" },
  { name: "Star Wars",      cats: ["entertainment"], color: "#000000", initials: "SW", note: "Boxes, Singles and More", logo: "../../uploads/product_brands/starwars_logo.jpg" },
  // Memorabilia
  { name: "Licensed Memorabilia", cats: ["memorabilia"], color: "#549ec3", initials: "MEM", note: "Autographed Jerseys, Helmets Balls, Pucks and more" },
  { name: "Fanatics Underwraps", cats: ["memorabilia"], color: "#00217c", initials: "FU", note: "Underwraps Jerseys, Helmets, Balls, Pucks and more", logo: "../../uploads/product_brands/fanatics.png" },
  // Supplies
  { name: "Fanatics Supplies",   cats: ["supplies"], color: "#c8232c", initials: "FAN",  note: "Sleeves · Top Loaders · One-Touches ", logo: "../../uploads/product_brands/red_fanatics_logo.jpg" },
  { name: "Ultra Pro",   cats: ["supplies"], color: "#c8232c", initials: "UP",  note: "Sleeves · Top Loaders · Binders · Binder sheets · One-Touches", logo: "../../uploads/product_brands/up-logo.png" },
  { name: "Card Savers",  cats: ["supplies"], color: "#5b6374", initials: "CS",  note: "Graded Submission Holders/Kits", logo: "../../uploads/product_brands/cardboard_gold_logo.jpg" },
];

const BRAND_CATS = [
  { id: "all",           label: "All Brands",              icon: Icons.Star },
  { id: "sports",        label: "Sports Cards",            icon: Icons.Shield },
  { id: "tcg",           label: "TCG",                     icon: Icons.Heart },
  { id: "entertainment", label: "Entertainment / Non-Sports", icon: Icons.Star },
  { id: "memorabilia",   label: "Memorabilia",             icon: Icons.Trophy },
  { id: "supplies",      label: "Supplies",                icon: Icons.Check },
];

const BrandGrid = () => {
  const [active, setActive] = React.useState("all");
  const filtered = active === "all" ? BRANDS : BRANDS.filter(b => b.cats.includes(active));
  const counts = BRAND_CATS.reduce((acc, c) => {
    acc[c.id] = c.id === "all" ? BRANDS.length : BRANDS.filter(b => b.cats.includes(c.id)).length;
    return acc;
  }, {});

  return (
    <div>
      {/* Category tabs */}
      <div style={{
        display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center", marginBottom: 32,
      }}>
        {BRAND_CATS.map(c => {
          const isActive = active === c.id;
          const Ic = c.icon;
          return (
            <button key={c.id} onClick={() => setActive(c.id)} style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "10px 18px", borderRadius: 999,
              fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600,
              cursor: "pointer", border: "1px solid",
              borderColor: isActive ? "var(--tp-navy)" : "var(--border-1)",
              background: isActive ? "var(--tp-navy)" : "var(--tp-paper)",
              color: isActive ? "var(--tp-cream)" : "var(--tp-navy)",
              transition: "background 150ms, color 150ms, border-color 150ms",
            }}>
              <Ic size={14}/> {c.label}
              <span style={{
                fontSize: 11, padding: "2px 7px", borderRadius: 999,
                background: isActive ? "rgba(245,236,217,0.18)" : "rgba(26,39,71,0.08)",
                fontVariantNumeric: "tabular-nums",
              }}>{counts[c.id]}</span>
            </button>
          );
        })}
      </div>

      {/* Brand "shelf" — tighter row of badge+name chips, no oversized cards */}
      <div className="brand-shelf" style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 12,
      }}>
        {filtered.map(b => (
          <div key={b.name} style={{
            display: "flex", alignItems: "center", gap: 14,
            padding: "14px 16px", background: "var(--tp-paper)",
            border: "1px solid var(--border-1)", borderRadius: "var(--r-md)",
            transition: "transform 180ms, box-shadow 180ms, border-color 180ms",
            cursor: "default",
          }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.borderColor = "var(--tp-navy)"; e.currentTarget.style.boxShadow = "var(--shadow-card-hover)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.borderColor = "var(--border-1)"; e.currentTarget.style.boxShadow = "none"; }}
          >
            {b.logo ? (
              <div style={{width: 56, height: 44, flexShrink: 0, borderRadius: 6, overflow: "hidden", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.08)"}}>
                <img src={b.logo} alt={b.name} style={{width: "100%", height: "100%", objectFit: "contain", padding: 4, display: "block"}}/>
              </div>
            ) : (
              <div style={{
                width: 44, height: 44, borderRadius: 6, flexShrink: 0,
                background: b.color, color: b.dark ? "var(--tp-navy)" : "#fff",
                display: "flex", alignItems: "center", justifyContent: "center",
                font: "var(--fw-bold) 14px/1 var(--font-display)",
                letterSpacing: "0.04em",
                boxShadow: "inset 0 -2px 0 rgba(0,0,0,0.18)",
              }}>{b.initials}</div>
            )}
            <div style={{minWidth: 0, flex: 1}}>
              <div style={{font: "var(--fw-bold) 16px/1.2 var(--font-display)", color: "var(--tp-navy)", letterSpacing: "0.01em", textTransform: "uppercase"}}>{b.name}</div>
              <div style={{fontSize: 12, color: "var(--fg-2)", marginTop: 3, lineHeight: 1.35}}>{b.note}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Marquee strip — "and more" footer */}
      <div style={{
        marginTop: 28, padding: "16px 20px",
        background: "var(--tp-navy)", color: "var(--tp-cream)",
        borderRadius: "var(--r-md)", textAlign: "center",
        fontSize: 14, lineHeight: 1.5,
      }}>
        <strong style={{font: "var(--fw-bold) 13px/1 var(--font-body)", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--tp-cream)"}}>And more.</strong>
        <span style={{marginLeft: 10, color: "rgba(245,236,217,0.85)"}}>
          Don't see what you want? <span style={{color: "var(--tp-cream)", fontWeight: 600}}>If we don't have it, we would love to hear from you! Contact us at TriplePlaySports@gmail.com</span>
        </span>
      </div>
    </div>
  );
};

const HoursAndGallery = () => {
  const leftRef = React.useRef(null);
  const [cardHeight, setCardHeight] = React.useState(400);

  React.useLayoutEffect(() => {
    const measure = () => {
      if (window.innerWidth <= 768) {
        setCardHeight(240);
      } else if (leftRef.current) {
        setCardHeight(leftRef.current.offsetHeight);
      }
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);

  return (
    <section style={{padding: "56px 24px"}}>
      <div className="hours-gallery-grid" style={{maxWidth: "var(--max-w)", margin: "0 auto", display: "flex", gap: 20, alignItems: "flex-start"}}>
        <div ref={leftRef} className="hours-gallery-cards" style={{width: 300, flexShrink: 0, display: "flex", flexDirection: "column", gap: 16}}>
          <HoursCard compact/>
          <VisitCard compact/>
        </div>
        <div style={{flex: 1, alignSelf: "stretch"}}>
          <ShopCarousel height={cardHeight}/>
        </div>
      </div>
    </section>
  );
};

// ----------------------- HOME -----------------------
const HomePage = ({ navigate }) => {
  const { items: soonItems, loading: soonLoading } = useSoonItems();
  return (
  <main>
    {/* Hero */}
    <section className="tp-pinstripe-bg" style={{padding: "80px 24px", color: "var(--tp-cream)", borderBottom: "3px solid var(--tp-red)"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center"}} className="hero-grid">
        <div>
          <Eyebrow color="var(--tp-red)">Established 1988 · {YEARS_IN_BUSINESS} years</Eyebrow>
          <h1 style={{font: "var(--h1)", fontSize: "clamp(36px, 4.2vw, 52px)", lineHeight: 1.25, letterSpacing: "-0.01em", color: "var(--tp-cream)", margin: "16px 0 40px", textTransform: "uppercase", maxWidth: 560}}>
            Your hometown<br/>card shop.<br/><span style={{color: "var(--tp-red)"}}>Since '88.</span>
          </h1>
          <p style={{fontSize: 18, color: "rgba(245,236,217,0.85)", maxWidth: 540, lineHeight: 1.55, marginBottom: 28}}>
            Sealed Product, Singles, Memorabilia, Supplies — Under One Roof For {YEARS_IN_BUSINESS} Years
            <br/><br/>Stop By, See What's New, or Check What's Coming In
          </p>
          <div style={{display: "flex", gap: 12, flexWrap: "wrap"}}>
            <Button variant="primary" size="lg" onClick={() => navigate("visit")}>Plan a Visit <Icons.ArrowRight size={16}/></Button>
          </div>
        </div>
        <div className="desktop-only">
          <SocialFeedRow/>
        </div>
      </div>
    </section>

    {/* Hours + visit + gallery */}
    <HoursAndGallery/>

    <div className="tp-stitch-divider"></div>

    {/* Brands We Carry — above Coming Soon */}
    <section className="tp-paper-bg" style={{padding: "72px 24px", borderTop: "1px solid var(--border-1)", borderBottom: "1px solid var(--border-1)"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto"}}>
        <div style={{textAlign: "center", marginBottom: 36}}>
          <Eyebrow>In stock at the shop</Eyebrow>
          <h2 style={{font: "var(--h2)", fontSize: "clamp(28px, 3.5vw, 42px)", color: "var(--tp-navy)", margin: "8px 0 12px", lineHeight: 1.05}}>Brands We Carry</h2>
          <p style={{fontSize: 16, color: "var(--fg-2)", maxWidth: 560, margin: "0 auto", lineHeight: 1.55}}>
            Sealed Product, Singles, Memorabilia, Supplies Avaiable Everyday in Shop
          </p>
        </div>
        <BrandGrid/>
      </div>
    </section>

    {/* Coming Soon — dimmed; covered by What's Next announcement banner */}
    <section style={{padding: "72px 24px", position: "relative"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto"}}>
        <div aria-hidden="true" style={{filter: "blur(3px) grayscale(1)", opacity: 0.35, pointerEvents: "none", userSelect: "none"}}>
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 28, flexWrap: "wrap", gap: 12}}>
            <div>
              <Eyebrow>On the way</Eyebrow>
              <h2 style={{font: "var(--h2)", fontSize: "clamp(28px, 3.5vw, 42px)", color: "var(--tp-navy)", margin: "8px 0 0", lineHeight: 1.05}}>Coming Soon</h2>
            </div>
          </div>
          <div className="prod-grid" style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20}}>
            {soonLoading
              ? <div style={{gridColumn: "1/-1", textAlign: "center", color: "var(--fg-2)", padding: 32}}>Loading…</div>
              : soonItems.slice(0, 4).map(p => <SoonCard key={p.id} p={p}/>)}
          </div>
        </div>
      </div>
      <div style={{position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "0 24px"}}>
        <WhatsNextBanner/>
      </div>
    </section>

    {/* Story strip */}
    <section style={{padding: "80px 24px"}}>
      <div style={{maxWidth: 880, margin: "0 auto", textAlign: "center"}}>
        <Eyebrow>Our story</Eyebrow>
        <h2 style={{font: "var(--h2)", fontSize: "clamp(32px, 4.5vw, 56px)", color: "var(--tp-navy)", margin: "12px 0 20px", lineHeight: 1.05}}>
          {YEARS_IN_BUSINESS} years behind the counter.
        </h2>
        <p style={{fontSize: 19, lineHeight: 1.55, color: "var(--fg-2)", marginBottom: 28, maxWidth: 720, marginLeft: "auto", marginRight: "auto"}}>
          With over {YEARS_IN_BUSINESS} years in the business, Triple Play is your one stop shop for all sports cards and memorabilia. Real product, fair prices — and if we don't have it, we can help you find it.
        </p>
        <Button variant="ghost" onClick={() => navigate("about")}>Read more →</Button>
      </div>
    </section>

    {/* Socials */}
    <section style={{padding: "72px 24px", background: "var(--tp-cream)", borderTop: "1px solid var(--border-1)"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto"}}>
        <div style={{textAlign: "center", marginBottom: 32}}>
          <Eyebrow>Follow along</Eyebrow>
          <h2 style={{font: "var(--h2)", fontSize: "clamp(28px, 3.5vw, 42px)", color: "var(--tp-navy)", margin: "8px 0 0", lineHeight: 1.05}}>Find Us Online</h2>
        </div>
        <SocialStrip/>
      </div>
    </section>
  </main>
  );
};

// ----------------------- COMING SOON PAGE -----------------------
// The full Coming Soon experience is paused while we build out ecommerce,
// checklists, and product breakdowns. Anyone landing on /soon directly sees
// the same announcement that overlays the home page section.
const SoonPage = () => (
  <main>
    <section style={{background: "var(--tp-cream)", borderBottom: "1px solid var(--border-1)", padding: "80px 24px", display: "flex", justifyContent: "center"}}>
      <WhatsNextBanner/>
    </section>
    <section style={{padding: "48px 24px", textAlign: "center"}}>
      <div style={{maxWidth: 560, margin: "0 auto"}}>
        <div style={{font: "var(--fw-semibold) 18px/1.4 var(--font-body)", color: "var(--fg-1)", marginBottom: 8}}>Looking for something specific?</div>
        <div style={{fontSize: 15, color: "var(--fg-2)", marginBottom: 16}}>If we don't have it, we can help you find it. Give us a call or stop in.</div>
        <div style={{display: "inline-flex", alignItems: "center", gap: 8, font: "var(--fw-bold) 18px/1 var(--font-display)", color: "var(--tp-red)", letterSpacing: "var(--tr-snug)"}}>
          <Icons.Pin size={18}/> (614) 899-7066
        </div>
      </div>
    </section>
  </main>
);

// ----------------------- ABOUT -----------------------
const AboutPage = ({ navigate }) => (
  <main>
    <section className="tp-pinstripe-bg" style={{padding: "80px 24px", color: "var(--tp-cream)", textAlign: "center", borderBottom: "3px solid var(--tp-red)"}}>
      <div style={{maxWidth: 760, margin: "0 auto"}}>
        <Eyebrow color="var(--tp-red)">Our story</Eyebrow>
        <h1 style={{font: "var(--h1)", fontSize: "clamp(36px, 4.2vw, 52px)", color: "var(--tp-cream)", margin: "16px 0 28px", textTransform: "uppercase", lineHeight: 1.25}}>{YEARS_IN_BUSINESS} years of cards.</h1>
        <p style={{fontSize: 19, lineHeight: 1.55, color: "rgba(245,236,217,0.85)"}}>
          Sports cards &amp; memorabilia, authenticated and curated — serving every collector since 1988.
        </p>
      </div>
    </section>

    <section style={{padding: "72px 24px"}}>
      <div style={{maxWidth: 760, margin: "0 auto"}}>
        <blockquote style={{
          borderLeft: "4px solid var(--tp-red)", paddingLeft: 24,
          margin: "0 0 32px", color: "var(--fg-2)",
        }}>
          <p style={{fontSize: 17, lineHeight: 1.75, fontStyle: "italic", marginBottom: 8}}>
            "Unlike any other business in the United States, sports must preserve an illusion of perfect innocence. It's the ceremony of innocence that fans pay to see — not the game, or the match or the bout, but the ritual portrayal of a world in which time stops and all hope remains plausible, in which everybody present can recover the blameless expectations of a child, where the forces of light always triumph over the powers of darkness"
          </p>
          <footer style={{fontSize: 14, fontWeight: 600, color: "var(--tp-navy)", letterSpacing: "0.04em"}}>— Lewis H. Lapham</footer>
        </blockquote>
        <p style={{fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", marginBottom: 20}}>
          Triple Play Sports Cards is the pinnacle of sports memorabilia and collectibles. Our vast array of merchandise allows our customers to take a nostalgic walk into the past, yet keeps them grounded in the present with our up to date line of must-have items. Our merchandise is of the highest quality and is authenticated. In addition to memorabilia, we provide a myriad of supplies to protect and highlight your collectibles.
        </p>
        <p style={{fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)", marginBottom: 20}}>
          Our goal is to serve everyone from the avid sports fan to the newest collector. We will strive to meet your needs either in our store or online. Our objective is to provide unique, quality products for every customer.
        </p>
        <p style={{fontSize: 18, lineHeight: 1.7, color: "var(--fg-1)"}}>
          With over {YEARS_IN_BUSINESS} years in the business, Triple Play is your one stop shop for all sports cards and memorabilia. If we don't have it, we can help you find it.
        </p>
      </div>
    </section>

    <section className="tp-paper-bg" style={{padding: "64px 24px", borderTop: "1px solid var(--border-1)", borderBottom: "1px solid var(--border-1)"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32}} className="cat-grid">
        {[
          ["1988", "Year founded", `Over ${YEARS_IN_BUSINESS} years serving collectors.`],
          ["5,000+", "Singles in stock", "From '50s vintage to current rookies."],
          ["100%", "Authentication guarantee", "Every signature, every game-used piece."],
        ].map(([n, k, sub], i) => (
          <div key={i} style={{textAlign: "center"}}>
            <div style={{font: "var(--fw-bold) 64px/1 var(--font-display)", color: "var(--tp-red)", letterSpacing: "var(--tr-snug)", marginBottom: 12}}>{n}</div>
            <div style={{font: "var(--fw-bold) 14px/1 var(--font-body)", textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--tp-navy)", marginBottom: 8}}>{k}</div>
            <div style={{fontSize: 14, color: "var(--fg-2)", lineHeight: 1.5}}>{sub}</div>
          </div>
        ))}
      </div>
    </section>

    <section style={{padding: "72px 24px"}}>
      <div style={{maxWidth: 600, margin: "0 auto", textAlign: "center"}}>
        <Eyebrow>Visit us</Eyebrow>
        <h2 style={{font: "var(--h2)", fontSize: 36, color: "var(--tp-navy)", margin: "12px 0 16px"}}>Stop by the shop.</h2>
        <Button variant="primary" onClick={() => navigate("visit")}>Hours & Directions</Button>
      </div>
    </section>
  </main>
);

// ----------------------- VISIT -----------------------
const VisitPage = () => (
  <main>
    <section style={{background: "var(--tp-cream)", borderBottom: "1px solid var(--border-1)", padding: "56px 24px"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto", textAlign: "center"}}>
        <Eyebrow>Visit</Eyebrow>
        <h1 style={{font: "var(--h2)", fontSize: "clamp(36px, 5vw, 56px)", color: "var(--tp-navy)", margin: "12px 0 12px", lineHeight: 1.05}}>Stop by the Shop</h1>
        <p style={{fontSize: 17, color: "var(--fg-2)", maxWidth: 600, margin: "0 auto"}}>Hours, directions, and how to reach us.</p>
      </div>
    </section>

    <section style={{padding: "56px 24px"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24}} className="info-grid">
        <HoursCard/>
        <VisitCard/>
      </div>
    </section>

    {/* Map embed */}
    <section style={{padding: "0 24px 56px"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto"}}>
        <div style={{height: 360, borderRadius: "var(--r-lg)", overflow: "hidden", border: "1px solid var(--border-1)"}}>
          <iframe
            title="Triple Play Sports Cards location"
            width="100%" height="100%" style={{border: 0, display: "block"}}
            loading="lazy" referrerPolicy="no-referrer-when-downgrade"
            src="https://maps.google.com/maps?q=399+S+State+St+%2315,+Westerville,+OH+43081&output=embed"
          ></iframe>
        </div>
      </div>
    </section>

    {/* Contact form */}
    <section style={{padding: "56px 24px", background: "var(--tp-cream)", borderTop: "1px solid var(--border-1)"}}>
      <div style={{maxWidth: 600, margin: "0 auto"}}>
        <div style={{textAlign: "center", marginBottom: 28}}>
          <Eyebrow>Get in touch</Eyebrow>
          <h2 style={{font: "var(--h2)", fontSize: 36, color: "var(--tp-navy)", margin: "8px 0 8px", lineHeight: 1.05}}>Send Us a Note</h2>
          <p style={{fontSize: 15, color: "var(--fg-2)"}}>Looking for something specific? Tell us what you're hunting.</p>
        </div>
        <form onSubmit={(e) => { e.preventDefault(); alert("Demo: message would send."); }} style={{display: "grid", gap: 14}}>
          <input placeholder="Your name" style={fieldStyle}/>
          <input placeholder="Email" type="email" style={fieldStyle}/>
          <textarea placeholder="What can we help you find?" rows="5" style={{...fieldStyle, fontFamily: "var(--font-body)", resize: "vertical"}}/>
          <Button variant="primary" size="lg">Send Message <Icons.ArrowRight size={16}/></Button>
        </form>
      </div>
    </section>

    {/* Socials */}
    <section style={{padding: "72px 24px"}}>
      <div style={{maxWidth: "var(--max-w)", margin: "0 auto"}}>
        <div style={{textAlign: "center", marginBottom: 32}}>
          <Eyebrow>Or DM us</Eyebrow>
          <h2 style={{font: "var(--h2)", fontSize: 36, color: "var(--tp-navy)", margin: "8px 0 0", lineHeight: 1.05}}>Find Us Online</h2>
        </div>
        <SocialStrip/>
      </div>
    </section>
  </main>
);

const fieldStyle = {
  padding: "12px 16px", fontSize: 15, fontFamily: "var(--font-body)",
  border: "1px solid var(--border-1)", borderRadius: "var(--r-md)",
  background: "var(--tp-paper)", color: "var(--fg-1)",
};

Object.assign(window, { HomePage, SoonPage, AboutPage, VisitPage });