/* ============================================================
   GlowMerald — Homepage (editorial split-hero layout)
   ============================================================ */
const { useState:useStateH } = React;

/* ---- HERO ---- */
function Hero(){
  const { navigate } = useApp();
  const stats=[['Hidrasi','+92%'],['Kehalusan','+88%'],['Kecerahan','+85%'],['Warna Merata','+80%']];
  return (
    <section className="hero2">
      <div className="container hero2-grid">
        <div className="hero2-copy fade-up">
          <span className="pill-eyebrow">Bersih · Efektif · Bercahaya</span>
          <h1>Kulit Bercahaya<br/>Dimulai dari <span className="ital c-gold">Sini.</span></h1>
          <p className="hero2-sub">Perawatan kulit yang diformulasikan dengan bahan aktif pilihan — mendukung glow alami dan rasa percaya dirimu.</p>
          <div className="hero2-cta">
            <button className="btn btn-gold" onClick={()=>navigate('shop')}>Shop Bestsellers <Icon name="arrow" size={15}/></button>
            <button className="btn btn-ghost" onClick={()=>navigate('product','serum')}>Lihat Ritual</button>
          </div>
          <div className="social-proof">
            <div className="avatar-stack">
              {['Anindhita','Rara','Gisela','Maharani'].map((n,i)=><Avatar key={i} name={n} size={38} style={{ border:'2px solid var(--cream)' }}/>)}
            </div>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:7 }}><Stars value={5} size={13}/><strong style={{ fontSize:'.84rem' }}>4.9/5</strong></div>
              <div className="muted" style={{ fontSize:'.78rem' }}>Dipercaya 25rb+ pelanggan</div>
            </div>
          </div>
        </div>

        <div className="hero2-visual fade-up">
          <div className="hero2-photo">
            <Placeholder label="lifestyle · model portrait" style={{ position:'absolute', inset:0 }}/>
          </div>
          <div className="hero2-bottle">
            <div className="bottle" style={{ transform:'scale(1.1)' }}>
              <div className="cap"></div><div className="collar"></div><div className="glass"></div>
              <div className="label"><span className="lg">G</span><span className="ll"></span><span className="ls">Serum</span></div>
            </div>
          </div>
          <div className="stats-card">
            <div className="field-lab" style={{ marginBottom:12 }}>Hasil Pemakaian</div>
            {stats.map(([l,v],i)=>(
              <div key={i} className="stat-row"><span>{l}</span><span className="stat-val">{v}</span></div>
            ))}
            <div className="stat-foot">*Survei kepuasan 412 pengguna selama 4 minggu.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- ABOUT BAND ---- */
function AboutBand(){
  const { navigate } = useApp();
  return (
    <section className="section about-band-wrap">
      <div className="container about-band">
        <div className="about-img">
          <Placeholder label="still life · product + emerald leaf" style={{ position:'absolute', inset:0 }}/>
        </div>
        <div className="about-copy">
          <div className="eyebrow">Tentang Kami</div>
          <h2>Perawatan yang lahir dari <span className="ital">Emerald.</span></h2>
          <p className="muted" style={{ fontWeight:300, fontSize:'1rem', maxWidth:440 }}>
            Terinspirasi dari batu permata hijau yang melambangkan ketenangan dan keseimbangan, kami menciptakan formula yang elegan, efektif, dan dapat dijangkau — tanpa kompromi.
          </p>
          <button className="btn-pill" onClick={()=>navigate('about')}>Our Story <Icon name="arrow" size={15}/></button>
        </div>
      </div>
    </section>
  );
}

/* ---- VALUE STRIP ---- */
function ValueStrip(){
  return (
    <div className="container">
      <div className="value-strip">
        {WHY.map((w,i)=>(
          <div key={i} className="value-item">
            <span className="value-ic"><Icon name={w.icon} size={22} stroke={1.4}/></span>
            <div><div className="value-title">{w.title}</div><div className="value-text">{w.text}</div></div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- FEATURED COLLECTION (compact cards) ---- */
function FeaturedCard({ item }){
  const { navigate, addToCart } = useApp();
  const [added,setAdded] = useStateH(false);
  const add=(e)=>{ e.stopPropagation(); addToCart(item.id); setAdded(true); setTimeout(()=>setAdded(false),1200); };
  return (
    <div className="fcard">
      <div className="fcard-media" onClick={()=>navigate('product',item.id)}>
        {item.bestSeller && <span className="badge-best">Best Seller</span>}
        <ProductVisual kind={item.visual}/>
      </div>
      <div className="fcard-body">
        <div className="fcard-name" onClick={()=>navigate('product',item.id)}>{item.name}</div>
        <div className="fcard-sub">{item.tagline || item.sub}</div>
        <div className="fcard-foot">
          <span className="fcard-price">{formatRp(item.price)}</span>
          <button className={'add-round'+(added?' added':'')} onClick={add} aria-label="Tambah ke keranjang">
            <Icon name={added?'check':'plus'} size={17}/>
          </button>
        </div>
      </div>
    </div>
  );
}

function Featured(){
  const { navigate } = useApp();
  const items=[findItem('serum'), findItem('mask'), findItem('starter-duo'), findItem('double-glow')];
  return (
    <section className="section">
      <div className="container">
        <div className="feat-head">
          <div className="eyebrow" style={{ margin:0 }}>Featured Collection</div>
          <a className="link-gold" onClick={()=>navigate('shop')}>Lihat Semua Produk <Icon name="arrow" size={15}/></a>
        </div>
        <div className="feat-grid">
          {items.map(p=><FeaturedCard key={p.id} item={p}/>)}
        </div>
      </div>
    </section>
  );
}

/* ---- BUILD YOUR ROUTINE BAND ---- */
function RoutineBand(){
  const { navigate } = useApp();
  const checks=['Dipersonalisasi untuk kebutuhan kulitmu','Diformulasikan dengan bahan aktif','Mendukung kulit sehat dari dalam'];
  return (
    <section className="section">
      <div className="container">
        <div className="routine-band">
          <div className="deco-circle" style={{ width:240, height:240, top:-80, left:-60, opacity:.14 }}></div>
          <div className="routine-copy">
            <h2 style={{ color:'var(--on-dark)' }}>Bangun ritual<br/>kulitmu yang ideal.</h2>
            <p className="hero-sub" style={{ fontWeight:300, maxWidth:380, marginTop:14 }}>Temukan rangkaian yang sesuai dengan kebutuhan kulitmu — sederhana, cerdas, dan terasa premium.</p>
            <ul className="routine-checks">
              {checks.map((c,i)=>(<li key={i}><span className="rc-ic"><Icon name="check" size={13} stroke={2.2}/></span>{c}</li>))}
            </ul>
            <button className="btn-pill gold" onClick={()=>navigate('shop')}>Mulai Belanja <Icon name="arrow" size={15}/></button>
          </div>
          <div className="routine-visual">
            <Placeholder label="product trio · emerald florals" style={{ position:'absolute', inset:0 }}/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- (retained) Social proof, insight, UGC ---- */
function SocialProof(){
  return (
    <section className="section" style={{ background:'var(--cream-deep)' }}>
      <div className="container">
        <SectionHead eyebrow="Dipercaya Pelanggan" title="Cerita kulit yang bersinar" sub="Pengalaman nyata dari ritual harian mereka."/>
        <div className="testi-grid">
          {TESTIMONIALS.map((t,i)=>(
            <div key={i} className="testi-card">
              <Stars value={t.rating}/>
              <p className="ital" style={{ fontSize:'1.02rem', color:'var(--ink)', margin:'14px 0 18px', lineHeight:1.5 }}>“{t.quote}”</p>
              <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                <Avatar name={t.name} size={42}/>
                <div><div style={{ fontWeight:500, fontSize:'.9rem' }}>{t.name}</div><div className="muted" style={{ fontSize:'.74rem' }}>{t.city} · {t.concern}</div></div>
              </div>
            </div>
          ))}
        </div>
        <div className="hr-gold" style={{ margin:'56px auto', maxWidth:120 }}></div>
        <h3 className="center serif" style={{ fontSize:'1.6rem', marginBottom:8 }}>Before &amp; After</h3>
        <p className="center muted" style={{ marginBottom:34, fontWeight:300 }}>Hasil bertahap dengan pemakaian rutin.</p>
        <div className="ba-grid">
          {BEFORE_AFTER.map((ba,i)=>(
            <div key={i} className="ba-card">
              <div className="ba-images">{ba.stages.map((s,j)=><div key={j} className="ba-frame"><Placeholder label={s} style={{ aspectRatio:'3/4' }}/></div>)}</div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:14 }}>
                <span style={{ fontWeight:500, fontSize:'.9rem' }}>{ba.name}</span><span className="chip ghost-gold">{ba.concern}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function InsightTeaser(){
  const { navigate } = useApp();
  return (
    <section className="section">
      <div className="container">
        <div className="feat-head">
          <div><div className="eyebrow">Beauty Insight</div><h2 style={{ marginTop:6 }}>Pengetahuan sebelum perawatan</h2></div>
          <a className="link-gold" onClick={()=>navigate('insight')}>Lihat Semua <Icon name="arrow" size={15}/></a>
        </div>
        <div className="grid grid-3">{ARTICLES.slice(0,3).map(a=><ArticleCard key={a.id} article={a}/>)}</div>
      </div>
    </section>
  );
}

function UGCStrip(){
  return (
    <section style={{ paddingBottom:80 }}>
      <div className="container"><p className="center eyebrow" style={{ marginBottom:24 }}>#GlowMerald · @glowmeraldofficial</p></div>
      <div className="ugc-strip">
        {UGC.map((u,i)=>(<div key={i} className="ugc-tile"><Placeholder label="UGC" style={{ position:'absolute', inset:0 }}/><span className="ugc-user"><Icon name="ig" size={13}/> {u}</span></div>))}
      </div>
    </section>
  );
}

function HomePage(){
  return (
    <div>
      <Hero/>
      <ValueStrip/>
      <AboutBand/>
      <Featured/>
      <RoutineBand/>
      <SocialProof/>
      <InsightTeaser/>
      <UGCStrip/>
    </div>
  );
}

Object.assign(window, { HomePage, Hero });