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

const GROUPS = [
  {
    title: 'About Puffy',
    items: [
      { q: 'What is Puffy, exactly?',
        a: 'Puffy is an iOS companion for dog owners. It keeps a digital pet passport, a care calendar, and an AI companion called Asky — built around the idea that caring for your dog should feel calm, not chaotic.' },
      { q: 'Is Puffy a replacement for a vet?',
        a: 'No, and we\u2019re strict about this. Puffy helps you understand what is happening and decide what to do next. Whenever there\u2019s uncertainty, Asky will recommend a visit to your vet. The vet is the one who diagnoses, we are not.' },
      { q: 'When is Puffy available?',
        a: 'We\u2019re currently running a private test. Join the waitlist and we\u2019ll invite you in as soon as your region opens up — probably without much fanfare.' },
      { q: 'Is it free?',
        a: 'The core passport, calendar and 3D avatar are free. Asky AI gives you 5 free questions per week. Puffy Plus unlocks unlimited Asky and a few quiet extras.' },
    ],
  },
  {
    title: 'Asky AI',
    items: [
      { q: 'How does Asky know things about my dog?',
        a: 'Asky reads your dog\u2019s passport — breed, weight, age, recent events — and uses that context to tailor answers. It doesn\u2019t share your dog\u2019s data outside your account.' },
      { q: 'Can Asky diagnose an illness?',
        a: 'No. We built Asky specifically to avoid doing that. Asky can help you describe what you\u2019re seeing, rule out common causes, and tell you when it\u2019s worth a vet visit — but it will never tell you what\u2019s wrong.' },
      { q: 'What happens when Asky isn\u2019t sure?',
        a: 'It tells you that, clearly, and recommends you talk to a vet. We\u2019d rather Asky say "I don\u2019t know" a little too often than a little too rarely.' },
    ],
  },
  {
    title: 'Privacy and data',
    items: [
      { q: 'Who can see my dog\u2019s passport?',
        a: 'Only you, by default. If you share a QR code with someone — a vet, a sitter — they can view it until you revoke access. Nobody else.' },
      { q: 'Do you sell my data?',
        a: 'No. Never. We\u2019re not an ad-supported product and we don\u2019t plan to become one.' },
      { q: 'Where is my data stored?',
        a: 'Encrypted at rest on servers in the region closest to you. See our privacy page for the details.' },
    ],
  },
];

function App() {
  return (
    <>
      <Nav active="faq"/>
      <Hero/>
      <FaqList/>
      <StillQuestions/>
      <Footer/>
    </>
  );
}

function Hero() {
  return (
    <section style={{ padding: '72px 0 32px', background: '#fff' }}>
      <div className="p-wrap">
        <Reveal>
          <p className="p-eyebrow">Frequently asked</p>
          <h1 className="p-h1" style={{ maxWidth: 760, marginBottom: 20 }}>Questions we hear a lot.</h1>
          <p className="p-lede" style={{ maxWidth: 620 }}>
            If your question isn\u2019t answered below, email us. A human will reply.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function FaqList() {
  return (
    <Section bg="#fff">
      <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 64 }}>
        <div>
          <div style={{ position: 'sticky', top: 100 }}>
            <Reveal>
              <p className="p-eyebrow">Topics</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
                {GROUPS.map((g, i) => (
                  <li key={i}>
                    <a href={`#group-${i}`} style={{
                      display: 'block', padding: '8px 12px',
                      fontSize: 15, color: T2, borderRadius: 8,
                    }}>{g.title}</a>
                  </li>
                ))}
              </ul>
            </Reveal>
          </div>
        </div>
        <div>
          {GROUPS.map((g, gi) => (
            <div key={gi} id={`group-${gi}`} style={{ marginBottom: gi < GROUPS.length - 1 ? 56 : 0 }}>
              <Reveal>
                <h2 className="p-h3" style={{ marginBottom: 12 }}>{g.title}</h2>
                <div>
                  {g.items.map((item, i) => <FaqItem key={i} q={item.q} a={item.a}/>)}
                </div>
              </Reveal>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={'p-faq-item' + (open ? ' is-open' : '')}>
      <button className="p-faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span style={{ flex: 1 }}>{q}</span>
        <span className="p-faq-q-icon"><Icon name="plus" size={14} color="#000"/></span>
      </button>
      <div className="p-faq-a"><p>{a}</p></div>
    </div>
  );
}

function StillQuestions() {
  return (
    <Section bg="#F7F7F5">
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 48, flexWrap: 'wrap' }}>
        <Reveal>
          <p className="p-eyebrow">Still wondering?</p>
          <h2 className="p-h2" style={{ maxWidth: 560 }}>Email hello@puffy.app — a real person will reply.</h2>
        </Reveal>
        <Reveal delay={100}>
          <a href="mailto:hello@puffy.app" className="p-btn p-btn--primary">Email us</a>
        </Reveal>
      </div>
    </Section>
  );
}

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