/* Loops — Support page (/support/). App Store Connect Support URL.
   Facts stated here are accurate as of 7 September 2026: three notifications a day,
   quiet hours 9pm to 8am, 30 credits free and 100 on a subscription. If any of those
   change in the app, change them here too. */

const SUPPORT_NAV_LINKS = [
  { label: "For ADHD", href: "/adhd/" },
  { label: "Blog", href: "/blog/" },
  { label: "Contact", href: "/contact/" },
];

const SupportNav = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <header className="sticky top-0 z-50">
      <div className="nav-blur border-b border-line/80">
        <Container className="flex h-[64px] items-center justify-between gap-6">
          <a href="/" aria-label="Loops home" className="focus-ring inline-flex items-center rounded-pill">
            <img src="/assets/loops-logo-beta.png" alt="Loops" className="h-7 w-auto" width="100" height="28" />
          </a>
          <div className="hidden md:flex items-center gap-5">
            <nav aria-label="Primary" className="flex items-center">
              {SUPPORT_NAV_LINKS.map((l) =>
              <a key={l.href} href={l.href} className="focus-ring rounded-pill px-3 py-2 text-[14px] font-medium text-ink-2 hover:text-ink transition-colors">{l.label}</a>
              )}
            </nav>
            <Button variant="primary" size="sm" href="mailto:support@loops.work">Email support</Button>
          </div>
          <button type="button" aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open}
            className="focus-ring md:hidden inline-flex h-11 w-11 items-center justify-center rounded-pill border border-line bg-white" onClick={() => setOpen((o) => !o)}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              {open ? <path d="M6 6l12 12M18 6L6 18" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" /> : <g><path d="M4 8h16" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" /><path d="M4 16h16" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" /></g>}
            </svg>
          </button>
        </Container>
      </div>
      {open ?
      <div className="md:hidden nav-blur border-b border-line">
        <Container className="py-5">
          <nav aria-label="Mobile" className="flex flex-col gap-1">
            {SUPPORT_NAV_LINKS.map((l) =>
            <a key={l.href} href={l.href} className="focus-ring rounded-tile px-4 py-3.5 text-[16px] font-medium text-ink hover:bg-soft">{l.label}</a>
            )}
          </nav>
          <div className="mt-4"><Button variant="primary" size="md" href="mailto:support@loops.work" className="w-full">Email support</Button></div>
        </Container>
      </div> :
      null}
    </header>
  );
};

/* The nine questions people actually ask. Answers are the promise, so keep the wording. */
const SUPPORT_QUESTIONS = [
  {
    id: "streak",
    q: "My streak didn't go up",
    a: <React.Fragment>
      A streak counts days you were <em>owed</em> something and did it. A loop set to three times a week isn't owed on any particular day, so a goal whose only loop is weekly is counted in weeks rather than days. The streak card says which. Logging <strong>Some</strong> counts towards a streak, the same as Done. A rest day never breaks one.
    </React.Fragment>
  },
  {
    id: "reminders",
    q: "I'm not getting reminders",
    a: <React.Fragment>
      Check <strong>Settings &rarr; Notifications</strong> in Loops, then iOS <strong>Settings &rarr; Notifications &rarr; Loops</strong>. If iOS has Loops set to "Deliver Quietly", or the app is in a Scheduled Summary, notifications arrive without a sound or a banner. Loops sends at most three a day and never between 9pm and 8am, in your own timezone.
    </React.Fragment>
  },
  {
    id: "credits",
    q: "What are credits?",
    a: <React.Fragment>
      Talking to your coach uses credits, because each reply costs us: one credit per message. A subscription includes a monthly allowance, and you can also buy one-off top-ups. Your credits reset monthly. Everything the subscription includes is listed on the Credits and plan screen in the app, which is always the current answer.
    </React.Fragment>
  },
  {
    id: "cancel",
    q: "How do I cancel my subscription?",
    a: <React.Fragment>
      Through Apple, not through us: on your iPhone, <strong>Settings &rarr; your name &rarr; Subscriptions &rarr; Loops &rarr; Cancel</strong>. We can't cancel it for you and we can't see your payment details. Cancelling stops the renewal; you keep what you've paid for until the period ends. If a free trial is running, cancel before it ends and you won't be charged.
    </React.Fragment>
  },
  {
    id: "corner",
    q: "How do I add someone to my corner?",
    a: <React.Fragment>
      Open <strong>Your corner</strong> from the home screen and tap invite. You'll get a short code to send them; they enter it in their own copy of Loops. You'll then each see what the other closes, and can cheer it on. You can have more than one person, and either of you can remove the link at any time. It goes both ways, and rebuilding it needs a fresh invite. It's free, on any plan.
    </React.Fragment>
  },
  {
    id: "partner",
    q: "What can my partner see?",
    a: <React.Fragment>
      The name you gave at sign-up, and the loops, goals and rewards you complete. That's it. Not your journal, not your notes, not anything you say to your coach, and never the days you missed. <strong>Loops does not tell anybody what you didn't do.</strong>
    </React.Fragment>
  },
  {
    id: "coach",
    q: "Is the coach a therapist?",
    a: <React.Fragment>
      No. It's an AI coach for getting things done, and it can't diagnose anything, advise on medication, or replace professional care. If you're in crisis, please contact your local emergency services. In the UK, Samaritans are on <a href="tel:116123" className="font-semibold text-brand-deep hover:underline">116 123</a>, free, any hour.
    </React.Fragment>
  },
  {
    id: "delete",
    q: "How do I delete my account?",
    a: <React.Fragment>
      In the app: <strong>Settings &rarr; Delete account</strong>. It removes your account and your data, and it can't be undone. If a subscription is running, cancel it through Apple as above. Deleting the account doesn't stop Apple billing you.
    </React.Fragment>
  },
  {
    id: "data",
    q: "Where is my data kept?",
    a: <React.Fragment>
      On servers in the EU. Messages you send your coach are processed by Anthropic to generate the reply. Nothing is sold, and nothing is used for advertising. The <a href="/privacy/" className="font-semibold text-brand-deep hover:underline">privacy policy</a> has the detail.
    </React.Fragment>
  },
];

const SupportHero = () =>
<section id="top" aria-label="Support" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-12 lg:pt-16 pb-14 lg:pb-20">
      <div className="max-w-[680px]">
        <div className="mb-6 fade-in-up">
          <span className="gradient-ring inline-flex items-center bg-white px-4 py-2 shadow-soft">
            <span className="text-[13.5px] font-semibold text-ink">A person replies, not a bot</span>
          </span>
        </div>
        <h1 className="text-ink font-bold tracking-tight3 leading-[1.04] text-[40px] sm:text-[52px] lg:text-[60px] fade-in-up delay-1">
          Support
        </h1>
        <p className="mt-6 max-w-[560px] text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty fade-in-up delay-2">
          Something not working, or a question the app doesn't answer? Write to us and a person will reply.
        </p>
        <div className="mt-8 flex flex-wrap items-center gap-4 fade-in-up delay-3">
          <Button variant="primary" size="lg" href="mailto:support@loops.work">Email support@loops.work</Button>
        </div>
        <p className="mt-6 max-w-[540px] text-[15.5px] leading-[1.65] text-ink-3 text-pretty fade-in-up delay-3">
          We aim to reply within two working days. If you're reporting something broken, telling us your iPhone model and what you were doing at the time saves a round trip.
        </p>
      </div>
    </Container>
  </section>;

const SupportQuestions = () =>
<Section id="questions" className="bg-soft">
    <Container>
      <SectionHeading kicker="Common questions" title="The answers most people are looking for" />
      <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {SUPPORT_QUESTIONS.map((item, i) =>
        <article key={item.id} id={item.id} className="rounded-card border border-line bg-white p-6 shadow-soft fade-in-up" style={{ animationDelay: `${Math.min(i, 5) * 80}ms` }}>
          <h3 className="text-[17px] font-semibold leading-[1.3] text-ink text-balance">{item.q}</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{item.a}</p>
        </article>
        )}
      </div>
      <p className="mt-10 text-[15.5px] leading-[1.65] text-ink-2">
        Still stuck? <a href="mailto:support@loops.work" className="font-semibold text-brand-deep hover:underline">Email support@loops.work</a> and tell us what happened. If you're looking for ADHD services rather than app help, our <a href="/find-help/" className="font-semibold text-brand-deep hover:underline">ADHD support resources</a> list where to start.
      </p>
    </Container>
  </Section>;

const SupportLegalRow = () =>
<Section id="legal" className="bg-base py-12 sm:py-14 lg:py-16">
    <Container>
      <div className="flex flex-wrap items-center gap-x-6 gap-y-3 text-[15px] text-ink-3">
        <a href="/terms/" className="font-medium text-brand-deep hover:underline">Terms</a>
        <a href="/privacy/" className="font-medium text-brand-deep hover:underline">Privacy</a>
        <a href="mailto:support@loops.work" className="font-medium text-brand-deep hover:underline">support@loops.work</a>
      </div>
    </Container>
  </Section>;

const SupportPage = () =>
<React.Fragment>
    <SupportNav />
    <main id="main">
      <SupportHero />
      <SupportQuestions />
      <SupportLegalRow />
    </main>
    <Footer />
  </React.Fragment>;

ReactDOM.createRoot(document.getElementById("root")).render(<SupportPage />);