// Learn, About, Contact, Login pages

function LearnPage() {
  const [filter, setFilter] = useState('All');
  const [loggedIn, setLoggedIn] = useState(false);

  const courses = [
    { id:'ea', title:'Ethical AI, plainly', length:'6 weeks · self-paced', price:480, tag:'Foundational', desc:'Plain-language foundations for anyone who touches AI at work — PMs, analysts, leads, founders.', enrolled: 142, modules: 14 },
    { id:'st', title:'From study to tech career', length:'8 weeks · cohort', price:720, tag:'Career', desc:'For final-year students, postgrads and PhDs making the move into industry tech roles.', enrolled: 38, modules: 18 },
    { id:'lt', title:'Leading through transformation', length:'4 weeks · live', price:960, tag:'Leadership', desc:'For new leaders stepping into change-heavy roles. Frameworks, conversations, and self.', enrolled: 24, modules: 8 },
    { id:'dg', title:'Indigenous data governance, introduced', length:'3 weeks · self-paced', price:320, tag:'Foundational', desc:'A primer for teams stewarding data that holds cultural knowledge. Models, principles, practice.', enrolled: 61, modules: 9 },
    { id:'cv', title:'The CV that sounds like you', length:'Workshop · 1 day', price:180, tag:'Career', desc:'Half-day intensive. Leave with a CV, LinkedIn headline, and elevator story you actually mean.', enrolled: 203, modules: 4 },
    { id:'ai', title:'AI ethics for product teams', length:'5 weeks · async', price:560, tag:'Foundational', desc:'For PMs, designers and engineers shipping AI features. Audits, playbooks, governance in practice.', enrolled: 87, modules: 12 },
  ];

  const filters = ['All', 'Foundational', 'Career', 'Leadership'];
  const shown = filter === 'All' ? courses : courses.filter(c => c.tag === filter);

  return (
    <div className="route-enter">
      <section style={{paddingTop: 80, paddingBottom: 48}}>
        <div className="container">
          {/* Back link */}
          <div style={{marginBottom: 32}}>
            <Link to="home" className="mono" style={{
              fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em',
              textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>← NRX Auaha</Link>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 64, alignItems:'end', marginBottom: 48}}>
            <div>
              <span className="label">Akoranga · Learn</span>
              <h1 style={{marginTop: 16, maxWidth:'14ch'}}>
                A small library, <em style={{color:'var(--accent)'}}>taught slowly</em>.
              </h1>
            </div>
            <p style={{fontSize:'var(--step-lg)', color:'var(--ink-2)'}}>
              Courses I've written from the work itself. Self-paced, cohort, or live. Lifetime access to any course you enrol in.
            </p>
          </div>

          {/* Logged-in shelf */}
          {loggedIn ? (
            <div style={{padding: 32, background:'var(--ink)', color:'var(--bg)', borderRadius: 14, marginBottom: 48}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 24}}>
                <div>
                  <div className="mono" style={{fontSize: 11, color:'var(--sand)', letterSpacing:'0.14em', marginBottom: 6}}>NAU MAI, NADINE · YOUR LEARNING</div>
                  <h3 style={{color:'var(--bg)'}}>Pick up where you left off</h3>
                </div>
                <button onClick={() => setLoggedIn(false)} className="mono" style={{fontSize: 11, color:'var(--sand)', background:'none', border:'none', cursor:'pointer'}}>Log out →</button>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16}}>
                {[
                  { t:'Ethical AI, plainly', p: 64, module:'Module 9 · Bias in training data' },
                  { t:'Indigenous data governance', p: 22, module:'Module 2 · Mana motuhake' },
                  { t:'The CV that sounds like you', p: 100, module:'Completed · Certificate issued' },
                ].map(c => (
                  <div key={c.t} style={{background:'rgba(239,230,218,0.05)', border:'1px solid rgba(239,230,218,0.1)', borderRadius: 10, padding: 20}}>
                    <div style={{fontFamily:'var(--f-display)', fontSize: 20, marginBottom: 8}}>{c.t}</div>
                    <div className="mono" style={{fontSize: 10, color:'var(--sand)', marginBottom: 12}}>{c.module}</div>
                    <div style={{height: 4, background:'rgba(239,230,218,0.1)', borderRadius: 2, overflow:'hidden', marginBottom: 8}}>
                      <div style={{height:'100%', width: c.p + '%', background:'var(--accent)'}}/>
                    </div>
                    <div className="mono" style={{fontSize: 10, color:'var(--sand)', textAlign:'right'}}>{c.p}%</div>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <div style={{display:'flex', gap: 16, alignItems:'center', padding:'20px 24px', background:'var(--bg-2)', border:'1px solid var(--hair)', borderRadius: 12, marginBottom: 48}}>
              <div style={{flex:1}}>
                <div className="mono" style={{fontSize: 10, color:'var(--muted)', marginBottom: 4}}>ALREADY A LEARNER?</div>
                <div style={{fontSize: 14}}>Log in to pick up where you left off.</div>
              </div>
              <button onClick={() => setLoggedIn(true)} className="btn btn-ghost" style={{fontSize: 13, padding:'10px 16px'}}>Log in <span className="arrow">→</span></button>
            </div>
          )}

          {/* Filters */}
          <div style={{display:'flex', gap: 8, marginBottom: 32, flexWrap:'wrap'}}>
            {filters.map(f => (
              <button key={f} onClick={() => setFilter(f)} className="chip" style={{
                fontFamily:'var(--f-mono)', fontSize: 12,
                padding:'10px 16px', borderRadius: 999,
                border:'1px solid ' + (filter === f ? 'var(--ink)' : 'var(--hair)'),
                background: filter === f ? 'var(--ink)' : 'var(--bg)',
                color: filter === f ? 'var(--bg)' : 'var(--ink-2)',
                cursor:'pointer', transition:'all .2s',
              }}>{f}</button>
            ))}
            <div style={{marginLeft:'auto'}}>
              <span className="mono" style={{fontSize: 11, color:'var(--muted)'}}>{shown.length} courses</span>
            </div>
          </div>

          {/* Course grid */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 24}}>
            {shown.map(c => (
              <CourseCard key={c.id} c={c}/>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:'var(--bg-2)'}}>
        <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 64, alignItems:'start'}}>
          <div>
            <span className="label">How enrolment works</span>
            <h2 style={{marginTop: 12, maxWidth:'18ch'}}>Buy once. Keep it. Go at your pace.</h2>
          </div>
          <ol style={{listStyle:'none', padding:0, margin:0, borderTop:'1px solid var(--hair)'}}>
            {[
              ['01', 'Enrol', 'Secure checkout. Card or bank transfer.'],
              ['02', 'Access', 'Create your account. Start immediately — no drip-feeding.'],
              ['03', 'Learn', 'Lessons, resources, community, and office hours where relevant.'],
              ['04', 'Keep', 'Lifetime access to the course and any future updates.'],
            ].map(([n, t, d]) => (
              <li key={n} style={{display:'grid', gridTemplateColumns:'60px 1fr 2fr', gap: 24, padding:'20px 0', borderBottom:'1px solid var(--hair)', alignItems:'baseline'}}>
                <span className="mono" style={{fontSize: 11, color:'var(--accent)'}}>{n}</span>
                <h4 style={{fontSize:'var(--step-lg)'}}>{t}</h4>
                <p style={{fontSize: 14, color:'var(--ink-2)'}}>{d}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>
    </div>
  );
}

function CourseCard({ c }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background:'var(--bg-2)', border:'1px solid var(--hair)', borderRadius: 12,
        overflow:'hidden', display:'flex', flexDirection:'column',
        transform: hover ? 'translateY(-2px)' : 'none',
        transition:'all .3s', cursor:'pointer',
        borderColor: hover ? 'var(--ink-2)' : 'var(--hair)',
      }}
    >
      <Ph label={c.title} ratio="4/3"/>
      <div style={{padding: 24, display:'flex', flexDirection:'column', flex:1}}>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom: 12}}>
          <span className="mono" style={{fontSize: 10, color:'var(--accent)', letterSpacing:'0.1em'}}>{c.tag.toUpperCase()}</span>
          <span className="mono" style={{fontSize: 10, color:'var(--muted)'}}>{c.length}</span>
        </div>
        <h4 style={{fontSize:'var(--step-xl)', marginBottom: 8}}>{c.title}</h4>
        <p style={{fontSize: 13, color:'var(--ink-2)', marginBottom: 16, flex:1}}>{c.desc}</p>
        <div style={{display:'flex', gap: 16, fontSize: 11, color:'var(--muted)', marginBottom: 20}} className="mono">
          <span>{c.modules} modules</span>
          <span>{c.enrolled} enrolled</span>
        </div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop: 16, borderTop:'1px solid var(--hair)'}}>
          <span style={{fontFamily:'var(--f-display)', fontSize: 26}}>NZ${c.price}</span>
          <button className="btn btn-primary" style={{padding:'8px 14px', fontSize: 12}}>Enrol <span className="arrow">→</span></button>
        </div>
      </div>
    </div>
  );
}

function AboutPage() {
  return (
    <div className="route-enter">
      <section style={{paddingTop: 80, paddingBottom: 40}}>
        <div className="container">
          <div style={{marginBottom: 48}}>
            <span className="label">About · Mō mātou</span>
          </div>
          <Bilingual mi="Tēnā koutou." en="I'm Nadine Young." size="clamp(3rem, 8vw, 7rem)"/>

          <div style={{display:'grid', gridTemplateColumns:'5fr 4fr', gap: 64, marginTop: 80, alignItems:'start'}}>
            <img
              src="assets/nadine-young.jpg"
              alt="Nadine Young, founder of NRX Auaha"
              style={{
                width: '100%', aspectRatio: '4/5', objectFit: 'cover',
                objectPosition: 'center top', borderRadius: 4, display: 'block',
              }}
            />
            <div>
              <p style={{fontSize:'var(--step-lg)', marginBottom: 24}}>
                Ko Ngāi Tahu tōku iwi. Ko Taumutu tōku marae. I was born in Christchurch and now call Tāmaki Makaurau home.
              </p>
              <p style={{color:'var(--ink-2)', marginBottom: 16}}>
                I spent 20 years leading teams across hospitality, retail, and manufacturing. Since 2023 I have worked in technology as a Functional Consultant and Business Analyst — implementing Microsoft Dynamics 365 Finance and Operations in manufacturing, Dynamics Sales, and SaaS platforms in the ecommerce space. I currently work full-time at Olympic33.
              </p>
              <p style={{color:'var(--ink-2)', marginBottom: 16}}>
                NRX Auaha launched in 2025 alongside my practice. I have consulted for Māori organisations including OSACO Group and Hāpai Tūhono (Māori Career Development Specialists) — supporting ethical digital platforms that centre Māori values, data sovereignty, and community trust.
              </p>
              <p style={{color:'var(--ink-2)', marginBottom: 16}}>
                NRX Auaha grew from something personal — a connection to te reo Māori that had been lost across generations of my whānau, beginning with my great-grandfather and carried through to my nana. That loss became the question at the centre of my research: what happens to Indigenous language and storytelling when AI shapes what survives?
              </p>
              <p style={{color:'var(--ink-2)', marginBottom: 32}}>
                I hold an MBA from AUT specialising in Operations and Human Resources, and a Master of Technological Futures completed April 2026. The name <em>Auaha</em> means to create, shape, invent — a making, done with care.
              </p>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 16, borderTop:'1px solid var(--hair)', paddingTop: 24}}>
                {[
                  ['20', 'Years leading teams · 2003–2023'],
                  ['MBA', 'Operations & HR · AUT 2017'],
                  ['MTF', 'Master of Technological Futures · 2026'],
                  ['AUCSA', 'Mentor · 2025 & 2026'],
                ].map(([v, l]) => (
                  <div key={l}>
                    <div className="display" style={{fontSize: 40}}>{v}</div>
                    <div className="mono" style={{fontSize: 10, color:'var(--muted)', letterSpacing:'0.1em'}}>{l.toUpperCase()}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{background:'var(--bg-2)'}}>
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 64}}>
            <div style={{position:'sticky', top: 96, alignSelf:'start'}}>
              <span className="label">Timeline · Whakapapa mahi</span>
              <h2 style={{marginTop: 12, maxWidth:'10ch'}}>The long road here.</h2>
            </div>
            <div style={{display:'flex', flexDirection:'column', borderTop:'1px solid var(--ink)'}}>
              {[
                ['April 2026', 'MTF completed', 'Master of Technological Futures — Ethical AI and Indigenous Storytelling. AcademyEX.'],
                ['2025–2026', 'AUCSA Mentor', 'Auckland University Commerce Students Association mentoring programme — supporting Commerce students through career decisions and professional development.'],
                ['2025', 'Founded NRX Auaha', 'Ethical AI advisory and career transformation consultancy. Clients include OSACO Group and Hāpai Tūhono — supporting ethical digital platforms that centre Māori values and data sovereignty.'],
                ['2023–present', 'Functional Consultant & Business Analyst', 'Microsoft Dynamics 365 Finance and Operations (manufacturing), Dynamics Sales, and SaaS in ecommerce. Currently at Olympic33.'],
                ['2023', 'Began MTF research', 'Master of Technological Futures — Ethical AI and Indigenous Storytelling. AcademyEX.'],
                ['2003–2023', 'Leadership & Operations', 'Led teams from 7 to 40 across hospitality, retail, and manufacturing — managing multiple departments over 20 years.'],
                ['2017', 'MBA conferred', 'Operations and Human Resources · Auckland University of Technology (AUT).'],
              ].map(([y, t, d]) => (
                <div key={y} style={{display:'grid', gridTemplateColumns:'140px 1fr', gap: 24, padding:'24px 0', borderBottom:'1px solid var(--hair)', alignItems:'baseline'}}>
                  <div className="mono" style={{fontSize: 12, color:'var(--accent)'}}>{y}</div>
                  <div>
                    <h4 style={{fontSize:'var(--step-xl)', marginBottom: 6}}>{t}</h4>
                    <p style={{fontSize: 14, color:'var(--ink-2)'}}>{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="label">What I believe</span>
              <h2 style={{marginTop: 8}}>A working philosophy.</h2>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 0, borderTop:'1px solid var(--hair)'}}>
            {[
              ['Listen first.', 'The first meeting is for questions, not pitches. Most of the work is already in the room if you make space for it.'],
              ['Clarity is a form of care.', 'Jargon is how we avoid being accountable. Plain language keeps us honest.'],
              ['Culture is not a layer.', 'It\'s not something you sprinkle on at the end. Culture shapes what the system can be.'],
              ['Slow is a feature.', 'Especially in AI. Especially now.'],
            ].map(([t, d], i) => (
              <div key={t} style={{
                padding: '32px 24px',
                borderBottom: i < 2 ? '1px solid var(--hair)' : 'none',
                borderRight: i % 2 === 0 ? '1px solid var(--hair)' : 'none',
                paddingLeft: i % 2 === 1 ? 32 : 0,
                paddingRight: i % 2 === 0 ? 32 : 0,
              }}>
                <h3 className="display" style={{fontSize:'var(--step-2xl)', fontStyle:'italic', color:'var(--accent)', marginBottom: 12}}>{t}</h3>
                <p style={{color:'var(--ink-2)'}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{background:'var(--ink)', padding:'100px 0'}}>
        <div className="container" style={{maxWidth: 860}}>
          <div className="mono" style={{fontSize:11, color:'var(--accent)', letterSpacing:'0.14em', marginBottom:32}}>FROM THE RESEARCH · PARTICIPANT VOICE</div>
          <blockquote style={{
            fontFamily:'var(--f-display)', fontSize:'clamp(2rem, 5vw, 3.6rem)',
            fontStyle:'italic', color:'var(--bg)', lineHeight:1.2,
            margin:0, padding:0,
          }}>
            "Make it ours, not be led by an artificial God."
          </blockquote>
          <div style={{marginTop:36, height:1, background:'rgba(239,230,218,0.12)'}}/>
          <p style={{
            marginTop:24, fontSize:14, color:'rgba(239,230,218,0.5)',
            fontFamily:'var(--f-sans)', lineHeight:1.7, maxWidth:'52ch',
          }}>
            A research participant's words on what Indigenous-led AI governance actually means — not permission, not consultation, but authorship.
          </p>
        </div>
      </section>

      <CTABanner />
    </div>
  );
}

function ContactPage() {
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');
  const [who, setWho] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErr('');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, email, who, message }),
      });
      const data = await res.json();
      if (data.success) {
        setSent(true);
      } else {
        setErr(data.error || 'Something went wrong. Please try again.');
      }
    } catch (e) {
      setErr('Could not send message. Please try again.');
    }
    setLoading(false);
  };

  return (
    <div className="route-enter">
      <section style={{paddingTop: 80, paddingBottom: 80}}>
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns:'5fr 7fr', gap: 64, alignItems:'start'}}>
            <div>
              <span className="label">Contact · Whakapā mai</span>
              <h1 style={{marginTop: 16, fontSize:'clamp(3rem, 6vw, 5rem)', marginBottom: 32}}>
                Start a <em style={{color:'var(--accent)'}}>kōrero</em>.
              </h1>
              <p style={{color:'var(--ink-2)', fontSize:'var(--step-lg)', marginBottom: 32}}>
                A first conversation is always free and unhurried. I reply to most messages within two working days.
              </p>
              <div style={{display:'flex', flexDirection:'column', gap: 0, borderTop:'1px solid var(--hair)'}}>
                {[
                  ['Email', 'nadine@nrxauaha.com'],
                  ['Location', 'Tāmaki Makaurau · Aotearoa NZ'],
                  ['Availability', 'Open to new enquiries · selective intake'],
                  ['Response time', 'Within 2 working days'],
                ].map(([k, v]) => (
                  <div key={k} style={{display:'grid', gridTemplateColumns:'140px 1fr', padding:'16px 0', borderBottom:'1px solid var(--hair)'}}>
                    <div className="mono" style={{fontSize: 10, color:'var(--muted)', letterSpacing:'0.1em'}}>{k.toUpperCase()}</div>
                    <div style={{fontSize: 14}}>{v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{background:'var(--bg-2)', border:'1px solid var(--hair)', borderRadius: 14, padding: 40}}>
              {sent ? (
                <div style={{textAlign:'center', padding:'40px 0'}}>
                  <div className="display" style={{fontSize: 48, fontStyle:'italic', color:'var(--accent)', marginBottom: 16}}>Ngā mihi.</div>
                  <p style={{fontSize:'var(--step-lg)'}}>Your message is on its way. I'll be in touch within two working days.</p>
                  <button onClick={() => { setSent(false); setName(''); setEmail(''); setWho(''); setMessage(''); }} className="btn btn-ghost" style={{marginTop: 32}}>Send another →</button>
                </div>
              ) : (
                <form onSubmit={handleSubmit}>
                  <div className="label" style={{marginBottom: 24}}>Tell me a little</div>

                  <FormField label="I'm writing as">
                    <div style={{display:'flex', gap: 8, flexWrap:'wrap'}}>
                      {['An organisation','A professional','Transformation Circle','Media / speaking','Just saying hi'].map(o => (
                        <label key={o} className="mono" style={{
                          padding:'8px 14px', border:'1px solid', borderRadius: 999, fontSize: 11, cursor:'pointer',
                          borderColor: who === o ? 'var(--ink)' : 'var(--hair)',
                          background: who === o ? 'var(--ink)' : 'var(--bg)',
                          color: who === o ? 'var(--bg)' : 'var(--ink-2)',
                          transition: 'all .15s',
                        }}>
                          <input type="radio" name="who" value={o} onChange={() => setWho(o)} style={{display:'none'}}/>
                          {o}
                        </label>
                      ))}
                    </div>
                  </FormField>

                  <FormField label="Your name">
                    <input type="text" placeholder="Your full name" value={name} onChange={e => setName(e.target.value)} />
                  </FormField>

                  <FormField label="Email">
                    <input type="email" placeholder="you@kaimahi.co" value={email} onChange={e => setEmail(e.target.value)} required />
                  </FormField>

                  <FormField label="What would you like to talk about?">
                    <textarea rows={5} placeholder="A few sentences is plenty. We can dig in on the call." value={message} onChange={e => setMessage(e.target.value)}/>
                  </FormField>

                  {err && <p style={{color:'var(--rust)', fontSize: 13, marginBottom: 12}}>{err}</p>}

                  <button type="submit" disabled={loading} className="btn btn-primary" style={{width:'100%', justifyContent:'center', marginTop: 16, padding: '16px', opacity: loading ? 0.7 : 1}}>
                    {loading ? 'Sending…' : 'Send the message'} <span className="arrow">→</span>
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function FormField({ label, children }) {
  return (
    <div style={{marginBottom: 20}}>
      <label className="mono" style={{display:'block', fontSize: 10, color:'var(--muted)', letterSpacing:'0.1em', marginBottom: 8}}>{label.toUpperCase()}</label>
      <div className="form-field">
        {children}
      </div>
      <style>{`
        .form-field input, .form-field textarea {
          width: 100%;
          font-family: var(--f-body);
          font-size: 15px;
          padding: 12px 16px;
          border: 1px solid var(--hair);
          border-radius: 8px;
          background: var(--bg);
          color: var(--ink);
          outline: none;
          resize: vertical;
          transition: border-color .2s;
        }
        .form-field input:focus, .form-field textarea:focus { border-color: var(--ink); }
      `}</style>
    </div>
  );
}

function LoginPage() {
  return (
    <div className="route-enter">
      <section style={{paddingTop: 80, paddingBottom: 80}}>
        <div className="container" style={{maxWidth: 480, margin:'0 auto'}}>
          <div style={{textAlign:'center', marginBottom: 40}}>
            <span className="label">Nau mai · Welcome back</span>
            <h1 style={{marginTop: 16, fontSize:'clamp(2.5rem, 5vw, 4rem)'}}>Log in.</h1>
          </div>
          <div style={{background:'var(--bg-2)', border:'1px solid var(--hair)', borderRadius: 14, padding: 40}}>
            <form onSubmit={(e) => { e.preventDefault(); window.location.hash = '#/learn'; }}>
              <FormField label="Email">
                <input type="email" placeholder="you@kaimahi.co" />
              </FormField>
              <FormField label="Password">
                <input type="password" placeholder="••••••••" />
              </FormField>
              <button type="submit" className="btn btn-primary" style={{width:'100%', justifyContent:'center', padding: '16px'}}>
                Log in <span className="arrow">→</span>
              </button>
              <div style={{textAlign:'center', marginTop: 20}}>
                <a href="#" className="mono" style={{fontSize: 11, color:'var(--muted)'}}>Forgot password? →</a>
              </div>
            </form>
          </div>
          <p style={{textAlign:'center', marginTop: 32, fontSize: 13, color:'var(--ink-2)'}}>
            Don't have an account yet? <Link to="learn" className="link">Browse the courses →</Link>
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LearnPage, AboutPage, ContactPage, LoginPage });