/* Loops — shared product screenshot gallery (carousel) for use-case pages.
   Self-contained phone frame + carousel. Exported to window as LoopsGallery. */

const LG_SHOTS = [
  { src: "/uploads/loops-1-3b9f7754.jpg", label: "Today", caption: "One clear list. Just today's loops, nothing else shouting for your attention." },
  { src: "/uploads/loops-2-33388d17.jpg", label: "Coach", caption: "A coach that talks like a person, not a chatbot, and already knows your goals." },
  { src: "/uploads/loops-3-a4dfc3d2.jpg", label: "Reflect", caption: "Gentle questions to reflect on, for the moments you need to think, not just do." },
  { src: "/uploads/loops-5-79987913.jpg", label: "Suggested loops", caption: "Ask for ideas and get specific, doable loops tied to what matters to you." },
  { src: "/uploads/loops-4-491859cd.jpg", label: "Coaching skills", caption: "Coaching tuned to the parts of life you're actually working on." },
  { src: "/uploads/loops-6-7f5c9e5c.jpg", label: "Journal", caption: "A weekly journal for what worked, what didn't, and the patterns underneath." },
  { src: "/uploads/loops-7-e04b9627.jpg", label: "Ideas", caption: "Capture an idea the moment it strikes. Act on it when you're ready, not before." },
];

const LgPhone = ({ src, alt }) => (
  <div className="relative mx-auto" style={{ width: "270px" }}>
    <div className="relative rounded-[2.6rem] border border-line bg-white p-2.5 shadow-lift">
      <div className="overflow-hidden rounded-[2rem] bg-soft" style={{ aspectRatio: "9 / 18.4" }}>
        <img src={src} alt={alt} loading="lazy" className="h-full w-full object-cover object-top" />
      </div>
    </div>
  </div>
);

const LoopsGalleryPhone = () => {
  const [i, setI] = React.useState(0);
  const n = LG_SHOTS.length;
  const go = (d) => setI((p) => (p + d + n) % n);
  const shot = LG_SHOTS[i];
  return (
    <div className="flex flex-col items-center">
      <div className="flex items-center justify-center gap-1.5 sm:gap-2">
        <button type="button" aria-label="Previous screen" onClick={() => go(-1)}
          className="focus-ring inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-pill border border-line bg-white text-ink shadow-soft transition-colors hover:bg-soft">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </button>

        <LgPhone src={shot.src} alt={`Loops app — ${shot.label}`} />

        <button type="button" aria-label="Next screen" onClick={() => go(1)}
          className="focus-ring inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-pill border border-line bg-white text-ink shadow-soft transition-colors hover:bg-soft">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </button>
      </div>

      <div className="mt-6 max-w-xs text-center">
        <div className="text-[13px] font-semibold uppercase tracking-[0.12em] text-brand-deep">{shot.label}</div>
        <p className="mt-2 text-[15px] leading-[1.6] text-ink-2 text-pretty">{shot.caption}</p>
      </div>

      <div className="mt-5 flex items-center justify-center gap-2" role="tablist" aria-label="Choose a screen">
        {LG_SHOTS.map((s, idx) => (
          <button key={s.src} type="button" role="tab" aria-selected={idx === i} aria-label={s.label} onClick={() => setI(idx)}
            className={`focus-ring h-2.5 rounded-pill transition-all ${idx === i ? "w-7 bg-brand" : "w-2.5 bg-muted hover:bg-ink-3"}`}></button>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { LoopsGalleryPhone, LgPhone });

/* ---------------- Shared pricing (monthly/annual toggle, default monthly) ---------------- */

const LoopsPricing = ({ bg = "bg-soft" }) => {
  const [annual, setAnnual] = React.useState(false);
  const plans = [
    { name: "Solo", price: "\u00A36.99", per: "/mo", note: null, blurb: "Everything: your goal, loops, rewards and coach. Just you, one day at a time.", featured: false, toggles: false },
    { name: "Duo", price: annual ? "\u00A349" : "\u00A37.99", per: annual ? "/yr" : "/mo", note: null, blurb: "Everything, for two. You and your person, both with the full app, on one bill.", featured: true, toggles: true },
  ];
  return (
    <Section id="pricing" className={bg}>
      <Container>
        <div className="max-w-prose">
          <Kicker>Pricing</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
            Better with your person. Built for it.
          </h2>
        </div>

        <div className="mt-8 inline-flex items-center gap-1 rounded-pill border border-line bg-white p-1 shadow-soft" role="group" aria-label="Billing period">
          <button type="button" onClick={() => setAnnual(false)} aria-pressed={!annual}
            className={`focus-ring rounded-pill px-4 h-9 text-[14px] font-semibold transition-colors ${!annual ? "bg-brand text-white shadow-cta" : "text-ink-2 hover:text-ink"}`}>Monthly</button>
          <button type="button" onClick={() => setAnnual(true)} aria-pressed={annual}
            className={`focus-ring rounded-pill px-4 h-9 text-[14px] font-semibold transition-colors ${annual ? "bg-brand text-white shadow-cta" : "text-ink-2 hover:text-ink"}`}>Annual</button>
        </div>

        <div className="mt-8 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
          {plans.map((p) => (
            <article key={p.name} className={`relative flex flex-col rounded-card border bg-white p-6 sm:p-7 ${p.featured ? "border-brand shadow-card ring-1 ring-brand/20" : "border-line shadow-soft"}`}>
              {p.featured ? <span className="absolute -top-3 left-6 rounded-pill bg-brand px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-white shadow-cta">The one we'd pick</span> : null}
              <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">{p.name}</h3>
              <div className="mt-3 flex items-baseline gap-1">
                <span className="text-[32px] font-bold tracking-tight3 text-ink tnum">{p.price}</span>
                <span className="text-[15px] text-ink-3">{p.per}</span>
              </div>
              <div className="mt-1 min-h-[18px] text-[12.5px] text-ink-3">{p.toggles && !p.note ? (annual ? "Billed yearly." : "Billed monthly.") : p.note || ""}</div>
              <p className="mt-4 flex-1 text-[14.5px] leading-[1.65] text-ink-2 text-pretty">{p.blurb}</p>
              <div className="mt-6">
                <Button variant={p.featured ? "primary" : "secondary"} size="md" href="#start">Get Early Access</Button>
              </div>
            </article>
          ))}
        </div>
      </Container>
    </Section>
  );
};

Object.assign(window, { LoopsPricing });