function HomePage({ onAddToCart, onViewDetail, setPage }) {
  const stats = [
    { n: '100%', label: 'Grass-Fed & Finished' },
    { n: '475°F+', label: 'Smoke Point' },
    { n: '0', label: 'Seed Oils' },
    { n: '3×', label: 'Triple Filtered' },
  ];

  const ticker = ['No Seed Oils', 'Grass-Fed & Finished', 'Small Batch', 'Pure Suet', 'High Smoke Point', 'Zero Additives', 'Local Farms', 'No Seed Oils', 'Grass-Fed & Finished', 'Small Batch', 'Pure Suet', 'High Smoke Point'];

  const whyItems = [
    { icon: '🌿', title: 'Grass-Fed & Finished', desc: 'Our cattle graze on open pasture their entire lives — producing tallow rich in beta-carotene, CLA, and fat-soluble vitamins.' },
    { icon: '🔥', title: 'High Smoke Point', desc: 'At 475°F+, tallow is one of the most stable cooking fats available. No toxic breakdown, no smoke, no worry.' },
    { icon: '🐄', title: 'Pure Suet', desc: 'Other brands use fat scraps, we use pure suet. Suet is the pure fat surrounding the organs of the cow.' },
    { icon: '💪', title: 'Small Batch Made', desc: 'Our tallow is made in-house, preserving its nutrients and keeping it free of toxins and phthalates.' },
    { icon: '🏡', title: 'Local Farms Only', desc: 'We source 100% of our suet from local family farms in upstate New York.' },
    { icon: '♻️', title: 'Glass Jars Only', desc: 'We refuse to put clean fat in plastic. Every order ships in reusable, recycled glass jars.' },
  ];

  return (
    <div style={{ fontFamily:"'DM Sans', sans-serif" }}>
      {/* HERO */}
      <section data-screen-label="01 Hero" style={{
        minHeight:'100vh', background:'#111', display:'flex', alignItems:'center',
        paddingTop:80, position:'relative', overflow:'hidden',
      }}>
        {/* BG pattern */}
        <div style={{ position:'absolute', inset:0, backgroundImage:'repeating-linear-gradient(45deg, #1a1a1a 0, #1a1a1a 1px, transparent 0, transparent 50%)', backgroundSize:'24px 24px', opacity:0.5 }}/>
        {/* Yellow accent block */}
        <div className="hero-accent" style={{ position:'absolute', right:0, top:0, bottom:0, width:'45%', background:'#F5C400', clipPath:'polygon(12% 0, 100% 0, 100% 100%, 0% 100%)' }}/>

        <div className="hero-grid" style={{ maxWidth:1280, margin:'0 auto', padding:'80px 32px', width:'100%', position:'relative', zIndex:1, display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'center' }}>
          <div>
            <div style={{ display:'inline-block', background:'#F5C400', border:'2px solid #F5C400', borderRadius:4, padding:'4px 14px', marginBottom:20 }}>
              <span style={{ fontWeight:800, fontSize:12, color:'#111', letterSpacing:2 }}>100% GRASS-FED & FINISHED</span>
            </div>
            <h1 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:'clamp(52px,7vw,96px)', color:'#fff', lineHeight:0.95, margin:'0 0 24px', letterSpacing:-1 }}>
              NATURE'S<br/>
              <span style={{ color:'#F5C400' }}>ORIGINAL</span><br/>
              COOKING OIL
            </h1>
            <p style={{ color:'#ccc', fontSize:20, lineHeight:1.6, marginBottom:36, maxWidth:480 }}>
              Rich, Grass-Fed and Finished Tallow from happy, healthy cows.
            </p>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
              <button onClick={() => setPage('Shop')} style={{
                background:'#F5C400', color:'#111', border:'3px solid #F5C400',
                borderRadius:6, padding:'16px 36px', fontFamily:"'Black Han Sans', Impact, sans-serif",
                fontSize:22, fontWeight:900, cursor:'pointer', letterSpacing:1,
                transition:'all 0.15s', boxShadow:'4px 4px 0 rgba(255,255,255,0.2)',
              }}
                onMouseEnter={e => e.currentTarget.style.background='#fff'}
                onMouseLeave={e => e.currentTarget.style.background='#F5C400'}
              >SHOP NOW →</button>
              <button onClick={() => setPage('About')} style={{
                background:'transparent', color:'#fff', border:'3px solid rgba(255,255,255,0.4)',
                borderRadius:6, padding:'16px 32px', fontFamily:"'Black Han Sans', Impact, sans-serif",
                fontSize:22, fontWeight:900, cursor:'pointer', letterSpacing:1,
                transition:'all 0.15s',
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor='#fff'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor='rgba(255,255,255,0.4)'; }}
              >OUR STORY</button>
            </div>
          </div>

          <div className="hero-product" style={{ display:'flex', alignItems:'center', justifyContent:'center' }}>
            <div style={{ position:'relative' }}>
              <div style={{ position:'absolute', inset:-12, background:'#111', borderRadius:16, transform:'rotate(3deg)', border:'3px solid #333' }}/>
              <div className="hero-jar" style={{ position:'relative', borderRadius:12, border:'3px solid #111', boxShadow:'8px 8px 0 #111', overflow:'hidden' }}>
                <img src="assets/homepage-hero.jpg" alt="CleanFats Grass-Fed Beef Tallow jars" style={{ width:340, height:340, objectFit:'cover', display:'block' }}/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TICKER */}
      <div style={{ background:'#F5C400', borderTop:'3px solid #111', borderBottom:'3px solid #111', padding:'14px 0', overflow:'hidden' }}>
        <div style={{ display:'flex', gap:48, animation:'ticker 20s linear infinite', whiteSpace:'nowrap' }}>
          {[...ticker, ...ticker].map((t, i) => (
            <span key={i} style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:18, fontWeight:900, color:'#111', letterSpacing:1, flexShrink:0 }}>
              {t} <span style={{ color:'rgba(0,0,0,0.25)', margin:'0 8px' }}>✦</span>
            </span>
          ))}
        </div>
      </div>

      {/* STATS */}
      <section data-screen-label="02 Stats" style={{ background:'#111', padding:'60px 32px', borderBottom:'3px solid #F5C400' }}>
        <div style={{ maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:24 }}>
          {stats.map(s => (
            <div key={s.n} style={{ textAlign:'center' }}>
              <p style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:52, color:'#F5C400', margin:'0 0 4px', letterSpacing:-1 }}>{s.n}</p>
              <p style={{ color:'#aaa', fontWeight:600, fontSize:15, margin:0, letterSpacing:0.5 }}>{s.label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED PRODUCTS */}
      <section data-screen-label="03 Products" style={{ padding:'80px 32px', background:'#FAF6EE' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ marginBottom:48, display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:16 }}>
            <div>
              <p style={{ fontWeight:800, fontSize:12, color:'#F5C400', letterSpacing:3, background:'#111', display:'inline-block', padding:'4px 12px', borderRadius:4, marginBottom:12 }}>OUR PRODUCTS</p>
              <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:52, color:'#111', margin:0, letterSpacing:-0.5 }}>PURE TALLOW.<br/>NOTHING ELSE.</h2>
            </div>
            <button onClick={() => setPage('Shop')} style={{ background:'none', border:'3px solid #111', borderRadius:6, padding:'12px 24px', fontWeight:800, fontSize:15, color:'#111', WebkitAppearance:'none', appearance:'none', cursor:'pointer', transition:'all 0.15s' }}
              onMouseEnter={e => { e.target.style.background='#111'; e.target.style.color='#F5C400'; }}
              onMouseLeave={e => { e.target.style.background='none'; e.target.style.color='#111'; }}
            >View All Products →</button>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(240px, 1fr))', gap:24 }}>
            {PRODUCTS.map(p => <ProductCard key={p.id} product={p} onAddToCart={onAddToCart} onViewDetail={onViewDetail}/>)}
          </div>
        </div>
      </section>

      {/* WHY TALLOW */}
      <section data-screen-label="05 Why Tallow" style={{ padding:'80px 32px', background:'#FAF6EE' }}>
        <div style={{ maxWidth:1280, margin:'0 auto' }}>
          <div style={{ textAlign:'center', marginBottom:56 }}>
            <p style={{ fontWeight:800, fontSize:12, color:'#111', letterSpacing:3, background:'#F5C400', display:'inline-block', padding:'4px 12px', borderRadius:4, marginBottom:12 }}>WHY TALLOW</p>
            <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:52, color:'#111', margin:0 }}>THE CASE FOR<br/><span style={{ color:'#F5C400', WebkitTextStroke:'2px #111' }}>REAL FAT</span></h2>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(300px, 1fr))', gap:24 }}>
            {whyItems.map(w => (
              <div key={w.title} style={{ background:'#fff', border:'3px solid #111', borderRadius:10, padding:28, boxShadow:'4px 4px 0 #111', transition:'transform 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.transform='translateY(-4px)'}
                onMouseLeave={e => e.currentTarget.style.transform='translateY(0)'}
              >
                <div style={{ fontSize:36, marginBottom:12 }}>{w.icon}</div>
                <h3 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:22, margin:'0 0 10px', color:'#111' }}>{w.title}</h3>
                <p style={{ color:'#555', fontSize:15, lineHeight:1.6, margin:0 }}>{w.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        @keyframes ticker { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
        @media (max-width: 900px) {
          section > div { grid-template-columns: 1fr !important; }
        }
        /* Collapse the hero earlier so the product card stays centered instead of
           getting squeezed against the left of the yellow panel at medium widths. */
        @media (max-width: 1100px) {
          .hero-grid { grid-template-columns: 1fr !important; }
        }
        /* On the two-column desktop layout, push the product card toward the
           right so it sits in the open yellow area instead of near the divide. */
        @media (min-width: 1101px) {
          .hero-product { justify-content: flex-end !important; padding-right: 6%; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { HomePage });