// Smelebrity — "Smell like your favourite celebrity"
// Two screens (Home, Celebrity review), all data from CELEBRITIES array.

const { useState, useEffect, useMemo } = React;
const CELEBRITIES = window.CELEBRITIES;
const GUIDES = window.GUIDES || [];
const SITE_PAGES = window.SITE_PAGES || {};
const FEATURED  = CELEBRITIES[0];
const WEEKLY    = CELEBRITIES.slice(1, 5);
const STANDING  = CELEBRITIES.slice(5, 11);

// Static multi-page routing (set by each HTML file at build time).
const SM_PAGE = window.__SM_PAGE__ || 'home';

function homeUrl() {
  return '/';
}

function celebUrl(slug) {
  return `/celebrities/${slug}/`;
}

function guidesIndexUrl() {
  return '/guides/';
}

function guideUrl(slug) {
  return `/guides/${slug}/`;
}

function celebIndexUrl() {
  return '/celebrities/';
}

function celebCategoryUrl(segment) {
  return `/celebrities/${segment}/`;
}

function sitePageUrl(page) {
  return `/${page}/`;
}

function celebProfession(c) {
  return c.profession || 'actor';
}

function shuffleArray(items) {
  const list = items.slice();
  for (let i = list.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [list[i], list[j]] = [list[j], list[i]];
  }
  return list;
}

function relatedCelebritiesFor(currentSlug) {
  const baked = window.__RELATED_SLUGS__;
  if (Array.isArray(baked) && baked.length) {
    return baked
      .map((slug) => CELEBRITIES.find((c) => c.slug === slug))
      .filter(Boolean);
  }
  return shuffleArray(CELEBRITIES.filter((c) => c.slug !== currentSlug)).slice(0, 3);
}

function formatGuideDate(iso) {
  if (!iso) return '';
  const d = new Date(iso + 'T12:00:00');
  return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
}

function resolveImageUrl(imageUrl) {
  if (!imageUrl) return null;
  if (/^https?:\/\//i.test(imageUrl)) return imageUrl;
  if (imageUrl.startsWith('images/')) {
    return `/${imageUrl}`;
  }
  return imageUrl;
}

function initialRoute() {
  if (SM_PAGE === 'guide' && window.__INITIAL_GUIDE_SLUG__) {
    const slug = window.__INITIAL_GUIDE_SLUG__;
    if (GUIDES.some((g) => g.slug === slug)) {
      return { route: 'guide', slug };
    }
  }
  if (SM_PAGE === 'guides-index') {
    return { route: 'guides', slug: null };
  }
  if (SM_PAGE === 'celebrities-index') {
    return { route: 'celebrities-index', slug: null };
  }
  if (SM_PAGE === 'celebrities-a-list') {
    return { route: 'celebrities-a-list', slug: null };
  }
  if (SM_PAGE === 'celebrities-athletes') {
    return { route: 'celebrities-athletes', slug: null };
  }
  if (SM_PAGE === 'celebrities-musicians') {
    return { route: 'celebrities-musicians', slug: null };
  }
  if (SITE_PAGES[SM_PAGE]) {
    return { route: SM_PAGE, slug: null };
  }
  if (SM_PAGE === 'celebrity' && window.__INITIAL_SLUG__) {
    const slug = window.__INITIAL_SLUG__;
    if (CELEBRITIES.some((c) => c.slug === slug)) {
      return { route: 'review', slug };
    }
  }
  return { route: 'home', slug: FEATURED.slug };
}

// Design tweaks panel — off in production unless explicitly enabled in HTML.
const ENABLE_TWEAKS = window.__ENABLE_TWEAKS__ === true;

// ── Tweak defaults ──────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "noir",
  "typePair": "editorial",
  "heroLayout": "full",
  "density": "regular",
  "ctaStyle": "solid",
  "ctaCopy": "Buy on Amazon →"
}/*EDITMODE-END*/;

// ── Design tokens (driven by tweaks) ────────────────────────────────────────
const PALETTES = {
  noir:    { bg:'#0b0a08', surface:'#141210', line:'rgba(214,182,108,0.14)', ink:'#efe6d3', mute:'rgba(239,230,211,0.58)', dim:'rgba(239,230,211,0.32)', accent:'#d6b66c', accentDeep:'#a8864a', tint:'rgba(214,182,108,0.08)' },
  cognac:  { bg:'#1a120b', surface:'#22180f', line:'rgba(220,150,90,0.16)', ink:'#f3e6d1', mute:'rgba(243,230,209,0.6)',  dim:'rgba(243,230,209,0.32)', accent:'#dc965a', accentDeep:'#a86a39', tint:'rgba(220,150,90,0.08)' },
  onyx:    { bg:'#0a0d12', surface:'#11151b', line:'rgba(180,196,220,0.14)', ink:'#eaeef5', mute:'rgba(234,238,245,0.6)',  dim:'rgba(234,238,245,0.32)', accent:'#b8c7d9', accentDeep:'#7d8ea2', tint:'rgba(180,196,220,0.06)' },
};
const TYPE_PAIRS = {
  editorial: { display:'"DM Serif Display", "Cormorant Garamond", serif', body:'"Manrope", system-ui, sans-serif', mono:'"JetBrains Mono", ui-monospace, monospace', displayWeight:400, italicDisplay:true },
  modern:    { display:'"Syne", system-ui, sans-serif',                    body:'"Manrope", system-ui, sans-serif', mono:'"JetBrains Mono", ui-monospace, monospace', displayWeight:700, italicDisplay:false },
  classic:   { display:'"Bodoni Moda", "Didot", serif',                    body:'"Work Sans", system-ui, sans-serif', mono:'"JetBrains Mono", ui-monospace, monospace', displayWeight:500, italicDisplay:false },
};
const DENSITY = {
  compact:  { sectionY: 64, cardGap: 16, blockGap: 28 },
  regular:  { sectionY: 96, cardGap: 24, blockGap: 40 },
  roomy:    { sectionY: 140, cardGap: 32, blockGap: 56 },
};

// ── Small atoms ─────────────────────────────────────────────────────────────
function Kicker({ children, style }) {
  return <div className="kicker" style={style}>{children}</div>;
}

function CTA({ children, style, variant, size = 'md', href, onClick, disabled }) {
  const cls = `cta cta-${variant} cta-${size}${disabled ? ' cta-disabled' : ''}`;
  if (disabled) {
    return <button type="button" className={cls} style={style} disabled aria-disabled="true">{children}</button>;
  }
  if (href) return <a className={cls} style={style} href={href} target="_blank" rel="sponsored noopener">{children}</a>;
  return <button type="button" className={cls} style={style} onClick={onClick}>{children}</button>;
}

// ── Buy logic ──────────────────────────────────────────────────────────────
// One source of truth for routing a celeb's purchase intent:
//   • amazonUrl present                   → "Buy on Amazon →" to amazonUrl
//   • amazonUrl null, altRetailerUrl set   → "Shop on <Alt> →" to altRetailerUrl
//   • amazonUrl + altRetailerUrl both set  → Amazon primary, alt as secondary link
//   • neither                              → disabled "Coming soon"
function BuyButton({ celeb, ctaCopy, size = 'lg', variant = 'primary' }) {
  const hasAmazon = !!celeb.amazonUrl;
  const hasAlt = !!celeb.altRetailerUrl;
  if (!hasAmazon && !hasAlt) {
    return <CTA variant={variant} size={size} disabled>Coming soon</CTA>;
  }
  const href  = hasAmazon ? celeb.amazonUrl : celeb.altRetailerUrl;
  const label = hasAmazon ? ctaCopy : `Shop on ${celeb.altRetailerName} \u2192`;
  return <CTA variant={variant} size={size} href={href}>{label}</CTA>;
}

function SecondaryRetailerLink({ celeb }) {
  if (!celeb.amazonUrl || !celeb.altRetailerUrl) return null;
  return (
    <a className="alt-retailer-link"
       href={celeb.altRetailerUrl}
       target="_blank"
       rel="sponsored noopener">
      Also at {celeb.altRetailerName} →
    </a>
  );
}

function buyTrustLabels(celeb) {
  if (celeb.amazonUrl) {
    return ['Secure checkout', 'Shop with confidence on Amazon'];
  }
  if (celeb.altRetailerUrl) {
    return ['Secure checkout', 'Official retailer site'];
  }
  return null;
}

// Bottle: real image if imageUrl is set, otherwise the abstract SVG placeholder.
function BottleSlot({ tall = false, label = 'product shot', accent = '#d6b66c', imageUrl }) {
  const aspect = tall ? '3/4.6' : '1/1.1';
  const src = resolveImageUrl(imageUrl);
  if (src) {
    return (
      <div className="bottle-slot bottle-slot-img" style={{ aspectRatio: aspect }}>
        <img src={src} alt={label} loading="lazy" />
      </div>
    );
  }
  return (
    <div className="bottle-slot" style={{ aspectRatio: aspect }}>
      <svg viewBox="0 0 100 130" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
        <defs>
          <pattern id="stripes" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="1" opacity="0.18" />
          </pattern>
        </defs>
        <rect x="42" y="6" width="16" height="14" rx="1.5" fill="currentColor" opacity="0.35" />
        <rect x="44" y="20" width="12" height="6" fill="currentColor" opacity="0.22" />
        <rect x="22" y="26" width="56" height="92" rx="6" fill="url(#stripes)" stroke="currentColor" strokeOpacity="0.35" />
        <rect x="32" y="58" width="36" height="34" fill="currentColor" opacity="0.06" stroke="currentColor" strokeOpacity="0.25" strokeDasharray="2 2" />
      </svg>
      <span className="bottle-label" style={{ color: accent }}>{label}</span>
    </div>
  );
}

// ── Navigation ──────────────────────────────────────────────────────────────
function TopNav({ route, navigate }) {
  const [menuOpen, setMenuOpen] = useState(false);
  // Close the mobile menu whenever route changes.
  useEffect(() => { setMenuOpen(false); }, [route]);
  // Lock body scroll when the mobile menu is open.
  useEffect(() => {
    if (menuOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [menuOpen]);

  const go = (view, slug) => (e) => {
    e.preventDefault();
    setMenuOpen(false);
    navigate(view, slug);
  };
  const guidesActive = route === 'guides' || route === 'guide';

  return (
    <header className="topnav">
      <div className="container topnav-inner">
        <a href={homeUrl()} className="brand" onClick={go('home')}>
          <span className="brand-mark">S</span>
          <span className="brand-word">smelebrity</span>
        </a>
        <nav className="navlinks">
          <a href={homeUrl()} onClick={go('home')} className={route==='home'?'active':''}>Celebrities</a>
          <a href={guidesIndexUrl()} onClick={go('guides')} className={guidesActive?'active':''}>Journal</a>
          <a href={sitePageUrl('about')} onClick={go('about')}>About</a>
        </nav>
        <div className="nav-right">
          <button
            type="button"
            className="hamburger"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            data-open={menuOpen}
            onClick={()=>setMenuOpen((o)=>!o)}
          >
            <span /><span /><span />
          </button>
        </div>
      </div>
      <div className="mobile-menu" data-open={menuOpen} aria-hidden={!menuOpen}>
        <a href={homeUrl()} onClick={go('home')} className={route==='home'?'active':''}>Celebrities</a>
        <a href={guidesIndexUrl()} onClick={go('guides')} className={guidesActive?'active':''}>Journal</a>
        <a href={sitePageUrl('about')} onClick={go('about')}>About</a>
        <div className="mobile-menu-foot">
          <span className="dot" /> Smell like your favourite celebrity
        </div>
      </div>
    </header>
  );
}

// ── HOME PAGE ───────────────────────────────────────────────────────────────
function Home({ navigate, ctaCopy, heroLayout }) {
  return (
    <main>
      {heroLayout === 'full' ? <HeroFullBleed navigate={navigate} ctaCopy={ctaCopy} />
                              : <HeroEditorial navigate={navigate} ctaCopy={ctaCopy} />}

      <WeeklySection navigate={navigate} />
      <ResearchBar />
      <StandingPicks ctaCopy={ctaCopy} navigate={navigate} />
      <FooterCta ctaCopy={ctaCopy} />
      <SiteFooter navigate={navigate} />
    </main>
  );
}

function HeroFullBleed({ navigate, ctaCopy }) {
  const c = FEATURED;
  const [first, ...rest] = c.celebrity.split(' ');
  const last = rest.join(' ');
  return (
    <section className="hero hero-full" data-screen-label="01 Hero — Full-bleed">
      <div className="container hero-grid">
        <div className="hero-copy">
          <Kicker>The Smelebrity No. 01 · Researched</Kicker>
          <h1 className="display hero-title">
            Smell like<br/>{first} <em>{last}</em>.
          </h1>
          <p className="lead">{c.lead}</p>
          <div className="hero-meta">
            <div className="meta-block">
              <span className="meta-k">Score</span>
              <span className="meta-v score-inline">{c.score.toFixed(1)}<i>/10</i></span>
            </div>
            {c.price != null && c.price !== '' && (
              <div className="meta-block">
                <span className="meta-k">Amazon price today</span>
                <span className="meta-v">
                  {c.was != null && c.was !== '' && <s>{c.was}</s>} <strong>{c.price}</strong>
                </span>
              </div>
            )}
            <div className="meta-block">
              <span className="meta-k">His signature since</span>
              <span className="meta-v">{c.sinceYear}</span>
            </div>
          </div>
          <div className="hero-cta">
            <div className="primary-stack">
              <BuyButton celeb={c} ctaCopy={ctaCopy} size="lg" />
              <SecondaryRetailerLink celeb={c} />
            </div>
            <button className="text-link" onClick={()=>navigate('review', c.slug)}>Read the full breakdown →</button>
          </div>
        </div>
        <div className="hero-art">
          <div className="hero-bottle-wrap">
            <BottleSlot tall imageUrl={c.imageUrl} label={`${c.brand} ${c.fragrance}`} />
            <div className="hero-badge">
              <span className="badge-num">{c.score.toFixed(1)}</span>
              <span className="badge-lbl">Smelebrity<br/>Score</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ navigate, ctaCopy }) {
  const c = FEATURED;
  return (
    <section className="hero hero-ed" data-screen-label="01 Hero — Editorial split">
      <div className="container">
        <div className="hero-ed-top">
          <Kicker>Issue 14 · The Celebrity Signature Edition · May 2026</Kicker>
          <h1 className="display hero-ed-title">
            The {CELEBRITIES.length} celebrity scents<br/>
            <em>worth your money</em> this year.
          </h1>
        </div>
        <div className="hero-ed-grid">
          <div className="hero-ed-feature">
            <BottleSlot tall imageUrl={c.imageUrl} label={`${c.brand} ${c.fragrance}`} />
          </div>
          <div className="hero-ed-side">
            <div className="hero-ed-num">No. 01</div>
            <div className="hero-ed-name">
              <span className="brand-name">{c.celebrity} wears</span>
              <h2 className="display">{c.fragrance}</h2>
            </div>
            <p className="lead">{c.verdict}</p>
            <div className="hero-ed-stats">
              <div><span>{c.score.toFixed(1)}</span><label>Score</label></div>
              {c.price != null && c.price !== '' && (
                <div><span>{c.price}</span><label>Amazon</label></div>
              )}
              <div><span>{c.sinceYear}</span><label>Since</label></div>
            </div>
            <div className="hero-cta">
              <div className="primary-stack">
                <BuyButton celeb={c} ctaCopy={ctaCopy} size="lg" />
                <SecondaryRetailerLink celeb={c} />
              </div>
              <button className="text-link" onClick={()=>navigate('review', c.slug)}>Full breakdown →</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WeeklySection({ navigate }) {
  return (
    <section className="section" data-screen-label="02 This Week">
      <div className="container">
        <SectionHeader kicker="Smell like — Week 21" title="Four stars. Four signatures. This week's picks." rightLink="All celebrities →" />
        <div className="weekly-grid">
          {WEEKLY.map((r, i) => (
            <article key={r.slug} className="weekly-card" onClick={()=>navigate('review', r.slug)}>
              <div className="weekly-num">{String(i+1).padStart(2,'0')}</div>
              <div className="weekly-bottle"><BottleSlot imageUrl={r.imageUrl} label={`${r.brand} ${r.fragrance}`} /></div>
              <div className="weekly-body">
                <div className="weekly-kicker">Smell like {r.celebShort}</div>
                <h3 className="weekly-name"><span className="brand-name">{r.brand}</span><br/>{r.fragrance}</h3>
                <p className="weekly-blurb">{r.blurb}</p>
                <div className="weekly-foot">
                  <span className="weekly-score">{r.score.toFixed(1)}<i>/10</i></span>
                  {r.price != null && r.price !== '' && (
                    <span className="weekly-price">{r.price}</span>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ResearchBar() {
  return (
    <section className="editor-bar" data-screen-label="03 Research bar">
      <div className="container editor-bar-inner">
        <div className="editor-portrait">
          <div className="portrait-slot">
            <svg viewBox="0 0 100 100" aria-hidden="true">
              <defs>
                <pattern id="ep" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
                  <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="1" opacity="0.22"/>
                </pattern>
              </defs>
              <rect width="100" height="100" fill="url(#ep)" />
              <circle cx="44" cy="44" r="18" fill="none" stroke="currentColor" strokeWidth="3" opacity="0.5"/>
              <line x1="58" y1="58" x2="78" y2="78" stroke="currentColor" strokeWidth="4" opacity="0.5" strokeLinecap="round"/>
            </svg>
            <span className="portrait-tag">research lab</span>
          </div>
        </div>
        <div className="editor-copy">
          <Kicker>How we research</Kicker>
          <h2 className="display editor-title">We research every celebrity.<br/>You shop with confidence.</h2>
          <p className="editor-bio">Every celebrity scent on Smelebrity is sourced from on-the-record interviews, press campaigns, brand archives, and documented historical records. Source confidence is noted on every page — from confirmed brand endorsements to historical community records.</p>
          <div className="editor-stats">
            <div className="editor-stat">
              <div className="editor-stat-k">{CELEBRITIES.length}</div>
              <div className="editor-stat-v">Celebs tracked</div>
            </div>
            <div className="editor-stat">
              <div className="editor-stat-k">Weekly</div>
              <div className="editor-stat-v">Updated</div>
            </div>
            <div className="editor-stat">
              <div className="editor-stat-k">0</div>
              <div className="editor-stat-v">Sponsored picks</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CelebrityPickCard({ celeb, ctaCopy, navigate }) {
  return (
    <article
      className="pick-card"
      onClick={() => navigate('review', celeb.slug)}
      style={{ cursor: 'pointer' }}
    >
      <div className="pick-tag">{celeb.tag}</div>
      <div className="pick-bottle">
        <BottleSlot imageUrl={celeb.imageUrl} label={`${celeb.brand} ${celeb.fragrance}`} />
      </div>
      <div className="pick-body">
        <div className="pick-brand">Smell like {celeb.celebShort}</div>
        <h3 className="pick-name">
          {celeb.brand} {celeb.fragrance}
        </h3>
        <p className="pick-why">{celeb.why}</p>
        <div className="pick-foot">
          <div className="pick-foot-meta">
            <span className="pick-score">{celeb.score.toFixed(1)}</span>
            {celeb.price != null && celeb.price !== '' && (
              <span className="pick-price">{celeb.price}</span>
            )}
          </div>
          <BuyButton
            celeb={celeb}
            ctaCopy={`${ctaCopy.replace(' \u2192', '')} \u2192`}
            size="sm"
            variant="ghost"
          />
        </div>
      </div>
    </article>
  );
}

function CelebrityPicksGrid({ celebrities, ctaCopy, navigate }) {
  return (
    <div className="picks-grid">
      {celebrities.map((c) => (
        <CelebrityPickCard key={c.slug} celeb={c} ctaCopy={ctaCopy} navigate={navigate} />
      ))}
    </div>
  );
}

function CelebritiesCategoryHero({ kicker, title, lead }) {
  return (
    <section className="section guides-hero">
      <div className="container">
        {kicker && <Kicker>{kicker}</Kicker>}
        <h1 className="display guides-hero-title">{title}</h1>
        {lead && <p className="lead guides-hero-lead">{lead}</p>}
      </div>
    </section>
  );
}

function CelebritiesIndexPage({ navigate, ctaCopy }) {
  const trending = CELEBRITIES.filter((c) => c.category === 'trending');
  const oldHollywood = CELEBRITIES.filter((c) => c.category === 'old-hollywood');
  return (
    <main>
      <CelebritiesCategoryHero
        kicker="Full A-Z"
        title="All Celebrities"
        lead="Every celebrity. Every scent. Researched and linked."
      />
      <section className="section">
        <div className="container">
          <SectionHeader kicker="Trending" title="Today's icons and their signatures." />
          <CelebrityPicksGrid celebrities={trending} ctaCopy={ctaCopy} navigate={navigate} />
        </div>
      </section>
      <section className="section">
        <div className="container">
          <SectionHeader kicker="Old Hollywood" title="Legends, lore, and the scents they left behind." />
          <CelebrityPicksGrid celebrities={oldHollywood} ctaCopy={ctaCopy} navigate={navigate} />
        </div>
      </section>
      <SiteFooter navigate={navigate} />
    </main>
  );
}

function CelebritiesAListPage({ navigate, ctaCopy }) {
  return (
    <main>
      <CelebritiesCategoryHero
        kicker="Celebrities"
        title="The A-List"
        lead="The most iconic men in the world and the fragrances they actually wear."
      />
      <section className="section">
        <div className="container">
          <CelebrityPicksGrid celebrities={CELEBRITIES} ctaCopy={ctaCopy} navigate={navigate} />
        </div>
      </section>
      <SiteFooter navigate={navigate} />
    </main>
  );
}

function CelebritiesProfessionPage({ navigate, ctaCopy, profession, kicker, title, lead, footnote }) {
  const list = CELEBRITIES.filter((c) => celebProfession(c) === profession);
  return (
    <main>
      <CelebritiesCategoryHero kicker={kicker} title={title} lead={lead} />
      <section className="section">
        <div className="container">
          <CelebrityPicksGrid celebrities={list} ctaCopy={ctaCopy} navigate={navigate} />
          {footnote && <p className="category-footnote">{footnote}</p>}
        </div>
      </section>
      <SiteFooter navigate={navigate} />
    </main>
  );
}

function StaticSitePage({ pageId, navigate }) {
  const page = SITE_PAGES[pageId];
  if (!page) return null;
  return (
    <main className="static-page">
      <section className="section guides-hero">
        <div className="container">
          <h1 className="display guides-hero-title">{page.headline}</h1>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="static-page-column">
            {page.sections.map((section, i) => (
              <div key={i} className="static-page-section">
                {section.heading && (
                  <h2 className="display static-page-heading">{section.heading}</h2>
                )}
                {section.type === 'cards' && section.items && (
                  <div className="method-grid">
                    {section.items.map((card) => (
                      <div key={card.title} className="method-card">
                        <h3 className="method-card-title">{card.title}</h3>
                        <p>{card.body}</p>
                        <p className="method-card-examples">{card.examples}</p>
                      </div>
                    ))}
                  </div>
                )}
                {section.type === 'list' && section.items && (
                  <ul className="static-page-list">
                    {section.items.map((item) => (
                      <li key={item}>{item}</li>
                    ))}
                  </ul>
                )}
                {section.type === 'email' && (
                  <div className="static-page-email">
                    <a href={`mailto:${section.address}`} className="static-email-link">
                      {section.address}
                    </a>
                    {section.note && <p className="static-email-note">{section.note}</p>}
                  </div>
                )}
                {section.paragraphs &&
                  section.paragraphs.map((para, j) => (
                    <p key={j} className="static-page-p">
                      {para}
                    </p>
                  ))}
              </div>
            ))}
          </div>
        </div>
      </section>
      <SiteFooter navigate={navigate} />
    </main>
  );
}

function StandingPicks({ ctaCopy, navigate }) {
  return (
    <section className="section" data-screen-label="04 Standing Picks">
      <div className="container">
        <SectionHeader kicker="The Smelebrity Standing Picks" title="Six celebrity signatures everyone asks about." rightLink="See methodology →" />
        <CelebrityPicksGrid celebrities={STANDING} ctaCopy={ctaCopy} navigate={navigate} />
      </div>
    </section>
  );
}

function FooterCta({ ctaCopy }) {
  const c = FEATURED;
  return (
    <section className="big-cta" data-screen-label="05 Big CTA">
      <div className="container big-cta-inner">
        <Kicker>One last thing</Kicker>
        <h2 className="display big-cta-title">
          You came here to smell like a star.<br/>
          <em>Here's where to start.</em>
        </h2>
        <p className="big-cta-sub">
          {c.celebrity}'s signature: {c.brand} {c.fragrance}{c.size ? `, ${c.size}` : ''}.
          {c.price != null && c.price !== '' ? (
            <> {c.was != null && c.was !== '' ? <>{c.was} → </> : null}<strong>{c.price}</strong> on Amazon today.</>
          ) : null}{' '}
          {c.score.toFixed(1)}/10, his confirmed pick since {c.sinceYear}.
        </p>
        <div className="primary-stack big-cta-stack">
          <BuyButton celeb={c} ctaCopy={ctaCopy} size="lg" />
          <SecondaryRetailerLink celeb={c} />
        </div>
        <div className="big-cta-fine">Smelebrity earns a commission on Amazon purchases via the links above. The picks are unaffected.</div>
      </div>
    </section>
  );
}

function SectionHeader({ kicker, title, rightLink }) {
  return (
    <div className="section-head">
      <div>
        <Kicker>{kicker}</Kicker>
        <h2 className="display section-title">{title}</h2>
      </div>
      {rightLink && <a href="#" className="text-link section-link">{rightLink}</a>}
    </div>
  );
}

function SiteFooter({ navigate }) {
  const footGo = (view, slug) => (e) => {
    e.preventDefault();
    navigate(view, slug);
  };
  return (
    <footer className="site-foot">
      <div className="container site-foot-inner">
        <div className="foot-brand">
          <span className="brand-mark">S</span>
          <span className="brand-word">smelebrity</span>
          <p className="foot-tag">Smell like your favourite celebrity. Researched, verified, linked.</p>
        </div>
        <div className="foot-cols">
          <div>
            <h5>Celebrities</h5>
            <a href={celebCategoryUrl('a-list')} onClick={footGo('celebrities-a-list')}>A-list</a>
            <a href={celebCategoryUrl('athletes')} onClick={footGo('celebrities-athletes')}>Athletes</a>
            <a href={celebCategoryUrl('musicians')} onClick={footGo('celebrities-musicians')}>Musicians</a>
            <a href={celebIndexUrl()} onClick={footGo('celebrities-index')}>Full A-Z</a>
          </div>
          <div>
            <h5>Journal</h5>
            <a href={guidesIndexUrl()} onClick={footGo('guides')}>All articles</a>
            {GUIDES.slice(0, 3).map((g) => (
              <a key={g.slug} href={guideUrl(g.slug)} onClick={footGo('guide', g.slug)}>
                {g.category}
              </a>
            ))}
          </div>
          <div>
            <h5>The Site</h5>
            <a href={sitePageUrl('about')} onClick={footGo('about')}>About</a>
            <a href={sitePageUrl('research-methodology')} onClick={footGo('research-methodology')}>
              Research methodology
            </a>
            <a href={sitePageUrl('amazon-disclosure')} onClick={footGo('amazon-disclosure')}>
              Amazon disclosure
            </a>
            <a href={sitePageUrl('contact')} onClick={footGo('contact')}>Contact</a>
          </div>
        </div>
      </div>
      <div className="container foot-fine">
        <span>© 2026 Smelebrity Media</span>
        <span>Amazon Associate disclosure: We earn commissions on outbound links. Picks are unaffected.</span>
      </div>
    </footer>
  );
}

// ── GUIDES ──────────────────────────────────────────────────────────────────
function GuidesIndex({ navigate }) {
  return (
    <main>
      <section className="section guides-hero">
        <div className="container">
          <Kicker>Journal</Kicker>
          <h1 className="display guides-hero-title">Fragrance, confidence,<br/><em>and how to show up.</em></h1>
          <p className="lead guides-hero-lead">
            Essays on scent, first impressions, and the quiet rituals that help you walk into any room like you belong there.
          </p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="guides-grid">
            {GUIDES.map((g) => (
              <article
                key={g.slug}
                className="guide-card"
                onClick={() => navigate('guide', g.slug)}
                style={{ cursor: 'pointer' }}
              >
                <Kicker>{g.category}</Kicker>
                <h2 className="display guide-card-title">{g.title}</h2>
                <p className="guide-card-excerpt">{g.heroText}</p>
                <div className="guide-card-foot">
                  <span className="guide-card-date">{formatGuideDate(g.publishDate)}</span>
                  <span className="text-link">Read article →</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
      <SiteFooter navigate={navigate} />
    </main>
  );
}

function GuideArticle({ navigate, current: g }) {
  const others = GUIDES.filter((x) => x.slug !== g.slug);
  return (
    <main className="guide-article">
      <div className="container">
        <div className="guide-article-column">
          <div className="breadcrumb">
            <a href={guidesIndexUrl()} onClick={(e) => { e.preventDefault(); navigate('guides'); }}>Journal</a>
            <span>›</span>
            <span className="crumb-current">{g.category}</span>
          </div>

          <header className="guide-article-hero">
            <Kicker>{g.category} · {formatGuideDate(g.publishDate)}</Kicker>
            <h1 className="display guide-article-title">{g.title}</h1>
            <p className="guide-article-lead">{g.heroText}</p>
          </header>

          {g.sections.map((section, i) => (
            <section key={i} className="guide-article-section">
              <h2 className="display guide-section-heading">{section.heading}</h2>
              {section.paragraphs.map((para, j) => (
                <p key={j}>{para}</p>
              ))}
            </section>
          ))}

          <div className="guide-article-cta">
            <Kicker>Your turn</Kicker>
            <h2 className="display guide-cta-title">Find the scent behind <em>your</em> moment.</h2>
            <p className="guide-cta-sub">
              Explore celebrity signatures on Smelebrity, researched, verified, and linked so you can smell like someone who already knows how to own the room.
            </p>
            <a className="cta cta-primary cta-lg" href={homeUrl()} onClick={(e) => { e.preventDefault(); navigate('home'); }}>
              Browse celebrity scents →
            </a>
          </div>

          {others.length > 0 && (
            <div className="guide-article-more">
              <div className="guide-article-more-head">
                <Kicker>Keep reading</Kicker>
                <h2 className="display guide-cta-title">More from the journal.</h2>
              </div>
              <div className="guides-grid guides-grid-compact">
                {others.map((o) => (
                  <article
                    key={o.slug}
                    className="guide-card"
                    onClick={() => navigate('guide', o.slug)}
                    style={{ cursor: 'pointer' }}
                  >
                    <span className="guide-card-topic">{o.category}</span>
                    <h3 className="display guide-card-title">{o.title}</h3>
                    <p className="guide-card-excerpt">{o.heroText}</p>
                  </article>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>

      <SiteFooter navigate={navigate} />
    </main>
  );
}

// ── REVIEW PAGE ─────────────────────────────────────────────────────────────
function Review({ navigate, ctaCopy, current }) {
  return (
    <main data-screen-label="06 Celebrity page">
      <div className="container">
        <div className="breadcrumb">
          <a href={homeUrl()} onClick={(e)=>{e.preventDefault();navigate('home');}}>Celebrities</a>
          <span>›</span><a href="#">{current.brand}</a>
          <span>›</span><span className="crumb-current">{current.celebrity}</span>
        </div>
      </div>

      <ReviewHero ctaCopy={ctaCopy} current={current} />
      <ReviewVerdict current={current} />
      <NotesPyramid current={current} />
      <Performance current={current} />
      <Wearability current={current} />
      <BuyBox ctaCopy={ctaCopy} current={current} />
      <ProsCons current={current} />
      <ResearchBar />
      <RelatedCelebs navigate={navigate} ctaCopy={ctaCopy} current={current} />
      <SiteFooter navigate={navigate} />
    </main>
  );
}

function ReviewHero({ ctaCopy, current: c }) {
  return (
    <section className="rv-hero">
      <div className="container rv-hero-grid">
        <div className="rv-hero-art">
          <BottleSlot tall imageUrl={c.imageUrl} label={`${c.brand} ${c.fragrance}`} />
        </div>
        <div className="rv-hero-copy">
          <Kicker>Smell like {c.celebrity} · Researched · His signature since {c.sinceYear}</Kicker>
          <div className="rv-brand">{c.celebrity} wears</div>
          <h1 className="display rv-title">{c.brand} {c.fragrance}</h1>
          <p className="rv-verdict">{c.oneLiner}</p>

          <div className="rv-score-row">
            <div className="rv-score">
              <span className="rv-score-num">{c.score.toFixed(1)}</span>
              <span className="rv-score-den">/10</span>
            </div>
            <div className="rv-score-tag">
              <Kicker>Smelebrity verdict</Kicker>
              <div>{c.verdict}</div>
            </div>
          </div>

          <div className="rv-buybox-inline">
            {c.price != null && c.price !== '' && (
              <div className="rv-price-row">
                <div className="rv-price-main">
                  {c.was != null && c.was !== '' && <s>{c.was}</s>}
                  <strong>{c.price}</strong>
                </div>
                <div className="rv-price-meta">
                  <span>on Amazon</span>
                  <span className="rv-save">Verified May 23, 2026</span>
                </div>
              </div>
            )}
            <BuyButton celeb={c} ctaCopy={ctaCopy} size="lg" />
            <SecondaryRetailerLink celeb={c} />
          </div>
        </div>
      </div>
    </section>
  );
}

function ReviewVerdict({ current: c }) {
  return (
    <section className="section rv-section">
      <div className="container rv-prose">
        <Kicker>The verdict</Kicker>
        <p className="rv-lead">{c.lead}</p>
        <p>{c.story1}</p>
        <p dangerouslySetInnerHTML={{ __html: c.story2 }} />
      </div>
    </section>
  );
}

function NotesPyramid({ current: c }) {
  return (
    <section className="section rv-section notes-section">
      <div className="container">
        <div className="rv-section-head">
          <Kicker>The notes</Kicker>
          <h2 className="display rv-h2">What you'll actually smell.</h2>
        </div>
        <div className="notes-grid">
          {[
            { tier:'Top',   when:'0–30 min',      notes: c.notes.top },
            { tier:'Heart', when:'30 min – 4 hr', notes: c.notes.heart },
            { tier:'Base',  when:'4 hr +',        notes: c.notes.base },
          ].map((n) => (
            <div key={n.tier} className="notes-col">
              <div className="notes-col-head">
                <span className="notes-tier">{n.tier}</span>
                <span className="notes-when">{n.when}</span>
              </div>
              <ul className="notes-list">
                {n.notes.map((x) => <li key={x}><span className="notes-dot" />{x}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Performance({ current: c }) {
  const bars = [
    { k:'Longevity',   v: c.perf.longevity,   note: `${c.perf.longevity*1+1}–${c.perf.longevity*1+3} hours on skin` },
    { k:'Sillage',     v: c.perf.sillage,     note: c.perf.sillage >= 8 ? 'Strong — fills a room within an hour' : c.perf.sillage >= 6 ? 'Moderate — arm\'s length projection' : 'Light — close-skin only' },
    { k:'Projection',  v: c.perf.projection,  note: c.perf.projection >= 8 ? 'Arm\'s length for first 3 hours' : 'Modest, within personal space' },
    { k:'Versatility', v: c.perf.versatility, note: c.perf.versatility >= 8 ? 'Works from boardroom to bar' : 'Best in its lane — don\'t force it' },
    { k:'Value',       v: c.perf.value,       note: c.perf.value >= 8 ? 'Genuinely a steal at this price' : 'Pricey — but the ml/compliment ratio works' },
  ];
  return (
    <section className="section rv-section perf-section">
      <div className="container">
        <div className="rv-section-head">
          <Kicker>The performance</Kicker>
          <h2 className="display rv-h2">How it actually behaves.</h2>
        </div>
        <div className="perf-list">
          {bars.map((b) => (
            <div key={b.k} className="perf-row">
              <div className="perf-k">{b.k}</div>
              <div className="perf-bar">
                <div className="perf-fill" style={{ width: `${b.v*10}%` }} />
                <div className="perf-ticks">
                  {Array.from({length:10}).map((_,i)=><i key={i} />)}
                </div>
              </div>
              <div className="perf-v">{b.v}<i>/10</i></div>
              <div className="perf-note">{b.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Wearability({ current: c }) {
  return (
    <section className="section rv-section">
      <div className="container">
        <div className="rv-section-head">
          <Kicker>When to wear it</Kicker>
          <h2 className="display rv-h2">The occasion calculator.</h2>
        </div>
        <div className="wear-grid">
          <div className="wear-card">
            <h4>Wear it for</h4>
            <ul>
              {c.wearFor.map((w) => (
                <li key={w.when}><strong>{w.when}</strong> — {w.why}</li>
              ))}
            </ul>
          </div>
          <div className="wear-card">
            <h4>Skip it for</h4>
            <ul>
              {c.skipFor.map((w) => (
                <li key={w.when}><strong>{w.when}</strong> — {w.why}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function BuyBox({ ctaCopy, current: c }) {
  const sizeSuffix = c.size ? ` — ${c.size}` : '';
  const listing = `${c.brand} ${c.fragrance}${sizeSuffix}`;
  const retailerTag = c.amazonUrl
    ? 'Amazon'
    : c.altRetailerUrl
      ? 'Official retailer'
      : null;
  const trustLabels = buyTrustLabels(c);

  return (
    <section className="section rv-section buy-section">
      <div className="container">
        <div className="rv-section-head">
          <h2 className="display rv-h2">Where to buy</h2>
        </div>
        <div className="buy-list">
          <div className="buy-row is-primary">
            <div className="buy-retailer">
              <div className="buy-r-name">{listing}</div>
              {retailerTag && <div className="buy-r-tag">{retailerTag}</div>}
            </div>
            <div className="buy-action">
              {trustLabels && (
                <div className="buy-trust">
                  {trustLabels.map((label) => (
                    <span key={label}>✓ {label}</span>
                  ))}
                </div>
              )}
              <div className="primary-stack">
                <BuyButton celeb={c} ctaCopy={ctaCopy} size="md" variant="primary" />
                <SecondaryRetailerLink celeb={c} />
              </div>
            </div>
          </div>
        </div>
        <div className="buy-disclaimer">
          Smelebrity is an Amazon Associate — we earn commission on these links.
        </div>
      </div>
    </section>
  );
}

function ProsCons({ current: c }) {
  return (
    <section className="section rv-section">
      <div className="container">
        <div className="rv-section-head">
          <Kicker>The honest bit</Kicker>
          <h2 className="display rv-h2">What's right — and what isn't.</h2>
        </div>
        <div className="proscons-grid">
          <div className="pc-col pc-pros">
            <h4>Pros</h4>
            <ul>{c.prosCons.pros.map((p)=><li key={p}>{p}</li>)}</ul>
          </div>
          <div className="pc-col pc-cons">
            <h4>Cons</h4>
            <ul>{c.prosCons.cons.map((p)=><li key={p}>{p}</li>)}</ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function RelatedCelebs({ navigate, ctaCopy, current }) {
  const others = useMemo(
    () => relatedCelebritiesFor(current.slug),
    [current.slug]
  );
  return (
    <section className="section rv-section">
      <div className="container">
        <div className="rv-section-head">
          <Kicker>Keep reading</Kicker>
          <h2 className="display rv-h2">If you want to smell like {current.celebShort}, you'll want these too.</h2>
        </div>
        <div className="related-grid">
          {others.map((r) => (
            <article key={r.slug} className="related-card" onClick={() => navigate('review', r.slug)}>
              <div className="related-bottle"><BottleSlot imageUrl={r.imageUrl} label={`${r.brand} ${r.fragrance}`} /></div>
              <div className="related-kicker">Smell like {r.celebShort}</div>
              <h3 className="related-name"><span className="brand-name">{r.brand}</span><br/>{r.fragrance}</h3>
              <p className="related-blurb">{r.blurb}</p>
              <div className="related-foot">
                <span className="related-score">{r.score.toFixed(1)}</span>
                <BuyButton celeb={r} ctaCopy={`${ctaCopy.replace(' \u2192','')} \u2192`} size="sm" variant="ghost" />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── App shell + Tweaks ──────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const initial = useMemo(initialRoute, []);
  const [route, setRoute] = useState(initial.route);
  const [currentSlug, setCurrentSlug] = useState(initial.slug);

  const current = useMemo(
    () => CELEBRITIES.find((c) => c.slug === currentSlug) || FEATURED,
    [currentSlug]
  );

  const currentGuide = useMemo(
    () => GUIDES.find((g) => g.slug === currentSlug) || GUIDES[0],
    [currentSlug]
  );

  const navigate = (view, slug) => {
    if (view === 'home') {
      window.location.href = homeUrl();
      return;
    }
    if (view === 'guides') {
      window.location.href = guidesIndexUrl();
      return;
    }
    if (view === 'guide') {
      window.location.href = guideUrl(slug || currentSlug);
      return;
    }
    if (view === 'celebrities-index') {
      window.location.href = celebIndexUrl();
      return;
    }
    if (view === 'celebrities-a-list') {
      window.location.href = celebCategoryUrl('a-list');
      return;
    }
    if (view === 'celebrities-athletes') {
      window.location.href = celebCategoryUrl('athletes');
      return;
    }
    if (view === 'celebrities-musicians') {
      window.location.href = celebCategoryUrl('musicians');
      return;
    }
    if (view === 'about') {
      window.location.href = sitePageUrl('about');
      return;
    }
    if (view === 'research-methodology') {
      window.location.href = sitePageUrl('research-methodology');
      return;
    }
    if (view === 'amazon-disclosure') {
      window.location.href = sitePageUrl('amazon-disclosure');
      return;
    }
    if (view === 'contact') {
      window.location.href = sitePageUrl('contact');
      return;
    }
    const targetSlug = slug || currentSlug;
    window.location.href = celebUrl(targetSlug);
  };

  const palette = PALETTES[t.palette] || PALETTES.noir;
  const type = TYPE_PAIRS[t.typePair] || TYPE_PAIRS.editorial;
  const density = DENSITY[t.density] || DENSITY.regular;

  useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [route, currentSlug]);

  const cssVars = {
    '--bg': palette.bg,
    '--surface': palette.surface,
    '--line': palette.line,
    '--ink': palette.ink,
    '--mute': palette.mute,
    '--dim': palette.dim,
    '--accent': palette.accent,
    '--accent-deep': palette.accentDeep,
    '--tint': palette.tint,
    '--font-display': type.display,
    '--font-body': type.body,
    '--font-mono': type.mono,
    '--display-weight': type.displayWeight,
    '--display-italic': type.italicDisplay ? 'italic' : 'normal',
    '--section-y': density.sectionY + 'px',
    '--card-gap': density.cardGap + 'px',
    '--block-gap': density.blockGap + 'px',
  };

  // Apply vars to documentElement too, so body resolves them.
  useEffect(() => {
    const el = document.documentElement;
    Object.entries(cssVars).forEach(([k, v]) => el.style.setProperty(k, String(v)));
  });

  return (
    <div className="root" style={cssVars} data-cta-style={t.ctaStyle}>
      <TopNav route={route} navigate={navigate} />
      {route === 'home' && (
        <Home navigate={navigate} ctaCopy={t.ctaCopy} heroLayout={t.heroLayout} />
      )}
      {route === 'review' && (
        <Review navigate={navigate} ctaCopy={t.ctaCopy} current={current} />
      )}
      {route === 'guides' && (
        <GuidesIndex navigate={navigate} />
      )}
      {route === 'guide' && currentGuide && (
        <GuideArticle navigate={navigate} current={currentGuide} />
      )}
      {route === 'celebrities-index' && (
        <CelebritiesIndexPage navigate={navigate} ctaCopy={t.ctaCopy} />
      )}
      {route === 'celebrities-a-list' && (
        <CelebritiesAListPage navigate={navigate} ctaCopy={t.ctaCopy} />
      )}
      {route === 'celebrities-athletes' && (
        <CelebritiesProfessionPage
          navigate={navigate}
          ctaCopy={t.ctaCopy}
          profession="athlete"
          kicker="Athletes"
          title="Athletes"
          lead="The fragrances worn by the world's greatest athletes. Confidence that performs."
          footnote="More athletes coming soon - we research every addition before publishing."
        />
      )}
      {route === 'celebrities-musicians' && (
        <CelebritiesProfessionPage
          navigate={navigate}
          ctaCopy={t.ctaCopy}
          profession="musician"
          kicker="Musicians"
          title="Musicians"
          lead="From Rat Pack to reggaeton. The fragrances worn by music's most iconic men."
          footnote="More musicians coming soon."
        />
      )}
      {route === 'about' && <StaticSitePage pageId="about" navigate={navigate} />}
      {route === 'research-methodology' && (
        <StaticSitePage pageId="research-methodology" navigate={navigate} />
      )}
      {route === 'amazon-disclosure' && (
        <StaticSitePage pageId="amazon-disclosure" navigate={navigate} />
      )}
      {route === 'contact' && <StaticSitePage pageId="contact" navigate={navigate} />}

      {ENABLE_TWEAKS && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Palette" />
          <PaletteChips current={t.palette} onChange={(v)=>setTweak('palette', v)} />

          <TweakSection label="Typography" />
          <TweakRadio label="Pair" value={t.typePair}
            options={[
              { value:'editorial', label:'Editorial' },
              { value:'modern',    label:'Modern' },
              { value:'classic',   label:'Classic' },
            ]}
            onChange={(v)=>setTweak('typePair', v)} />

          <TweakSection label="Layout" />
          <TweakRadio label="Hero" value={t.heroLayout}
            options={[
              { value:'full',      label:'Full-bleed' },
              { value:'editorial', label:'Editorial' },
            ]}
            onChange={(v)=>setTweak('heroLayout', v)} />
          <TweakRadio label="Density" value={t.density}
            options={['compact','regular','roomy']}
            onChange={(v)=>setTweak('density', v)} />

          <TweakSection label="CTA" />
          <TweakRadio label="Style" value={t.ctaStyle}
            options={[
              { value:'solid',   label:'Solid' },
              { value:'outline', label:'Outline' },
              { value:'gold',    label:'Gold' },
            ]}
            onChange={(v)=>setTweak('ctaStyle', v)} />
          <TweakSelect label="Copy" value={t.ctaCopy}
            options={[
              'Buy on Amazon →',
              'Get the Scent →',
              'Shop on Amazon →',
              'Smell like a star →',
              'See Today\'s Price →',
            ]}
            onChange={(v)=>setTweak('ctaCopy', v)} />

          <TweakSection label="Navigate" />
          <div style={{ display:'flex', gap:6, marginBottom: 6 }}>
            <TweakButton label="Homepage"     onClick={()=>navigate('home')}            secondary={route!=='home'} />
            <TweakButton label="Celebrity page" onClick={()=>navigate('review', currentSlug)} secondary={route!=='review'} />
          </div>
          <TweakSelect label="Showing" value={currentSlug}
            options={CELEBRITIES.map((c) => ({ value: c.slug, label: c.celebrity }))}
            onChange={(v)=>navigate('review', v)} />
        </TweaksPanel>
      )}
    </div>
  );
}

function PaletteChips({ current, onChange }) {
  const opts = [
    { id:'noir',   label:'Noir',   bg:'#0b0a08', accent:'#d6b66c' },
    { id:'cognac', label:'Cognac', bg:'#1a120b', accent:'#dc965a' },
    { id:'onyx',   label:'Onyx',   bg:'#0a0d12', accent:'#b8c7d9' },
  ];
  return (
    <div className="pal-chips">
      {opts.map((o) => (
        <button key={o.id} className={`pal-chip ${current===o.id?'is-on':''}`} onClick={()=>onChange(o.id)} title={o.label}>
          <span className="pal-bg" style={{ background:o.bg }} />
          <span className="pal-acc" style={{ background:o.accent }} />
          <span className="pal-name">{o.label}</span>
        </button>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);