/* Loops — FAQ + Final CTA + Footer */

const FAQS = [
  {
    q: "I've tried a lot of apps for ADHD, and they overwhelm me. How is Loops different?",
    a: "Loops was made by people who coach others with ADHD, live with ADHD themselves, and know goal setting inside out. Everything they've learned about what really helps has gone into the app.\n\nLoops works in layers, each one there to help you succeed at what matters most, now and in the future.\n\nIt starts by breaking your goals into small, doable commitments, with every one moving you towards something bigger.\n\nOnce those are in place, staying accountable to people who matter keeps you going, through gentle encouragement rather than pressure. And because the ADHD brain responds well to rewards, you get frequent ones that actually mean something.\n\nThen there's the part that feels a little magical. An AI you can talk to that truly gets ADHD, and that's been trained to offer Loop ideas and support whenever you need them.",
  },
  {
    q: "What are AI credits and what if I run out of credits?",
    a: "AI uses credits to give you advice. The longer the conversations and the more context you have added to Loops, which includes previous chats, your Loops and Goals, the more credits you consume in computing power. We hope that you will have enough for what you need in your plan. If you run out and need more, you can top up. To save on credits, start new chats for new topics, and manage what AI is remembering about you — something that is available to you at all times.",
  },
  {
    q: "Is there a free trial?",
    a: "You can try Loops for 7 days for free.",
  },
  {
    q: "Can I cancel any time?",
    a: "Yes. Cancel any time, no questions, no friction. Annual plans cancelled in the first 30 days get a full refund.",
  },
  {
    q: "Will my data be used to train AI?",
    a: "No. Your conversations, journal entries, and personal data are never used to train AI models. They're used to coach you. You can see and delete what the AI is learning about you in your admin at any time. Total transparency, that's the whole architecture.",
  },
  {
    q: "How does AI compare to human coaching?",
    a: "Loops is not a replacement for professional therapy or the right human coach. Loops has been trained to understand ADHD and the ADHD mind, along with the best ways to pursue and achieve common goals set by users. That combination is going to be very useful for you. It has also been trained to know where the boundaries are and when you need to talk to someone.",
  },
  {
    q: "Is there an Android version?",
    a: "It's coming soon, promise.",
  },
];

const FAQItem = ({ q, a, defaultOpen = false }) => {
  // Use details/summary for accessible, JS-free accordion behaviour
  return (
    <details
      open={defaultOpen}
      className="group rounded-card border border-line bg-white shadow-soft transition-colors hover:border-muted open:border-muted"
    >
      <summary className="focus-ring flex items-start gap-4 rounded-card px-6 py-5 sm:px-7 sm:py-6 list-none">
        <span className="flex-1 text-[16px] sm:text-[17px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">{q}</span>
        <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-pill bg-soft text-ink-2 transition-transform duration-200 group-open:rotate-45 group-open:bg-brand-soft group-open:text-brand">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
        </span>
      </summary>
      <div className="px-6 sm:px-7 pb-6 -mt-1">
        <p className="max-w-prose text-[15.5px] sm:text-[16px] leading-[1.65] text-ink-2 text-pretty whitespace-pre-line">{a}</p>
      </div>
    </details>
  );
};

const FAQSection = () => (
  <Section id="faq" className="bg-base">
    <Container>
      <div className="grid gap-10 lg:gap-16 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <Kicker>FAQ</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
            Questions, calmly answered.
          </h2>
          <p className="mt-5 text-[16px] leading-[1.65] text-ink-2 max-w-md">
            Couldn't find what you needed? <a href="/contact/" className="text-brand-deep font-semibold hover:underline">Contact us</a>. A real person will reply.
          </p>
        </div>
        <div className="lg:col-span-8 flex flex-col gap-3">
          {FAQS.map((f, i) => (
            <FAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />
          ))}
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Final CTA ---------------- */

const FinalCTA = () => (
  <Section id="start" className="bg-soft">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <Kicker>Start your first loop</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[32px] sm:text-[40px] lg:text-[52px] leading-[1.08]">
            A daily coach, the moment you open the app.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            One loop. One small daily action. One person you respect in the loop with you. Start today, keep what works.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <Button variant="primary" size="lg" href="#download">
              Get Early Access
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </Button>
          </div>
          <p className="mt-3 text-[13.5px] text-ink-3">7-day free trial. No complicated setup.</p>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
            <AppStoreBadge store="apple" />
          </div>
          <div className="mt-8">
            <Keyline className="mx-auto max-w-[160px]" />
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Footer ---------------- */

const FOOTER_COLUMNS = [
  {
    title: "Loops",
    links: [
      { l: "Home", h: "/" },
      { l: "For ADHD", h: "/adhd/" },
      { l: "The Knowledge Hub", h: "/adhd/knowledge-hub/" },
      { l: "Blog", h: "/blog/" },
      { l: "AI Coach", h: "/ai-coach/" },
      { l: "No Diagnosis Needed", h: "/no-diagnosis-needed/" },
      { l: "Find Help", h: "/support/find-help/" },
    ],
  },
  {
    title: "Understanding ADHD",
    links: [
      { l: "The shame spiral", h: "/adhd/shame-spiral-with-adhd/" },
      { l: "Body doubling", h: "/adhd/body-doubling-with-adhd/" },
      { l: "Time blindness", h: "/adhd/time-blindness-with-adhd/" },
      { l: "Rejection sensitive dysphoria", h: "/adhd/rejection-sensitive-dysphoria-with-adhd/" },
      { l: "Hyperfocus", h: "/adhd/hyperfocus-with-adhd/" },
    ],
  },
  {
    title: "Company",
    links: [
      { l: "About", h: "/about/" },
      { l: "Contact", h: "/contact/" },
    ],
  },
];

const SocialIcon = ({ name }) => {
  const paths = {
    linkedin: <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" fill="currentColor"/>,
    instagram: <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" fill="currentColor"/>,
  };
  return (
    <svg width="18" height="18" viewBox="0 0 16 16" aria-hidden="true">{paths[name]}</svg>
  );
};

const Footer = () => (
  <footer className="bg-ink text-white">
    <Container className="py-16 lg:py-20">
      <div className="grid gap-12 lg:grid-cols-12">
        {/* Brand */}
        <div className="lg:col-span-4 max-w-sm">
          <a href="#top" aria-label="Loops home" className="focus-ring inline-flex items-center rounded-pill">
            <img src={(typeof window !== "undefined" && window.__resources && window.__resources.logoWhite) || "/assets/loops-logo-white.svg"} alt="Loops" className="h-8 w-auto" width="97" height="32" />
          </a>
          <p className="mt-5 text-[15px] leading-[1.65] text-white/70 text-pretty">
            A daily coach who travels with you across the seasons of your life. Designed for ADHD. Loops work for everyone.
          </p>
          <div className="mt-6 flex flex-wrap gap-2.5">
            <a href="#download" aria-label="Download Loops on iOS"
              className="focus-ring inline-flex items-center gap-3 rounded-[14px] bg-white/10 hover:bg-white/15 transition-colors pl-3.5 pr-4 h-[48px]">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.365 1.43c0 1.14-.46 2.23-1.21 3.01-.79.83-2.09 1.47-3.15 1.39-.13-1.1.42-2.26 1.16-3.01.83-.85 2.23-1.46 3.2-1.39ZM20.5 17.4c-.55 1.27-.82 1.83-1.53 2.95-1 1.56-2.4 3.51-4.14 3.52-1.55.01-1.95-1.01-4.05-1-2.1.01-2.54 1.02-4.09 1-1.74-.01-3.07-1.78-4.06-3.34-2.78-4.36-3.07-9.48-1.36-12.2 1.22-1.94 3.14-3.07 4.95-3.07 1.84 0 3 1.01 4.51 1.01 1.47 0 2.37-1.02 4.5-1.02 1.61 0 3.32.88 4.54 2.4-3.98 2.18-3.34 7.87.73 9.76Z"/></svg>
              <span className="flex flex-col items-start leading-tight">
                <span className="text-[10px] opacity-80 font-normal">Download on</span>
                <span className="text-[14px] font-semibold tracking-tight">App Store</span>
              </span>
            </a>
          </div>
        </div>

        {/* Link columns */}
        <div className="lg:col-span-8 grid grid-cols-2 sm:grid-cols-3 gap-8">
          {FOOTER_COLUMNS.map((col) => (
            <div key={col.title}>
              <div className="text-[12.5px] font-semibold uppercase tracking-[0.1em] text-white/55">{col.title}</div>
              <ul className="mt-4 space-y-3">
                {col.links.map((l) => (
                  <li key={l.l}>
                    <a href={l.h} className="focus-ring rounded text-[14.5px] text-white/85 hover:text-white transition-colors">{l.l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-14 pt-8 border-t border-white/10 flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-[13px] text-white/55">
          <span>© {new Date().getFullYear()} Loops Coaching Ltd.</span>
          <a href="/privacy/" className="hover:text-white/85">Privacy</a>
          <a href="/terms/" className="hover:text-white/85">Terms</a>
          <a href="/safety/" className="hover:text-white/85">Safety &amp; Care</a>
          <a href="#cookies" onClick={(e) => { e.preventDefault(); if (window.loopsCookieChoices) window.loopsCookieChoices(); }} className="hover:text-white/85">Cookies</a>
        </div>
        <div className="flex items-center gap-3">
          <a href="https://www.linkedin.com/company/loops-work/" target="_blank" rel="noopener noreferrer" aria-label="Loops on LinkedIn" className="focus-ring rounded-pill flex h-9 w-9 items-center justify-center bg-white/10 hover:bg-white/15 text-white"><SocialIcon name="linkedin" /></a>
          <a href="https://www.instagram.com/loops.work/" target="_blank" rel="noopener noreferrer" aria-label="Loops on Instagram" className="focus-ring rounded-pill flex h-9 w-9 items-center justify-center bg-white/10 hover:bg-white/15 text-white"><SocialIcon name="instagram" /></a>
        </div>
      </div>
    </Container>
  </footer>
);

Object.assign(window, { FAQSection, FinalCTA, Footer });
