// Prickly — production microsite, single page
// Nav · Hero · Quiz · How it works · Kit explorer · Timeline · What we screen ·
// Eligibility · Clinical & closed-loop · Pricing · About · Experience · FAQ · Newsletter · Footer
//
// Reads global components attached by prickly-interactive.jsx.

const ACCENT_OPTIONS = {
  sage: { hex: '#7DAA8B', label: 'Sage' },
  ochre: { hex: '#D99B3A', label: 'Ochre' },
  clay: { hex: '#D26941', label: 'Clay' },
  plum: { hex: '#9C5C68', label: 'Plum (lighter)' }
};

const HERO_COPY = {
  a: {
    kicker: "Australia's at-home STI screening service",
    pre: "The STI screen you've been ",
    rotate: ["meaning to book.", "avoiding.", "putting off.", "owing yourself.", "nervous about.", "postponing."],
    sub: "Posted to your door. Reviewed by Australian clinicians. No waiting room, no small talk — just the bit you came for."
  },
  b: {
    kicker: "Now screening Australia-wide",
    pre: "Awkward in your head. ",
    rotate: ["Easy in your kitchen.", "Quiet in the post.", "Sorted in a week."],
    sub: "An at-home STI screen with grown-ups on the other end. Three minutes to check eligibility, kit at your door, results properly handled."
  },
  c: {
    kicker: "Clinician-led · at-home · Australia",
    pre: "Sexual health, minus the ",
    rotate: ["eye contact.", "waiting room.", "small talk.", "guesswork."],
    sub: "A clinician-led at-home STI screen. Self-collected samples, returned to a NATA-accredited Australian lab, with a Telehealth follow-up if anything needs it."
  },
  d: {
    kicker: "STI screening · Australia",
    pre: "All the screen. None of the ",
    rotate: ["waiting room.", "phone tag.", "rebooking.", "shame circus."],
    sub: "Three-minute eligibility check, kit posted in plain packaging, results read by Australian clinicians. Pick a time you're free."
  }
};

// ── Atoms ─────────────────────────────────────────────────────────────────
function Container({ children, narrow }) {
  return <div className={'pr-container' + (narrow ? ' narrow' : '')}>{children}</div>;
}
function Kicker({ children }) {return <span className="pr-kicker">{children}</span>;}

// ── Nav ───────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const doc = document.documentElement;
      const total = doc.scrollHeight - window.innerHeight;
      setProgress(total > 0 ? y / total : 0);
      setScrolled(y > 32);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [open]);

  const links = [
  ['#how', 'How it works'],
  ['#tests', 'What we screen for'],
  ['#kit', "What's in the package"],
  ['#safety', 'Clinical quality & safety'],
  ['#pricing', 'Pricing'],
  ['#faq', 'FAQ']];


  return (
    <>
      <nav className={'pr-nav ' + (scrolled ? 'scrolled' : '')} data-screen-label="00 Nav">
        <a href="#top" className="pr-nav-logo">
          prickly<span className="pr-nav-logo-dot" />
        </a>
        <div className="pr-nav-links">
          {links.map(([h, l]) => <a key={h} href={h}>{l}</a>)}
        </div>
        <a className="pr-btn sm pr-nav-cta" href="#quiz">
          Check eligibility <span className="pr-arrow">→</span>
        </a>
        <button className="pr-nav-burger" onClick={() => setOpen(true)} aria-label="Open menu">
          <svg width="22" height="14" viewBox="0 0 22 14" fill="none">
            <line x1="0" y1="2" x2="22" y2="2" stroke="currentColor" strokeWidth="2" />
            <line x1="0" y1="12" x2="22" y2="12" stroke="currentColor" strokeWidth="2" />
          </svg>
        </button>
        <div className="pr-nav-progress" style={{ transform: 'scaleX(' + progress + ')' }} />
      </nav>

      <div className={'pr-mob-menu ' + (open ? 'open' : '')}>
        <button className="pr-mob-menu-close" onClick={() => setOpen(false)} aria-label="Close menu">✕</button>
        <nav>
          {links.map(([h, l]) =>
          <a key={h} href={h} onClick={() => setOpen(false)}>{l}</a>
          )}
        </nav>
        <a className="pr-btn sage lg" href="#quiz" onClick={() => setOpen(false)}>
          Check eligibility <span className="pr-arrow">→</span>
        </a>
      </div>
    </>);

}

// ── Hero ──────────────────────────────────────────────────────────────────
function Hero({ copy }) {
  return (
    <section id="top" className="pr-hero" data-screen-label="01 Hero">
      <Container>
        <div className="pr-hero-meta">
          <Kicker>{copy.kicker}</Kicker>
        </div>

        <Reveal as="h1" className="pr-h1 pr-hero-headline">
          <span className="line">{copy.pre}</span>
          <span className="line">
            <RotatingHeadline words={copy.rotate} />
          </span>
        </Reveal>

        <div className="pr-hero-grid">
          <div>
            <Reveal as="p" className="pr-hero-sub" d={2}>{copy.sub}</Reveal>
            <Reveal className="pr-hero-cta-row" d={3}>
              <a className="pr-btn lg" href="#quiz">
                Take the eligibility check <span className="pr-arrow">→</span>
              </a>
              <span className="mono" style={{ fontSize: 11.5, textTransform: 'uppercase', letterSpacing: '0.14em', opacity: 0.6, paddingLeft: 4 }}>
                Medicare · OSHC/OVHC · Private
              </span>
            </Reveal>
          </div>
        </div>
      </Container>

      <div className="pr-marquee" aria-hidden>
        <div className="pr-marquee-track">
          {Array.from({ length: 2 }).flatMap((_, k) =>
          ['ISO 15189 NATA Accredited Lab', 'AHPRA-registered clinicians', 'TGA-listed testing equipment',
          'ISO 27001 Secure Medical records', 'Australian Privacy Principles compliant'].map((s) =>
          <span key={k + s}>{s}</span>
          )
          )}
        </div>
      </div>
    </section>);
}

// ── Quiz section ──────────────────────────────────────────────────────────
function QuizSection() {
  return (
    <section id="quiz" className="pr-section" data-screen-label="02 Quiz">
      <Container>
        <div className="pr-shead">
          <div>
            <Reveal d={0}><Kicker>Start here</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1} style={{ marginTop: 18 }}>
              <RevealWords text="A few short questions to decide if prickly is right for you." />
            </Reveal>
          </div>
          <div className="right">If we can't help, we'll tell you who can.</div>
        </div>
        <Reveal d={2}>
          <EligibilityQuiz />
        </Reveal>
      </Container>
    </section>);

}

// ── How it works ──────────────────────────────────────────────────────────
function HowItWorks() {
  return (
    <section id="how" className="pr-section tinted" data-screen-label="03 How it works">
      <Container>
        <div className="pr-shead">
          <div>
            <Reveal d={0}><Kicker>How it works</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1} style={{ marginTop: 18 }}>
              No waiting room. No appointment.<br />Just results.
            </Reveal>
          </div>
          <div className="right">Shipping times vary<br />based on your address</div>
        </div>
        <Timeline />
      </Container>
    </section>);

}

// ── Kit explorer section ──────────────────────────────────────────────────
function KitSection() {
  return (
    <section id="kit" className="pr-section inverse" data-screen-label="04 Kit explorer">
      <Container>
        <div className="pr-shead">
          <div>
            <Reveal d={0}><Kicker>What's in the package</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1} style={{ marginTop: 18 }}>
              <RevealWords text="Foolproof testing equipment and instructions, personalised for you." />
            </Reveal>
          </div>
          <div className="right">Hover / tap any part<br />to read about it.</div>
        </div>
        <Reveal d={2}>
          <KitExplorer />
        </Reveal>
      </Container>
    </section>);

}



// ── What we screen for ────────────────────────────────────────────────────
function Tests() {
  const tests = [
  { code: 'CT', label: 'Chlamydia', method: 'Self-collected swab / urine · Lab PCR', sites: 'Anal · Throat · Urine · Vaginal' },
  { code: 'NG', label: 'Gonorrhoea', method: 'Self-collected swab / urine · Lab PCR', sites: 'Anal · Throat · Urine · Vaginal' },
  { code: 'HIV', label: 'HIV', method: 'Fingerprick self test', sites: 'Blood · 15-min read' },
  { code: 'SYPH', label: 'Syphilis', method: 'Fingerprick self test', sites: 'Blood · 15-min read' }];

  return (
    <section id="tests" className="pr-section" data-screen-label="06 What we screen for">
      <Container>
        <div className="pr-shead">
          <div>
            <Reveal d={0}><Kicker>What we screen for</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1} style={{ marginTop: 18 }}>
              Four infections.<br />Gold-standard methods.
            </Reveal>
          </div>
          <div className="right">Validated testing to<br />ensure accurate results</div>
        </div>

        <Reveal d={2}>
          <div className="pr-tests head">
            <div className="label">STI</div>
            <div className="meta">Testing method</div>
            <div className="meta">Sites</div>
          </div>
        </Reveal>
        {tests.map((t, i) =>
        <Reveal key={t.code} className="pr-tests" d={i + 3}>
            <div className="label"><span className="code">{t.label}</span></div>
            <div className="meta">{t.method}</div>
            <div className="meta">{t.sites}</div>
          </Reveal>
        )}
        <p className="pr-p sm dim" style={{ marginTop: 32, maxWidth: 720, opacity: 0.6 }}>
          Prickly does not screen for herpes (HSV), human papilloma virus (HPV), hepatitis A/B/C, mycoplasma genitalium (MG) or any other STI. If you have concerns about these, please see a GP or sexual health clinic.
        </p>
      </Container>
    </section>);

}

// ── Clinical / closed-loop ────────────────────────────────────────────────
function Clinical() {
  return (
    <section id="safety" className="pr-section inverse" data-screen-label="08 Closed-loop care">
      <Container>
        <div className="pr-shead">
          <div>
            <Reveal d={0}><Kicker>Clinical quality & safety</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1} style={{ marginTop: 18 }}>
              <RevealWords text="The bit most home tests skip — closed-loop care, every order." />
            </Reveal>
          </div>
          <div className="right">Peer-reviewed<br />Periodically audited</div>
        </div>
        <Reveal d={2}>
          <ClosedLoopDiagram />
        </Reveal>
      </Container>
    </section>);

}

// ── Pricing ───────────────────────────────────────────────────────────────
function Pricing() {
  const plans = [
  {
    tag: 'Residents & Reciprocal Health Care Agreements', name: 'Medicare', price: '69', per: '',
    fineprint: 'Not eligible for Medicare rebate',
    desc: 'All pathology is bulk billed to Medicare. If your Reciprocal Health Care Agreement does not cover out of hospital care, you will receive a bill for ~$100 from our partner laboratory.',
    featured: false,
    incl: ['Self-collected swabs &/or urine', 'Fingerprick self tests', 'Shipping', 'Clinician-reviewed results', 'Telehealth follow-up if required']
  },
  {
    tag: 'Non-residents (Overseas students & visitors)', name: 'OSHC/OVHC', price: '69', per: '',
    fineprint: 'Not eligible for insurance rebate',
    desc: 'All pathology is direct billed to your Overseas Student/Visitor Health Cover insurer. If your insurer does not cover pathology, you will receive a bill for ~$100 from our partner laboratory.',
    featured: false,
    incl: ['Self-collected swabs &/or urine', 'Fingerprick self tests', 'Shipping', 'Clinician-reviewed results', 'Telehealth follow-up if required']
  },
  {
    tag: '100% privacy & discretion, tourists & no insurance', name: 'Private', price: '139', per: '',
    fineprint: 'Not eligible for any rebate',
    desc: 'Nothing is claimed on Medicare, uploaded to My Health Record or sent to your GP. Your screen stays completely off the record — your business is your business, and we\'ll help you keep it that way.',
    featured: true,
    incl: ['Self-collected swabs &/or urine', 'Fingerprick self tests', 'Shipping', 'Clinician-reviewed results', 'Telehealth follow-up if required']
  }];


  return (
    <section id="pricing" className="pr-section" data-screen-label="09 Pricing">
      <Container>
        <div className="pr-shead">
          <div>
            <Reveal d={0}><Kicker>Pricing</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1} style={{ marginTop: 18 }}>
              Flat prices.<br />No surprises.
            </Reveal>
          </div>
          <div className="right">All prices AUD<br />Includes GST &amp; shipping</div>
        </div>

        <div className="pr-pricing-grid">
          {plans.map((p, i) =>
          <Reveal key={p.name} className={'pr-plan ' + (p.featured ? 'featured' : '')} d={i + 3}>
              <span className="pr-pill">{p.tag}</span>
              <h3>{p.name}</h3>
              <p className="desc">{p.desc}</p>
              <div className="pr-plan-price">${p.price}<span>{p.per}</span></div>
              <div className="pr-plan-fineprint">{p.fineprint}</div>
              <ul>
                {p.incl.map((i, idx) => <li key={idx}>{i}</li>)}
              </ul>
              <a className={'pr-btn ' + (p.featured ? 'sage' : '')} href="#quiz">
                Start eligibility check <span className="pr-arrow">→</span>
              </a>
            </Reveal>
          )}
        </div>

        <p className="pr-pricing-fineprint">
          Telehealth follow-up is bulk-billed under Medicare if eligible, otherwise there is no out-of-pocket cost.
        </p>
      </Container>
    </section>);

}

// ── About ────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" className="pr-section" data-screen-label="10 About">
      <Container>
        <div className="pr-about">
          <Reveal className="pr-about-img" d={0}>
            <div className="pr-ph plum">
              FOUNDER PORTRAIT<br />or kit still-life<br />5:6 vertical
            </div>
          </Reveal>
          <div>
            <Reveal d={1}><Kicker>Why prickly</Kicker></Reveal>
            <Reveal as="p" className="pr-about-quote" d={2} style={{ marginTop: 18 }}>
              <RevealWords text="Routine screening should feel routine. We built it that way." />
            </Reveal>
            <Reveal as="p" className="pr-p" d={4} style={{ maxWidth: 520, marginBottom: 16, opacity: 0.82 }}>
              About one in three sexually active people in Australia don't keep up with routine
              STI screening — not because they don't want to, but because the path to a clinic
              is inconvenient enough that life wins.
            </Reveal>
            <Reveal as="p" className="pr-p" d={5} style={{ maxWidth: 520, marginBottom: 24, opacity: 0.82 }}>
              Prickly was built by an Australian sexual health GP to close that gap with the
              same standards a clinic uses: gold-standard PCR for chlamydia and gonorrhoea,
              TGA-listed rapid tests for HIV and syphilis, and a clinician reading every result.
            </Reveal>
            <Reveal as="p" className="pr-about-byline" d={6}>
              — Dr. M. Anderson, CMO · Prickly Health Pty Ltd
            </Reveal>
          </div>
        </div>
      </Container>
    </section>);

}

// ── Experience ───────────────────────────────────────────────────────────
function Experience() {
  // AHPRA s.133: testimonials about clinical aspects (symptoms, diagnosis, treatment,
  // outcome, practitioner skill) are prohibited. These quotes focus on packaging,
  // communication, and kit usability only.
  const quotes = [
  { tag: 'Packaging', q: "The plain packaging was the first thing I noticed — really thoughtful.", m: 'Anonymous · Melbourne' },
  { tag: 'Communication', q: "Replies came back within hours, not days. That was the bit I wasn't expecting.", m: 'Anonymous · Sydney' },
  { tag: 'Usability', q: "The instructions were genuinely clear. No googling required.", m: 'Anonymous · Brisbane' }];

  return (
    <section id="experience" className="pr-section tinted" data-screen-label="11 Experience notes">
      <Container>
        <div className="pr-shead">
          <div>
            <Reveal d={0}><Kicker>Experience notes</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1} style={{ marginTop: 18 }}>
              From people who've<br />used the service.
            </Reveal>
          </div>
          <div className="right">AHPRA-compliant<br />Non-clinical comments only</div>
        </div>
        <div className="pr-quotes">
          {quotes.map((q, i) =>
          <Reveal key={q.q} className="pr-quote" d={i + 2}>
              <span className="pr-pill">{q.tag}</span>
              <p>“{q.q}”</p>
              <span className="pr-quote-meta">— {q.m}</span>
            </Reveal>
          )}
        </div>
        <p className="pr-quote-note">
          Per AHPRA advertising rules, comments shown here concern packaging, communication style,
          and kit usability only. We do not publish testimonials about clinical aspects
          (symptoms, diagnosis, treatment, outcome, or practitioner skill).
        </p>
      </Container>
    </section>);

}

// ── FAQ ───────────────────────────────────────────────────────────────────
function Faq() {
  const items = [
  { q: "How long does it take, end-to-end?",
    a: "Typically about five business days. The kit posts within 1–2 days of your eligibility check being approved. Samples are returned to the lab in the prepaid reply package, PCR analysis takes 2–3 business days, and the result is then reviewed by an Australian-registered clinician before you hear from us." },
  { q: "What happens if my result is positive or indeterminate?",
    a: "You'll get an email asking you to book a Telehealth follow-up. The email itself contains no personal medical information. On the call, a clinician walks you through the result and your options — including electronic prescription, written referrals, and (if you want it) a copy of the summary letter sent to your regular GP." },
  { q: "Is this private? Will it show up on Medicare or my insurance?",
    a: "The initial eligibility check is not claimed against Medicare. Pathology and any Telehealth follow-up that is clinically indicated may appear on your Medicare claims history, the same way they would after a GP-ordered test. The kit is posted in plain packaging with no prickly branding visible on the outside." },
  { q: "Do I need a Medicare card?",
    a: "You need either a Medicare or IHI (Individual Healthcare Identifier) number to verify your identity and meet electronic prescribing requirements. If you're an Australian citizen, permanent resident, or visitor with an IHI, you're eligible." },
  { q: "What if I'm under 16?",
    a: "Prickly can't safely screen anyone under 16 through this service. Please speak to a GP, sexual health nurse, or your nearest sexual health clinic — most are free for under-25s." },
  { q: "What if I have symptoms?",
    a: "Prickly is designed for asymptomatic screening only. If you're experiencing symptoms — discharge, pain, bleeding, sores, lumps — please see a GP or attend a sexual health clinic instead. The eligibility check will flag this and redirect you." },
  { q: "How are the samples tested?",
    a: "Chlamydia and gonorrhoea are screened by lab PCR on the swab and/or urine specimens you self-collect. HIV and syphilis are screened using TGA-listed fingerprick rapid self tests included in the kit; you read these in your own time within 15 minutes." },
  { q: "Who reads the results?",
    a: "All lab results are reviewed by an Australian-registered Medical Practitioner or Nurse Practitioner before any communication is sent to you. Clinical oversight is provided by a Chief Medical Officer (a sexual health GP) who designs and audits the protocols annually." }];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="pr-section" data-screen-label="12 FAQ">
      <Container>
        <div className="pr-faq">
          <div className="pr-faq-side">
            <Reveal><Kicker>FAQ</Kicker></Reveal>
            <Reveal as="h2" className="pr-h2" d={1}>
              The actual<br />questions people ask.
            </Reveal>
            <Reveal as="p" className="pr-p sm" d={2} style={{ marginTop: 18, maxWidth: 320, opacity: 0.78 }}>
              Can't find what you're looking for?{' '}
              <a href="mailto:hello@prickly.com.au" style={{ textDecoration: 'underline', textUnderlineOffset: 3 }}>
                hello@prickly.com.au
              </a>{' '}— a clinician or operations team member replies, not a bot.
            </Reveal>
          </div>
          <div className="pr-faq-list">
            {items.map((it, i) =>
            <div key={it.q} className={'pr-faq-item ' + (open === i ? 'open' : '')}>
                <button className="pr-faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span className="pr-faq-q-text">{it.q}</span>
                  <span className="pr-faq-toggle" aria-hidden>+</span>
                </button>
                <div className="pr-faq-a"><div className="pr-faq-a-inner">{it.a}</div></div>
              </div>
            )}
          </div>
        </div>
      </Container>
    </section>);

}


// ── Footer ────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="pr-footer" data-screen-label="14 Footer">
      <Container>
        <div className="pr-footer-grid">
          <div>
            <Reveal as="div" className="pr-footer-wordmark">
              prickly<span className="dot" aria-hidden="true" />
            </Reveal>
            <p className="pr-footer-blurb">
              Clinician-led at-home STI screening for asymptomatic adults in Australia.
              Built on closed-loop care.
            </p>
            <span className="mono" style={{ fontSize: 11, opacity: 0.55, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              prickly.com.au · hello@prickly.com.au
            </span>
          </div>
          <div>
            <h5>The service</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#kit">What's in the package</a></li>
              <li><a href="#tests">What we screen for</a></li>
              <li><a href="#pricing">Pricing</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="mailto:hello@prickly.com.au">Contact</a></li>
              <li><a href="#">For clinicians</a></li>

            </ul>
          </div>
          <div>
            <h5>Legal & safety</h5>
            <ul>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Terms of Service</a></li>
              <li><a href="#">Complaints</a></li>
              <li><a href="#">Accessibility</a></li>
              <li><a href="#">Cookies</a></li>
            </ul>
          </div>
        </div>
        <div className="pr-footer-meta">
          <span>Prickly Health Pty Ltd · ABN 00 000 000 000</span>
          <span>If you have symptoms, please see a GP or sexual health clinic.</span>
          <span>© 2026</span>
        </div>
      </Container>
    </footer>);

}

// ── Site composition ──────────────────────────────────────────────────────
function PricklySite({ tweaks }) {
  const t = tweaks;
  const accent = ACCENT_OPTIONS[t.accent].hex;
  const copy = HERO_COPY[t.heroCopy];
  const motion = t.motion;

  const targetRef = React.useRef(null);
  const [pos, setPos] = React.useState(null);

  React.useEffect(() => {
    const onMove = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const style = {
    '--accent': accent,
    '--motion': motion === 'off' ? 1 : motion === 'high' ? 1.4 : motion === 'low' ? 0.6 : 1
  };
  const motionAttr = motion === 'off' ? 'off' : motion;

  return (
    <div className="pr-site" style={style} data-motion={motionAttr}>
      {pos && <div aria-hidden style={{
        position: 'fixed',
        width: 380, height: 380,
        borderRadius: '50%',
        background: accent,
        opacity: 0.28,
        filter: 'blur(90px)',
        transform: `translate(${pos.x - 190}px, ${pos.y - 190}px)`,
        top: 0, left: 0,
        pointerEvents: 'none',
        zIndex: 0,
        willChange: 'transform',
      }} />}
      <Nav />
      <Hero copy={copy} />
      <QuizSection />
      <HowItWorks />
      <Tests />
      <KitSection />
      <Clinical />
      <Pricing />
      <About />
      <Experience />
      <Faq />
      <Footer />
    </div>);

}

Object.assign(window, {
  PricklySite,
  HERO_COPY,
  ACCENT_OPTIONS
});