/* Loops — shared pricing (plans + credit top-ups). Single source of truth for prices. */

const LOOPS_PLANS = [
  {
    id: "monthly",
    name: "Loops Solo",
    cadence: "Monthly",
    price: "$6.99",
    per: "/ month",
    lede: "1 week free, then $6.99 a month.",
    blurb: "Your coach, your loops and your streaks. Month to month, cancel whenever.",
    featured: false,
  },
  {
    id: "annual",
    name: "Loops Solo",
    cadence: "Annual",
    price: "$42.99",
    per: "/ year",
    lede: "Works out at $3.58 a month.",
    blurb: "Your coach and your streaks, for a year. Roughly half the monthly price.",
    featured: true,
    tag: "Best value",
  },
];

const LOOPS_CREDITS = [
  { qty: "100", price: "$3.99", note: "100 coach message credits" },
  { qty: "300", price: "$9.99", note: "300 coach message credits" },
  { qty: "1,000", price: "$29.99", note: "1,000 coach message credits", tag: "Best rate" },
];

const LOOPS_ASSURANCES = [
  "100 coach messages every month. Free gets 30.",
  "Nothing rolls over, nothing is wasted. It just resets.",
  "Cancel anytime.",
];

const PlanTick = ({ className = "" }) => (
  <span className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-brand ${className}`}>
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12l4 4 10-10" stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
  </span>
);

const LoopsPlanCards = ({ ctaLabel = "Get Early Access", ctaHref = "#start", className = "" }) => (
  <div className={`grid gap-4 sm:gap-5 sm:grid-cols-2 items-start ${className}`}>
    {LOOPS_PLANS.map((p) => (
      <article key={p.id} 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.tag ? <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">{p.tag}</span> : null}
        <div className="flex items-baseline justify-between gap-3">
          <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">{p.name}</h3>
          <span className="rounded-pill bg-soft border border-line px-2.5 py-1 text-[11.5px] font-semibold uppercase tracking-[0.07em] text-ink-2">{p.cadence}</span>
        </div>
        <div className="mt-4 flex items-baseline gap-1.5">
          <span className="text-[34px] font-bold tracking-tight3 text-ink tnum leading-none">{p.price}</span>
          <span className="text-[15px] text-ink-3">{p.per}</span>
        </div>
        <div className="mt-2 text-[13px] font-medium text-brand-deep">{p.lede}</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={ctaHref}>{ctaLabel}</Button>
        </div>
      </article>
    ))}
  </div>
);

const LoopsCreditPacks = ({ className = "" }) => (
  <div className={className}>
    <div className="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
      <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">Or top up</h3>
      <p className="text-[13.5px] font-medium text-brand-deep">One-off packs. These credits never expire.</p>
    </div>
    <div className="mt-5 grid gap-3 sm:gap-4 sm:grid-cols-3">
      {LOOPS_CREDITS.map((c) => (
        <article key={c.qty} className="relative flex items-end justify-between gap-4 rounded-tile border border-line bg-white p-5 shadow-soft">
          <div>
            <div className="text-[22px] font-semibold tracking-tight2 text-ink tnum leading-none">{c.qty}</div>
            <div className="mt-1.5 text-[13px] text-ink-2">credits</div>
            <div className="sr-only">{c.note}</div>
          </div>
          <div className="text-right">
            {c.tag ? <div className="mb-1.5 text-[10.5px] font-bold uppercase tracking-[0.08em] text-brand-deep">{c.tag}</div> : null}
            <div className="text-[19px] font-semibold text-ink tnum leading-none">{c.price}</div>
          </div>
        </article>
      ))}
    </div>
  </div>
);

const LoopsPricingSection = ({
  id = "pricing",
  align = "left",
  className = "bg-soft",
  kicker = "Pricing",
  title = "Choose your plan",
  body = "One small subscription for the coach, the loops and the streaks. Or buy credits when you need them and nothing else.",
  ctaLabel = "Get Early Access",
  ctaHref = "#start",
  footnote = "Every plan starts with a week free. On iOS for now.",
}) => {
  const centred = align === "center";
  return (
    <Section id={id} className={className}>
      <Container>
        <SectionHeading align={align} kicker={kicker} title={title} body={body} className={centred ? "mx-auto" : ""} />

        <ul className={`mt-8 grid gap-x-8 gap-y-3 sm:grid-cols-3 ${centred ? "mx-auto max-w-4xl" : "max-w-4xl"}`}>
          {LOOPS_ASSURANCES.map((a) => (
            <li key={a} className="flex items-start gap-2.5 text-[14px] leading-[1.55] text-ink">
              <PlanTick />
              <span>{a}</span>
            </li>
          ))}
        </ul>

        <LoopsPlanCards ctaLabel={ctaLabel} ctaHref={ctaHref} className={`mt-8 max-w-3xl ${centred ? "mx-auto" : ""}`} />

        <LoopsCreditPacks className={`mt-12 max-w-3xl ${centred ? "mx-auto" : ""}`} />

        {footnote ? (
          <p className={`mt-8 max-w-3xl text-[13.5px] text-ink-3 ${centred ? "mx-auto text-center" : ""}`}>{footnote}</p>
        ) : null}
      </Container>
    </Section>
  );
};

Object.assign(window, { LOOPS_PLANS, LOOPS_CREDITS, LoopsPlanCards, LoopsCreditPacks, LoopsPricingSection });