/* Loops — Homepage v2 hero */

const V2PhoneShot = ({ src, alt }) =>
<img src={src} alt={alt} className="h-full w-full object-cover object-top" />;

const V2HeroPhoneStage = () =>
<div className="relative mx-auto w-full max-w-[460px]">
    <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
      <div className="absolute left-1/2 top-1/2 h-[420px] w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full"
        style={{ background: "radial-gradient(circle, rgba(76,82,221,0.10) 0%, rgba(76,82,221,0) 70%)" }} />
    </div>
    <div className="relative flex items-center justify-center pt-2 pb-4">
      <div className="hidden md:block absolute right-[-32px] top-10 origin-bottom rotate-[6deg] scale-[0.78] opacity-95">
        <PhoneShell w={300} h={620}>
          <V2PhoneShot src="/uploads/loops-2-33388d17.jpg" alt="Loops coach conversation" />
        </PhoneShell>
      </div>
      <div className="relative z-10 origin-bottom md:-rotate-[2deg]">
        <PhoneShell w={300} h={620}>
          <V2PhoneShot src="/uploads/loops-1-3b9f7754.jpg" alt="Loops home screen showing today's loops" />
        </PhoneShell>
      </div>
    </div>
  </div>;

const HeroV2 = () =>
<section id="top" aria-label="Hero" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-12 lg:pt-20 pb-20 lg:pb-28">
      <div className="grid gap-12 lg:gap-16 lg:grid-cols-[1.05fr_0.95fr] items-center">
        <div className="max-w-[640px]">
          <div className="mb-7 fade-in-up">
            <span className="gradient-ring inline-flex items-center bg-white px-4 py-2 shadow-soft">
              <span className="text-[13px] sm:text-[13.5px] font-semibold text-ink" style={{ fontSize: "16px" }}>
                Designed for ADHD. Built for everyone.
              </span>
            </span>
          </div>

          <h1 className="text-ink font-bold tracking-tight3 leading-[1.02] text-[38px] sm:text-[50px] lg:text-[60px] fade-in-up delay-1">
            You don't lack willpower. You lack a system and a <span className="text-brand">Buddy.</span>
          </h1>

          <p className="mt-7 text-[17px] sm:text-[19px] leading-[1.55] text-ink-2 text-pretty fade-in-up delay-2">
            Loops helps people with ADHD struggle less and succeed more every single day.
          </p>

          <div className="mt-6 flex flex-wrap gap-2.5 fade-in-up delay-3">
            {["Small Loops", "A Buddy", "Rewards", "An AI coach who gets it"].map((c) =>
            <span key={c} className="inline-flex items-center rounded-pill bg-brand-soft px-4 py-2 text-[14px] font-semibold text-brand-deep">{c}</span>
            )}
          </div>

          <p className="mt-6 max-w-[540px] text-[16px] sm:text-[17px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-3">
            You've tried the planners, the timers, the habit trackers. The problem was never the tools. <span className="text-ink font-medium">ADHD brains don't finish for apps. They finish for people.</span> Loops is built around that.
          </p>

          <div className="mt-8 flex flex-wrap items-center gap-3 fade-in-up delay-3">
            <Button variant="primary" size="lg" href="#start">
              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 fade-in-up delay-3">7-day free trial. No complicated setup.</p>
        </div>

        <div className="fade-in-up delay-2">
          <V2HeroPhoneStage />
        </div>
      </div>
    </Container>
  </section>;

Object.assign(window, { HeroV2, V2PhoneShot });