// Home + Schools + Product + Research + Company + Careers pages.

function useIsMobile(maxWidth = 720) {
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.matchMedia(`(max-width: ${maxWidth}px)`).matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
    const onChange = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  }, [maxWidth]);
  return isMobile;
}

function Hero({ onNav, onPilot }) {
  return (
    <section style={{padding:'80px 48px 48px',maxWidth:1280,margin:'0 auto',position:'relative'}}>
      <div style={{position:'absolute',right:-60,top:40,width:320,height:320,background:PALETTE.mustard,borderRadius:'50%',opacity:0.35,zIndex:0}}/>
      <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:64,alignItems:'center',position:'relative',zIndex:1}}>
        <div>
          <Eyebrow>A reading coach for any book</Eyebrow>
          <h1 style={{fontFamily:FONT_D,fontWeight:600,fontSize:72,lineHeight:1.02,letterSpacing:'-0.02em',color:PALETTE.ink,margin:'20px 0 0',textWrap:'balance',fontVariationSettings:'"opsz" 144'}}>Closing the<br/><em style={{color:PALETTE.coral,fontStyle:'italic'}}>reading gap</em>.</h1>
          <p style={{fontFamily:FONT_T,fontSize:20,lineHeight:1.55,color:PALETTE.ink2,maxWidth:520,marginTop:24}}>Child-centric smart glasses that turn any physical book into a personalized reading coach. Screen-free. Patient. Grows with the reader.</p>
          <div style={{display:'flex',gap:12,marginTop:36}}>
            <CtaPrimary onClick={onPilot}>Request a pilot</CtaPrimary>
            <CtaSecondary onClick={() => onNav('product')}>How it works</CtaSecondary>
          </div>
          <div style={{display:'flex',gap:28,marginTop:32,fontFamily:FONT_T,fontSize:14,color:PALETTE.ink3}}>
            <span>Built for K-6 classrooms</span>
          </div>
        </div>
        <img src="./assets/product-with-child.png" alt="Seymoura glasses and charging case" style={{width:'100%',aspectRatio:'4/5',objectFit:'cover',borderRadius:28,boxShadow:'0 24px 56px rgba(14,26,43,0.14)'}}/>
      </div>
    </section>
  );
}

function Problem() {
  const stats = [
    {n:'2 in 5', label:'U.S. fourth-graders read below a basic level — the worst result in over 20 years.', color:PALETTE.coral},
    {n:'4×', label:'more likely to drop out of high school if behind in reading by third grade.', color:PALETTE.navy},
    {n:'$2T', label:'estimated annual U.S. economic loss from U.S. literacy gap.', color:PALETTE.mustard600},
  ];
  return (
    <section style={{padding:'80px 48px',background:PALETTE.paper2,borderTop:`1px solid ${PALETTE.line}`,borderBottom:`1px solid ${PALETTE.line}`}}>
      <div style={{maxWidth:1280,margin:'0 auto'}}>
        <Eyebrow>The problem we're starting with</Eyebrow>
        <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:56,lineHeight:1.06,color:PALETTE.ink,maxWidth:900,margin:'16px 0 48px',textWrap:'balance'}}>Reading is the foundation — and it's collapsing.</h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>
          {stats.map(s => (
            <div key={s.n}>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:84,lineHeight:1,color:s.color,letterSpacing:'-0.02em'}}>{s.n}</div>
              <div style={{fontFamily:FONT_T,fontSize:16,lineHeight:1.5,color:PALETTE.ink2,marginTop:14,maxWidth:280}}>{s.label}</div>
            </div>
          ))}
        </div>
        <div style={{fontFamily:FONT_T,fontSize:13,color:PALETTE.ink3,marginTop:40,fontStyle:'italic'}}>Sources: NAEP 2024; Annie E. Casey Foundation; Gallup &amp; Barbara Bush Foundation for Family Literacy.</div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { icon:'eye', tag:'See', tagColor:PALETTE.coral, title:'It sees the page.', body:<>Real-time vision follows along silently — knows the book, the page, the word the child is on.</>, bg:PALETTE.coral50, border:PALETTE.coral200, iconBg:PALETTE.coral, iconColor:'#fff' },
    { icon:'ear', tag:'Hear', tagColor:PALETTE.mustard600, title:'It hears them read.', body:<>Follows every word as the child reads aloud — catching stumbles, pacing, the word they're on. And answers when asked: <em style={{fontStyle:'italic'}}>"What does lantern mean?"</em></>, bg:PALETTE.paper, border:PALETTE.mustard200, iconBg:PALETTE.mustard, iconColor:PALETTE.navy },
    { icon:'message-circle', tag:'Coach', tagColor:PALETTE.navy, title:'It coaches back.', body:<>Patient, curious, never frustrated. Nudges the next word, defines when asked, adapts as the child grows.</>, bg:PALETTE.navy100, border:PALETTE.navy200, iconBg:PALETTE.navy, iconColor:'#fff' },
  ];
  return (
    <section id="how-it-works" style={{background:PALETTE.mustard50,padding:'80px 48px'}}>
      <div style={{maxWidth:1280,margin:'0 auto'}}>
      <Eyebrow color={PALETTE.mustard600}>How it works</Eyebrow>
      <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.08,color:PALETTE.ink,maxWidth:900,margin:'16px 0 48px',textWrap:'balance'}}>Three essential things, done seamlessly, every time a child opens a book.</h2>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24}}>
        {steps.map(s => (
          <div key={s.tag} style={{padding:32,borderRadius:24,background:s.bg,border:`1px solid ${s.border}`}}>
            <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:20}}>
              <div style={{width:44,height:44,borderRadius:12,background:s.iconBg,color:s.iconColor,display:'flex',alignItems:'center',justifyContent:'center'}}>
                <i data-lucide={s.icon} style={{width:22,height:22}}></i>
              </div>
              <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:s.tagColor}}>{s.tag}</div>
            </div>
            <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:28,color:PALETTE.ink,marginBottom:10,letterSpacing:'-0.01em'}}>{s.title}</div>
            <div style={{fontFamily:FONT_T,fontSize:15,lineHeight:1.55,color:PALETTE.ink2}}>{s.body}</div>
          </div>
        ))}
      </div>
      </div>
    </section>
  );
}

function WhatWeDo() {
  const items = [
    { n:'01', title:'Personal reading coach', body:'One-on-one support across the full K-4 journey — from first sounds to first novels.' },
    { n:'02', title:'Reading intervention', body:'Real-time translation for ELLs. Structured Orton-Gillingham support for learning differences. Specialists get a dashboard for every student — progress, usage, recommended next steps.' },
    { n:'03', title:'Cross-subject reading', body:'For struggling readers, unblocks the text in subjects like math, science, history — at school and at home — gives no advantage beyond reading.' },
    { n:'04', title:'Reading accountability', body:'Live progress data and per-student scaffolding — so teachers can focus on the kids who need them.' },
  ];
  return (
    <section style={{padding:'80px 48px',maxWidth:1280,margin:'0 auto'}}>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1.1fr',gap:64,alignItems:'start'}}>
        <div>
          <Eyebrow>What we do</Eyebrow>
          <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:56,lineHeight:1.04,letterSpacing:'-0.02em',color:PALETTE.ink,margin:'16px 0 20px',textWrap:'balance'}}>For every reader.<br/>For every reading need.</h2>
          <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:460}}>One device, four roles — across the whole classroom.</p>
        </div>
        <div>
          {items.map((it, i) => (
            <div key={it.n} style={{display:'grid',gridTemplateColumns:'80px 1fr',gap:24,alignItems:'start',padding:'22px 0',borderTop:`1px solid ${PALETTE.line}`,...(i === items.length - 1 ? {borderBottom:`1px solid ${PALETTE.line}`} : {})}}>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:44,color:PALETTE.coral,lineHeight:0.95,letterSpacing:'-0.02em'}}>{it.n}</div>
              <div>
                <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:24,color:PALETTE.ink,marginBottom:6}}>{it.title}</div>
                <div style={{fontFamily:FONT_T,fontSize:15,lineHeight:1.55,color:PALETTE.ink2}}>{it.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ReaderModes() {
  const modes = [
    { n:'01', title:'Pre-readers',        body:'Reads any physical book aloud to the child — full expressive narration.',                                                                                                                                       accent:PALETTE.coral },
    { n:'02', title:'Early readers',      body:'Any book becomes interactive — the child points at a paragraph, and the coach reads just that part aloud.',                                                                                                    accent:PALETTE.mustard600 },
    { n:'03', title:'Learning readers',   body:'Listens as the child reads aloud — a read-along companion that gently corrects mistakes and coaches tricky words in real time. Checks comprehension with questions at the end.', tag:'Evidence-based reading support, in the child’s ear.', accent:PALETTE.navy },
    { n:'04', title:'Developing readers', body:'Point to any word on the page — the coach gives pronunciation and definition, in context, instantly.',                                                                                                         accent:PALETTE.ink },
  ];
  return (
    <section id="personal-reading-coach" style={{background:PALETTE.mustard50,padding:'80px 48px',scrollMarginTop:'88px'}}>
      <div style={{maxWidth:1280,margin:'0 auto'}}>
        <Eyebrow color={PALETTE.mustard600}>Personal reading coach</Eyebrow>
        <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.08,color:PALETTE.ink,maxWidth:960,margin:'16px 0 16px',textWrap:'balance'}}>A coach that grows with the reader — from first sounds to first novels.</h2>
        <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:760,margin:'0 0 48px'}}>Seymoura matches its approach to each child's reading level — and adapts as they grow.</p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20}}>
          {modes.map(m => (
            <div key={m.n} style={{position:'relative',padding:'32px 26px 28px',borderRadius:20,background:'#fff',border:`1px solid ${PALETTE.line}`,boxShadow:'0 1px 2px rgba(14,26,43,0.04)',display:'flex',flexDirection:'column',overflow:'hidden'}}>
              <div style={{position:'absolute',top:0,left:0,right:0,height:4,background:m.accent}}/>
              <div style={{display:'flex',alignItems:'baseline',gap:10,marginBottom:18}}>
                <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:12,letterSpacing:'0.22em',textTransform:'uppercase',color:m.accent}}>Stage</div>
                <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:36,color:m.accent,lineHeight:0.95,letterSpacing:'-0.02em'}}>{m.n}</div>
              </div>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:22,color:PALETTE.ink,marginBottom:8,lineHeight:1.15}}>{m.title}</div>
              <div style={{fontFamily:FONT_T,fontSize:14,lineHeight:1.5,color:PALETTE.ink2}}>{m.body}</div>
              {m.tag && (
                <div style={{marginTop:14,paddingTop:12,borderTop:`1px solid ${PALETTE.line}`,fontFamily:FONT_T,fontSize:13,fontStyle:'italic',color:PALETTE.ink3,lineHeight:1.4}}>{m.tag}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeProductCTA({ onNav }) {
  return (
    <section style={{padding:'24px 48px 96px',maxWidth:1280,margin:'0 auto'}}>
      <div style={{background:PALETTE.navy,borderRadius:28,padding:'56px 56px',display:'grid',gridTemplateColumns:'1.3fr auto',gap:40,alignItems:'center',position:'relative',overflow:'hidden'}}>
        <div style={{position:'absolute',right:-80,top:-80,width:280,height:280,background:PALETTE.mustard,borderRadius:'50%',opacity:0.18}}/>
        <div style={{position:'relative',zIndex:1}}>
          <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:PALETTE.mustard,marginBottom:14}}>See the product</div>
          <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:44,lineHeight:1.1,color:'#fff',maxWidth:680,textWrap:'balance',letterSpacing:'-0.01em'}}>Go deeper on the hardware, how it works, and how we handle privacy.</div>
        </div>
        <div style={{position:'relative',zIndex:1,display:'flex',gap:12}}>
          <button onClick={() => onNav('product')} style={{fontFamily:FONT_T,fontWeight:600,fontSize:15,background:PALETTE.coral,color:'#fff',border:0,borderRadius:999,padding:'14px 26px',cursor:'pointer',boxShadow:'0 6px 18px rgba(255,59,63,0.35)'}}>Explore the product →</button>
        </div>
      </div>
    </section>
  );
}

function ProductSchoolsCTA({ onNav }) {
  return (
    <section style={{padding:'24px 48px 96px',maxWidth:1280,margin:'0 auto'}}>
      <div style={{background:PALETTE.mustard200,borderRadius:28,padding:'56px 56px',display:'grid',gridTemplateColumns:'1.3fr auto',gap:40,alignItems:'center',position:'relative',overflow:'hidden'}}>
        <div style={{position:'absolute',right:-80,top:-80,width:280,height:280,background:PALETTE.coral,borderRadius:'50%',opacity:0.28}}/>
        <div style={{position:'relative',zIndex:1}}>
          <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:PALETTE.coral,marginBottom:14}}>For schools</div>
          <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:44,lineHeight:1.1,color:PALETTE.navy,maxWidth:680,textWrap:'balance',letterSpacing:'-0.01em'}}>Bring Seymoura to your classroom — one teacher, one measurable outcome at a time.</div>
        </div>
        <div style={{position:'relative',zIndex:1,display:'flex',gap:12}}>
          <button onClick={() => onNav('schools')} style={{fontFamily:FONT_T,fontWeight:600,fontSize:15,background:PALETTE.navy,color:'#fff',border:0,borderRadius:999,padding:'14px 26px',cursor:'pointer',boxShadow:'0 6px 18px rgba(0,42,92,0.35)'}}>For schools →</button>
        </div>
      </div>
    </section>
  );
}

function CrossSubjectReading() {
  const items = [
    {
      title: 'Across school subjects',
      body: 'Math word problems, science texts, history readings — when reading is the wall, every subject stalls.',
      seymoura: 'steps in only when reading is the blocker — and stays out of the way otherwise.',
    },
    {
      title: 'At home',
      body: 'Homework gets harder than it needs to be. Parents become unpaid tutors — or kids fall further behind.',
      seymoura: 'brings the same support home — so a child never gets stuck.',
    },
  ];
  return (
    <section id="cross-subject-reading" style={{padding:'80px 48px',maxWidth:1280,margin:'0 auto',scrollMarginTop:'88px'}}>
      <Eyebrow>Cross-subject reading</Eyebrow>
      <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.08,color:PALETTE.ink,maxWidth:960,margin:'16px 0 16px',textWrap:'balance'}}>Closes the gap before it compounds across years and subjects.</h2>
      <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:780,margin:'0 0 48px'}}>Seymoura keeps kids on pace in other subjects while their reading catches up.</p>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:28}}>
        {items.map(it => (
          <div key={it.title} style={{padding:'36px 36px',borderRadius:20,background:PALETTE.paper2,display:'flex',flexDirection:'column'}}>
            <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:28,color:PALETTE.ink,marginBottom:14,lineHeight:1.15}}>{it.title}</div>
            <div style={{fontFamily:FONT_T,fontSize:17,lineHeight:1.55,color:PALETTE.ink2}}>{it.body}</div>
            {it.seymoura && (
              <div style={{marginTop:'auto',paddingTop:18,borderTop:`1px solid ${PALETTE.navy200}`,fontFamily:FONT_T,fontSize:15,lineHeight:1.5,color:PALETTE.ink2}}>
                <span style={{color:PALETTE.navy,fontWeight:700}}>Seymoura</span> {it.seymoura}
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

function Schools({ onNav, onPilot }) {
  return (
    <>
      <section style={{padding:'72px 48px 40px',maxWidth:1280,margin:'0 auto'}}>
        <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:56,alignItems:'center'}}>
          <div>
            <Eyebrow>For schools</Eyebrow>
            <h1 style={{fontFamily:FONT_D,fontWeight:600,fontSize:64,lineHeight:1.04,color:PALETTE.ink,maxWidth:900,margin:'16px 0 20px',textWrap:'balance'}}>From one classroom to the district — one measurable outcome at a time.</h1>
            <p style={{fontFamily:FONT_T,fontSize:20,lineHeight:1.55,color:PALETTE.ink2,maxWidth:780,marginBottom:8}}>Start with a single teacher. Prove the outcome. Grow at whatever pace your district's procurement can absorb.</p>
          </div>
          <img
            src="./assets/schools-classroom.jpg"
            alt="A teacher reading with a small group of elementary students around a classroom table"
            style={{width:'100%',aspectRatio:'6/5',objectFit:'cover',objectPosition:'center 85%',borderRadius:28,boxShadow:'0 24px 56px rgba(14,26,43,0.14)',display:'block'}}
          />
        </div>
      </section>

      <SchoolsApproach onNav={onNav}/>
      <SchoolsEveryReader/>
      <SchoolsDashboard/>
      <SchoolsClosingGap/>
      <SchoolsGettingStarted onPilot={onPilot}/>
    </>
  );
}

function SchoolsEveryReader() {
  const groups = [
    {
      icon:'brain',
      tag:'Dyslexia & learning differences',
      tagColor:PALETTE.coral,
      title:'A patient coach for students who need one most.',
      points:[
        'Supports Orton-Gillingham and structured literacy — scaffolding configurable per student.',
        'Reports and dashboard for specialists: reading patterns, progress, and what to coach next.',
        'Every child gets a 1:1 coach on every page — even when a teacher or specialist can\'t be there.',
      ],
    },
    {
      icon:'languages',
      tag:'English language learners',
      tagColor:PALETTE.navy,
      title:'A bridge to English — without falling behind on content.',
      points:[
        'Real-time translation into the student\'s home language, and back again.',
        'Reads aloud, simplifies complex sentences, and clarifies unfamiliar terms in context.',
        'Keeps ELLs on pace across every subject — math, science, history, social studies, and beyond — while their English catches up.',
      ],
    },
  ];
  return (
    <section style={{padding:'80px 48px',maxWidth:1280,margin:'0 auto'}}>
      <Eyebrow>For every reader</Eyebrow>
      <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:48,lineHeight:1.08,color:PALETTE.ink,maxWidth:920,margin:'16px 0 16px',textWrap:'balance'}}>Specialist-ready support for dyslexia, learning differences, and ELLs.</h2>
      <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:820,margin:'0 0 40px'}}>Reading differences don't need to stall a child's learning. Seymoura gives specialists the surface they've wanted — and students the patient coach they need — without singling anyone out.</p>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:24}}>
        {groups.map(g => (
          <div key={g.tag} style={{padding:32,borderRadius:20,background:'#fff',border:`1px solid ${PALETTE.line}`}}>
            <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:14}}>
              <div style={{width:40,height:40,borderRadius:10,background:'#fff',border:`1px solid ${g.tagColor}33`,color:g.tagColor,display:'flex',alignItems:'center',justifyContent:'center'}}>
                <i data-lucide={g.icon} style={{width:20,height:20}}></i>
              </div>
              <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:12,letterSpacing:'0.12em',textTransform:'uppercase',color:g.tagColor}}>{g.tag}</div>
            </div>
            <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:24,color:PALETTE.ink,marginBottom:14,letterSpacing:'-0.01em',lineHeight:1.2}}>{g.title}</div>
            <ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:10}}>
              {g.points.map(p => (
                <li key={p} style={{display:'flex',gap:10,alignItems:'flex-start',fontFamily:FONT_T,fontSize:14.5,lineHeight:1.55,color:PALETTE.ink2}}>
                  <span style={{width:18,height:18,borderRadius:999,background:`${g.tagColor}15`,color:g.tagColor,display:'inline-flex',alignItems:'center',justifyContent:'center',flexShrink:0,marginTop:2}}>
                    <i data-lucide="check" style={{width:12,height:12}}></i>
                  </span>
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function SchoolsGettingStarted({ onPilot }) {
  const steps = [
    { n:'1', title:'Pilot classrooms', body:'One teacher, 12 weeks, shared report. Low-risk entry, no procurement cycle.', color:PALETTE.coral },
    { n:'2', title:'Specialist teams', body:'Reading specialists and ELL coordinators adopt for caseloads — measurable gains within a semester.', color:PALETTE.coral },
    { n:'3', title:'Whole-school', body:'Title I and IDEA purchase at the school level, paired with a formal efficacy study. Unit economics look like a curriculum spend.', color:PALETTE.coral },
    { n:'4', title:'District contract', body:'Multi-year agreements; the platform becomes the surface other apps build on.', color:PALETTE.navy },
  ];
  return (
    <section style={{background:PALETTE.paper2,borderTop:`1px solid ${PALETTE.line}`,padding:'88px 48px'}}>
      <div style={{maxWidth:1280,margin:'0 auto'}}>
        <Eyebrow>Getting started</Eyebrow>
        <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:48,lineHeight:1.08,color:PALETTE.ink,maxWidth:880,margin:'16px 0 16px',textWrap:'balance'}}>A path that grows at your district's pace.</h2>
        <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:780,marginBottom:48}}>Start small, prove the outcome, and expand when — and only when — the evidence warrants it.</p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:20,position:'relative',marginBottom:48}}>
          <div style={{position:'absolute',top:22,left:'6%',right:'6%',height:1,background:PALETTE.line}}/>
          {steps.map(s => (
            <div key={s.n} style={{position:'relative'}}>
              <div style={{width:44,height:44,borderRadius:999,background:s.color,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:FONT_D,fontWeight:600,fontSize:20,marginBottom:18}}>{s.n}</div>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:20,color:PALETTE.ink,marginBottom:8}}>{s.title}</div>
              <div style={{fontFamily:FONT_T,fontSize:14,lineHeight:1.55,color:PALETTE.ink2}}>{s.body}</div>
            </div>
          ))}
        </div>
        <div style={{display:'flex',gap:14,alignItems:'center',flexWrap:'wrap'}}>
          <CtaPrimary onClick={onPilot}>Request a pilot</CtaPrimary>
          <span style={{fontFamily:FONT_T,fontSize:14,color:PALETTE.ink3}}>Or email <a href="mailto:hello@seymoura.com" style={{color:PALETTE.ink2,textDecoration:'underline',textDecorationColor:PALETTE.line,textUnderlineOffset:3}}>hello@seymoura.com</a>.</span>
        </div>
      </div>
    </section>
  );
}

function SchoolsApproach({ onNav }) {
  const pillars = [
    { n:'01', title:'Aligned with the Science of Reading', body:'Support for every strand — phonological awareness, decoding, vocabulary, verbal reasoning — at every stage of reading.', link:{ label:'See more details →', page:'research' } },
    { n:'02', title:'Teachers are core', body:'The glasses scaffold instruction, they don\'t replace it. Teachers get time back to focus 1:1 where it matters most.' },
    { n:'03', title:'Support that gradually fades', body:'Transitional scaffolding, customizable per student, that recedes as reading skills grow.' },
    { n:'04', title:'Reading momentum', body:'Remove the friction that stops kids from reading — so they read more, in more places, for more reasons.' },
  ];
  return (
    <section style={{padding:'96px 48px',background:PALETTE.paper2,borderTop:`1px solid ${PALETTE.line}`,borderBottom:`1px solid ${PALETTE.line}`}}>
      <div style={{maxWidth:1180,margin:'0 auto'}}>
        <Eyebrow>Our approach</Eyebrow>
        <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.06,color:PALETTE.ink,maxWidth:880,margin:'16px 0 56px',textWrap:'balance'}}>Four principles that make the glasses a teaching tool — not a gadget.</h2>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'48px 64px'}}>
          {pillars.map(p => (
            <div key={p.n} style={{display:'grid',gridTemplateColumns:'64px 1fr',gap:20,alignItems:'baseline'}}>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:32,color:PALETTE.coral,letterSpacing:'-0.01em'}}>{p.n}</div>
              <div>
                <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:26,color:PALETTE.ink,lineHeight:1.2,marginBottom:10,letterSpacing:'-0.01em'}}>{p.title}</div>
                <div style={{fontFamily:FONT_T,fontSize:16,lineHeight:1.6,color:PALETTE.ink2,maxWidth:460}}>{p.body}</div>
                {p.link && (
                  <a onClick={() => onNav && onNav(p.link.page)} style={{display:'inline-block',fontFamily:FONT_T,fontSize:14,fontWeight:600,color:PALETTE.coral,cursor:'pointer',marginTop:10}}>{p.link.label}</a>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SchoolsClosingGap() {
  const classroom = [
    { icon:'book', title:'Learning to read', body:'Evidence-based reading support, delivered every time a child opens a book in class.' },
    { icon:'layers', title:'Across subjects', body:'Closes reading gaps in science, history, and social studies — where reading is the barrier, not the content.' },
  ];
  const home = [
    { icon:'clock', title:'Reading more, for fun', body:'Kids keep reading outside the classroom, on their own books — increasing time reading for fun.' },
    { icon:'house', title:'Homework independence', body:'Enables students to complete homework in other topics independently, without a parent on call.' },
  ];
  const Card = ({ it }) => (
    <div style={{padding:24,borderRadius:16,background:'#fff',border:`1px solid ${PALETTE.line}`,display:'flex',gap:16,alignItems:'flex-start'}}>
      <div style={{width:40,height:40,borderRadius:10,background:PALETTE.coral50,border:`1px solid ${PALETTE.coral200}`,color:PALETTE.coral,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
        <i data-lucide={it.icon} style={{width:20,height:20}}></i>
      </div>
      <div>
        <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:20,color:PALETTE.ink,marginBottom:6}}>{it.title}</div>
        <div style={{fontFamily:FONT_T,fontSize:14.5,lineHeight:1.55,color:PALETTE.ink2}}>{it.body}</div>
      </div>
    </div>
  );
  return (
    <section style={{padding:'80px 48px',maxWidth:1280,margin:'0 auto'}}>
      <Eyebrow>Closing the reading gap at your schools</Eyebrow>
      <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.06,color:PALETTE.ink,maxWidth:960,margin:'16px 0 16px',textWrap:'balance'}}>The same glasses. In the classroom. And at home.</h2>
      <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:780,margin:'0 0 48px'}}>The support a child gets at school travels home with them. That's how the gap closes — when the help is there every time a child picks up a book, not just during the reading block.</p>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:32}}>
        <div>
          <div style={{display:'flex',alignItems:'baseline',gap:12,marginBottom:20,paddingBottom:14,borderBottom:`2px solid ${PALETTE.coral}`}}>
            <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:28,color:PALETTE.ink,letterSpacing:'-0.01em'}}>In the classroom</div>
            <div style={{fontFamily:FONT_T,fontSize:13,color:PALETTE.ink3}}>School day</div>
          </div>
          <div style={{display:'grid',gap:16}}>
            {classroom.map(it => <Card key={it.title} it={it}/>)}
          </div>
        </div>
        <div>
          <div style={{display:'flex',alignItems:'baseline',gap:12,marginBottom:20,paddingBottom:14,borderBottom:`2px solid ${PALETTE.navy}`}}>
            <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:28,color:PALETTE.ink,letterSpacing:'-0.01em'}}>At home</div>
            <div style={{fontFamily:FONT_T,fontSize:13,color:PALETTE.ink3}}>After school</div>
          </div>
          <div style={{display:'grid',gap:16}}>
            {home.map(it => <Card key={it.title} it={it}/>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function SchoolsDashboard() {
  const students = [
    { name:'Aiyana R.', grade:'Gr. 2', minutes:38, miscues:6, trend:'+', level:'On level', levelColor:PALETTE.navy, accuracy:94 },
    { name:'Marcus T.', grade:'Gr. 2', minutes:42, miscues:14, trend:'+', level:'Approaching', levelColor:PALETTE.mustard600, accuracy:82 },
    { name:'Sofia L.', grade:'Gr. 2', minutes:51, miscues:3, trend:'+', level:'Above', levelColor:PALETTE.navy, accuracy:97 },
    { name:'Jayden K.', grade:'Gr. 2', minutes:22, miscues:19, trend:'−', level:'Needs support', levelColor:PALETTE.coral, accuracy:71 },
    { name:'Priya S.', grade:'Gr. 2', minutes:44, miscues:8, trend:'+', level:'On level', levelColor:PALETTE.navy, accuracy:91 },
    { name:'Luis E. (ELL)', grade:'Gr. 2', minutes:36, miscues:11, trend:'+', level:'Approaching', levelColor:PALETTE.mustard600, accuracy:85 },
  ];
  const barData = [6, 10, 8, 14, 11, 17, 22, 19, 24, 28, 26, 31];
  const max = Math.max(...barData);
  return (
    <section style={{padding:'80px 48px',background:PALETTE.navy,color:'#fff'}}>
      <div style={{maxWidth:1280,margin:'0 auto'}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.1fr',gap:48,alignItems:'center'}}>
          <div>
            <Eyebrow color={PALETTE.mustard}>Accountable reading</Eyebrow>
            <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.06,color:'#fff',margin:'16px 0 20px',textWrap:'balance'}}>Every child reading — and a dashboard that proves it.</h2>
            <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.6,color:'rgba(255,255,255,0.82)',marginBottom:28}}>Teachers can free up to focus 1:1 with advanced or struggling readers — while everyone else continues evidence-based, screen-free learning with physical books. The dashboard shows exactly what each child read, where they stumbled, and what to coach next.</p>
            <ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:14}}>
              {[
                'Minutes read, pages covered, words asked — per child, per day.',
                'Miscue patterns flagged by phoneme, grapheme, or sight word.',
                'Customizable scaffolding: set the type and amount of support per student.',
                'Specialist-ready reports for IEP reviews, ELL caseloads, and Orton-Gillingham alignment.',
              ].map(line => (
                <li key={line} style={{display:'flex',gap:12,alignItems:'flex-start',fontFamily:FONT_T,fontSize:15,lineHeight:1.55,color:'rgba(255,255,255,0.9)'}}>
                  <span style={{width:20,height:20,borderRadius:999,background:PALETTE.mustard,color:PALETTE.navy,display:'inline-flex',alignItems:'center',justifyContent:'center',flexShrink:0,marginTop:2}}>
                    <i data-lucide="check" style={{width:14,height:14}}></i>
                  </span>
                  <span>{line}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Dashboard mockup */}
          <div style={{background:'#fff',borderRadius:20,padding:24,color:PALETTE.ink,boxShadow:'0 30px 80px rgba(0,0,0,0.35)',fontFamily:FONT_T}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:18}}>
              <div>
                <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:20,color:PALETTE.ink}}>Ms. Alvarez · Room 212</div>
                <div style={{fontSize:12,color:PALETTE.ink3}}>Grade 2 · 24 students · This week</div>
              </div>
              <div style={{display:'flex',gap:6}}>
                {['Today','Week','Month'].map((t,i)=> (
                  <div key={t} style={{fontSize:12,fontWeight:600,padding:'6px 12px',borderRadius:999,background: i===1 ? PALETTE.navy : PALETTE.paper2, color: i===1 ? '#fff' : PALETTE.ink2}}>{t}</div>
                ))}
              </div>
            </div>

            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginBottom:18}}>
              {[
                { k:'Avg minutes / child', v:'37m', d:'+6m vs last week', pos:true },
                { k:'Class accuracy', v:'88%', d:'+2.3 pts', pos:true },
                { k:'Needs support', v:'3', d:'2 flagged today', pos:false },
              ].map(s => (
                <div key={s.k} style={{padding:14,borderRadius:12,background:PALETTE.paper2,border:`1px solid ${PALETTE.line}`}}>
                  <div style={{fontSize:11,color:PALETTE.ink3,textTransform:'uppercase',letterSpacing:'0.1em',fontWeight:600}}>{s.k}</div>
                  <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:28,color:PALETTE.ink,marginTop:4,letterSpacing:'-0.01em'}}>{s.v}</div>
                  <div style={{fontSize:11,color: s.pos ? '#0B7A3B' : PALETTE.coral,fontWeight:600,marginTop:2}}>{s.d}</div>
                </div>
              ))}
            </div>

            {/* mini chart */}
            <div style={{padding:14,borderRadius:12,background:PALETTE.paper2,border:`1px solid ${PALETTE.line}`,marginBottom:18}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
                <div style={{fontSize:12,fontWeight:600,color:PALETTE.ink}}>Reading minutes · past 12 weeks</div>
                <div style={{fontSize:11,color:PALETTE.ink3}}>Class avg</div>
              </div>
              <div style={{display:'flex',alignItems:'flex-end',gap:6,height:72}}>
                {barData.map((v,i) => (
                  <div key={i} style={{flex:1,height: `${(v/max)*100}%`,background: i >= barData.length-3 ? PALETTE.coral : PALETTE.navy200,borderRadius:3}}/>
                ))}
              </div>
            </div>

            {/* student table */}
            <div style={{fontSize:11,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:PALETTE.ink3,display:'grid',gridTemplateColumns:'1.6fr 1fr 1fr 1.2fr 0.8fr',gap:8,padding:'0 4px 8px',borderBottom:`1px solid ${PALETTE.line}`}}>
              <div>Student</div><div>Min</div><div>Miscues</div><div>Level</div><div style={{textAlign:'right'}}>Acc.</div>
            </div>
            {students.map(s => (
              <div key={s.name} style={{fontSize:13,display:'grid',gridTemplateColumns:'1.6fr 1fr 1fr 1.2fr 0.8fr',gap:8,padding:'10px 4px',borderBottom:`1px solid ${PALETTE.paper2}`,alignItems:'center'}}>
                <div>
                  <div style={{fontWeight:600,color:PALETTE.ink}}>{s.name}</div>
                  <div style={{fontSize:11,color:PALETTE.ink3}}>{s.grade}</div>
                </div>
                <div style={{color:PALETTE.ink2}}>{s.minutes}m</div>
                <div style={{color:PALETTE.ink2,display:'flex',alignItems:'center',gap:6}}>
                  {s.miscues}
                  <span style={{fontSize:11,color: s.trend === '+' ? '#0B7A3B' : PALETTE.coral,fontWeight:700}}>{s.trend}</span>
                </div>
                <div>
                  <span style={{fontSize:11,fontWeight:600,padding:'3px 8px',borderRadius:999,background:`${s.levelColor}18`,color:s.levelColor}}>{s.level}</span>
                </div>
                <div style={{textAlign:'right',fontWeight:600,color:PALETTE.ink}}>{s.accuracy}%</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SchoolsScienceSummary() {
  const pillars = [
    { label:'Phonological awareness', icon:'audio-lines', body:'Real-time miscue prompts — "check the first sound," "blend it" — direct attention to phonemes to self-correct.' },
    { label:'Decoding (phonics)', icon:'spell-check', body:'When a child stalls or substitutes, prompts cue grapheme–phoneme application; the model then provides the correct decoding.' },
    { label:'Sight recognition', icon:'eye', body:'Repeated correct self-corrections on the same word accelerate orthographic mapping toward instant recognition.' },
    { label:'Vocabulary', icon:'book-marked', body:'Point-to-word gives pronunciation and definition at the moment of need — fast mapping in context.' },
    { label:'Language structures', icon:'braces', body:'Chunked re-reads after tough sentences encourage phrasing at clause boundaries.' },
    { label:'Verbal reasoning', icon:'message-circle-question', body:'Brief comprehension checks and definition replays support inference and figurative language.' },
    { label:'Background knowledge', icon:'globe', body:'Print-aligned read-aloud lets children access books beyond their decoding level, growing world and topic knowledge.' },
    { label:'Literacy knowledge', icon:'book-open', body:'Print concepts — directionality, line tracking, page turns — reinforced every time a child opens a book.' },
  ];
  return (
    <section style={{padding:'80px 48px',maxWidth:1280,margin:'0 auto'}}>
      <div style={{display:'flex',alignItems:'flex-end',justifyContent:'space-between',gap:32,marginBottom:40,flexWrap:'wrap'}}>
        <div style={{maxWidth:760}}>
          <Eyebrow>How we support the Science of Reading</Eyebrow>
          <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:48,lineHeight:1.08,color:PALETTE.ink,margin:'16px 0 16px',textWrap:'balance'}}>Every strand of the reading rope — supported at every stage.</h2>
          <p style={{fontFamily:FONT_T,fontSize:17,lineHeight:1.55,color:PALETTE.ink2}}>The glasses adapt their support across the full reading rope — from phonological awareness through verbal reasoning — and shift the kind of help they give as the child moves from pre-reader to early reader to developing reader.</p>
        </div>
        <a onClick={() => { localStorage.setItem('seymoura_mkt_page','research'); location.reload(); }} style={{fontFamily:FONT_T,fontSize:14,fontWeight:600,color:PALETTE.coral,cursor:'pointer'}}>See more details →</a>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:16}}>
        {pillars.map(p => (
          <div key={p.label} style={{padding:22,borderRadius:16,background:PALETTE.paper,border:`1px solid ${PALETTE.line}`}}>
            <div style={{width:36,height:36,borderRadius:10,background:PALETTE.mustard50,border:`1px solid ${PALETTE.mustard200}`,color:PALETTE.mustard600,display:'flex',alignItems:'center',justifyContent:'center',marginBottom:14}}>
              <i data-lucide={p.icon} style={{width:18,height:18}}></i>
            </div>
            <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:17,color:PALETTE.navy,marginBottom:6,lineHeight:1.2}}>{p.label}</div>
            <div style={{fontFamily:FONT_T,fontSize:13.5,lineHeight:1.5,color:PALETTE.ink2}}>{p.body}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

const RESEARCH_STRANDS = [
  {
    label:'Phonological awareness', icon:'audio-lines', group:'Word recognition',
    summary:'Hearing, isolating, and manipulating the sounds within words — the prerequisite to decoding.',
    stages:[
      { s:'Pre-readers', note:'Indirect support.', body:'Accurate read-aloud models highlight the sounds within words, though without an explicit feedback loop.' },
      { s:'Early readers', note:'Core strength.', body:'Real-time miscue prompts — "check the first sound," "blend it" — focus attention on phonemes so the child can self-correct.' },
      { s:'Developing readers', body:'Hearing the isolated word on request reinforces the target sounds the child is trying to produce.' },
    ],
  },
  {
    label:'Decoding (phonics)', icon:'spell-check', group:'Word recognition',
    summary:'Applying letter–sound correspondences to read unfamiliar words.',
    stages:[
      { s:'Pre-readers', note:'Indirect support.', body:'Seeing print while hearing the word sensitizes children to letter–sound patterns, but this is not explicit phonics.' },
      { s:'Early readers', note:'Core strength.', body:'When a child stalls or substitutes, prompts cue grapheme–phoneme application; the model then provides the correct decoding immediately.' },
      { s:'Developing readers', body:'Point-to-read gives instant pronunciation at the precise word, supporting error correction and letter–sound mapping.' },
    ],
  },
  {
    label:'Sight recognition', icon:'eye', group:'Word recognition',
    summary:'Building the bank of words a child reads instantly, without effortful decoding.',
    stages:[
      { s:'Pre-readers', note:'Indirect support.', body:'Repeated exposure may help, but true orthographic mapping mainly comes with active decoding.' },
      { s:'Early readers', body:'Repeated, correct self-corrections on the same word accelerate orthographic mapping toward instant recognition.' },
      { s:'Developing readers', body:'A stable page plus repeated accurate pairings — same letters to same sounds — consolidate words into sight vocabulary.' },
    ],
  },
  {
    label:'Vocabulary', icon:'book-marked', group:'Language comprehension',
    summary:'Growing the words a child knows, and how they map to meaning in context.',
    stages:[
      { s:'Pre-readers', note:'Core strength.', body:'Hearing words in context, with optional definitions, builds vocabulary and word meanings.' },
      { s:'Early readers', body:'When a miscue is an unknown word, a quick prompt, correct model, and optional definition strengthen form–meaning links.' },
      { s:'Developing readers', note:'Core strength.', body:'Point-to-word gives instant pronunciation and definition at the moment of need — fast mapping, in context.' },
    ],
  },
  {
    label:'Language structures', icon:'braces', group:'Language comprehension',
    summary:'Syntax and semantics — how sentences are built and what they mean together.',
    stages:[
      { s:'Pre-readers', body:'Hearing fluent, modeled reading exposes students to varied sentence patterns and prosody — how sentences "sound."' },
      { s:'Early readers', body:'After a tough sentence, chunked re-reads encourage phrasing at clause boundaries.' },
      { s:'Developing readers', body:'Definitions and replays clarify meaning in complex sentences.' },
    ],
  },
  {
    label:'Verbal reasoning', icon:'message-circle-question', group:'Language comprehension',
    summary:'Inference, figurative language, and the "why" behind the text.',
    stages:[
      { s:'Pre-readers', body:'End-of-book questions and activities support inference, cause–effect, and "why" reasoning.' },
      { s:'Early readers', body:'Brief comprehension checks after a correction — "Does that make sense now?" — reinforce inference.' },
      { s:'Developing readers', body:'Definitions plus a targeted re-read support interpreting figurative or polysemous words.' },
    ],
  },
  {
    label:'Background knowledge', icon:'globe', group:'Language comprehension',
    summary:'The world and topic knowledge a child brings to what they read.',
    stages:[
      { s:'Pre-readers', note:'Core strength.', body:'Print-aligned read-aloud lets children access richer books than they can decode, growing world and topic knowledge.' },
      { s:'Early readers', body:'Re-reads of the same text after word-level coaching deepen content understanding.' },
      { s:'Developing readers', body:'Point-for-help on domain words (e.g., photosynthesis) keeps momentum and preserves content access.' },
    ],
  },
  {
    label:'Literacy knowledge', icon:'book-open', group:'Language comprehension',
    summary:'Print concepts, genres, and on-page navigation.',
    stages:[
      { s:'Pre-readers', note:'Core strength.', body:'Print-aligned read-aloud reinforces directionality, line tracking, page-turns, and genre exposure.' },
      { s:'Early readers', body:'Following along while reading aloud reinforces text-navigation conventions.' },
      { s:'Developing readers', body:'Pointing to specific words strengthens word boundaries and on-page navigation.' },
    ],
  },
];
const RESEARCH_STAGE_COLOR = {
  'Pre-readers':'#D19A1F',
  'Early readers':'#FF3B3F',
  'Developing readers':'#002A5C',
};
function StrandDetail({ st }) {
  const stageColor = RESEARCH_STAGE_COLOR;
  return (
    <div style={{display:'grid',gap:10}}>
      {st.stages.map(stg => (
        <div key={stg.s} style={{display:'grid',gridTemplateColumns:'140px 1fr',gap:14,padding:'12px 14px',borderRadius:10,background:'#F7F2E9',borderLeft:`3px solid ${stageColor[stg.s]}`}}>
          <div>
            <div style={{fontFamily:'Poppins, sans-serif',fontWeight:700,fontSize:12,letterSpacing:'0.08em',textTransform:'uppercase',color:stageColor[stg.s]}}>{stg.s}</div>
            {stg.note && <div style={{fontFamily:'Poppins, sans-serif',fontSize:11,color:'#6F7A8A',marginTop:4,fontStyle:'italic'}}>{stg.note}</div>}
          </div>
          <div style={{fontFamily:'Poppins, sans-serif',fontSize:14,lineHeight:1.55,color:'#3A4656'}}>{stg.body}</div>
        </div>
      ))}
    </div>
  );
}

function CoreChip({ st }) {
  const cores = st.stages.filter(stg => stg.note === 'Core strength.');
  if (!cores.length) return null;
  return (
    <React.Fragment>
      {cores.map(core => (
        <span key={core.s} style={{display:'inline-flex',alignItems:'center',gap:6,fontFamily:'Poppins, sans-serif',fontWeight:700,fontSize:11,letterSpacing:'0.08em',textTransform:'uppercase',color:RESEARCH_STAGE_COLOR[core.s],background:'#fff',border:`1px solid ${RESEARCH_STAGE_COLOR[core.s]}33`,padding:'4px 10px',borderRadius:999}}>
          <span style={{width:6,height:6,borderRadius:999,background:RESEARCH_STAGE_COLOR[core.s]}}/>
          Core for {core.s}
        </span>
      ))}
    </React.Fragment>
  );
}

function Research() {
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  return (
    <section style={{padding:'72px 48px',maxWidth:1280,margin:'0 auto'}}>
      <Eyebrow>Research</Eyebrow>
      <h1 style={{fontFamily:FONT_D,fontWeight:600,fontSize:56,lineHeight:1.05,color:PALETTE.ink,maxWidth:820,margin:'16px 0 20px',textWrap:'balance'}}>Aligned with the Science of Reading. Grounded in the evidence.</h1>
      <p style={{fontFamily:FONT_T,fontSize:19,lineHeight:1.55,color:PALETTE.ink2,maxWidth:820,marginBottom:40}}>Seymoura supports the full reading rope — from print concepts and phonological awareness, through decoding and sight recognition, to vocabulary, syntax, inference, and background knowledge.</p>

      <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:36,lineHeight:1.1,color:PALETTE.ink,margin:'0 0 8px',letterSpacing:'-0.01em'}}>Every strand of the reading rope</h2>
      <p style={{fontFamily:FONT_T,fontSize:16,lineHeight:1.55,color:PALETTE.ink2,maxWidth:760,margin:'0 0 28px'}}>Click any strand to see exactly how the glasses support it across pre-readers, early readers, and developing readers.</p>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:14,alignItems:'start'}}>
        {RESEARCH_STRANDS.map(st => {
          const isOpen = open === st.label;
          return (
            <div key={st.label} style={{borderRadius:16,border:`1px solid ${isOpen?PALETTE.navy200:PALETTE.line}`,background:'#fff',overflow:'hidden',transition:'border-color 180ms'}}>
              <button
                onClick={() => setOpen(isOpen ? null : st.label)}
                style={{width:'100%',minHeight:140,textAlign:'left',padding:'18px 20px',background:'transparent',border:0,cursor:'pointer',display:'grid',gridTemplateColumns:'44px 1fr auto',gap:14,alignItems:'flex-start'}}
              >
                <div style={{width:44,height:44,borderRadius:12,background:PALETTE.coral50,border:`1px solid ${PALETTE.coral200}`,color:PALETTE.coral,display:'flex',alignItems:'center',justifyContent:'center'}}>
                  <i data-lucide={st.icon} style={{width:22,height:22}}></i>
                </div>
                <div style={{minWidth:0}}>
                  <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:18,color:PALETTE.navy,letterSpacing:'-0.01em'}}>{st.label}</div>
                  <div style={{fontFamily:FONT_T,fontSize:13,color:PALETTE.ink2,lineHeight:1.5,marginTop:6}}>{st.summary}</div>
                  {st.stages.some(stg => stg.note === 'Core strength.') && (
                    <div style={{display:'flex',gap:6,flexWrap:'wrap',marginTop:12}}><CoreChip st={st}/></div>
                  )}
                </div>
                <div style={{color:PALETTE.ink3,transform:isOpen?'rotate(180deg)':'none',transition:'transform 180ms',marginTop:12}}>
                  <i data-lucide="chevron-down" style={{width:18,height:18}}></i>
                </div>
              </button>
              {isOpen && (
                <div style={{padding:'4px 20px 20px'}}>
                  <StrandDetail st={st}/>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div style={{marginTop:56,padding:'24px 28px',background:PALETTE.navy100,borderRadius:16,border:`1px solid ${PALETTE.navy200}`,display:'flex',gap:18,alignItems:'flex-start'}}>
        <div style={{width:40,height:40,borderRadius:10,background:PALETTE.navy,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
          <i data-lucide="info" style={{width:20,height:20}}></i>
        </div>
        <div style={{fontFamily:FONT_T,fontSize:14.5,lineHeight:1.6,color:PALETTE.ink2}}>
          The Science of Reading is not a program — it's a converging body of research on how the brain learns to read. Seymoura does not replace teacher-led instruction; it extends the patient, responsive coaching a skilled adult provides to every page, every book, every child. Specialists supporting Orton-Gillingham, structured literacy, and ELL learners can configure the support and scaffolding per student.
        </div>
      </div>
    </section>
  );
}

function FounderTrackRecord() {
  const logos = [
    { name:'Google', src:'logos/google.svg', h:40 },
    { name:'MIT', src:'logos/mit.svg', h:52 },
    { name:'Motorola', src:'logos/motorola.svg', h:32 },
    { name:'The Home Depot', src:'logos/homedepot.svg', h:54 },
  ];
  return (
    <div style={{margin:'48px 0 0',padding:'36px 40px',background:PALETTE.paper2,borderRadius:20,border:`1px solid ${PALETTE.line}`}}>
      <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:11,letterSpacing:'0.16em',textTransform:'uppercase',color:PALETTE.ink3,marginBottom:28,textAlign:'center'}}>Founders have built at</div>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-around',flexWrap:'wrap',gap:40,rowGap:24}}>
        {logos.map(l => (
          <img key={l.name} src={l.src} alt={l.name} title={l.name} style={{height:l.h,width:'auto',display:'block'}}/>
        ))}
      </div>
    </div>
  );
}

function Company() {
  return (
    <section style={{padding:'72px 48px',maxWidth:1080,margin:'0 auto'}}>
      <Eyebrow>Company</Eyebrow>
      <h1 style={{fontFamily:FONT_D,fontWeight:600,fontSize:56,lineHeight:1.05,color:PALETTE.ink,margin:'16px 0 24px',textWrap:'balance'}}>Two founders who have already shipped this pattern.</h1>
      <p style={{fontFamily:FONT_T,fontSize:19,lineHeight:1.6,color:PALETTE.ink2,marginBottom:32}}>Consumer software that kids actually use. Screen-free educational hardware that ships at scale. Both, done before — now pointed at reading.</p>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:28}}>
        <div style={{padding:32,borderRadius:24,background:'#fff',border:`1px solid ${PALETTE.line}`}}>
          <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:16}}>
            <div style={{width:52,height:52,borderRadius:999,background:PALETTE.coral,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:FONT_D,fontWeight:600,fontSize:18}}>YB</div>
            <div>
              <a href="https://www.linkedin.com/in/yaronbinur/" target="_blank" rel="noopener" style={{fontFamily:FONT_D,fontWeight:600,fontSize:22,color:PALETTE.ink,textDecoration:'underline',textDecorationColor:PALETTE.line,textUnderlineOffset:3}}>Yaron Binur</a>
              <div style={{fontFamily:FONT_T,fontSize:13,color:PALETTE.coral,fontWeight:600}}>Co-founder &amp; CEO</div>
            </div>
          </div>
          <p style={{fontFamily:FONT_T,fontSize:14,lineHeight:1.55,color:PALETTE.ink2}}>Builder and entrepreneur who has spent 20 years at the intersection of consumer tech and education. Leads Seymoura's software, model, sales and product work.</p>
        </div>
        <div style={{padding:32,borderRadius:24,background:'#fff',border:`1px solid ${PALETTE.line}`}}>
          <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:16}}>
            <div style={{width:52,height:52,borderRadius:999,background:PALETTE.navy,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:FONT_D,fontWeight:600,fontSize:18}}>WW</div>
            <div>
              <a href="https://www.linkedin.com/in/dr-wu-wen-liang-328b1a/" target="_blank" rel="noopener" style={{fontFamily:FONT_D,fontWeight:600,fontSize:22,color:PALETTE.ink,textDecoration:'underline',textDecorationColor:PALETTE.line,textUnderlineOffset:3}}>Dr. Wen-Liang Wu</a>
              <div style={{fontFamily:FONT_T,fontSize:13,color:PALETTE.navy,fontWeight:600}}>Co-founder</div>
            </div>
          </div>
          <p style={{fontFamily:FONT_T,fontSize:14,lineHeight:1.55,color:PALETTE.ink2}}>Three decades building wireless consumer devices at scale. Has already shipped a screen-free educational hardware product — the exact pattern Seymoura is taking to reading. Leads Seymoura's smart glasses hardware product and supply chain.</p>
        </div>
      </div>

      <FounderTrackRecord/>

      <div id="careers" style={{marginTop:80,scrollMarginTop:'88px'}}>
        <Eyebrow>Careers</Eyebrow>
        <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:44,lineHeight:1.08,color:PALETTE.ink,margin:'16px 0 16px',textWrap:'balance'}}>Help us put a reading coach on every child.</h2>
        <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.6,color:PALETTE.ink2,maxWidth:760,marginBottom:32}}>We're a small team of builders with a decade-long memory for what ships. If you want your work to land in a real classroom — with a real child, a real book, and a real outcome — this is the place.</p>
        <div style={{borderTop:`1px solid ${PALETTE.line}`}}>
          <a style={{display:'grid',gridTemplateColumns:'140px 1fr auto',gap:24,alignItems:'center',padding:'24px 0',borderBottom:`1px solid ${PALETTE.line}`,cursor:'pointer'}}>
            <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase',color:PALETTE.coral}}>Literacy</div>
            <div>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:22,color:PALETTE.ink}}>Head of Literacy &amp; Curriculum</div>
              <div style={{fontFamily:FONT_T,fontSize:14,color:PALETTE.ink3,marginTop:2}}>Full-time · NYC / Remote US</div>
            </div>
            <div style={{fontFamily:FONT_T,fontSize:14,color:PALETTE.navy,fontWeight:600}}>Apply →</div>
          </a>
        </div>
        <div style={{marginTop:32,padding:24,background:PALETTE.paper2,borderRadius:20,fontFamily:FONT_T,fontSize:15,color:PALETTE.ink2,lineHeight:1.6}}>Don't see your role? Write us at <a href="mailto:hello@seymoura.com" style={{color:PALETTE.coral,textDecoration:'none',fontWeight:600}}>hello@seymoura.com</a> — we are always looking for thoughtful people.</div>
      </div>
    </section>
  );
}

function ProductHeader() {
  return (
    <section style={{padding:'72px 48px 24px',maxWidth:1280,margin:'0 auto'}}>
      <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:64,alignItems:'center'}}>
        <div>
          <Eyebrow>Product</Eyebrow>
          <h1 style={{fontFamily:FONT_D,fontWeight:600,fontSize:64,lineHeight:1.04,color:PALETTE.ink,maxWidth:900,margin:'16px 0 20px',textWrap:'balance'}}>Child-centric smart glasses that turn any physical book into a reading coach.</h1>
          <p style={{fontFamily:FONT_T,fontSize:20,lineHeight:1.55,color:PALETTE.ink2,maxWidth:760}}>Screen-free. Patient. Grows with the reader. The glasses adapt to where the child is today — and change as they grow.</p>
        </div>
        <div style={{position:'relative',borderRadius:28,overflow:'hidden',background:PALETTE.paper2,width:'100%',paddingBottom:'66.67%',boxShadow:'0 24px 56px rgba(14,26,43,0.12)'}}>
          <video
            src="./assets/product-hero.mp4"
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',background:PALETTE.paper2,display:'block'}}
          />
        </div>
      </div>
    </section>
  );
}

function ProductVideo() {
  return (
    <section style={{padding:'24px 48px 72px',maxWidth:1280,margin:'0 auto'}}>
      <div style={{position:'relative',borderRadius:24,overflow:'hidden',background:PALETTE.navy,boxShadow:'0 30px 80px rgba(14,26,43,0.22)',aspectRatio:'16/9'}}>
        <iframe
          src="https://www.youtube-nocookie.com/embed/qmZiwH9Wqnw?rel=0"
          title="Seymoura demo"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
          style={{position:'absolute',inset:0,width:'100%',height:'100%',border:0,background:'#000'}}
        />
      </div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginTop:16,flexWrap:'wrap',gap:12}}>
        <div style={{fontFamily:FONT_T,fontSize:13,color:PALETTE.ink3,letterSpacing:'0.08em',textTransform:'uppercase',fontWeight:600}}>See it in action · 90 seconds</div>
        <a href="https://youtu.be/qmZiwH9Wqnw" target="_blank" rel="noopener" style={{fontFamily:FONT_T,fontSize:14,color:PALETTE.coral,fontWeight:600,textDecoration:'none'}}>Watch on YouTube →</a>
      </div>
    </section>
  );
}

function ProductHardware() {
  const isMobile = useIsMobile(820);
  // Callouts positioned around a central product image.
  // `pin` is the pin point on the image (% coords within the image box).
  // `side` controls which side of the diagram the label sits.
  // `labelY` is the vertical position of the label card (% of container).
  const callouts = [
    {
      side:'left', labelY:8,
      pin:{x:34, y:63},
      tag:'Camera', icon:'camera',
      title:'Wide-angle lens',
      body:'Reads any physical book in real time. Follows the page, not the room.',
    },
    {
      side:'left', labelY:58,
      pin:{x:8, y:58},
      tag:'Mic', icon:'mic',
      title:'Directional, multi-mic array',
      body:'Captures the child\'s voice with noise suppression — even in a busy classroom.',
    },
    {
      side:'right', labelY:4,
      pin:{x:54, y:24},
      tag:'AI chip + battery', icon:'cpu',
      title:'Local AI. All-day battery.',
      body:'On-device inference for privacy. An external pack sized for a full school day.',
    },
    {
      side:'right', labelY:58,
      pin:{x:82, y:62},
      tag:'Speaker', icon:'volume-2',
      title:'Focused directional audio',
      body:'Aimed at the child\'s ears, not the next desk over.',
    },
  ];

  // Square image box centered in a 1100×680 container.
  const W = 1100, H = 680;
  const imgBox = { x:270, y:60, w:560, h:560 };
  const labelW = 270;

  const enriched = callouts.map(c => {
    const pinPx = {
      x: imgBox.x + (imgBox.w * c.pin.x/100),
      y: imgBox.y + (imgBox.h * c.pin.y/100),
    };
    const labelX = c.side === 'left' ? 0 : W - labelW;
    const labelY = (H * c.labelY/100);
    const anchor = {
      x: c.side === 'left' ? labelX + labelW : labelX,
      y: labelY + 36,
    };
    return { ...c, pinPx, labelX, labelY, anchor };
  });

  if (isMobile) {
    return (
      <section id="hardware" style={{padding:'80px 48px',maxWidth:1280,margin:'0 auto'}}>
        <Eyebrow>The hardware</Eyebrow>
        <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.06,color:PALETTE.ink,maxWidth:900,margin:'16px 0 16px',textWrap:'balance'}}>Designed to fade into the reading.</h2>
        <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:780,margin:'0 0 24px'}}>Every part is chosen to do one thing quietly and reliably — see the page, hear the question, whisper back.</p>
        <img src="./assets/product-center.png" alt="Seymoura glasses and charging case" style={{width:'100%',maxWidth:420,margin:'16px auto 28px',display:'block'}}/>
        <div style={{display:'grid',gap:14}}>
          {callouts.map(c => (
            <div key={c.tag} style={{padding:'18px 20px',background:PALETTE.paper,border:`1px solid ${PALETTE.line}`,borderRadius:14,boxShadow:'0 6px 20px rgba(14,26,43,0.04)'}}>
              <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
                <div style={{width:30,height:30,borderRadius:8,background:PALETTE.coral50,border:`1px solid ${PALETTE.coral200}`,color:PALETTE.coral,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                  <i data-lucide={c.icon} style={{width:15,height:15}}></i>
                </div>
                <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase',color:PALETTE.coral}}>{c.tag}</div>
              </div>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:17,color:PALETTE.ink,marginBottom:6,letterSpacing:'-0.01em',lineHeight:1.25}}>{c.title}</div>
              <div style={{fontFamily:FONT_T,fontSize:13,lineHeight:1.5,color:PALETTE.ink2}}>{c.body}</div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  return (
    <section id="hardware" style={{padding:'80px 48px',maxWidth:1280,margin:'0 auto'}}>
      <Eyebrow>The hardware</Eyebrow>
      <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.06,color:PALETTE.ink,maxWidth:900,margin:'16px 0 16px',textWrap:'balance'}}>Designed to fade into the reading.</h2>
      <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.55,color:PALETTE.ink2,maxWidth:780,margin:'0 0 24px'}}>Every part is chosen to do one thing quietly and reliably — see the page, hear the question, whisper back.</p>

      <div style={{position:'relative',width:'100%',maxWidth:W,margin:'0 auto',aspectRatio:`${W} / ${H}`}}>
        <img
          src="./assets/product-center.png"
          alt="Seymoura glasses and charging case"
          style={{
            position:'absolute',
            left:`${(imgBox.x/W)*100}%`,
            top:`${(imgBox.y/H)*100}%`,
            width:`${(imgBox.w/W)*100}%`,
            height:`${(imgBox.h/H)*100}%`,
            objectFit:'contain',
          }}
        />

        <svg viewBox={`0 0 ${W} ${H}`} style={{position:'absolute',inset:0,width:'100%',height:'100%',pointerEvents:'none'}} preserveAspectRatio="none">
          {enriched.map((c,i) => {
            const elbowX = c.side === 'left' ? c.pinPx.x - 36 : c.pinPx.x + 36;
            return (
              <g key={i}>
                <path
                  d={`M ${c.anchor.x} ${c.anchor.y} L ${elbowX} ${c.anchor.y} L ${c.pinPx.x} ${c.pinPx.y}`}
                  fill="none"
                  stroke={PALETTE.ink3}
                  strokeWidth="1.25"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <circle cx={c.pinPx.x} cy={c.pinPx.y} r="5" fill={PALETTE.coral} stroke="#fff" strokeWidth="2"/>
              </g>
            );
          })}
        </svg>

        {enriched.map((c,i) => (
          <div
            key={i}
            style={{
              position:'absolute',
              left:`${(c.labelX/W)*100}%`,
              top:`${(c.labelY/H)*100}%`,
              width:`${(labelW/W)*100}%`,
              padding:'16px 18px',
              background:PALETTE.paper,
              border:`1px solid ${PALETTE.line}`,
              borderRadius:14,
              boxShadow:'0 6px 20px rgba(14,26,43,0.05)',
              textAlign: c.side === 'left' ? 'right' : 'left',
            }}
          >
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8,flexDirection: c.side === 'left' ? 'row-reverse' : 'row'}}>
              <div style={{width:30,height:30,borderRadius:8,background:PALETTE.coral50,border:`1px solid ${PALETTE.coral200}`,color:PALETTE.coral,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                <i data-lucide={c.icon} style={{width:15,height:15}}></i>
              </div>
              <div style={{fontFamily:FONT_T,fontWeight:700,fontSize:11,letterSpacing:'0.14em',textTransform:'uppercase',color:PALETTE.coral}}>{c.tag}</div>
            </div>
            <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:17,color:PALETTE.ink,marginBottom:6,letterSpacing:'-0.01em',lineHeight:1.25}}>{c.title}</div>
            <div style={{fontFamily:FONT_T,fontSize:13,lineHeight:1.5,color:PALETTE.ink2}}>{c.body}</div>
          </div>
        ))}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginTop:16,paddingTop:32,borderTop:`1px solid ${PALETTE.line}`}}>
        {[
          { icon:'glasses', title:'Kid-sized, kid-safe frame', body:'Lightweight, durable, sized for ages 4–10 — actually worn, not just tolerated.' },
          { icon:'smartphone', title:'Flexible home use', body:'At home, the glasses pair to a parent\'s phone for easy setup and shared reports.' },
        ].map(f => (
          <div key={f.title} style={{display:'flex',gap:14,alignItems:'flex-start'}}>
            <div style={{width:36,height:36,borderRadius:10,background:PALETTE.navy100,border:`1px solid ${PALETTE.navy200}`,color:PALETTE.navy,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <i data-lucide={f.icon} style={{width:18,height:18}}></i>
            </div>
            <div>
              <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:18,color:PALETTE.ink,marginBottom:4}}>{f.title}</div>
              <div style={{fontFamily:FONT_T,fontSize:14,lineHeight:1.5,color:PALETTE.ink2}}>{f.body}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ProductPrivacy() {
  const items = [
    { icon:'shield-check', title:'On-device first', body:'The glasses do as much work locally as they can. Less data leaves the device; less lives in the cloud.' },
    { icon:'eye-off', title:'No video of the child kept', body:'Frames from a child\'s reading are processed in the moment to follow the page, then discarded. No photos or recordings of the child or the room.' },
    { icon:'ban', title:'No ads, no training on kids', body:'We don\'t sell ads. We don\'t train models on a child\'s voice or reading.' },
    { icon:'file-text', title:'Schools in control', body:'Delete data anytime. Export anytime. See exactly what the coach said.' },
  ];
  return (
    <section id="privacy" style={{background:PALETTE.navy,padding:'80px 48px'}}>
      <div style={{maxWidth:1280,margin:'0 auto'}}>
        <Eyebrow color={PALETTE.mustard}>Child safety &amp; privacy</Eyebrow>
        <h2 style={{fontFamily:FONT_D,fontWeight:600,fontSize:52,lineHeight:1.06,color:'#fff',maxWidth:960,margin:'16px 0 16px',textWrap:'balance'}}>Privacy-first by design.</h2>
        <p style={{fontFamily:FONT_T,fontSize:18,lineHeight:1.6,color:'rgba(255,255,255,0.82)',maxWidth:780,margin:'0 0 48px'}}>Children deserve more care than the average consumer product. We process what we can on the glasses, share as little as possible, and never keep video.</p>
        <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:28}}>
          {items.map(it => (
            <div key={it.title} style={{display:'grid',gridTemplateColumns:'52px 1fr',gap:18,alignItems:'flex-start'}}>
              <div style={{width:52,height:52,borderRadius:14,background:'rgba(255,255,255,0.08)',border:'1px solid rgba(255,255,255,0.16)',color:PALETTE.mustard,display:'flex',alignItems:'center',justifyContent:'center'}}>
                <i data-lucide={it.icon} style={{width:24,height:24}}></i>
              </div>
              <div>
                <div style={{fontFamily:FONT_D,fontWeight:600,fontSize:26,color:'#fff',letterSpacing:'-0.01em',marginBottom:6}}>{it.title}</div>
                <div style={{fontFamily:FONT_T,fontSize:15.5,lineHeight:1.6,color:'rgba(255,255,255,0.78)'}}>{it.body}</div>
              </div>
            </div>
          ))}
        </div>
        <p style={{fontFamily:FONT_T,fontSize:14,lineHeight:1.6,color:'rgba(255,255,255,0.6)',maxWidth:780,margin:'36px 0 0'}}>COPPA and FERPA compliance are on our roadmap as Seymoura moves into schools.</p>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Problem, HowItWorks, WhatWeDo, ReaderModes, CrossSubjectReading, ProductHeader, ProductVideo, ProductHardware, ProductPrivacy, Schools, SchoolsApproach, SchoolsClosingGap, SchoolsDashboard, SchoolsScienceSummary, SchoolsEveryReader, SchoolsGettingStarted, Research, Company, FounderTrackRecord });
