/* global React, ReactDOM, PuffyKit, PuffySite */
// Features page — 4 surfaces, principles, CTA.
// Phone mockups are placeholder slots; drop real screenshots later.
const { MINT, MINT_STROKE, TEAL, TEXT, T2, T3, Icon } = window.PuffyKit;
const { Nav, Footer, Waitlist, WaitlistCta, Reveal, Section, PawMark, Penguin, ScreenshotSlot } = window.PuffySite;

function App() {
  return (
    <>
      <Nav active="features"/>
      <FeatureHero/>
      <FeatureBlock id="passport" variant="left" href="feature-passport.html"
        eyebrow="Digital pet passport"
        title="Every detail about your dog, in one calm card."
        body="A living profile — breed, weight, microchip, vet, vaccinations, habits. Share it instantly via QR at the vet or a new sitter."
        points={[
          'Paw-pattern mint card with QR for fast sharing',
          'Vaccinations, lab results and visits, all searchable',
          'Traits and habits — temperament, fears, routine',
          'Multi-pet: switch between dogs from the header',
        ]}
        slotLabel="Passport screen"/>
      <FeatureBlock id="asky" variant="right" href="feature-asky.html"
        eyebrow="Asky AI"
        title="Calm guidance, never a diagnosis."
        body="Asky is trained on veterinary content and Puffy's safety principles. She helps you understand and decide — and escalates to a vet whenever there's uncertainty."
        points={[
          'Four canonical chips: routine, unusual, worried, emergency',
          'Breed-aware: answers tailored to your specific dog',
          '5 free questions per week; unlimited with Puffy Plus',
          'Never says what\u2019s wrong — only what to do next',
        ]}
        slotLabel="Asky screen"/>
      <FeatureBlock id="life" variant="left" href="feature-life.html"
        eyebrow="Care calendar"
        title="A plan that knows what your dog needs next."
        body="Four quiet tabs — Health, Routine, Development, Training. Every item carries an Ask Asky button, so guidance is always one tap away."
        points={[
          'Vaccinations on a breed-aware schedule',
          'Weight, grooming, heartworm, deworming cycles',
          'Factual overdue chips — never alarming language',
          'Each item can be discussed with Asky in context',
        ]}
        slotLabel="Care calendar"/>
      <FeatureBlock id="avatar" variant="right" href="feature-avatar.html"
        eyebrow="3D avatar"
        title="A personalized 3D model of your dog."
        body="Snap a photo during onboarding. Puffy generates a soft, low-poly 3D avatar you'll see across the app. Warm, playful, nothing photoreal."
        points={[
          'Generated asynchronously; push when it\u2019s ready',
          'Breed and color inferred from the same photo',
          'Lives in the passport card and Pet Tag',
          'You can swap the photo anytime',
        ]}
        slotLabel="3D avatar"/>
      <Principles/>
      <FinalCta/>
      <Footer/>
    </>
  );
}

function FeatureHero() {
  return (
    <section style={{
      background: 'linear-gradient(180deg, #fff 0%, rgba(200,240,235,0.3) 100%)',
      padding: '80px 0 56px', position: 'relative', overflow: 'hidden',
    }}>
      <div className="p-wrap">
        <Reveal>
          <p className="p-eyebrow">Features</p>
          <h1 className="p-h1" style={{ maxWidth: 900, marginBottom: 24 }}>
            Four quiet surfaces that, together, replace the mess.
          </h1>
          <p className="p-lede" style={{ maxWidth: 720 }}>
            Puffy is deliberately small. A passport, a calendar, an AI companion and a 3D avatar — built so that nothing about caring for your dog ever feels scattered again.
          </p>
        </Reveal>
      </div>
      <div style={{ position: 'absolute', top: 40, right: -20, opacity: 0.08 }}><PawMark size={140} color="#000"/></div>
    </section>
  );
}

function FeatureBlock({ id, variant, eyebrow, title, body, points, slotLabel, href }) {
  const reverse = variant === 'right';
  return (
    <Section id={id} bg={reverse ? '#F7F7F5' : '#fff'}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: 64, alignItems: 'center',
        direction: reverse ? 'rtl' : 'ltr',
      }}>
        <Reveal style={{ direction: 'ltr' }}>
          <p className="p-eyebrow">{eyebrow}</p>
          <h2 className="p-h2">{title}</h2>
          <p className="p-lede" style={{ marginBottom: 28 }}>{body}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {points.map((p, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, fontSize: 16, color: TEXT }}>
                <span style={{
                  flexShrink: 0, width: 22, height: 22, borderRadius: '50%',
                  background: MINT, border: `2px solid ${MINT_STROKE}`,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginTop: 2,
                }}><Icon name="paw" size={11} color="#000"/></span>
                <span style={{ lineHeight: 1.5 }}>{p}</span>
              </li>
            ))}
          </ul>
          {href && (
            <a href={href} className="p-btn p-btn--secondary" style={{ marginTop: 24 }}>
              Open the {eyebrow.toLowerCase()} page <Icon name="chevron-right" size={14} color="#000" weight={2.5}/>
            </a>
          )}
        </Reveal>
        <Reveal delay={150} style={{ direction: 'ltr', display: 'flex', justifyContent: 'center' }}>
          <div style={{ filter: 'drop-shadow(0 30px 60px rgba(0,0,0,0.08))' }}>
            <ScreenshotSlot label={slotLabel} w={300} h={620} note="Drop in screenshot"/>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

function Principles() {
  const items = [
    { title: 'No panic.', body: 'We never say urgent, critical or immediately. We say overdue by 5 days.' },
    { title: 'No diagnoses.', body: 'Puffy and Asky help you understand and decide. The vet decides what\u2019s wrong.' },
    { title: 'No clickbait.', body: 'No "3 things every dog owner must know." A soft, factual sentence always wins.' },
    { title: 'No exclamation marks.', body: 'Not in the app, not on this site. Calm tone, every surface.' },
  ];
  return (
    <Section bg="#fff">
      <Reveal>
        <p className="p-eyebrow">Our principles</p>
        <h2 className="p-h2" style={{ marginBottom: 48 }}>Rules Puffy holds itself to.</h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 24 }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 100}>
            <div style={{ paddingTop: 20, borderTop: `1px solid ${MINT}` }}>
              <h3 style={{ fontSize: 20, fontWeight: 700, margin: '0 0 10px', letterSpacing: '-0.01em' }}>{it.title}</h3>
              <p style={{ fontSize: 15, color: T2, lineHeight: 1.5, margin: 0 }}>{it.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function FinalCta() {
  return <WaitlistCta tone="mint" compact/>;
}

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