/* global React, ReactDOM, PuffyKit, PuffySite */
const { MINT, MINT_STROKE, TEAL, TEXT, T2, T3, Icon, Puffy } = window.PuffyKit;
const { Nav, Footer, Waitlist, WaitlistCta, Reveal, Section, PawMark, DogIllustration, Penguin } = window.PuffySite;

function App() {
  return (
    <>
      <Nav active="about"/>
      <Hero/>
      <Mission/>
      <Principles/>
      <Team/>
      <ClosingCta/>
      <Footer/>
    </>
  );
}

function Hero() {
  return (
    <section style={{
      padding: '80px 0 56px',
      background: `linear-gradient(180deg, rgba(127,239,227,0.35) 0%, transparent 100%)`,
    }}>
      <div className="p-wrap">
        <Reveal>
          <p className="p-eyebrow">About Puffy</p>
          <h1 className="p-h1" style={{ maxWidth: 880, marginBottom: 24 }}>
            A small team building a calm tool for dog owners.
          </h1>
          <p className="p-lede" style={{ maxWidth: 720 }}>
            Puffy started with a simple frustration: every app we tried shouted at us about our dog. We built the opposite.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function Mission() {
  return (
    <Section bg="#fff">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <Reveal>
          <p className="p-eyebrow">Our mission</p>
          <h2 className="p-h2">Help you understand, not alarm you.</h2>
          <p className="p-article-p" style={{ marginTop: 20 }}>
            A dog doesn\u2019t need a health tracker that buzzes at 6am about a missed pill. It needs an owner who knows what\u2019s going on. Puffy is designed to produce that owner — calmly, over time.
          </p>
          <p className="p-article-p">
            We pair a calm passport and calendar with an AI companion, Asky, that\u2019s specifically forbidden from diagnosing. Asky helps you understand and decide. The vet is the one who decides what\u2019s wrong.
          </p>
        </Reveal>
        <Reveal delay={120}>
          <div style={{
            background: MINT, borderRadius: 28, padding: 48,
            border: `1px solid ${MINT_STROKE}`,
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            minHeight: 360, position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 20, right: 20, opacity: 0.2 }}>
              <PawMark size={56} color="#000"/>
            </div>
            <div style={{ position: 'absolute', bottom: 30, left: 40, opacity: 0.15 }}>
              <PawMark size={40} color="#000"/>
            </div>
            <DogIllustration variant="corgi" size={280}/>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function Principles() {
  const items = [
    { n: '01', t: 'No panic.',     b: 'We never say urgent, critical or immediately. We say overdue by 5 days.' },
    { n: '02', t: 'No diagnoses.', b: 'Puffy and Asky help you understand and decide. The vet decides what\u2019s wrong.' },
    { n: '03', t: 'No clickbait.', b: 'No "3 things every dog owner must know." Soft, factual sentences win.' },
    { n: '04', t: 'No slop.',      b: 'No exclamation marks, no all-caps warnings, no gamified streaks.' },
  ];
  return (
    <Section bg="#F7F7F5">
      <Reveal>
        <p className="p-eyebrow">Rules we hold ourselves to</p>
        <h2 className="p-h2" style={{ marginBottom: 48 }}>Four principles.</h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 100}>
            <div style={{
              background: '#fff', borderRadius: 24, padding: '32px 28px',
              border: `1px solid rgba(0,0,0,0.04)`, height: '100%',
            }}>
              <div style={{
                fontSize: 40, fontWeight: 700, letterSpacing: '-0.03em',
                color: TEAL, marginBottom: 16,
              }}>{it.n}</div>
              <h3 style={{ fontSize: 20, fontWeight: 700, margin: '0 0 10px' }}>{it.t}</h3>
              <p style={{ fontSize: 15, color: T2, lineHeight: 1.5, margin: 0 }}>{it.b}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function Team() {
  const members = [
    { n: 'Mira',  r: 'Design lead',    note: 'Worked on health apps before Puffy. Lives with a stubborn beagle named Otto.' },
    { n: 'Jules', r: 'Product + AI',   note: 'Built Asky\u2019s boundaries. Spends too much time reading veterinary papers.' },
    { n: 'Sana',  r: 'Engineering',    note: 'Wrote most of the iOS app in one long Swift spree. Has a rescue husky.' },
    { n: 'Tomás', r: 'Content + copy', note: 'Keeps every line of copy calm. Also writes the Puffy journal.' },
  ];
  return (
    <Section bg="#fff">
      <Reveal>
        <p className="p-eyebrow">Who{'\u2019'}s building this</p>
        <h2 className="p-h2" style={{ marginBottom: 40 }}>A team of four, for now.</h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20 }}>
        {members.map((m, i) => (
          <Reveal key={i} delay={i * 90}>
            <div style={{
              background: '#F7F7F5', borderRadius: 24, padding: 24,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{
                width: 72, height: 72, borderRadius: '50%',
                background: MINT, border: `2px solid ${MINT_STROKE}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 28, fontWeight: 700, color: TEXT, letterSpacing: '-0.02em',
              }}>{m.n[0]}</div>
              <div>
                <div style={{ fontSize: 17, fontWeight: 700, color: TEXT }}>{m.n}</div>
                <div style={{ fontSize: 13, color: TEAL, fontWeight: 510, marginTop: 2 }}>{m.r}</div>
              </div>
              <p style={{ fontSize: 14, color: T2, lineHeight: 1.5, margin: 0 }}>{m.note}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function ClosingCta() {
  return (
    <WaitlistCta
      tone="mint"
      compact
      title="Join us in private test."
      lede="We invite a handful of people every week. No pressure."
    />
  );
}

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