// Pricing-page sections. Reuses Nav, Footer, Frank, FrankMark from sections.jsx.

const PIcon = {
  check: (
    <svg width="11" height="11" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 7l3 3 6-7"/></svg>
  ),
  sparkle: (
    <svg width="13" height="13" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l1.4 4.1L12.5 6.5l-4.1 1.4L7 12 5.6 7.9 1.5 6.5l4.1-1.4z"/></svg>
  ),
  arrow: (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h8M7 3l4 4-4 4"/></svg>
  ),
  plus: (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M7 2v10M2 7h10"/></svg>
  ),
  shield: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L4 5v7c0 5 4 8.5 8 10 4-1.5 8-5 8-10V5z"/><path d="M9 12l2 2 4-4"/></svg>
  ),
  cycle: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 0115-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 01-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>
  ),
  noad: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M5 5l14 14"/></svg>
  ),
  heart: (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-4.5-9.5-9.5C1 7.5 4 4 7.5 4c1.7 0 3.3.9 4.5 2.3C13.2 4.9 14.8 4 16.5 4 20 4 23 7.5 21.5 11.5 19 16.5 12 21 12 21z"/></svg>
  ),
};

// ─── Hero ─────────────────────────────────────────────────────────────────
function PricingHero({ billing, setBilling }) {
  return (
    <section className="pricing-hero" data-screen-label="Pricing hero">
      <div className="wrap">
        <div className="eyebrow">
          <span className="eyebrow-dot">{PIcon.sparkle}</span>
          Simple pricing
        </div>
        <h1>
          A fair price for an<br />
          <em>app you'll actually use.</em>
        </h1>
        <p>
          Most of Frankly is free, forever. Pro unlocks the parts that cost us
          real money to run — roleplay, unlimited Ask Frank, offline lessons.
          No trial traps. No "lifetime" upsell at checkout.
        </p>

        <div className="bill-toggle" role="tablist" aria-label="Billing period">
          <button
            role="tab"
            aria-selected={billing === "monthly"}
            className={billing === "monthly" ? "on" : ""}
            onClick={() => setBilling("monthly")}
          >
            Monthly
          </button>
          <button
            role="tab"
            aria-selected={billing === "yearly"}
            className={billing === "yearly" ? "on" : ""}
            onClick={() => setBilling("yearly")}
          >
            Yearly
            <span className="bill-save">−30%</span>
          </button>
        </div>
      </div>
    </section>
  );
}

// ─── Plan cards ───────────────────────────────────────────────────────────
function PlanCards({ billing }) {
  const proMonthly = 2.99;
  const proYearly  = 24.99; // ~30% off vs €2.99 × 12 = €35.88
  const proPrice   = billing === "yearly" ? proYearly / 12 : proMonthly;
  const proSub     = billing === "yearly"
    ? `Billed €${proYearly.toFixed(2)} once a year. Cancel anytime.`
    : "Billed monthly. Cancel anytime.";

  return (
    <section data-screen-label="Plans" style={{ padding: "32px 0 64px" }}>
      <div className="wrap">
        <div className="plans">
          {/* Free */}
          <div className="plan">
            <div className="plan-head">
              <div>
                <h3 className="plan-name">Free</h3>
                <p className="plan-tagline">Everything you need to start. Forever.</p>
              </div>
              <span className="plan-tag current">Current</span>
            </div>

            <div className="plan-price">
              <span className="plan-price-currency">€</span>
              <span className="plan-price-amount">0</span>
            </div>
            <div className="plan-price-sub">No card. No countdown.</div>

            <a className="plan-cta plan-cta-free" href="/signup">
              Keep learning free
            </a>

            <div className="plan-divider"></div>
            <h4 className="plan-list-title">What you get</h4>
            <ul className="plan-list">
              <FeatureLi text="Grammar, Vocab, Reading, Listening & Speaking" />
              <FeatureLi text="CEFR tracking, A1 → C2" />
              <FeatureLi text="Daily streaks & XP" />
              <FeatureLi text="Community leaderboard" />
              <FeatureLi text="Ask Frank, your AI tutor" meta="5 questions / day" />
              <FeatureLi text="5 lives per day" meta="refill overnight" />
            </ul>
          </div>

          {/* Pro */}
          <div className="plan plan-pro">
            <div className="plan-head" style={{ position: "relative", zIndex: 1 }}>
              <div>
                <h3 className="plan-name" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                  Pro
                  <span style={{ color: "var(--indigo)" }}>{PIcon.sparkle}</span>
                </h3>
                <p className="plan-tagline">The full toolkit, when you're ready.</p>
              </div>
              <span className="plan-tag upgrade">Upgrade</span>
            </div>

            <div className="plan-price" style={{ position: "relative", zIndex: 1 }}>
              <span className="plan-price-currency">€</span>
              <span className="plan-price-amount">{proPrice.toFixed(2)}</span>
              <span className="plan-price-unit">/ month</span>
            </div>
            <div className="plan-price-sub" style={{ position: "relative", zIndex: 1 }}>
              {proSub}
            </div>

            <a className="plan-cta plan-cta-pro" href="/signup" style={{ position: "relative", zIndex: 1 }}>
              Start with Pro {PIcon.arrow}
            </a>

            <div className="plan-divider" style={{ position: "relative", zIndex: 1 }}></div>
            <h4 className="plan-list-title" style={{ position: "relative", zIndex: 1 }}>
              Everything in Free, plus
            </h4>
            <ul className="plan-list" style={{ position: "relative", zIndex: 1 }}>
              <FeatureLi pro text="Unlimited lives" meta="study as long as you like" />
              <FeatureLi pro text="Unlimited Ask Frank" meta="no daily cap" />
              <FeatureLi pro text="Topic-based practice" meta="Travel, Work, Health…" />
              <FeatureLi pro text="Roleplay scenarios" meta="50+, growing monthly" />
              <FeatureLi pro text="Offline mode" meta="download a lesson, study on planes" />
              <FeatureLi pro text="Priority support" meta="a human, not a bot, &lt; 24h" />
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function FeatureLi({ text, meta, pro = false }) {
  return (
    <li>
      <span className={`tick ${pro ? "tick-pro" : "tick-free"}`}>{PIcon.check}</span>
      <span>{text}</span>
      {meta && <span className="meta" dangerouslySetInnerHTML={{ __html: meta }} />}
    </li>
  );
}

// ─── Pledge strip ─────────────────────────────────────────────────────────
function Pledge() {
  const items = [
    { icon: PIcon.cycle,  title: "Cancel any time",        body: "One tap. Refund anything you haven't used, no email back-and-forth." },
    { icon: PIcon.shield, title: "Your data, not ours",    body: "We don't sell it, we don't share it, and you can export it whenever." },
    { icon: PIcon.noad,   title: "Zero ads, zero pop-ups", body: "Free or Pro — the experience is the same. Pro just removes the limits." },
    { icon: PIcon.heart,  title: "Honest streak rules",    body: "Two pause days a month included. Lives won't pressure you into spending." },
  ];
  return (
    <section data-screen-label="Pledge" style={{ padding: "32px 0 80px" }}>
      <div className="wrap">
        <div className="pledge">
          {items.map((it) => (
            <div key={it.title} className="pledge-item">
              <div className="pledge-icon">{it.icon}</div>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Comparison ──────────────────────────────────────────────────────────
const COMPARE = [
  { type: "section", label: "Skill tracks" },
  { name: "Grammar",                         free: "yes",    pro: "yes" },
  { name: "Vocabulary",                      free: "yes",    pro: "yes" },
  { name: "Reading",                         free: "yes",    pro: "yes" },
  { name: "Listening",                       free: "yes",    pro: "yes" },
  { name: "Speaking with pronunciation feedback", free: "yes", pro: "yes" },
  { name: "Roleplay scenarios",              sub: "Job interviews, doctor visits, meetings", free: "no", pro: { v: "50+", strong: true } },

  { type: "section", label: "Practice & progress" },
  { name: "CEFR level tracking (A1 → C2)",   free: "yes", pro: "yes" },
  { name: "Daily streak & XP",               free: "yes", pro: "yes" },
  { name: "Weekly community leaderboard",    free: "yes", pro: "yes" },
  { name: "Topic-based practice",            sub: "Travel, Work, Health, Tech and more", free: "no", pro: "yes" },
  { name: "Offline lessons",                 free: "no", pro: "yes" },

  { type: "section", label: "Limits" },
  { name: "Lives",                           free: { v: "5 / day" }, pro: { v: "Unlimited", strong: true } },
  { name: "Ask Frank (AI tutor)",            free: { v: "5 / day" }, pro: { v: "Unlimited", strong: true } },
  { name: "Support",                         free: { v: "Community" }, pro: { v: "Priority", strong: true } },
];

function Comparison() {
  return (
    <section data-screen-label="Comparison">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Side by side</div>
          <h2 className="section-title" style={{ fontSize: "clamp(28px, 3.4vw, 40px)" }}>
            Every feature, no asterisks.
          </h2>
        </div>

        <div className="compare-wrap">
          <div className="compare-row head-row">
            <div></div>
            <div className="compare-cell">Free</div>
            <div className="compare-cell" style={{ color: "var(--indigo)" }}>Pro</div>
          </div>
          {COMPARE.map((r, i) => {
            if (r.type === "section") {
              return (
                <div key={i} className="compare-row section-row">
                  <div>{r.label}</div><div></div><div></div>
                </div>
              );
            }
            return (
              <div key={i} className="compare-row">
                <div className="compare-cell-name">
                  {r.name}
                  {r.sub && <small>{r.sub}</small>}
                </div>
                <div className="compare-cell"><Cell v={r.free} /></div>
                <div className="compare-cell"><Cell v={r.pro} isPro /></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Cell({ v, isPro }) {
  if (v === "yes") return <span className="compare-yes">{PIcon.check}</span>;
  if (v === "no")  return <span className="compare-no">—</span>;
  if (typeof v === "object" && v.v) {
    return <span className={`compare-val ${isPro && v.strong ? "pro" : ""}`}>{v.v}</span>;
  }
  return null;
}

// ─── FAQ ──────────────────────────────────────────────────────────────────
const FAQS = [
  {
    q: "Can I really use Frankly forever without paying?",
    a: `Yes. The Free plan isn't a trial — it's the same app, with daily limits on Ask Frank (5 questions) and lives (5). If you stop logging in for a year, nothing happens to your progress. Pro just removes the limits and unlocks roleplay, topics and offline mode.`,
  },
  {
    q: "Why €2.99? Isn't that suspicious?",
    a: `It's the lowest price that lets us pay our AI bills, keep the app free of ads, and pay the small team of teachers who write the lessons. We'd rather charge a fair amount to people who can pay than show ads to people who can't. <strong>If €2.99 is a stretch for you</strong> — students, refugees, anyone — write to us and we'll comp you Pro. No questions.`,
  },
  {
    q: "How do I cancel?",
    a: `Settings → Billing → Cancel. It takes one tap. You keep Pro until the end of the period you paid for, then you're back on Free with all your progress intact. We'll refund any unused time if you ask within 14 days.`,
  },
  {
    q: "Do you offer student or team discounts?",
    a: `Students with a valid .edu (or equivalent) email get 50% off Pro — apply from your account page. For teams of 5+ at a school or company, drop us a line and we'll send a teacher dashboard plus a flat-rate quote.`,
  },
];

function FAQ() {
  return (
    <section data-screen-label="FAQ">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">FAQ</div>
          <h2 className="section-title" style={{ fontSize: "clamp(28px, 3.4vw, 40px)" }}>
            Questions worth answering.
          </h2>
        </div>

        <div className="faq">
          {FAQS.map((f, i) => (
            <details key={i} className="faq-item" open={i === 0}>
              <summary className="faq-q">
                {f.q}
                <span className="faq-q-icon">{PIcon.plus}</span>
              </summary>
              <div className="faq-a" dangerouslySetInnerHTML={{ __html: f.a }} />
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ───────────────────────────────────────────────────────────
function PricingFinalCTA() {
  return (
    <section id="cta" data-screen-label="CTA">
      <div className="wrap">
        <div className="pricing-final">
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
            <div style={{ width: 84, height: 84, borderRadius: "50%", background: "linear-gradient(135deg, #FEF3C7, #FDE68A)", display: "grid", placeItems: "center", border: "1px solid rgba(234, 88, 12, 0.15)" }}>
              <Frank size={68} mood="happy" />
            </div>
          </div>
          <h2>
            Start free.<br />
            Upgrade when <em>it makes sense</em>.
          </h2>
          <p>
            Most learners stay on Free for months before going Pro — and some
            never need to. Whichever you pick, Frank's the same patient cat.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn-primary btn-lg" href="/signup">
              Get started, free
              {PIcon.arrow}
            </a>
            <a className="btn btn-ghost btn-lg" href="#">
              Compare plans again
            </a>
          </div>
          <div style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 22 }}>
            Free forever · No card · Cancel Pro in one tap
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PricingHero, PlanCards, Pledge, Comparison, FAQ, PricingFinalCTA });