// PRICING PAGE

const PRICING_FAQS = [
  { q: "can i really cancel anytime?", a: "yes. one tap. no retention screens. no \"are you sure?\" parade. the cancel button lives next to the settings gear." },
  { q: "what happens after the 7-day trial?", a: "you\'ll be billed $5.99 and keep full access. we\'ll send you one friendly email a day before the trial ends so nothing surprises you." },
  { q: "do you offer a yearly plan?", a: "not yet. we will soon. a lot of you asked. we\'re working on it." },
  { q: "is there a family plan?", a: "in the works. right now, one subscription per person. if you\'re sharing, that\'s fine — we\'re not the cable company." },
  { q: "do you offer discounts for hard seasons?", a: "yes. email hello@unspoken.app. no paperwork. no proof. we\'ll take care of you." },
  { q: "is my payment info safe?", a: "payments run through Stripe. we never see your card. we never store it. we have no reason to want to." },
];

function FAQItem({ q, a, open, onToggle }) {
  return (
    <div className={`faq-item ${open ? 'open' : ''}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span>{q}</span>
        <span className="faq-icon" aria-hidden="true">+</span>
      </button>
      <div className="faq-a">{a}</div>
    </div>
  );
}

function PricingPage() {
  const [openIdx, setOpenIdx] = useState(-1);

  useEffect(() => {
    document.title = "Pricing | Unspoken — $5.99/mo with 7-Day Free Trial";
    const meta = document.querySelector('meta[name="description"]');
    if (meta) meta.setAttribute('content', 'One simple price. Everything unlocked. 7 days free, cancel anytime, no guilt trips. Unspoken is $5.99/month — less than a coffee.');
  }, []);

  return (
    <main id="main">
      <section className="page-hero">
        <FloatingHearts count={5} />
        <div className="container" style={{ position: 'relative' }}>
          <Reveal>
            <div className="eyebrow" style={{ display: 'inline-flex' }}>pricing</div>
            <h1 style={{ marginTop: 16 }}>one price. everything unlocked. <em>no guilt trips.</em></h1>
            <p>we could charge more. but we want you to actually use this.</p>
          </Reveal>
        </div>
      </section>

      <section className="price-page">
        <div className="container-narrow">
          <Reveal>
            <div className="price-hero-card">
              <h2>Unspoken</h2>
              <div className="price-big">$5<span className="sub">.99</span><span className="sub"> /mo</span></div>
              <div className="price-free">7 days free</div>
              <ul className="price-features">
                {[
                  'unlimited custom prayers',
                  'full prayer wall access',
                  'all 20+ prayer plans',
                  'daily love letters from God',
                  'audio prayers read by real humans',
                  'private, encrypted prayer journal',
                  'prayer groups (invite-only)',
                  'cancel anytime in one tap',
                ].map((f, i) => (
                  <li key={i}><span className="check">✓</span>{f}</li>
                ))}
              </ul>
              <a href="#" className="btn btn-primary" style={{ width: '100%', fontSize: 15 }}>
                <PixelHeart /> Start Free Trial
              </a>
              <p style={{ marginTop: 14, fontSize: 13, color: 'var(--muted)' }}>no credit card weirdness. cancel in one tap.</p>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div className="why-price">
              <h3>why $5.99?</h3>
              <p>"we could charge more. but we want you to actually use this. $5.99 is less than one coffee a month. less than a candle. less than anything else that promises to calm you down and doesn\'t."</p>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div style={{
              marginTop: 32,
              background: 'linear-gradient(165deg, #1E1B4B 0%, #4c1d95 100%)',
              color: 'white', borderRadius: 'var(--card-radius)',
              padding: 32, textAlign: 'center',
              boxShadow: 'var(--card-shadow)',
            }}>
              <div style={{ fontSize: 36 }}>🌱</div>
              <h3 style={{ marginTop: 12, fontSize: 22, fontWeight: 900 }}>a soft promise.</h3>
              <p style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 500, marginTop: 8, fontSize: 18, lineHeight: 1.5, color: 'rgba(255,255,255,0.9)' }}>
                if unspoken isn\'t for you in the first 30 days, email us. we\'ll refund you. no form, no hoops.
              </p>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="faq-section" aria-labelledby="faq-heading">
        <div className="container-narrow">
          <Reveal>
            <div className="eyebrow" style={{ display: 'inline-flex' }}>frequently asked</div>
            <h2 id="faq-heading" className="section-title" style={{ marginTop: 12, textAlign: 'center' }}>
              questions, <em>answered honestly.</em>
            </h2>
          </Reveal>
          <div className="faq-list">
            {PRICING_FAQS.map((f, i) => (
              <Reveal key={i} delay={i * 50}>
                <FAQItem
                  q={f.q} a={f.a}
                  open={openIdx === i}
                  onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
                />
              </Reveal>
            ))}
          </div>
          <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": PRICING_FAQS.map(f => ({
              "@type": "Question",
              "name": f.q,
              "acceptedAnswer": { "@type": "Answer", "text": f.a }
            }))
          })}} />
        </div>
      </section>

      <CTABlock title="ready when you are." sub="7 days free. cancel anytime. no guilt trips, ever." />
    </main>
  );
}

Object.assign(window, { PricingPage, FAQItem });