// screens/home.jsx — World Recipes Homepage
const HomeScreen = ({ locale, onNavigate }) => {
  return (
    <>
      <HeroBlock locale={locale} onNavigate={onNavigate} />
      <TrustStrip locale={locale} />
      <TrendingSection locale={locale} onNavigate={onNavigate} />
      <WorldSection locale={locale} onNavigate={onNavigate} />
      <QuickDinnersSection locale={locale} onNavigate={onNavigate} />
      <AskTeaser locale={locale} onNavigate={onNavigate} />
      <EditorsSection locale={locale} onNavigate={onNavigate} />
      <NewsletterBlock locale={locale} />
    </>
  );
};

/* ---------- Hero ---------- */
const HeroBlock = ({ locale, onNavigate }) => (
  <section className="section" style={{ paddingTop: 'var(--s-12)' }}>
    <div className="page hero-grid"
         style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 'var(--s-12)', alignItems: 'center' }}>
      <div className="fade-in">
        <span className="eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }}></span>
          Viral · Validated · 80 languages
        </span>
        <h1 className="display" style={{ fontSize: 'clamp(40px, 5.5vw, 72px)', margin: '14px 0 18px' }}>
          {t(locale, 'home_hero_title')}
        </h1>
        <p style={{ fontSize: 'clamp(16px, 1.3vw, 19px)', lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 520, marginBottom: 'var(--s-6)' }}>
          {t(locale, 'home_hero_sub')}
        </p>
        <div className="row" style={{ gap: 10, marginBottom: 'var(--s-8)' }}>
          <button className="btn btn-primary btn-lg" onClick={()=>onNavigate(`/${locale}/r/brown-butter-chocolate-chip-cookies`)}>
            {t(locale, 'explore')} <Icon name="arrowR" size={16} />
          </button>
          <button className="btn btn-ghost btn-lg" onClick={()=>onNavigate('/how-we-test')}>
            {t(locale, 'how_we_test')}
          </button>
        </div>

        {/* search bar */}
        <SearchBar locale={locale} onNavigate={onNavigate} />

        <div className="row" style={{ gap: 'var(--s-6)', marginTop: 'var(--s-8)' }}>
          <Stat n="8,420" label="viral recipes" />
          <Stat n="80" label="languages" />
          <Stat n="3×" label="kitchen-validated" />
        </div>
      </div>

      {/* hero photo collage */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr', gridTemplateRows: '1fr 1fr',
        gap: 14, height: 'min(72vh, 640px)',
      }}>
        <Photo tone="butter" label="hero · the cookie" ratio="auto"
               style={{ gridRow: '1 / span 2', height: '100%' }} />
        <Photo tone="herb" label="charred broccoli" ratio="auto" style={{ height: '100%' }} />
        <Photo tone="warm" label="nasi goreng" ratio="auto" style={{ height: '100%' }} />
      </div>
    </div>

    <style>{`
      @media (max-width: 920px) {
        .hero-grid { grid-template-columns: 1fr !important; }
        .hero-grid > div:last-child { height: 340px !important; }
      }
    `}</style>
  </section>
);

const Stat = ({ n, label }) => (
  <div>
    <div className="display num" style={{ fontSize: 28, color: 'var(--ink-strong)' }}>{n}</div>
    <div className="meta" style={{ fontSize: 12, color: 'var(--ink-mute)', textTransform: 'uppercase', letterSpacing: '.06em', marginTop: 2 }}>{label}</div>
  </div>
);

/* ---------- Search bar ---------- */
const SearchBar = ({ locale, onNavigate }) => {
  const [q, setQ] = useState('');
  const [focused, setFocused] = useState(false);
  const suggestions = useMemo(() => ([
    'why are my cookies flat',
    'one-pan chicken thighs',
    'best brown butter cookies',
    'nasi goreng kampung',
    'quick weeknight dinners',
  ]), []);
  return (
    <form onSubmit={(e)=>{e.preventDefault(); onNavigate(`/${locale}/ask`);}}
          style={{ position: 'relative', maxWidth: 560 }}>
      <div className="row" style={{
        background: 'var(--bg-elevated)', borderRadius: 'var(--r-pill)',
        border: `1px solid ${focused ? 'var(--accent)' : 'var(--line-strong)'}`,
        padding: '6px 6px 6px 18px', gap: 10,
        boxShadow: focused ? '0 0 0 4px var(--accent-tint)' : 'var(--shadow-sm)',
        transition: 'all .2s var(--ease)',
      }}>
        <Icon name="search" size={16} />
        <input id="global-search" value={q} onChange={e=>setQ(e.target.value)}
               onFocus={()=>setFocused(true)} onBlur={()=>setTimeout(()=>setFocused(false), 150)}
               placeholder={t(locale, 'search_ph')}
               style={{
                 flex: 1, border: 0, background: 'transparent', outline: 0,
                 font: 'inherit', fontSize: 15, color: 'var(--ink)',
                 padding: '12px 0',
               }} />
        <button type="button" aria-label="Voice"
                style={{ background: 'transparent', border: 0, color: 'var(--ink-mute)', padding: 6 }}>
          <Icon name="mic" size={16} />
        </button>
        <button type="submit" className="btn btn-primary btn-sm" style={{ borderRadius: 999 }}>
          <Icon name="sparkle" size={13} /> Ask
        </button>
      </div>
      {focused && (
        <div style={{
          position: 'absolute', top: 'calc(100% + 8px)', left: 0, right: 0,
          background: 'var(--bg-elevated)',
          border: '1px solid var(--line)', borderRadius: 'var(--r-4)',
          boxShadow: 'var(--shadow-md)', padding: 'var(--s-2)',
          zIndex: 10, animation: 'fadeUp .18s var(--ease)',
        }}>
          <div className="eyebrow" style={{ padding: '10px 12px 6px' }}>
            <Icon name="sparkle" size={10} /> AI suggestions
          </div>
          {suggestions.map((s, i) => (
            <button key={i} type="button"
                    onClick={()=>{ setQ(s); onNavigate(`/${locale}/ask`); }}
                    style={{
                      display: 'flex', width: '100%', textAlign: 'left',
                      padding: '10px 12px', borderRadius: 'var(--r-2)',
                      border: 0, background: 'transparent', color: 'var(--ink)',
                      fontSize: 14, cursor: 'pointer', gap: 10, alignItems: 'center',
                    }}
                    onMouseEnter={e=>e.currentTarget.style.background='var(--bg-sunken)'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
              <Icon name="enter" size={14} />
              {s}
            </button>
          ))}
        </div>
      )}
    </form>
  );
};

/* ---------- Trust strip ---------- */
const TrustStrip = ({ locale }) => (
  <section style={{
    borderTop: '1px solid var(--line)',
    borderBottom: '1px solid var(--line)',
    background: 'var(--bg-sunken)',
    padding: 'var(--s-5) 0',
  }}>
    <div className="page row wrap" style={{ gap: 'var(--s-8)', justifyContent: 'space-between' }}>
      {[
        { icon: 'flame',   t: 'Trending globally — validated weekly' },
        { icon: 'globe',   t: 'Read in 80 languages' },
        { icon: 'check',   t: 'Tested in 3+ home kitchens' },
        { icon: 'user',    t: 'Named editors on every recipe' },
      ].map((x, i) => (
        <div key={i} className="row" style={{ gap: 10, color: 'var(--ink-soft)', fontSize: 13 }}>
          <span style={{
            width: 28, height: 28, borderRadius: 999,
            background: 'var(--accent-tint)', color: 'var(--accent)',
            display: 'grid', placeItems: 'center',
          }}><Icon name={x.icon} size={14} /></span>
          <span style={{ fontWeight: 500 }}>{x.t}</span>
        </div>
      ))}
    </div>
  </section>
);

/* ---------- Trending ---------- */
const TrendingSection = ({ locale, onNavigate }) => {
  return (
    <section className="section">
      <div className="page">
        <div className="row between" style={{ marginBottom: 'var(--s-6)', alignItems: 'flex-end' }}>
          <div>
            <span className="eyebrow"><Icon name="flame" size={11} /> {t(locale, 'trending')}</span>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', margin: '8px 0 4px' }}>
              Going viral worldwide — and kitchen-validated
            </h2>
          </div>
          <a href="#/trending" onClick={e=>{e.preventDefault(); onNavigate('/trending');}} className="row" style={{ gap: 6, color: 'var(--ink-soft)', fontSize: 14, fontWeight: 500 }}>
            See all <Icon name="arrowR" size={14} />
          </a>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr',
          gridAutoRows: 'minmax(260px, auto)', gap: 16,
        }} className="trending-grid">
          <div style={{ gridRow: 'span 2' }}>
            <RecipeCard recipe={TRENDING[0]} locale={locale} large
                        onClick={()=>onNavigate(`/${locale}/r/${RECIPE.slug}`)} />
          </div>
          {TRENDING.slice(1, 5).map((r, i) => (
            <RecipeCard key={i} recipe={r} locale={locale}
                        onClick={()=>onNavigate(`/${locale}/r/${RECIPE.slug}`)} />
          ))}
        </div>

        <style>{`
          @media (max-width: 980px){
            .trending-grid { grid-template-columns: 1fr 1fr !important; }
            .trending-grid > div:first-child { grid-row: span 1 !important; }
          }
          @media (max-width: 600px){
            .trending-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

/* ---------- Recipes of the world ---------- */
const WorldSection = ({ locale, onNavigate }) => (
  <section className="section" style={{ background: 'var(--bg-sunken)' }}>
    <div className="page">
      <div className="row between" style={{ marginBottom: 'var(--s-8)', alignItems: 'flex-end' }}>
        <div>
          <span className="eyebrow"><Icon name="globe" size={11} /> Atlas of flavor</span>
          <h2 className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', margin: '8px 0 6px' }}>
            {t(locale, 'world')}
          </h2>
          <p style={{ color: 'var(--ink-soft)', fontSize: 15, maxWidth: 540, margin: 0 }}>
            {t(locale, 'world_sub')}
          </p>
        </div>
        <div className="row" style={{ gap: 6 }}>
          {LOCALES.slice(0, 8).map(l => (
            <a key={l.code} href={`#/${l.code}/`}
               style={{
                 fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                 padding: '5px 9px', borderRadius: 4,
                 background: l.code === locale ? 'var(--accent)' : 'var(--bg-elevated)',
                 color: l.code === locale ? 'var(--accent-ink)' : 'var(--ink-soft)',
                 border: '1px solid var(--line)',
                 letterSpacing: '.06em', transition: 'all .15s',
               }}>{l.flag}</a>
          ))}
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14,
      }} className="world-grid">
        {REGIONS.map((r, i) => (
          <a key={r.code} href="#" onClick={e=>e.preventDefault()}
             className="card"
             style={{
               position: 'relative', overflow: 'hidden',
               aspectRatio: i === 0 ? '1/1.4' : '1/1.4',
               display: 'block', textDecoration: 'none',
             }}>
            <Photo tone={r.tone} ratio="auto"
                   style={{ position: 'absolute', inset: 0, borderRadius: 'var(--r-4)' }} />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, transparent 30%, rgba(0,0,0,.72) 100%)',
            }} />
            <div style={{
              position: 'absolute', left: 0, right: 0, bottom: 0,
              padding: 'var(--s-5)', color: 'white',
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '.1em', textTransform: 'uppercase',
                opacity: .8, marginBottom: 4,
              }}>{r.count.toLocaleString()} recipes</div>
              <h3 className="display" style={{ fontSize: 24, margin: '0 0 8px', color: 'white' }}>{r.name}</h3>
              <div style={{ fontSize: 11, opacity: .85, lineHeight: 1.5 }}>
                {r.examples.slice(0,3).join(' · ')}
              </div>
            </div>
          </a>
        ))}
      </div>

      <style>{`
        @media (max-width: 980px){ .world-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 600px){ .world-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </div>
  </section>
);

/* ---------- Quick dinners ---------- */
const QuickDinnersSection = ({ locale, onNavigate }) => (
  <section className="section">
    <div className="page">
      <div className="row between" style={{ marginBottom: 'var(--s-6)', alignItems: 'flex-end' }}>
        <div>
          <span className="eyebrow"><Icon name="clock" size={11} /> 30 minutes or less</span>
          <h2 className="display" style={{ fontSize: 'clamp(26px, 2.6vw, 36px)', margin: '8px 0 4px' }}>
            {t(locale, 'quick_dinners')}
          </h2>
        </div>
        <div className="row" style={{ gap: 6 }}>
          {['Weeknight', 'One skillet', 'Sheet pan', 'No-cook'].map((c, i) => (
            <span key={c} className={`chip ${i===0 ? 'is-active' : ''}`}>{c}</span>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="quick-grid">
        {QUICK_DINNERS.map((r, i) => (
          <RecipeCard key={i} recipe={r} locale={locale}
                      onClick={()=>onNavigate(`/${locale}/r/${RECIPE.slug}`)} />
        ))}
      </div>
      <style>{`
        @media (max-width: 880px){ .quick-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </div>
  </section>
);

/* ---------- Ask Sous-Chef teaser ---------- */
const AskTeaser = ({ locale, onNavigate }) => (
  <section className="section">
    <div className="page">
      <div style={{
        position: 'relative', overflow: 'hidden',
        borderRadius: 'var(--r-5)', border: '1px solid var(--line)',
        background: 'var(--bg-elevated)',
        padding: 'clamp(28px, 5vw, 64px)',
      }}>
        <div style={{
          position: 'absolute', right: -100, top: -100, width: 360, height: 360,
          borderRadius: 999, background: 'radial-gradient(circle, var(--accent-tint), transparent 65%)',
          pointerEvents: 'none',
        }} />
        <div className="ask-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 'var(--s-10)', alignItems: 'center', position: 'relative' }}>
          <div>
            <span className="eyebrow"><Icon name="sparkle" size={11} /> AI Sous-Chef</span>
            <h2 className="display" style={{ fontSize: 'clamp(28px, 3.2vw, 44px)', margin: '8px 0 12px' }}>
              {t(locale, 'ai_title')}
            </h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.6, maxWidth: 480, marginBottom: 'var(--s-5)' }}>
              {t(locale, 'ai_sub')} Every answer links back to a real recipe in our library.
            </p>
            <button className="btn btn-primary btn-lg" onClick={()=>onNavigate(`/${locale}/ask`)}>
              Try the Sous-Chef <Icon name="arrowR" size={16} />
            </button>
          </div>

          <div className="card" style={{
            padding: 'var(--s-5)', background: 'var(--bg)',
          }}>
            <div className="row" style={{ gap: 8, color: 'var(--ink-mute)', fontSize: 12, fontFamily: 'var(--font-mono)' }}>
              <Icon name="sparkle" size={11} /> EXAMPLE QUERY
            </div>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 20, margin: '10px 0 16px', color: 'var(--ink-strong)' }}>
              "Why do my chocolate chip cookies turn out flat?"
            </p>
            <div style={{
              padding: 'var(--s-4)', borderRadius: 'var(--r-3)',
              background: 'var(--accent-tint)', borderLeft: '3px solid var(--accent)',
              fontSize: 14, color: 'var(--ink)', lineHeight: 1.55,
            }}>
              <div className="eyebrow" style={{ marginBottom: 6, color: 'var(--accent)' }}>30-second answer</div>
              Flat cookies almost always come down to butter that is too warm, dough that did not rest, too little flour, or an oven that is not hot enough.
            </div>
            <div className="row" style={{ marginTop: 12, gap: 6, color: 'var(--ink-mute)', fontSize: 11, fontFamily: 'var(--font-mono)' }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--success)' }} />
              Cites 3 tested recipes
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px){ .ask-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  </section>
);

/* ---------- Editors ---------- */
const EditorsSection = ({ locale, onNavigate }) => (
  <section className="section">
    <div className="page">
      <div className="row between" style={{ marginBottom: 'var(--s-6)', alignItems: 'flex-end' }}>
        <div>
          <span className="eyebrow"><Icon name="user" size={11} /> {t(locale, 'editors')}</span>
          <h2 className="display" style={{ fontSize: 'clamp(26px, 2.6vw, 36px)', margin: '8px 0 4px' }}>
            Named editors. Credentialed. Tested.
          </h2>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }} className="ed-grid">
        {[
          { name: 'Mira Chen',     role: 'Senior Editor',      cred: 'ICE NYC · 12 yrs',    tone: 'butter', region: 'New York' },
          { name: 'Sofia Romano',  role: 'Pastry Lead',         cred: 'Le Cordon Bleu · 9 yrs', tone: 'cream',  region: 'Rome' },
          { name: 'Ji-ho Park',    role: 'Asia Editor',         cred: 'Seoul · 11 yrs',      tone: 'warm',   region: 'Seoul' },
          { name: 'Alex Bauer',    role: 'Technique Editor',    cred: 'Berlin · 14 yrs',     tone: 'herb',   region: 'Berlin' },
        ].map((p, i) => (
          <a key={i} href="#/editors" onClick={e=>{e.preventDefault(); onNavigate('/editors');}} className="card"
             style={{ overflow: 'hidden', textDecoration: 'none' }}>
            <Photo tone={p.tone} label={`portrait · ${p.name.split(' ')[0]}`} ratio="1/1" radius="0" />
            <div style={{ padding: 'var(--s-4)' }}>
              <h4 className="display" style={{ fontSize: 18, margin: '0 0 4px', color: 'var(--ink-strong)' }}>{p.name}</h4>
              <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{p.role} · {p.region}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-mute)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>{p.cred}</div>
            </div>
          </a>
        ))}
      </div>
      <style>{`
        @media (max-width: 880px){ .ed-grid { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </div>
  </section>
);

/* ---------- Newsletter ---------- */
const NewsletterBlock = ({ locale }) => {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="page">
        <div style={{
          background: 'var(--ink-strong)', color: 'var(--bg)',
          borderRadius: 'var(--r-5)',
          padding: 'clamp(32px, 5vw, 72px)',
          textAlign: 'center', position: 'relative', overflow: 'hidden',
        }}>
          <h3 className="display" style={{
            fontSize: 'clamp(26px, 3vw, 40px)', margin: 0, color: 'var(--bg)',
            maxWidth: 620, marginInline: 'auto',
          }}>{t(locale, 'newsletter_title')}</h3>
          <p style={{ fontSize: 16, color: 'color-mix(in oklab, var(--bg) 70%, transparent)', maxWidth: 540, marginInline: 'auto', marginTop: 14 }}>
            {t(locale, 'newsletter_sub')}
          </p>
          {!sent ? (
            <form onSubmit={(e)=>{e.preventDefault(); if(email) setSent(true);}}
                  className="row" style={{ maxWidth: 460, marginInline: 'auto', marginTop: 'var(--s-6)', gap: 8,
                                            background: 'rgba(255,255,255,.08)', borderRadius: 999, padding: 6 }}>
              <input value={email} onChange={e=>setEmail(e.target.value)} type="email"
                     placeholder={t(locale, 'email_ph')}
                     style={{ flex: 1, background: 'transparent', border: 0, outline: 0, color: 'var(--bg)',
                              padding: '10px 14px', font: 'inherit', fontSize: 15 }} />
              <button type="submit" className="btn btn-primary btn-sm" style={{ borderRadius: 999 }}>
                {t(locale, 'subscribe')}
              </button>
            </form>
          ) : (
            <div className="row center" style={{ marginTop: 'var(--s-6)', gap: 8, color: 'var(--bg)' }}>
              <Icon name="check" size={18} /> See you Sunday.
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HomeScreen });