function AboutPage() {
  const [vis, setVis] = React.useState({});
  const refs = React.useRef({});

  React.useEffect(() => {
    const obs = new IntersectionObserver(
      entries => entries.forEach(e => {
        if (e.isIntersecting) setVis(v => ({ ...v, [e.target.dataset.id]: true }));
      }),
      { threshold: 0.15 }
    );
    Object.values(refs.current).forEach(r => r && obs.observe(r));
    return () => obs.disconnect();
  }, []);

  function block(id, style = {}) {
    return {
      opacity: vis[id] ? 1 : 0,
      transform: vis[id] ? 'translateY(0)' : 'translateY(32px)',
      transition: 'opacity 0.9s ease, transform 0.9s ease',
      ...style,
    };
  }

  const label = { fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.32em', color: 'rgba(255,255,255,0.28)', textTransform: 'uppercase', marginBottom: 20 };
  const rule  = { height: 1, background: 'rgba(255,255,255,0.08)', margin: '0' };

  const team = [
    { name: 'Irfan Mappasaid',       role: 'Co-Founder · Head Roaster',    note: 'Certified Q Grader. Trained in Gothenburg. Roasts with silence and intention.' },
    { name: 'Andi Nurul Rahmawati',  role: 'Co-Founder · Head of Sourcing', note: 'Speaks four languages, none of them corporate. Negotiates directly with farmers.' },
    { name: 'Dimas Pratama',         role: 'Head Barista · Training',       note: '2nd place Indonesia Brewers Cup 2024. Believes in the 93°C gospel.' },
  ];

  return (
    <div style={{ paddingTop: 80 }}>

      {/* ── HERO STATEMENT ── */}
      <section style={{ padding: '100px 48px 80px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}
        ref={r => refs.current['h1'] = r} data-id="h1">
        <div style={block('h1')}>
          <div style={label}>About</div>
          <h1 style={{
            fontFamily: "'Montserrat', sans-serif",
            fontSize: 'clamp(44px, 6.5vw, 96px)',
            fontWeight: 900, lineHeight: 1.05,
            letterSpacing: '-0.03em', color: '#ffffff',
            maxWidth: 820,
          }}>
            {['Shadow is the', 'absence of light.', 'In shadow, flavour', 'reveals itself.'].map((ln, i) => (
              <span key={i} className="reveal-line">
                <span className="reveal-line-inner" style={{ animationDelay: `${i * 0.13}s` }}>
                  {i === 1 ? <em style={{ fontStyle: 'italic' }}>{ln}</em> : ln}
                </span>
              </span>
            ))}
          </h1>
        </div>
      </section>

      {/* ── ORIGIN STORY ── */}
      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ padding: '80px 48px', borderRight: '1px solid rgba(255,255,255,0.08)' }}
          ref={r => refs.current['o1'] = r} data-id="o1">
          <div style={{ ...block('o1'), ...label }}>Founded</div>
          <div style={block('o1', { transitionDelay: '0.1s' })}>
            <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 'clamp(60px, 7vw, 100px)', fontWeight: 900, lineHeight: 0.85, color: '#ffffff', letterSpacing: '-0.03em' }}>
              2021
            </div>
            <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.15em', color: 'rgba(255,255,255,0.35)', marginTop: 16, textTransform: 'uppercase' }}>
              Makassar, South Sulawesi
            </div>
          </div>
        </div>
        <div style={{ padding: '80px 48px' }}
          ref={r => refs.current['o2'] = r} data-id="o2">
          <div style={block('o2')}>
            <div style={label}>Our Story</div>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 2, color: 'rgba(255,255,255,0.55)', marginBottom: 24 }}>
              Umbra began on a rooftop in Makassar's old port district, with a 1-kilogram sample roaster and a disagreement about what Indonesian coffee could be.
            </p>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 2, color: 'rgba(255,255,255,0.55)', marginBottom: 24 }}>
              The Indonesian archipelago produces some of the world's most distinctive coffees — but they were being sold overseas, processed for other people's blends, roasted to hide complexity rather than reveal it.
            </p>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 2, color: 'rgba(255,255,255,0.55)' }}>
              We decided to do the opposite. Source high. Roast light. Let the altitude speak.
            </p>
          </div>
        </div>
      </section>

      {/* ── PHILOSOPHY ── */}
      <section style={{ padding: '80px 48px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}
        ref={r => refs.current['ph'] = r} data-id="ph">
        <div style={block('ph', { display: 'grid', gridTemplateColumns: '240px 1fr', gap: '80px', alignItems: 'start' })}>
          <div style={label}>Philosophy</div>
          <div>
            <blockquote style={{
              fontFamily: "'Montserrat', sans-serif",
              fontSize: 'clamp(20px, 2.4vw, 32px)',
              fontStyle: 'italic', fontWeight: 400,
              lineHeight: 1.5, color: '#ffffff',
              borderLeft: '2px solid rgba(255,255,255,0.22)',
              paddingLeft: 32, margin: '0 0 40px',
            }}>
              "We source where altitude writes the flavour. Every metre above sea level is a degree of complexity the roaster must not erase."
            </blockquote>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32 }}>
              {[
                ['Altitude-First', 'We only source farms above 1,200m. The elevation is non-negotiable.'],
                ['Minimal Intervention', 'We stop before the second crack. The terroir should be louder than the roast.'],
                ['Direct Trade', 'We buy directly from farmers. The margin goes to the people who grew it.'],
              ].map(([t, d]) => (
                <div key={t}>
                  <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 17, fontWeight: 700, color: '#ffffff', marginBottom: 10 }}>{t}</div>
                  <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 1.9, color: 'rgba(255,255,255,0.42)' }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── ROASTERY ── */}
      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{
          padding: '80px 48px',
          borderRight: '1px solid rgba(255,255,255,0.08)',
          background: 'rgba(255,255,255,0.025)',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          minHeight: 360,
        }}>
          {/* Roastery illustration placeholder */}
          <div style={{
            border: '1px solid rgba(255,255,255,0.1)',
            height: 240,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            gap: 12,
          }}>
            <div style={{
              width: 60, height: 60,
              border: '1px solid rgba(255,255,255,0.18)',
              borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{ width: 28, height: 28, background: 'rgba(255,255,255,0.15)', borderRadius: '50%' }} />
            </div>
            <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.2)', textTransform: 'uppercase' }}>
              Roastery Photography
            </div>
          </div>
        </div>
        <div style={{ padding: '80px 48px' }}
          ref={r => refs.current['ro'] = r} data-id="ro">
          <div style={block('ro')}>
            <div style={label}>The Roastery</div>
            <h2 style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 36, fontWeight: 900, color: '#ffffff', marginBottom: 24, lineHeight: 1.1 }}>
              A converted warehouse<br/>at the old port.
            </h2>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 2, color: 'rgba(255,255,255,0.52)', marginBottom: 20 }}>
              We roast on a 12kg Probat drum in a century-old warehouse overlooking the Makassar Strait. The ceiling is 8 metres high. The walls have not been painted. We like it that way.
            </p>
            <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 2, color: 'rgba(255,255,255,0.52)' }}>
              Every batch is profiled, cupped, and profiled again. We reject lots that pass industry standards. Our standard is the cup.
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 40 }}>
              {[['12kg', 'Probat Drum'], ['48h', 'Dispatch Window'], ['100%', 'Direct Trade']].map(([n, l]) => (
                <div key={n}>
                  <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 28, fontWeight: 900, color: '#ffffff' }}>{n}</div>
                  <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.15em', color: 'rgba(255,255,255,0.35)', marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── TEAM ── */}
      <section style={{ padding: '80px 48px' }}
        ref={r => refs.current['tm'] = r} data-id="tm">
        <div style={block('tm', { ...label })}>The People</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
          {team.map((p, i) => (
            <div key={p.name} style={{
              padding: '40px 0',
              paddingRight: i < 2 ? 48 : 0,
              paddingLeft: i > 0 ? 48 : 0,
              borderRight: i < 2 ? '1px solid rgba(255,255,255,0.08)' : 'none',
              ...block('tm', { transitionDelay: `${i * 0.12}s` }),
            }}>
              {/* Placeholder portrait */}
              <div style={{
                width: 64, height: 64,
                border: '1px solid rgba(255,255,255,0.15)',
                marginBottom: 20,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 22, fontWeight: 900, color: 'rgba(255,255,255,0.2)' }}>
                  {p.name.split(' ').map(w => w[0]).join('').slice(0,2)}
                </div>
              </div>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 20, fontWeight: 700, color: '#ffffff', marginBottom: 6 }}>{p.name}</div>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.35)', marginBottom: 16, textTransform: 'uppercase' }}>{p.role}</div>
              <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 1.9, color: 'rgba(255,255,255,0.45)' }}>{p.note}</p>
            </div>
          ))}
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { AboutPage });