function AboutPage({ setPage }) {
  const team = [
    { name: 'Founder', role: 'Head of sourcing & quality', initial: 'CF' },
  ];

  const timeline = [
    { year: '2023', event: 'Started rendering tallow at home after cutting seed oils from our diet.' },
    { year: '2024', event: 'Friends and family kept asking for jars — we knew we had something.' },
    { year: '2025', event: 'Partnered with local grass-fed farms to scale small-batch production.' },
    { year: '2026', event: 'CleanFats launched publicly — 500+ happy customers and growing.' },
  ];

  return (
    <div style={{ fontFamily:"'DM Sans', sans-serif", paddingTop:64, minHeight:'100vh' }}>
      {/* Hero */}
      <div style={{ background:'#111', padding:'80px 32px', borderBottom:'3px solid #F5C400', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', right:0, top:0, bottom:0, width:'40%', background:'#F5C400', clipPath:'polygon(20% 0, 100% 0, 100% 100%, 0% 100%)', opacity:0.12 }}/>
        <div style={{ maxWidth:1000, margin:'0 auto', position:'relative', zIndex:1 }}>
          <p style={{ color:'#F5C400', fontWeight:800, fontSize:12, letterSpacing:3, margin:'0 0 12px' }}>OUR STORY</p>
          <h1 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:'clamp(52px,7vw,88px)', color:'#fff', margin:'0 0 24px', lineHeight:0.95 }}>
            WE COOK WITH<br/><span style={{ color:'#F5C400' }}>WHAT WE BELIEVE IN</span>
          </h1>
          <p style={{ color:'#ccc', fontSize:20, lineHeight:1.65, maxWidth:640, margin:0 }}>
            CleanFats started in a home kitchen with one simple question: why is it so hard to find cooking fat that's actually clean? We decided to make it ourselves.
          </p>
        </div>
      </div>

      {/* Mission */}
      <section style={{ background:'#FAF6EE', padding:'80px 32px', borderBottom:'3px solid #111' }}>
        <div style={{ maxWidth:820, margin:'0 auto' }}>
          <p style={{ fontWeight:800, fontSize:12, color:'#111', letterSpacing:3, background:'#F5C400', display:'inline-block', padding:'4px 12px', borderRadius:4, marginBottom:16 }}>OUR MISSION</p>
          <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:48, color:'#111', margin:'0 0 24px', lineHeight:0.95 }}>NO SEED OILS.<br/>NO SHORTCUTS.<br/>NO COMPROMISE.</h2>
          <p style={{ color:'#555', fontSize:17, lineHeight:1.7 }}>
            We started this journey with a simple need, something better. In a market crowded with over-processed oils and generic mass-produced tallow, we wanted something honest. We set out to make the best cooking oil, a tallow that not just cooks your food without burning, but provides nutrients and adds value to your meal. It's true that what you cook in is just as important as what you eat. This is why we are committed to our small-batch process and only source from local farms. This isn't about following a trend, it's about bringing back what is missing from our shelves.
          </p>
        </div>
      </section>

      {/* Timeline */}
      <section style={{ background:'#111', padding:'80px 32px', borderBottom:'3px solid #F5C400' }}>
        <div style={{ maxWidth:800, margin:'0 auto' }}>
          <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:52, color:'#fff', textAlign:'center', margin:'0 0 56px' }}>HOW WE GOT HERE</h2>
          <div style={{ position:'relative', paddingLeft:48 }}>
            {timeline.map((t, i) => (
              <div key={i} style={{ display:'flex', gap:24, marginBottom:36, alignItems:'flex-start', position:'relative' }}>
                {/* Connector to the next dot — runs straight through dot centers.
                    marginBottom (36px) is the gap between rows, so the line spans
                    this row plus that gap to reach the next dot. */}
                {i < timeline.length - 1 && (
                  <div style={{ position:'absolute', left:-28.5, top:21, width:3, height:'calc(100% + 36px)', background:'#F5C400', borderRadius:2, zIndex:0 }}/>
                )}
                {/* Dot — sits on the connector (center aligns at left:-27 within the row) */}
                <div style={{ width:22, height:22, background:'#F5C400', borderRadius:'50%', border:'3px solid #111', flexShrink:0, marginTop:10, position:'absolute', left:-38, zIndex:1 }}/>
                {/* Card */}
                <div style={{ background:'rgba(255,255,255,0.06)', border:'2px solid rgba(245,196,0,0.3)', borderRadius:8, padding:'16px 20px', flex:1 }}>
                  <span style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:22, color:'#F5C400', display:'block', marginBottom:6 }}>{t.year}</span>
                  <p style={{ color:'#ddd', fontSize:15, lineHeight:1.6, margin:0 }}>{t.event}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values */}
      <section style={{ background:'#F5C400', padding:'80px 32px', borderBottom:'3px solid #111' }}>
        <div style={{ maxWidth:1000, margin:'0 auto', textAlign:'center' }}>
          <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:52, color:'#111', margin:'0 0 48px' }}>WHAT WE STAND FOR</h2>
          <div className="values-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
            {[
              { title: 'Transparency', desc: 'You know exactly where our beef comes from and how we render it. No secrets.' },
              { title: 'Integrity', desc: 'We test every batch. We\'d rather make less than compromise on quality.' },
              { title: 'Community', desc: 'We support local farms and the people working hard to raise animals the right way.' },
            ].map(v => (
              <div key={v.title} style={{ background:'#111', border:'3px solid #111', borderRadius:10, padding:28, boxShadow:'4px 4px 0 rgba(0,0,0,0.3)' }}>
                <h3 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:26, color:'#F5C400', margin:'0 0 12px' }}>{v.title}</h3>
                <p style={{ color:'#ccc', fontSize:15, lineHeight:1.6, margin:0 }}>{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ background:'#FAF6EE', padding:'80px 32px', textAlign:'center' }}>
        <h2 style={{ fontFamily:"'Black Han Sans', Impact, sans-serif", fontSize:52, color:'#111', margin:'0 0 16px' }}>READY TO TRY IT?</h2>
        <p style={{ color:'#555', fontSize:18, marginBottom:32 }}>Your kitchen (and your health) will thank you.</p>
        <button onClick={() => setPage('Shop')} style={{
          background:'#111', color:'#F5C400', border:'3px solid #111', borderRadius:6,
          padding:'16px 40px', fontFamily:"'Black Han Sans', Impact, sans-serif",
          fontSize:22, cursor:'pointer', letterSpacing:1, boxShadow:'4px 4px 0 #111',
          transition:'all 0.15s',
        }}
          onMouseEnter={e => { e.target.style.background='#F5C400'; e.target.style.color='#111'; }}
          onMouseLeave={e => { e.target.style.background='#111'; e.target.style.color='#F5C400'; }}
        >SHOP ALL PRODUCTS →</button>
      </section>

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

Object.assign(window, { AboutPage });