/* global React, Icon, CtaBand, PricingPlan */

function PricingPage({ navigate }) {
  const [billing, setBilling] = React.useState('monthly');
  const isYr = billing === 'yearly';
  const family = isYr ? '£72' : '£8';
  const familyPer = isYr ? 'per year (save £24)' : 'per month';
  const legacy = isYr ? '£216' : '£24';
  const legacyPer = isYr ? 'per year (save £72)' : 'per month';

  return (
    <div>
      <section className="page-hero" data-em-surface="ink">
        <div className="page-hero__vignette" />
        <div className="page-hero__inner">
          <div className="em-eyebrow page-hero__eyebrow">Pricing</div>
          <h1 className="page-hero__title">
            Honest plans.<br /><em>Fair pricing.</em>
          </h1>
          <p className="page-hero__lede">
            No tricks. No locked-up memories. The free tier is the same software as the paid
            ones — just with smaller storage. Upgrade only if your story keeps growing.
          </p>
        </div>
      </section>

      <div className="subnav">
        <button className={billing === 'monthly' ? 'is-active' : ''} onClick={() => setBilling('monthly')}>Monthly</button>
        <button className={billing === 'yearly' ? 'is-active' : ''} onClick={() => setBilling('yearly')}>Yearly · save 25%</button>
      </div>

      <section className="section section--paper" style={{ paddingTop: 80 }}>
        <div className="container">
          <div className="pricing-grid">
            <PricingPlan
              name="Keepsake"
              price="£0"
              per="forever"
              desc="Start with one memory. That's enough for today."
              feats={[
                '1 hour of recordings',
                'Up to 3 recipients',
                'Scheduled delivery',
                'End-to-end encrypted',
                'Mobile + web recording',
              ]}
              cta="Begin free"
              onCta={() => navigate('signup')}
            />
            <PricingPlan
              featured
              badge="Most chosen"
              name="Family"
              price={family}
              per={familyPer}
              desc="Enough room for a lifetime of stories — and the people who deserve them."
              feats={[
                'Unlimited recordings',
                'Up to 12 recipients',
                'Milestone scheduling',
                'Shared family library',
                'Priority support',
                '4K video, lossless audio',
              ]}
              cta="Begin Family"
              onCta={() => navigate('signup')}
            />
            <PricingPlan
              name="Legacy"
              price={legacy}
              per={legacyPer}
              desc="A complete archive — for the people who want to leave a full story behind."
              feats={[
                'Everything in Family',
                'Unlimited recipients',
                'Generational handoff',
                'Printed memory book',
                'Dedicated archivist',
                '100-year storage promise',
              ]}
              cta="Begin Legacy"
              onCta={() => navigate('signup')}
            />
          </div>
        </div>
      </section>

      {/* COMPARE TABLE */}
      <section className="section">
        <div className="container">
          <div className="section__head">
            <div className="em-eyebrow">Compare</div>
            <h2 className="em-h1" style={{ fontSize: 40 }}>Every plan, side by side.</h2>
          </div>
          <div className="compare">
            <div className="compare__row compare__row--head">
              <div className="compare__cell compare__cell--head">Feature</div>
              <div className="compare__cell compare__cell--head">Keepsake</div>
              <div className="compare__cell compare__cell--head">Family</div>
              <div className="compare__cell compare__cell--head">Legacy</div>
            </div>
            <CompareRow feature="Recording time" cells={['1 hour', 'Unlimited', 'Unlimited']} />
            <CompareRow feature="Recipients" cells={['Up to 3', 'Up to 12', 'Unlimited']} />
            <CompareRow feature="Scheduled delivery" cells={[true, true, true]} />
            <CompareRow feature="Milestone scheduling" cells={[false, true, true]} />
            <CompareRow feature="Shared family library" cells={[false, true, true]} />
            <CompareRow feature="Generational handoff" cells={[false, false, true]} />
            <CompareRow feature="Printed memory book" cells={[false, false, true]} />
            <CompareRow feature="Dedicated archivist" cells={[false, false, true]} />
            <CompareRow feature="End-to-end encryption" cells={[true, true, true]} />
            <CompareRow feature="100-year storage promise" cells={[false, false, true]} />
          </div>
        </div>
      </section>

      {/* PRICING FAQ */}
      <section className="section section--paper">
        <div className="container" style={{ maxWidth: 760 }}>
          <div className="section__head">
            <div className="em-eyebrow">A few questions</div>
            <h2 className="em-h1" style={{ fontSize: 36 }}>Money, fairness, and what happens later.</h2>
          </div>
          <div className="faq">
            <FaqItem q="What happens to my recordings if I stop paying?" a="Nothing. We never lock or delete recordings you've already made — we believe that would be a betrayal of trust. You'll just lose the ability to add new ones until you upgrade again." />
            <FaqItem q="Do you offer financial assistance?" a="Yes. If the Family or Legacy plan would be a real burden, write to us and we'll quietly upgrade you. No paperwork, no proof needed. We mean it." />
            <FaqItem q="What if Everlasting Memory shuts down?" a="We have a published succession plan and a funded storage endowment. Your recordings are exportable at any time, and if we ever close, you'll get them back — encrypted, with the keys you control." />
            <FaqItem q="Can I switch plans at any time?" a="Of course. Upgrades take effect immediately. Downgrades take effect at the next billing cycle. Cancellations are one click — we'll never make you call." />
          </div>
        </div>
      </section>

      <CtaBand
        navigate={navigate}
        title="Pick a plan, or don't.<br/>Either way — <em>begin</em>."
        body="Free forever, with no card required. You can always upgrade later."
      />
    </div>
  );
}

function CompareRow({ feature, cells }) {
  return (
    <div className="compare__row">
      <div className="compare__cell compare__cell--feature">{feature}</div>
      {cells.map((c, i) => (
        <div className="compare__cell" key={i}>
          {c === true ? <span className="compare__cell-check"><Icon name="check" size={18} /></span>
           : c === false ? <span className="compare__cell-dash">—</span>
           : c}
        </div>
      ))}
    </div>
  );
}

function FaqItem({ q, a, defaultOpen = false }) {
  const [open, setOpen] = React.useState(defaultOpen);
  const id = React.useId ? React.useId() : Math.random().toString(36).slice(2);
  return (
    <div className={"faq-item" + (open ? " is-open" : "")}>
      <button
        className="faq-item__q"
        onClick={() => setOpen(!open)}
        aria-expanded={open}
        aria-controls={`faq-a-${id}`}
      >
        <span>{q}</span>
        <span className="faq-item__plus" aria-hidden="true"><Icon name="plus" size={20} /></span>
      </button>
      <div id={`faq-a-${id}`} className="faq-item__a" role="region">
        <p>{a}</p>
      </div>
    </div>
  );
}

Object.assign(window, { PricingPage, FaqItem, CompareRow });