/* global React, ReactDOM, PuffyKit, PuffySite */
const { TEAL, TEXT, T2 } = window.PuffyKit;
const { Nav, Footer, Waitlist, Reveal, Penguin } = window.PuffySite;

function App() {
  return (
    <>
      <Nav active="get-access"/>
      <main style={{
        minHeight: 'calc(100vh - 200px)',
        background: '#F2F2F7',
        padding: '96px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div className="p-wrap" style={{ textAlign: 'center', maxWidth: 640 }}>
          <Reveal>
            <div style={{ display: 'inline-block', marginBottom: 28 }}>
              <Penguin size={96}/>
            </div>
            <h1 className="p-h1" style={{ marginBottom: 16 }}>
              Get early access to Puffy.
            </h1>
            <p className="p-lede" style={{ marginBottom: 32 }}>
              We&rsquo;re opening the first round of testers in the coming weeks. Leave your email and we&rsquo;ll invite you in as your region opens up.
            </p>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
              <Waitlist/>
            </div>
            <p className="p-muted" style={{ fontSize: 13, margin: 0 }}>
              iOS-first. iPhone 17 Pro and newer. English. No spam — ever.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '56px auto 0', maxWidth: 460, display: 'grid', gap: 12, textAlign: 'left' }}>
              {[
                'Digital pet passport with QR sharing',
                'Vaccination and care calendar, calm reminders',
                'Asky AI — vet-informed, never diagnoses',
                '3D dog avatar generated from a photo',
              ].map((t, i) => (
                <li key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: T2 }}>
                  <span style={{ color: TEAL, fontWeight: 700 }}>✓</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </main>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);