/* Loops — Company pages (About, The Team, Contact).
   Placeholder content in the established design system: minimal sticky nav,
   hero header, simple body blocks, shared Footer. Content to be briefed later.
   Render target chosen per-page via window.__companyPage ("about"|"team"|"contact"). */

const CompanyNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className="sticky top-0 z-50">
      <div className={`nav-blur transition-colors duration-300 ${scrolled ? "border-b border-line/80" : "border-b border-transparent"}`}>
        <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>
          <nav aria-label="Primary" className="hidden lg:flex items-center gap-1">
            <a href="/adhd/" className="focus-ring rounded-pill px-3.5 py-2 text-[14px] font-medium text-ink-2 hover:text-ink transition-colors">For ADHD</a>
            <a href="/adhd/knowledge-hub/" className="focus-ring rounded-pill px-3.5 py-2 text-[14px] font-medium text-ink-2 hover:text-ink transition-colors">Knowledge Hub</a>
            <a href="/blog/" className="focus-ring rounded-pill px-3.5 py-2 text-[14px] font-medium text-ink-2 hover:text-ink transition-colors">Blog</a>
          </nav>
          <div className="flex items-center gap-3">
            <Button variant="primary" size="md" href="/#download">Get Early Access</Button>
          </div>
        </Container>
      </div>
    </header>
  );
};

const CompanyHeader = ({ kicker, title, intro }) => (
  <section id="top" aria-label="Header" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-14 lg:pt-18 pb-10 lg:pb-12">
      <div className="max-w-prose">
        <Kicker>{kicker}</Kicker>
        <h1 className="mt-5 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[42px] lg:text-[48px]">{title}</h1>
        <p className="mt-6 text-[18px] sm:text-[19px] leading-[1.6] text-ink-2 text-pretty">{intro}</p>
      </div>
    </Container>
  </section>
);

const Placeholder = ({ label }) => (
  <span className="inline-flex items-center gap-2 rounded-pill border border-dashed border-brand/40 bg-brand-soft/50 px-3 py-1 text-[12px] font-semibold uppercase tracking-[0.1em] text-brand-deep">
    <span className="h-1.5 w-1.5 rounded-full bg-brand"></span>{label}
  </span>
);

/* ---------------- About ---------------- */

const ABOUT_FOUNDERS = [
  { name: "Collette Easton", href: "#", img: "/uploads/collette-easton.jpg", role: "Co-founder", bio: [
    { t: "h", v: "The story behind the work" },
    { t: "p", v: "I didn't go looking for an ADHD diagnosis. It found me through my son." },
    { t: "p", v: "His struggles at school led to a discovery about both of us, and it changed how I think about leadership, productivity and workplace culture. Permanently." },
    { t: "p", v: "For years, I assumed everyone else found parts of work easier than I did. They didn't. They simply had different challenges, often invisible within systems designed for neurotypical brains." },
    { t: "p", v: "I was diagnosed with combined-type ADHD in October 2022, aged 49, after a ten-month wait for assessment. I went into that room worried I would be told there was nothing wrong with my brain and everything wrong with my character." },
    { t: "p", v: "Instead, the diagnosis reframed a lifetime of patterns: changing jobs, unfinished projects, relentless self-doubt sitting alongside obvious success. It also changed the direction of my work. I retrained as an executive coach and became accredited with the Association for Coaching, the first thing I'd started and finished since leaving school." },
    { t: "q", v: "The mask pays the bills." },
    { t: "p", v: "A client once said that, and they captured something I had struggled to put into words. My work is about helping people take the mask off without sacrificing success, and helping organisations create environments where nobody feels they have to wear one in the first place." },

    { t: "h", v: "The road here" },
    { t: "card", v: "I left school at 15 with three GCSEs. Since then I've served in the military, sold double glazing, worked in recruitment, represented pharmaceutical companies, and started more businesses than I finished. Eventually I found my place in the digital industry. I grew agencies, moved through the ranks to became CEO and enjoyed 3 exits." },
    { t: "p", v: "That varied career has given me perspective from every angle. I've been the employee whose ADHD traits were misunderstood, and I've also been the untrained manager doing the misunderstanding, often within the same decade. That experience shapes everything I write, coach and build. It allows me to approach both individuals and organisations with empathy rather than judgement." },

    { t: "h", v: "Coaching, channelled into Loops" },
    { t: "p", v: "Loops was built by people who coach adults with ADHD, live with ADHD themselves, and understand what meaningful, sustainable goal setting really takes." },
    { t: "p", v: "It combines evidence-based coaching with practical tools designed to help people make progress today while building habits that last. The aim is simple: to help people work with their brains, not against them." },
  ] },
  { name: "Tom James", href: "#", img: "/uploads/tom-james.jpg" },
  { name: "Matt Humphreys", href: "#", img: "/uploads/matt-humphreys.jpg", bio: [
    { t: "h", v: "The story behind the work" },
    { t: "p", v: "After being diagnosed with ADHD in 2024, a lot of my life suddenly made sense. Years of second-guessing myself, wondering why some things felt harder than they seemed to for everyone else, were finally put into context. The diagnosis was a relief, but it also highlighted something I hadn't expected. Where was the actual support?" },
    { t: "p", v: "I started looking for tools that could help, but what I found rarely reflected my experience. Most apps felt superficial, built around exaggerated versions of ADHD or designed as though the people using them needed to be managed rather than understood." },
    { t: "q", v: "People deserve tools that respect their intelligence" },
    { t: "p", v: "Adults with ADHD don't need to be treated like children. We need tools that respect our intelligence, understand the realities of modern life, and recognise that our challenges are often hidden behind careers, families and responsibilities." },
    { t: "card", v: "That's why I'm helping to build Loops. We're a team who live with ADHD ourselves, building the kind of product we all wish we'd had years ago. One that's grounded in coaching, practical enough to use every day, and designed to work with the way our brains actually work rather than against them." },

    { t: "h", v: "My background" },
    { t: "p", v: "I've spent more than 15 years working across graphic design, motion design and marketing, helping businesses communicate ideas through digital products and experiences. That combination of creativity, problem solving and user-centred thinking shapes the way I approach everything I build today." },
    { t: "p", v: "My ADHD diagnosis didn't change who I am. It gave me the language to understand why I think differently. I can see that curiosity has always been the constant. I've always been fascinated by how people think, learn and solve problems." },
    { t: "p", v: "Helping people has been the thread running through every project I've chosen to be part of. Loops is the clearest expression of that." },

    { t: "h", v: "Beyond Loops" },
    { t: "p", v: "Outside of work, I'm endlessly curious." },
    { t: "p", v: "I'm fascinated by how technology shapes the way we live, work and connect with one another. AI has become a passion of mine, and I'm a strong advocate for using it thoughtfully to remove friction, unlock creativity and help us spend more time on the things that matter." },
    { t: "p", v: "That same curiosity led me to write a few self-published books." },
    { t: "card", v: "When I'm not designing, writing or experimenting with AI, you'll usually find me with a bag of pine cones. One of my longest-running hobbies is collecting pine seeds, germinating them and growing young trees. My ambition is to one day own a piece of land where I can plant the trees I've spent years growing." },
    { t: "p", v: "Looking back, I realise that's probably always been my way of seeing the world. I enjoy building things that take time. Whether that's a product, a book or a micro-forest, they're all investments in something bigger than today." },
  ] },];

/* Founder profile modal */
const FounderModal = ({ person, onClose }) => {
  React.useEffect(() => {
    if (!person) return;
    const onKey = (e) => e.key === "Escape" && onClose();
    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; document.removeEventListener("keydown", onKey); };
  }, [person, onClose]);

  if (!person) return null;

  return (
    <div className="fixed inset-0 z-[10000] flex items-center justify-center p-5" role="dialog" aria-modal="true" aria-labelledby="founder-modal-name">
      <div className="absolute inset-0 bg-ink/45 backdrop-blur-sm" onClick={onClose}></div>
      <div className="relative w-full max-w-2xl max-h-[88vh] overflow-auto rounded-card border border-line bg-white p-8 sm:p-10 shadow-lift fade-in-up">
        <button type="button" onClick={onClose} aria-label="Close"
          className="focus-ring absolute right-4 top-4 inline-flex h-9 w-9 items-center justify-center rounded-pill border border-line bg-soft text-ink hover:bg-muted transition-colors">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
        </button>

        <div className="flex flex-col items-center text-center">
          <img src={person.img} alt={person.name} width="144" height="144" className="h-32 w-32 sm:h-36 sm:w-36 rounded-pill object-cover shadow-cta" />
          <h2 id="founder-modal-name" className="mt-6 text-[26px] sm:text-[30px] font-bold tracking-tight3 text-ink leading-tight">{person.name}</h2>
          {person.role ? <div className="mt-1.5 text-[13px] font-semibold uppercase tracking-[0.12em] text-brand-deep">{person.role}</div> : null}
        </div>

        <div className="mt-8 text-left">
          {(person.bio || []).map((b, i) => {
            if (b.t === "h") return <h3 key={i} className={`${i === 0 ? "" : "mt-9 "}text-[19px] sm:text-[21px] font-semibold tracking-tight2 text-ink leading-snug`}>{b.v}</h3>;
            if (b.t === "q") return (
              <figure key={i} className="mt-6 rounded-card bg-muted p-6 sm:p-7 border-l-4 border-brand">
                <blockquote className="text-[18px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-[1.35] text-balance">&ldquo;{b.v}&rdquo;</blockquote>
              </figure>
            );
            if (b.t === "card") return (
              <div key={i} className="mt-6 rounded-card border border-line bg-soft p-6 sm:p-7">
                <p className="text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">{b.v}</p>
              </div>
            );
            return <p key={i} className="mt-4 text-[16px] leading-[1.72] text-ink-2 text-pretty">{b.v}</p>;
          })}
        </div>
      </div>
    </div>
  );
};

const ABOUT_BELIEFS = [
  "Small steps beat big pressure.",
  "Progress happens in loops, not straight lines.",
  "Simple is a form of care.",
  "You should never have to mask.",
];

const AboutPage = () => {
  const [active, setActive] = React.useState(null);
  return (
  <main id="main">
    <CompanyNav />
    <section id="top" aria-label="Header" className="relative overflow-hidden">
      <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
      <Container className="pt-14 lg:pt-18 pb-14 lg:pb-20">
        <div className="max-w-prose">
          <Kicker>About Loops</Kicker>
          <h1 className="mt-5 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[42px] lg:text-[48px]">Why we built it.</h1>
          <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            <p>Loops was built by people with ADHD, for people with ADHD.</p>
            <p>We tried the apps. We tried the tools. We tried the systems that promised to sort everything out. None of them worked the way our brains actually work.</p>
          </div>
          <div className="mt-6 rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <p className="text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">Most were built around an exaggerated version ADHD. Set a reminder. Make a list. Just try harder. All surface, no real understanding. They were fixing a version of ADHD that doesn't really exist.</p>
          </div>
          <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            <p>So we stopped waiting for someone else to get it right.</p>
            <p>We built Loops for the way ADHD brains actually work. Not the tidy version. The real one, with all its stops and starts, its brilliant days and its stuck ones.</p>
          </div>
          <div className="mt-8 rounded-card border border-brand/25 bg-brand-soft/50 p-7 sm:p-9 shadow-card">
            <p className="text-[20px] sm:text-[24px] leading-[1.35] text-ink font-semibold tracking-tight2 text-balance">We built the thing we always needed.</p>
          </div>
        </div>
      </Container>
    </section>

    {/* Who we are */}
    <Section className="bg-soft">
      <Container>
        <div className="max-w-prose">
          <Kicker>Who we are</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">Loops was created by four people who live with ADHD every day.</h2>
          <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">We're not a faceless company watching from the outside. Every feature, every word and every decision comes from people who know exactly how it feels, because we feel it too.</p>
        </div>

        <div className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {ABOUT_FOUNDERS.map((f) => (
            <article key={f.name} className="flex flex-col items-center rounded-card border border-line bg-white p-6 text-center shadow-soft">
              <img src={f.img} alt={f.name} className="h-24 w-24 rounded-pill object-cover" width="96" height="96" />
              <h3 className="mt-5 text-[18px] font-semibold tracking-tight2 text-ink">{f.name}</h3>
              <div className="mt-5">
                {f.bio
                  ? <Button as="button" type="button" variant="secondary" size="sm" onClick={() => setActive(f)}>Learn More</Button>
                  : <Button variant="secondary" size="sm" href={f.href}>Learn More</Button>}
              </div>
            </article>
          ))}
        </div>
      </Container>
    </Section>

    {/* Our mission */}
    <Section className="bg-base">
      <Container>
        <div className="max-w-prose">
          <Kicker>Our mission</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">To make life easier to navigate for ADHD brains.</h2>
          <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">Not by shouting louder or piling on more pressure, but by removing friction, easing overwhelm and helping you take the next small step. Every day. In a way that finally fits.</p>
        </div>
      </Container>
    </Section>

    {/* What we believe */}
    <Section className="bg-soft">
      <Container>
        <div className="max-w-prose">
          <Kicker>What we believe</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">ADHD isn't a flaw to fix.</h2>
          <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">It's a different way of working, and it deserves tools built with that in mind.</p>
        </div>
        <div className="mt-10 grid gap-4 sm:grid-cols-2">
          {ABOUT_BELIEFS.map((b, i) => (
            <article key={i} className="flex items-center gap-4 rounded-card border border-line bg-white p-6 shadow-soft">
              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-brand-deep" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </span>
              <p className="text-[16px] leading-[1.55] text-ink font-medium text-pretty">We believe {b}</p>
            </article>
          ))}
        </div>
      </Container>
    </Section>

    {/* Where we're headed */}
    <Section className="bg-base">
      <Container>
        <div className="max-w-prose">
          <Kicker>Where we're headed</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">The coaching system we wish had existed years ago.</h2>
          <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">One that grows with you, meets you where you are, and keeps getting better the more we listen.</p>
          <p className="mt-4 text-[17px] sm:text-[18px] leading-[1.65] text-ink font-medium text-pretty">This is just the start. And we're really glad you're here for it.</p>
        </div>
        <div className="mt-9">
          <Button variant="primary" size="lg" href="/#download">Get Early Access</Button>
        </div>
      </Container>
    </Section>

    <Footer />
    <FounderModal person={active} onClose={() => setActive(null)} />
  </main>
  );
};

/* ---------------- The Team ---------------- */

const TeamPage = () => (
  <main id="main">
    <CompanyNav />
    <CompanyHeader
      kicker="The team"
      title="The people behind Loops."
      intro="This is placeholder copy. Short bios and photos of the team building Loops will live here once briefed."
    />
    <Section className="bg-base">
      <Container>
        <div className="max-w-prose"><Placeholder label="Team members to come" /></div>
        <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <article key={i} className="rounded-card border border-line bg-white p-6 shadow-soft">
              <div aria-hidden="true" className="h-16 w-16 rounded-pill bg-muted"></div>
              <h3 className="mt-4 text-[17px] font-semibold tracking-tight2 text-ink">Name Surname</h3>
              <p className="text-[13.5px] font-medium text-brand-deep">Role at Loops</p>
              <p className="mt-3 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">Placeholder bio. A short line or two about this person and what they do will go here.</p>
            </article>
          ))}
        </div>
      </Container>
    </Section>
    <Footer />
  </main>
);

/* ---------------- Contact ---------------- */

const CONTACT_ADDRESSES = [
  { t: "For general questions", email: "contact@loops.work", d: "Ideas, feedback, a quick hello, or something that doesn't fit neatly anywhere else. This is the one." },
  { t: "For help with your account or the app", email: "help@loops.work", d: "Stuck on something? Not sure how a feature works? Send this address the details and we'll help you sort it out." },
  { t: "For anything about your privacy or data", email: "privacy@loops.work", d: "Questions about your information, your privacy, or how your data is handled. This goes straight to the right people." },
];

const ContactPage = () => (
  <main id="main">
    <CompanyNav />
    <section id="top" aria-label="Header" className="relative overflow-hidden">
      <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
      <Container className="pt-14 lg:pt-18 pb-14 lg:pb-20">
        <div className="max-w-prose">
          <Kicker>Contact us</Kicker>
          <h1 className="mt-5 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[42px] lg:text-[48px]">Got something on your mind? We'd love to hear from you.</h1>
          <p className="mt-6 text-[18px] sm:text-[19px] leading-[1.6] text-ink-2 text-pretty">Whatever you write, it lands with a real person. Not a bot. Not an automated system. Someone on our team who reads it properly and writes back.</p>
          <div className="mt-6 rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <p className="text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">You don't need to word it perfectly. You don't need a tidy explanation. Just tell us what's going on, in whatever way feels easiest, and we'll take it from there.</p>
          </div>
        </div>
      </Container>
    </section>

    {/* Where to send your message */}
    <Section className="bg-soft">
      <Container>
        <div className="max-w-prose">
          <Kicker>Where to send your message</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">Pick the closest fit.</h2>
          <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">Not sure which one to use? Pick the closest fit. If you get it wrong, don't worry, we'll make sure it reaches the right person.</p>
        </div>
        <div className="mt-10 grid gap-4 sm:gap-5 lg:grid-cols-3">
          {CONTACT_ADDRESSES.map((c) => (
            <article key={c.email} className="flex flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
              <h3 className="text-[16.5px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
              <a href={`mailto:${c.email}`} className="mt-2 text-[15.5px] font-semibold text-brand-deep hover:underline break-words">{c.email}</a>
              <p className="mt-3 flex-1 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{c.d}</p>
            </article>
          ))}
        </div>
      </Container>
    </Section>

    {/* What happens next */}
    <Section className="bg-base">
      <Container>
        <div className="max-w-prose">
          <Kicker>What happens next</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">Once you've sent your message, that's the hard part done.</h2>
          <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">A real person will read it and get back to you. There's no rush at your end, and no pressure to reply quickly when we do. Take the time you need.</p>
        </div>
        <div className="mt-8 max-w-3xl rounded-card border border-brand/25 bg-brand-soft/50 p-7 sm:p-9 shadow-card">
          <p className="text-[20px] sm:text-[24px] leading-[1.35] text-ink font-semibold tracking-tight2 text-balance">We're really glad you reached out.</p>
        </div>
      </Container>
    </Section>

    <Footer />
  </main>
);

const COMPANY_PAGES = { about: AboutPage, team: TeamPage, contact: ContactPage };
const CompanyRoot = COMPANY_PAGES[(typeof window !== "undefined" && window.__companyPage) || "about"];
ReactDOM.createRoot(document.getElementById("root")).render(<CompanyRoot />);
