/* Loops — Homepage v2 pricing */

const PricingSectionV2 = () => {
  const [annual, setAnnual] = React.useState(false);
  const plans = [
    { name: "Solo", price: "\u00A36.99", per: "/mo", note: null, blurb: "Everything. Your goal, your Loops, your rewards and Dora. 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 Buddy, both with the full app, on one bill.", featured: true, toggles: true },
  ];
  return (
    <Section id="pricing" className="bg-soft">
      <Container>
        <SectionHeading
          align="center"
          kicker="Pricing"
          title="Solo works well. But it works better with a Buddy."
          body="We'll even show you the difference in your own numbers. One calm subscription. Bring the people who keep you going, on one bill."
          className="mx-auto" />

        <div className="mt-8 flex justify-center">
          <div className="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>

        <div className="mt-8 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl mx-auto">
          {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, { PricingSectionV2 });