// web-sections.jsx — 1518.coffee marketing site · page sections v2
// Hero with cafe scene, scan flow, tasting, sharing, origins, final CTA.
// Needs shared.jsx, brand1518.jsx, ig-illustrations.jsx, web-system.jsx,
// web-screens.jsx, web-screens-v2.jsx.

// ════════════════════════════════════════════════════════════
// HERO — cafe scene bg + phone showing scan screen
// ════════════════════════════════════════════════════════════
function Hero(){
  const P = useP();
  return (
    <section style={{ position:'relative', overflow:'hidden' }}>
      {/* cafe scene fills the entire hero */}
      <div style={{ position:'absolute', inset:0 }}>
        <CafeScene />
      </div>
      {/* scrim for readability */}
      <div style={{ position:'absolute', inset:0,
        background:'linear-gradient(110deg, #211B16ee 0%, #211B16cc 38%, #211B1666 58%, #211B1633 100%)' }} />
      <Grain opacity={0.06} blend="soft-light" />

      <div style={{ position:'relative', maxWidth:1160, margin:'0 auto', padding:'clamp(56px,8vw,80px) clamp(20px,4vw,32px) clamp(64px,9vw,90px)',
        display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px,1fr))', gap:40, alignItems:'center' }}>
        {/* left copy */}
        <div>
          <Reveal>
            <Kicker>The specialty-coffee companion</Kicker>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="serif" style={{ fontSize:'clamp(34px,8vw,62px)', lineHeight:1.05, fontWeight:500,
              letterSpacing:'-0.02em', color:'#F4ECDD', margin:'22px 0 0' }}>
              Every cup,<br/>worth remembering.
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="serif" style={{ fontStyle:'italic', fontSize:'clamp(16px,3.6vw,21px)', lineHeight:1.5,
              color:'#D6C9B4', margin:'22px 0 0', maxWidth:440 }}>
              Scan the bag, brew with a guided pour, remember the cup.
              1518 turns your morning ritual into a practice that gets better every day.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <WaitlistInput />
          </Reveal>
          <Reveal delay={320}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:18 }}>
              <div style={{ width:6, height:6, borderRadius:'50%', background:P.sage,
                boxShadow:`0 0 8px ${P.sage}88` }} />
              <span className="sans" style={{ fontSize:13, color:'#9E9079' }}>Coming soon to iPhone</span>
            </div>
          </Reveal>
        </div>
        {/* right phone — bag profile / scan result, the core value prop */}
        <Reveal delay={200} style={{ display:'flex', justifyContent:'center' }}>
          <Phone w={306}><ScreenScanResult /></Phone>
        </Reveal>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// THE NAME — 15 | 18
// ════════════════════════════════════════════════════════════
function TheName(){
  const P = useP();
  const Dose = ({ n, label, sub }) => (
    <div style={{ flex:1, textAlign:'center' }}>
      <div className="serif tnum" style={{ fontSize:'clamp(56px,13vw,96px)', fontWeight:500, color:P.ink, lineHeight:0.9,
        letterSpacing:'-0.02em' }}>{n}</div>
      <div className="sans" style={{ fontSize:11.5, fontWeight:600, letterSpacing:'0.22em',
        textTransform:'uppercase', color:P.sage, marginTop:16 }}>{label}</div>
      <div className="sans" style={{ fontSize:13.5, color:P.stoneLt, marginTop:7 }}>{sub}</div>
    </div>
  );
  return (
    <Section bg={P.paper2} pad="96px 0">
      <Reveal style={{ textAlign:'center', maxWidth:620, margin:'0 auto' }}>
        <Kicker style={{ justifyContent:'center' }}>A name you can taste</Kicker>
        <h2 className="serif" style={{ fontSize:'clamp(27px,5vw,38px)', lineHeight:1.18, fontWeight:500,
          color:P.ink, margin:'18px 0 0', letterSpacing:'-0.01em' }}>
          The whole philosophy fits in two numbers.
        </h2>
      </Reveal>
      <Reveal delay={120} style={{ display:'flex', alignItems:'stretch', maxWidth:560,
        margin:'52px auto 0' }}>
        <Dose n="15" label="Drip" sub="Pour-over & filter" />
        <div style={{ width:1, background:P.line, margin:'12px 0' }} />
        <Dose n="18" label="Espresso" sub="Shots & milk" />
      </Reveal>
      <Reveal delay={200}>
        <p className="serif" style={{ fontStyle:'italic', fontSize:18, color:P.stone,
          textAlign:'center', marginTop:44 }}>
          Fifteen grams for drip. Eighteen for espresso. Start there — 1518 remembers the rest.
        </p>
      </Reveal>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// HOW IT WORKS — now with mini phone screens
// ════════════════════════════════════════════════════════════
function HowItWorks(){
  const P = useP();
  const steps = [
    { n:'01', G:BeanRoasted, Screen:ScreenScan, title:'Scan the bag',
      body:"Point your camera at any bag of beans. 1518 reads the roaster, origin, variety and process." },
    { n:'02', G:GearV60, Screen:ScreenTimer, title:'Brew with a guide',
      body:"A calm, stage-by-stage timer walks you through bloom, pour and drawdown." },
    { n:'03', G:BeanCherry, Screen:ScreenTasting, title:'Remember the cup',
      body:"Log tasting notes after each brew. 1518 learns your palate over time." },
    { n:'04', G:BeanCrossSection, Screen:ScreenCodex, title:'Build your codex',
      body:"Each new coffee becomes a collectible card \u2014 common to legendary." },
  ];
  return (
    <Section id="how-it-works" pad="104px 0">
      <Reveal style={{ maxWidth:560 }}>
        <Kicker>How it works</Kicker>
        <h2 className="serif" style={{ fontSize:'clamp(28px,5.5vw,40px)', lineHeight:1.12, fontWeight:500,
          color:P.ink, margin:'18px 0 0', letterSpacing:'-0.015em' }}>
          Four steps. One better cup each morning.
        </h2>
      </Reveal>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(210px,1fr))', gap:24, marginTop:56 }}>
        {steps.map((s,k)=>{
          const G = s.G;
          const Scr = s.Screen;
          return (
            <Reveal key={s.n} delay={k*90}>
              <div style={{ position:'relative', height:'100%', borderRadius:18, background:P.card,
                border:'1px solid '+P.line, padding:'0', overflow:'hidden',
                boxShadow:'0 2px 10px rgba(0,0,0,0.18)', display:'flex', flexDirection:'column' }}>
                {/* mini phone preview */}
                <div style={{ position:'relative', height:160, overflow:'hidden',
                  borderBottom:'1px solid '+P.line }}>
                  <div style={{ position:'absolute', inset:0, transform:'scale(0.52)',
                    transformOrigin:'top center', width:'192%', height:'192%', left:'-46%', top:'-10%' }}>
                    <div style={{ position:'relative', width:'100%', height:'100%' }}><Scr /></div>
                  </div>
                  <div style={{ position:'absolute', bottom:0, left:0, right:0, height:'40%',
                    background:`linear-gradient(to top, ${P.card}, transparent)` }} />
                </div>
                <div style={{ padding:'18px 20px 22px', flex:1 }}>
                  <div className="serif tnum" style={{ fontSize:14, color:P.sage, fontWeight:600,
                    letterSpacing:'0.1em' }}>{s.n}</div>
                  <div className="serif" style={{ fontSize:20, color:P.ink, marginTop:8,
                    lineHeight:1.15 }}>{s.title}</div>
                  <p className="sans" style={{ fontSize:13, color:P.inkSoft, lineHeight:1.5,
                    marginTop:8 }}>{s.body}</p>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FEATURE — scan + recognition (two phones)
// ════════════════════════════════════════════════════════════
function FeatureScan(){
  const P = useP();
  return (
    <Section id="features" bg={P.paper2} pad="104px 0">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px,1fr))', gap:56, alignItems:'center' }}>
        <div>
          <Reveal>
            <Kicker>Scan any bag</Kicker>
            <h2 className="serif" style={{ fontSize:'clamp(27px,5vw,38px)', lineHeight:1.14, fontWeight:500,
              color:P.ink, margin:'18px 0 0', letterSpacing:'-0.015em' }}>
              Point. Recognize. Brew.
            </h2>
            <p className="serif" style={{ fontStyle:'italic', fontSize:19, color:P.stone,
              margin:'20px 0 0', lineHeight:1.5, maxWidth:440 }}>
              1518 reads the label, identifies the roaster, origin, variety and process —
              then builds a recipe tuned to your gear. One scan replaces ten minutes of Googling.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display:'flex', gap:20, marginTop:32 }}>
              {[['Roaster','auto-identified'],['Origin','mapped'],['Recipe','generated']].map(([t,s],k)=>(
                <div key={k} style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <div style={{ width:6, height:6, borderRadius:'50%', background:P.sage,
                    boxShadow:`0 0 8px ${P.sage}66` }} />
                  <div>
                    <div className="sans" style={{ fontSize:13, fontWeight:600, color:P.ink }}>{t}</div>
                    <div className="sans" style={{ fontSize:11.5, color:P.stoneLt }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <Reveal delay={100} style={{ display:'flex', justifyContent:'center', gap:20, alignItems:'flex-end', flexWrap:'wrap' }}>
          <Phone w={220} style={{ transform:'rotate(-3deg)' }}><ScreenScan /></Phone>
          <Phone w={240} style={{ transform:'rotate(2deg)', marginBottom:10 }}><ScreenScanResult /></Phone>
        </Reveal>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FEATURE — guided timer
// ════════════════════════════════════════════════════════════
function FeatureTimer(){
  const P = useP();
  const points = [
    ['Origin-aware ambience','The timer dresses itself in the landscape your beans came from.'],
    ['Stage-by-stage pours','Bloom, first pour, second pour, drawdown — each with clear guidance.'],
    ['Built from your scan','Doses, ratio and temperature come pre-filled from the bag.'],
  ];
  return (
    <Section pad="104px 0">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px,1fr))', gap:56, alignItems:'center' }}>
        <Reveal style={{ display:'flex', justifyContent:'center' }}>
          <Phone w={290}><ScreenTimer /></Phone>
        </Reveal>
        <div>
          <Reveal>
            <Kicker>The guided timer</Kicker>
            <h2 className="serif" style={{ fontSize:'clamp(27px,5vw,38px)', lineHeight:1.14, fontWeight:500,
              color:P.ink, margin:'18px 0 0', letterSpacing:'-0.015em' }}>
              A calm hand through every pour.
            </h2>
          </Reveal>
          <div style={{ marginTop:30, display:'flex', flexDirection:'column', gap:22 }}>
            {points.map((p,k)=>(
              <Reveal key={k} delay={k*90} style={{ display:'flex', gap:16 }}>
                <div style={{ width:8, height:8, borderRadius:'50%', background:P.sage,
                  marginTop:8, flexShrink:0, boxShadow:`0 0 10px ${P.sage}77` }} />
                <div>
                  <div className="serif" style={{ fontSize:19, color:P.ink, lineHeight:1.2 }}>{p[0]}</div>
                  <p className="sans" style={{ fontSize:14, color:P.inkSoft, lineHeight:1.5,
                    marginTop:6, maxWidth:420 }}>{p[1]}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FEATURE — tasting + sharing (two phones)
// ════════════════════════════════════════════════════════════
function FeatureTasting(){
  const P = useP();
  return (
    <Section bg={P.paper2} pad="104px 0">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px,1fr))', gap:56, alignItems:'center' }}>
        <div>
          <Reveal>
            <Kicker>Remember every cup</Kicker>
            <h2 className="serif" style={{ fontSize:'clamp(27px,5vw,38px)', lineHeight:1.14, fontWeight:500,
              color:P.ink, margin:'18px 0 0', letterSpacing:'-0.015em' }}>
              Taste it. Map it. Share it.
            </h2>
            <p className="serif" style={{ fontStyle:'italic', fontSize:19, color:P.stone,
              margin:'20px 0 0', lineHeight:1.5, maxWidth:460 }}>
              A six-axis flavor wheel captures what you noticed — fruity, floral, sweet, nutty,
              chocolate, bright. Your tasting history builds a palate profile that sharpens
              every future recipe.
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ marginTop:28, padding:'18px 22px', borderRadius:16, background:P.card,
              border:'1px solid '+P.line, maxWidth:360 }}>
              <div className="sans" style={{ fontSize:10, fontWeight:600, letterSpacing:'0.14em',
                textTransform:'uppercase', color:P.sage, marginBottom:10 }}>Your brew card includes</div>
              {['Origin landscape header','Recipe details (dose, water, time)','Flavor tags from your tasting',
                'Personal score','1518 branding — ready to share'].map((item,k)=>(
                <div key={k} style={{ display:'flex', gap:10, alignItems:'flex-start', marginTop:k?8:0 }}>
                  <div style={{ width:5, height:5, borderRadius:'50%', background:P.sage, marginTop:6, flexShrink:0 }} />
                  <span className="sans" style={{ fontSize:13, color:P.inkSoft, lineHeight:1.4 }}>{item}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
        <Reveal delay={100} style={{ display:'flex', justifyContent:'center', gap:20, alignItems:'flex-end', flexWrap:'wrap' }}>
          <Phone w={220} style={{ transform:'rotate(-2deg)' }}><ScreenTasting /></Phone>
          <Phone w={240} style={{ transform:'rotate(3deg)', marginBottom:14 }}><ScreenShare /></Phone>
        </Reveal>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FEATURE — codex
// ════════════════════════════════════════════════════════════
function FeatureCodex(){
  const P = useP();
  const stats = [
    ['60', 'coffees to discover'],
    ['4', 'rarity tiers to chase'],
    ['6', 'flavor axes per cup'],
  ];
  return (
    <Section id="codex" pad="104px 0">
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px,1fr))', gap:56, alignItems:'center' }}>
        <Reveal style={{ display:'flex', justifyContent:'center' }}>
          <Phone w={290}><ScreenCodex /></Phone>
        </Reveal>
        <div>
          <Reveal>
            <Kicker>The codex</Kicker>
            <h2 className="serif" style={{ fontSize:'clamp(27px,5vw,38px)', lineHeight:1.14, fontWeight:500,
              color:P.ink, margin:'18px 0 0', letterSpacing:'-0.015em' }}>
              Every coffee you meet becomes a card worth keeping.
            </h2>
            <p className="serif" style={{ fontStyle:'italic', fontSize:19, color:P.stone,
              margin:'20px 0 0', lineHeight:1.5, maxWidth:460 }}>
              Common to legendary, each bag you scan joins a growing shelf — a quiet record of
              your taste, and a reason to reach for something new.
            </p>
          </Reveal>
          <Reveal delay={140} style={{ display:'flex', gap:38, marginTop:38 }}>
            {stats.map((s,k)=>(
              <div key={k}>
                <div className="serif tnum" style={{ fontSize:44, fontWeight:500, color:P.ink,
                  lineHeight:1, letterSpacing:'-0.02em' }}>{s[0]}</div>
                <div className="sans" style={{ fontSize:12.5, color:P.stone, marginTop:8,
                  maxWidth:100, lineHeight:1.35 }}>{s[1]}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// ORIGINS — full-bleed landscape band
// ════════════════════════════════════════════════════════════
function Origins(){
  const P = useP();
  return (
    <section id="origins" style={{ position:'relative', padding:'130px 0', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0 }}>
        <IGLandscape terrain="peak" placement="full" opacity={1} />
      </div>
      <div style={{ position:'absolute', inset:0,
        background:'linear-gradient(to right, #211B16 0%, #211B16cc 42%, #211B1666 70%, #211B1633 100%)' }} />
      <div style={{ position:'relative', maxWidth:1160, margin:'0 auto', padding:'0 32px' }}>
        <Reveal style={{ maxWidth:520 }}>
          <Kicker color={P.sageDeep}>Seed to cup</Kicker>
          <h2 className="serif" style={{ fontSize:'clamp(30px,6.5vw,42px)', lineHeight:1.12, fontWeight:500,
            color:'#F4ECDD', margin:'18px 0 0', letterSpacing:'-0.015em' }}>
            Every cup carries a place.
          </h2>
          <p className="serif" style={{ fontStyle:'italic', fontSize:20, color:'#D6C9B4',
            margin:'20px 0 0', lineHeight:1.5 }}>
            1518 connects the recipe in your hands to the altitude, the variety, and the hands
            that grew it. Brewing well is how we honor the work behind the bag.
          </p>
          <Reveal delay={140}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginTop:34 }}>
              <div style={{ width:6, height:6, borderRadius:'50%', background:'#8B9A7D',
                boxShadow:'0 0 8px rgba(139,154,125,0.5)' }} />
              <span className="sans" style={{ fontSize:13, color:'#D6C9B4' }}>Origin stories coming with launch</span>
            </div>
          </Reveal>
        </Reveal>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// THE JOURNEY — brew complete → tasting → share flow
// Three phones in a row showing the full post-brew experience.
// ════════════════════════════════════════════════════════════
function TheJourney(){
  const P = useP();
  const phones = [
    { Screen: ScreenBrewComplete, label: 'Brew complete', sub: 'A moment to pause.' },
    { Screen: ScreenTasting, label: 'Log your notes', sub: 'Map what you tasted.' },
    { Screen: ScreenShare, label: 'Share your card', sub: 'Or keep it for yourself.' },
  ];
  return (
    <Section pad="104px 0" bg={P.paper2}>
      <Reveal style={{ textAlign:'center', maxWidth:560, margin:'0 auto' }}>
        <Kicker style={{ justifyContent:'center' }}>The full journey</Kicker>
        <h2 className="serif" style={{ fontSize:'clamp(27px,5vw,38px)', lineHeight:1.14, fontWeight:500,
          color:P.ink, margin:'18px 0 0', letterSpacing:'-0.015em' }}>
          From pour to post.
        </h2>
        <p className="serif" style={{ fontStyle:'italic', fontSize:18, color:P.stone,
          margin:'16px 0 0', lineHeight:1.5 }}>
          Every brew ends with a brew card — your record, your score, your story.
        </p>
      </Reveal>
      <div style={{ display:'flex', justifyContent:'center', gap:28, marginTop:52, flexWrap:'wrap' }}>
        {phones.map((p,k)=>{
          const Scr = p.Screen;
          return (
            <Reveal key={k} delay={k*120}>
              <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
                <Phone w={220}><Scr /></Phone>
                <div style={{ marginTop:18, textAlign:'center' }}>
                  <div className="sans" style={{ fontSize:13, fontWeight:600, color:P.ink }}>{p.label}</div>
                  <div className="serif" style={{ fontStyle:'italic', fontSize:14, color:P.stone,
                    marginTop:4 }}>{p.sub}</div>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// FINAL CTA
// ════════════════════════════════════════════════════════════
function FinalCTA(){
  const P = useP();
  return (
    <Section pad="110px 0 96px">
      <Reveal style={{ position:'relative', borderRadius:28, overflow:'hidden',
        border:'1px solid '+P.line, background:P.card, padding:'clamp(40px,6vw,72px) clamp(22px,5vw,48px)', textAlign:'center' }}>
        <div style={{ position:'absolute', top:'-30%', left:'50%', transform:'translateX(-50%)',
          width:480, height:480, borderRadius:'50%',
          background:`radial-gradient(circle, ${P.sageSoft}22, transparent 68%)`, pointerEvents:'none' }} />
        <div style={{ position:'absolute', bottom:-40, right:-30, pointerEvents:'none' }}>
          <GearV60 size={200} color={P.sage} opacity={0.07} />
        </div>
        <div style={{ position:'absolute', bottom:-20, left:-20, pointerEvents:'none' }}>
          <BeanCherry size={150} color={P.sage} opacity={0.07} />
        </div>
        <div style={{ position:'relative' }}>
          <div style={{ display:'flex', justifyContent:'center' }}><Mark1518 size={64} /></div>
          <h2 className="serif" style={{ fontSize:'clamp(30px,6.5vw,46px)', lineHeight:1.08, fontWeight:500,
            color:P.ink, margin:'28px 0 0', letterSpacing:'-0.02em' }}>
            Your next great cup<br/>starts with a scan.
          </h2>
          <p className="serif" style={{ fontStyle:'italic', fontSize:19, color:P.stone,
            margin:'18px auto 0', maxWidth:440, lineHeight:1.5 }}>
            We're building something worth waiting for. Be the first to brew with 1518.
          </p>
          <div style={{ marginTop:36, display:'flex', justifyContent:'center' }}>
            <WaitlistInput centered />
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

Object.assign(window, {
  Hero, TheName, HowItWorks, FeatureScan, FeatureTimer, FeatureTasting, FeatureCodex, Origins, TheJourney, FinalCTA,
});