/* ============================================================
   Considered · Home, Browse, About  (window.GGHome)
   Adapted: anniversary band removed for MVP.
   ============================================================ */
const { useState: useSH } = React;
const HC = window.GGComp;
const HU = window.GGUtil;
const HD = window.GG;
const HIc = window.GGIcons;

/* ---- Cluster tile ---- */
const ClusterTile = ({ cl, big }) => {
  const nav = HC.useNav();
  const count = HU.brandsInCluster(cl.id).length;
  return (
    <article className={`gg-card gg-card-hover t-${cl.tint}`} onClick={() => nav.go('cluster', { id: cl.id })}
      style={{ padding: big ? '26px 24px' : '20px 20px', display:'flex', flexDirection:'column', gap:8, minHeight: big ? 180 : 140 }}>
      <div className="gg-spread">
        <HIc.Layers size={big ? 26 : 22} strokeWidth={1.9} />
        <span className="gg-chip" style={{ background:'var(--milk-50)' }}>{count}</span>
      </div>
      <h3 className="gg-display" style={{ fontSize: big ? 30 : 23, marginTop:'auto' }}>{cl.title}</h3>
      <p style={{ margin:0, fontSize: big ? 15 : 13.5, lineHeight:1.45, color:'var(--fg-1)', opacity:0.78 }}>{cl.blurb}</p>
    </article>
  );
};

const ClusterGrid = ({ big }) => (
  <div className="gg-clusters">
    {HD.CLUSTERS.map(cl => <ClusterTile key={cl.id} cl={cl} big={big} />)}
  </div>
);

/* ---- Spotlight — curator's pick (Aesop) ---- */
const Spotlight = () => {
  const nav = HC.useNav();
  const b = HD.BY_SLUG['aesop'];
  if (!b) return null;
  return (
    <div className={`gg-card t-${b.tint}`} style={{ padding:'clamp(28px,4vw,42px)', display:'flex', flexDirection:'column', gap:12, maxWidth:760 }}>
      <HC.Eyebrow>Curator's pick</HC.Eyebrow>
      <h3 className="gg-display" style={{ fontSize:'clamp(30px,3.8vw,46px)' }}>{b.name}</h3>
      <div><HC.CountryMeta brand={b} /></div>
      <p style={{ margin:0, fontSize:16, lineHeight:1.55, color:'var(--fg-1)', maxWidth:'58ch' }}>{b.description}</p>
      <div className="gg-wrap" style={{ marginTop:2 }}>
        {(b.greatFor||[]).slice(0,3).map(g => <HC.Tag key={g} style={{ background:'var(--milk-50)' }}>{g}</HC.Tag>)}
      </div>
      <div style={{ marginTop:6 }}>
        <HC.Btn variant="dark" onClick={() => nav.go('brand', { slug: b.slug })} rightIcon={<HIc.ArrowR size={17} />}>See why it's giftable</HC.Btn>
      </div>
    </div>
  );
};

/* ---- Featured strip — a curated cross-section of the directory ---- */
const FEATURED_SLUGS = [
  'mondaine','felco','marvis','pol-roger','charbonnel-et-walker',
  'steiff','pelikan','diptyque','pendleton','le-creuset',
  'baltic','johnstons-of-elgin',
];
const RecentStrip = () => {
  const recents = FEATURED_SLUGS.map(s => HD.BY_SLUG[s]).filter(Boolean);
  return (
    <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(190px,1fr))', gap:16 }}>
      {recents.map(b => <HC.MiniBrand key={b.slug} brand={b} />)}
    </div>
  );
};

/* ---- Inline gift finder starter ---- */
const GiftStarter = () => {
  const nav = HC.useNav();
  const rel = HD.QUIZ.relationship.options;
  return (
    <div className="gg-card" style={{ padding:'22px 24px' }}>
      <div style={{ marginBottom:16 }}>
        <HC.Eyebrow><HIc.Gift size={15} strokeWidth={2.2} /> Find a gift · step 1 of 4</HC.Eyebrow>
        <h2 className="gg-display" style={{ fontSize:'clamp(22px,2.8vw,30px)', marginTop:7 }}>Who's it for?</h2>
      </div>
      <div className="gg-wrap" style={{ gap:10 }}>
        {rel.map(o => (
          <button key={o.id} className="gg-fchip" onClick={() => nav.go('quiz', { seed:{ relationship: o.id }, step:1 })}>{o.label}</button>
        ))}
      </div>
      <div className="gg-row" style={{ gap:20, marginTop:16, flexWrap:'wrap', paddingTop:14, borderTop:'1.5px solid var(--milk-200)' }}>
        <button className="gg-btn gg-btn-ghost gg-btn-sm" style={{ padding:'4px 0' }} onClick={() => nav.go('search')}><HIc.Search size={16} /> Search by brand</button>
        <button className="gg-btn gg-btn-ghost gg-btn-sm" style={{ padding:'4px 0', marginLeft:'auto' }} onClick={() => nav.go('browse')}>Browse all <HIc.ArrowR size={15} /></button>
      </div>
    </div>
  );
};

/* ---- Section heading ---- */
const SectionHead = ({ eyebrow, title, sub, action }) => (
  <div className="gg-spread" style={{ alignItems:'flex-end', marginBottom:22, flexWrap:'wrap', gap:12 }}>
    <div>
      {eyebrow && <HC.Eyebrow>{eyebrow}</HC.Eyebrow>}
      <h2 className="gg-display gg-h2" style={{ marginTop: eyebrow ? 8 : 0 }}>{title}</h2>
      {sub && <p className="gg-meta" style={{ fontSize:15.5, marginTop:8, maxWidth:'52ch' }}>{sub}</p>}
    </div>
    {action}
  </div>
);

/* ============================================================
   HOME SCREEN
   ============================================================ */
const HomeScreen = () => {
  const nav = HC.useNav();
  const count = HD.BRANDS.length;
  return (
    <div className="gg-container gg-section" style={{ display:'flex', flexDirection:'column', gap:56 }}>

      {/* Hero */}
      <div className="gg-card" style={{ background:'var(--plum-800)', color:'var(--milk-50)', padding:0, overflow:'hidden', position:'relative' }}>
        <div style={{ position:'absolute', inset:0, background:'radial-gradient(circle at 14% 20%, rgba(242,85,119,0.30), transparent 40%), radial-gradient(circle at 90% 88%, rgba(255,201,61,0.16), transparent 44%)', pointerEvents:'none' }} />
        <div style={{ position:'relative', padding:'clamp(32px,5vw,56px)' }}>
          <HC.Eyebrow style={{ color:'var(--butter-300)' }}>A curated directory of considered brands</HC.Eyebrow>
          <h1 className="gg-display" style={{ color:'var(--milk-50)', fontSize:'clamp(36px,6vw,72px)', margin:'16px 0 18px', maxWidth:'14ch' }}>
            Gifts they'd love but would never <span style={{ color:'var(--coral-300)' }}>buy themselves.</span>
          </h1>
          <p style={{ fontSize:'clamp(16px,1.6vw,19px)', lineHeight:1.55, color:'rgba(252,251,246,0.82)', maxWidth:'48ch', margin:'0 0 28px' }}>
            {count} brands across 36 countries — the everyday upgraded, the heritage maker, the deep specialist. Not luxury for show. The good stuff.
          </p>
          <GiftStarter />
        </div>
      </div>

      {/* Clusters */}
      <section>
        <SectionHead eyebrow="Browse by room" title="Where shall we look?"
          sub="Twenty-seven categories, grouped into six corners of the home."
          action={<HC.Btn variant="ghost" onClick={() => nav.go('browse')} rightIcon={<HIc.ArrowR size={16} />} className="gg-hide-mobile">Browse all</HC.Btn>} />
        <ClusterGrid />
      </section>

      {/* Spotlight */}
      <section>
        <SectionHead eyebrow="Editorial" title="One to start with" />
        <Spotlight />
      </section>

      {/* Recently added */}
      <section>
        <SectionHead eyebrow="In the directory" title="A few to explore" />
        <RecentStrip />
      </section>

    </div>
  );
};

/* ============================================================
   BROWSE SCREEN
   ============================================================ */
const BrowseScreen = () => {
  const nav = HC.useNav();
  return (
    <div className="gg-container gg-section">
      <HC.Eyebrow>Browse everything</HC.Eyebrow>
      <h1 className="gg-display gg-h2" style={{ margin:'10px 0 6px' }}>Twenty-seven categories, six corners.</h1>
      <p className="gg-meta" style={{ fontSize:16, maxWidth:'56ch', marginBottom:32 }}>
        Start with a cluster, or jump straight to a category from the full list below.
      </p>
      <ClusterGrid />
      <div style={{ marginTop:48 }}>
        {HD.CLUSTERS.map(cl => (
          <div key={cl.id} style={{ marginBottom:28 }}>
            <div className="gg-row" style={{ gap:10, marginBottom:12 }}>
              <span className={`gg-chip b-${cl.tint === 'milk' ? 'plum' : cl.tint}`} style={{ fontSize:13 }}>{cl.title}</span>
              <div style={{ flex:1, height:1.5, background:'var(--milk-300)' }} />
            </div>
            <div className="gg-wrap" style={{ gap:10 }}>
              {cl.cats.map(cat => {
                const n = HU.brandsInCategory(cat).length;
                return (
                  <button key={cat} className="gg-fchip" onClick={() => nav.go('category', { cat })}>
                    {cat}{n > 0 && <span style={{ opacity:0.5, fontWeight:600 }}>{n}</span>}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ============================================================
   ABOUT SCREEN
   ============================================================ */
const QUALIFY = [
  { t:'The everyday, upgraded', d:"The toothpaste, soap or notebook you'd never splurge on yourself — but love receiving. Marvis over Colgate; Aesop over the supermarket." },
  { t:'The heritage maker', d:"Centuries-old houses still making the thing they're known for. Floris since 1730; Cire Trudon since 1643." },
  { t:'The deep specialist', d:"One thing, done better than anyone. Felco secateurs; Mondaine's railway-clock watch." },
  { t:'The modern redefiner', d:"A newer brand that quietly reset its category. Baltic watches; Le Labo fragrances." },
];
const EXCLUDE = [
  { t:'Top-tier luxury', d:"Hermès, Cartier — gift-irrelevant for almost everyone, and the opposite of considered." },
  { t:'Fashion houses', d:"Logo-led, season-led, and far too dependent on knowing the recipient's exact taste." },
  { t:'Mass market', d:"The things people already buy for themselves. No upgrade, no story." },
  { t:'Taste-loaded fashion', d:"Clothing and statement pieces where getting it wrong is worse than not gifting at all." },
];
const FAQ = [
  { q:'Why no Hermès?', a:"Because a £900 scarf isn't a gift most people can give — or receive — comfortably. Considered lives in the £50–£500 register: generous, but never conspicuous." },
  { q:'Why brands, not products?', a:"A great brand is a reliable signal. Once you trust that Aesop makes good things, any one of them is a safe, lovely gift. We point you at the maker; you pick the bottle." },
  { q:'Do you sell anything?', a:"No. We're a directory — every brand links out to its own site. We don't take a cut, so there's nothing nudging the list." },
  { q:'How do brands get in?', a:"They pass one test: would the recipient love this, but never buy it for themselves? If yes, it's in the running." },
];
const AboutScreen = () => {
  const nav = HC.useNav();
  const [openF, setOpenF] = useSH(0);
  return (
    <div className="gg-narrow gg-section">
      <HC.Eyebrow>What this is</HC.Eyebrow>
      <h1 className="gg-display" style={{ fontSize:'clamp(34px,5vw,60px)', margin:'12px 0 0' }}>The "best of," for people you like.</h1>
      <div className="gg-card t-coral" style={{ padding:'24px 26px', margin:'28px 0' }}>
        <p style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, fontSize:'clamp(20px,2.6vw,28px)', lineHeight:1.2, letterSpacing:'-0.02em', color:'var(--plum-800)' }}>
          The whole guide is one test: <span style={{ color:'var(--coral-400)' }}>would the recipient love this, but never buy it for themselves?</span>
        </p>
      </div>
      <p style={{ fontSize:17, lineHeight:1.6, color:'var(--fg-2)', margin:'0 0 36px' }}>
        Gift guides usually fail one of two ways. Too aspirational — Hermès and Cartier, irrelevant for almost everyone. Or too mass-market — the things people already buy themselves. The sweet spot, the considered gift, is scattered across forums and editorial features. This brings around {HD.BRANDS.length} of those brands into one browseable place.
      </p>

      <h2 className="gg-display gg-h3" style={{ margin:'40px 0 16px' }}>The four patterns that qualify</h2>
      <div className="gg-twoup">
        {QUALIFY.map((x, i) => (
          <div key={i} className="gg-card" style={{ padding:'18px 20px' }}>
            <div className="gg-row" style={{ gap:10, marginBottom:8 }}>
              <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:22, color:'var(--coral-300)' }}>{i+1}</span>
              <h3 className="gg-display" style={{ fontSize:19 }}>{x.t}</h3>
            </div>
            <p style={{ margin:0, fontSize:14.5, lineHeight:1.5, color:'var(--fg-2)' }}>{x.d}</p>
          </div>
        ))}
      </div>

      <h2 className="gg-display gg-h3" style={{ margin:'40px 0 16px' }}>And the four we leave out</h2>
      <div className="gg-twoup">
        {EXCLUDE.map((x, i) => (
          <div key={i} className="gg-card" style={{ padding:'18px 20px', background:'var(--milk-100)' }}>
            <div className="gg-row" style={{ gap:10, marginBottom:8 }}>
              <span style={{ width:24, height:24, borderRadius:'50%', border:'1.5px solid var(--plum-800)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}><HIc.X size={14} strokeWidth={2.4} /></span>
              <h3 className="gg-display" style={{ fontSize:19 }}>{x.t}</h3>
            </div>
            <p style={{ margin:0, fontSize:14.5, lineHeight:1.5, color:'var(--fg-2)' }}>{x.d}</p>
          </div>
        ))}
      </div>

      <h2 className="gg-display gg-h3" style={{ margin:'40px 0 16px' }}>Questions you might have</h2>
      <div className="gg-stack" style={{ gap:10 }}>
        {FAQ.map((f, i) => (
          <div key={i} className="gg-card" style={{ padding:0, overflow:'hidden' }}>
            <button onClick={() => setOpenF(openF === i ? -1 : i)} className="gg-spread"
              style={{ width:'100%', background: openF===i ? 'var(--milk-100)' : 'var(--milk-50)', border:'none', padding:'16px 18px', cursor:'pointer', textAlign:'left' }}>
              <span className="gg-display" style={{ fontSize:18 }}>{f.q}</span>
              <span style={{ transform: openF===i ? 'rotate(180deg)' : 'none', transition:'transform var(--dur)' }}><HIc.ChevronDown size={20} strokeWidth={2.2} /></span>
            </button>
            {openF === i && <div className="gg-enter" style={{ padding:'0 18px 18px' }}><p style={{ margin:0, fontSize:15, lineHeight:1.6, color:'var(--fg-2)' }}>{f.a}</p></div>}
          </div>
        ))}
      </div>

      <div className="gg-card t-butter" style={{ padding:'26px 28px', marginTop:40, textAlign:'center' }}>
        <h3 className="gg-display gg-h3">Know who it's for?</h3>
        <p className="gg-meta" style={{ fontSize:15, margin:'8px 0 18px' }}>Three taps to a shortlist.</p>
        <HC.Btn variant="dark" onClick={() => nav.go('quiz')} leftIcon={<HIc.Gift size={18} />}>Find a gift</HC.Btn>
      </div>
    </div>
  );
};

window.GGHome = { HomeScreen, BrowseScreen, AboutScreen, SectionHead, ClusterGrid };