// FEATURES PAGE

const FEATURES = [
  { icon: '✍️', visual: 'v-lav', tag: ['50+ categories', 'mood-aware', 'no generic verses'],
    title: 'Custom Prayers',
    h: <>prayers for your <em>exact moment.</em></>,
    body: "ai-written, but never hollow. tell us what\'s going on and get a real prayer for your 2pm panic, your 3am grief, your quiet gratitude in the car line. over 50 categories across mood, situation, relationship, and season." },
  { icon: '💭', visual: 'v-pink', tag: ['12 moods', 'hundreds of entry points'],
    title: 'Mood Check',
    h: <>tap how you feel. <em>get met there.</em></>,
    body: "anxious, sad, angry, lonely, grateful, overwhelmed — or something you can\'t name yet. one tap and you\'re on a prayer that fits the actual feeling. no menus. no forms." },
  { icon: '♡', visual: 'v-teal', tag: ['anonymous', 'no sign-in required', '24/7'],
    title: 'Prayer Wall',
    h: <>you\'re not <em>alone in this.</em></>,
    body: "post a request or lift someone else\'s. fully anonymous. watch the prayed counter grow in real time. health, family, work, grief, gratitude — the quiet middle of real life." },
  { icon: '📅', visual: 'v-lav', tag: ['20+ plans', 'daily prayer + scripture + action'],
    title: 'Prayer Plans',
    h: <>guided <em>multi-day journeys.</em></>,
    body: "7-day anxiety. 14-day grief. 30-day gratitude. addiction recovery, parenting hard seasons, singleness, marriage in crisis. daily prayer + scripture + one doable step. not homework. a rhythm." },
  { icon: '✉', visual: 'v-dark', tag: ['tender', 'rotating', 'saveable'],
    title: 'Love Letter from God',
    h: <>a tender note. <em>every day.</em></>,
    body: "a short, specific letter written to you. some days you\'ll read and move on. some days you\'ll cry. save your favorites for later." },
  { icon: '→', visual: 'v-pink', tag: ['small', 'doable', 'under 24 hours'],
    title: 'Real-Life Application',
    h: <>prayer, <em>then practice.</em></>,
    body: "every prayer ends with \"so what now?\" — a small, specific action for the next day. not homework. a nudge. text the person. breathe the breath. write the sentence." },
  { icon: '📓', visual: 'v-lav', tag: ['private', 'encrypted', 'yours'],
    title: 'Prayer Journal',
    h: <>a private record of <em>your life with God.</em></>,
    body: "write your own prayers. track what you asked for, what changed, what didn\'t. encrypted and never sold. we can\'t read it either." },
  { icon: '🎧', visual: 'v-teal', tag: ['real humans', 'headphones-ready'],
    title: 'Audio Prayers',
    h: <>listen in the <em>car line, the shower, the dark at 3am.</em></>,
    body: "every prayer available in audio, read by real humans. no stock voice actors. no worship music underneath. just a steady voice." },
  { icon: '⏰', visual: 'v-gold', tag: ['gentle', 'never nagging'],
    title: 'Reminders',
    h: <>gentle, <em>not nagging.</em></>,
    body: "pick your rhythm. mornings, nights, before the meeting, after the kids are down. we don\'t guilt-trip you for missing a day." },
  { icon: '◉', visual: 'v-pink', tag: ['private circles', 'friends + family + small groups'],
    title: 'Groups',
    h: <>private <em>prayer circles.</em></>,
    body: "a tiny, invite-only space for your friends, family, or small group. share requests. lift each other quietly. nothing public. nothing permanent." },
];

function FeaturesPage() {
  useEffect(() => {
    document.title = "Features | Unspoken — Custom Prayers, Prayer Wall, Prayer Plans & More";
    const meta = document.querySelector('meta[name="description"]');
    if (meta) meta.setAttribute('content', 'Explore every feature of Unspoken: AI-written custom prayers, anonymous prayer wall, 20+ guided prayer plans, daily Love Letters from God, audio prayers, and private prayer journal.');
  }, []);

  return (
    <main id="main">
      <section className="page-hero">
        <FloatingHearts count={6} />
        <div className="container" style={{ position: 'relative' }}>
          <Reveal>
            <div className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>every feature</div>
            <h1 style={{ marginTop: 16 }}>every feature, built for the moment you <em>actually need it.</em></h1>
            <p>not a prayer library. a companion. ten features that work quietly together when the words don\'t come.</p>
          </Reveal>
        </div>
      </section>

      <section>
        <div className="container">
          {FEATURES.map((f, i) => (
            <Reveal key={i}>
              <div className={`feature-row ${i % 2 ? 'reverse' : ''}`}>
                <div className={`feature-visual ${f.visual}`} aria-hidden="true">
                  <span style={{ fontSize: 100, textShadow: '0 8px 30px rgba(0,0,0,0.25)' }}>{f.icon}</span>
                </div>
                <div className="feature-body">
                  <div className="eyebrow">0{i+1} · {f.title.toLowerCase()}</div>
                  <h2 style={{ marginTop: 10 }}>{f.h}</h2>
                  <p>{f.body}</p>
                  <div className="feature-tagchips">
                    {f.tag.map((t, j) => <span key={j} className="feature-tagchip">{t}</span>)}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="compare-section" aria-labelledby="compare-heading">
        <div className="container">
          <Reveal>
            <div className="eyebrow">the difference</div>
            <h2 id="compare-heading" className="section-title" style={{ marginTop: 12 }}>most prayer apps <em>vs.</em> unspoken.</h2>
            <div className="compare-grid">
              <div className="compare-col them">
                <h3>them</h3>
                <ul>
                  <li>give you a verse and walk away.</li>
                  <li>read at you. lecture you. guilt-trip you.</li>
                  <li>feel like a sermon on a tuesday.</li>
                  <li>gate every feature behind a paywall.</li>
                  <li>treat prayer like content.</li>
                </ul>
              </div>
              <div className="compare-col us">
                <h3>unspoken</h3>
                <ul>
                  <li>write the prayer for your exact moment.</li>
                  <li>meet you where you are. nudge, never lecture.</li>
                  <li>feel like a friend who prays.</li>
                  <li>one price. everything unlocked.</li>
                  <li>treat prayer like a living thing.</li>
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <PrayerPlansSection />

      <CTABlock title="try every feature. free for 7 days." sub="no credit card shenanigans. cancel in one tap." />
    </main>
  );
}

Object.assign(window, { FeaturesPage });