// HOME PAGE

const MOODS = [
  { id: 'anxious', emoji: '💭', label: 'Anxious',
    prayer: 'God, my chest is tight and my thoughts won\'t sit down. I don\'t need the whole plan — just the next breath. Hold me here.',
    action: 'text one person "i\'m not okay today. no need to fix it." send it now. that\'s it.',
    tip: 'notice: did your shoulders drop a little?' },
  { id: 'sad', emoji: '💧', label: 'Sad',
    prayer: 'I don\'t want to pretend today. This hurts. Sit with me in it, and don\'t rush me out.',
    action: 'let yourself cry for ten minutes. set a timer if you need to. don\'t explain it to anyone.',
    tip: 'grief has its own clock. you\'re allowed.' },
  { id: 'angry', emoji: '🔥', label: 'Angry',
    prayer: 'I\'m mad, and I don\'t want a lecture. I want to be heard. Before I do anything, let me bring this to you first.',
    action: 'write the thing you want to say. don\'t send it. read it again tomorrow.',
    tip: 'anger is honest. you don\'t have to apologize for feeling it.' },
  { id: 'lonely', emoji: '☺️', label: 'Lonely',
    prayer: 'The quiet is too loud today. Remind me I\'m not invisible. Remind me you\'re still here.',
    action: 'reach out to one person you\'ve been thinking about. no agenda. just "thinking of you today."',
    tip: 'small signals count. so does being known.' },
  { id: 'grateful', emoji: '🌱', label: 'Grateful',
    prayer: 'I almost missed it. Thank you for the small thing I noticed today — let me hold onto it.',
    action: 'write the small thing down. one sentence. keep it somewhere you\'ll see tomorrow.',
    tip: 'gratitude on paper outlasts gratitude in your head.' },
  { id: 'overwhelmed', emoji: '🌊', label: 'Overwhelmed',
    prayer: 'Everything is too much. Help me do one thing. Just one. Then meet me at the next one.',
    action: 'pick the one thing. close every other tab. fifteen-minute timer. go.',
    tip: 'the list will still be there. the next breath is right now.' },
];

function Home() {
  const [selectedMood, setSelectedMood] = useState(0);
  const [phoneMood, setPhoneMood] = useState(0);
  const [rotatingPrayer, setRotatingPrayer] = useState(0);
  const count = useLiftedCounter(2848);

  useEffect(() => {
    const t = setInterval(() => setPhoneMood(m => m + 1), 3000);
    return () => clearInterval(t);
  }, []);
  useEffect(() => {
    const t = setInterval(() => setRotatingPrayer(p => (p + 1) % 3), 4000);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    document.title = "Unspoken — Prayers for When You Don't Have the Words | Daily Prayer App";
  }, []);

  return (
    <main id="main">
      {/* HERO */}
      <section className="hero">
        <FloatingHearts count={9} />
        <div className="container">
          <div className="hero-grid">
            <div>
              <Reveal>
                <div className="hero-kicker">
                  <span className="dot"></span>
                  now on iOS, Android & the quiet middle of life
                </div>
              </Reveal>
              <Reveal delay={80}>
                <h1>prayers for when you don't <em>have the words.</em></h1>
              </Reveal>
              <Reveal delay={160}>
                <p className="hero-sub">
                  Unspoken writes the prayer, meets your mood, and gives you something real to do with it. For right where you are.
                </p>
              </Reveal>
              <Reveal delay={240}>
                <div className="hero-ctas">
                  <a href="#/pricing" className="btn btn-primary">
                    <PixelHeart /> Start Praying — Free For 7 Days
                  </a>
                  <a href="#mood-check" className="hero-secondary">see how it works ↓</a>
                </div>
              </Reveal>
              <Reveal delay={320}>
                <div className="hero-proof" aria-live="polite">
                  <span className="live-dot"></span>
                  <strong>{count.toLocaleString()}</strong> prayers lifted today
                </div>
              </Reveal>
            </div>
            <Reveal delay={200}>
              <PhoneMockup mood={phoneMood} />
            </Reveal>
          </div>
        </div>
      </section>

      {/* MOOD CHECK */}
      <section className="mood-section" id="mood-check" aria-labelledby="mood-heading">
        <div className="container">
          <Reveal>
            <div className="eyebrow">① the wow moment</div>
            <h2 id="mood-heading" className="section-title" style={{ marginTop: 12 }}>how are you feeling <em>right now?</em></h2>
            <p className="section-sub">tap a mood. get a real prayer. plus one doable thing for the next 24 hours. no homework. a nudge.</p>
          </Reveal>

          <Reveal delay={120}>
            <div className="mood-bubbles" role="tablist">
              {MOODS.map((m, i) => (
                <button
                  key={m.id}
                  role="tab"
                  aria-selected={selectedMood === i}
                  aria-controls="mood-panel"
                  className={`mood-bubble ${m.id} ${selectedMood === i ? 'active' : ''}`}
                  onClick={() => setSelectedMood(i)}
                >
                  <div className="mood-ball" aria-hidden="true">{m.emoji}</div>
                  <div className="mood-label">{m.label}</div>
                </button>
              ))}
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div id="mood-panel" className="mood-reveal" key={selectedMood}>
              <article className="prayer-card">
                <div className="eyebrow">a prayer for this moment</div>
                <p className="prayer-text">"{MOODS[selectedMood].prayer}"</p>
              </article>
              <div className="action-card">
                <div className="eyebrow">so what now?</div>
                <p className="action-text">{MOODS[selectedMood].action}</p>
                <div className="action-tip">{MOODS[selectedMood].tip}</div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* CUSTOM PRAYERS */}
      <section className="custom-prayers" aria-labelledby="custom-heading">
        <div className="container">
          <div className="custom-prayers-grid">
            <Reveal>
              <div>
                <div className="eyebrow">custom prayers</div>
                <h2 id="custom-heading" className="section-title" style={{ marginTop: 12 }}>
                  a prayer written for your <em>exact moment.</em>
                </h2>
                <p className="section-sub">
                  not a generic verse. not a meme. a real prayer for your 2pm panic, your 3am grief, your quiet gratitude in the car line.
                </p>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 24 }}>
                  {['2pm panic', '3am grief', 'car line gratitude', 'the text you won\'t send', 'sunday mornings', '50+ categories'].map((t, i) => (
                    <span key={i} className="feature-tagchip">{t}</span>
                  ))}
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="prayer-rotate-stack">
                {[
                  { tag: 'for the 2pm panic', body: 'God, my chest is tight and my thoughts won\'t sit down. I don\'t need the whole plan — just the next breath. Hold me here.' },
                  { tag: 'for the car line', body: 'I almost missed it. Thank you for the small thing I noticed today — let me hold onto it.' },
                  { tag: 'for the text you can\'t send', body: 'Before I say anything, let me bring this to you first. Give me words that don\'t burn down what\'s left.' },
                ].map((p, i) => (
                  <div key={i} className={`prayer-rotate ${i === rotatingPrayer ? 'featured' : ''}`}>
                    <div className="prayer-tag">{p.tag}</div>
                    <div className="prayer-body">"{p.body}"</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PRAYER WALL */}
      <PrayerWallSection />

      {/* PRAYER PLANS */}
      <PrayerPlansSection />

      {/* LOVE LETTER */}
      <LoveLetterSection />

      {/* APPLICATION */}
      <section className="application-section" aria-labelledby="apply-heading">
        <div className="container">
          <Reveal>
            <div className="eyebrow">so what now?</div>
            <h2 id="apply-heading" className="section-title" style={{ marginTop: 12 }}>prayer, <em>then practice.</em></h2>
            <p className="section-sub">every prayer ends with a doable next step. not homework. a nudge for the next 24 hours.</p>
          </Reveal>
          <Reveal delay={120}>
            <div className="apply-triptych">
              <div className="apply-col col-1">
                <div className="step-num">1</div>
                <div className="apply-eyebrow">the prayer</div>
                <p className="apply-text">"I\'m anxious about tomorrow\'s conversation. help me bring my honest self and not my armor."</p>
                <p className="apply-note">a prayer written for this exact moment — not a verse, not a meme.</p>
              </div>
              <div className="apply-col col-2">
                <div className="step-num">2</div>
                <div className="apply-eyebrow">so what now?</div>
                <p className="apply-text">text them one honest sentence today. doesn\'t have to be the whole speech.</p>
                <p className="apply-note">small, doable, specific. the kind of thing you can actually do before bed.</p>
              </div>
              <div className="apply-col col-3">
                <div className="step-num">3</div>
                <div className="apply-eyebrow">tomorrow</div>
                <p className="apply-text">notice how your body feels after. you\'ll know more than you did yesterday.</p>
                <p className="apply-note">prayer moves you. we just want you to notice it move you.</p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="testimonials-section" aria-labelledby="testimonials-heading">
        <div className="container">
          <Reveal>
            <div className="eyebrow">what people say</div>
            <h2 id="testimonials-heading" className="section-title" style={{ marginTop: 12 }}>
              not <em>another app.</em>
            </h2>
          </Reveal>
          <Reveal delay={100}>
            <div className="testimonials-grid">
              {[
                { q: 'i cried the first time i opened it.', a: 'rachel m. · denver' },
                { q: 'finally an app that doesn\'t feel like a sermon.', a: 'j.r. · atlanta' },
                { q: 'i pray now. like, actually.', a: 'mara c. · brooklyn' },
                { q: 'the love letter thing wrecked me in the best way.', a: 'tom s. · omaha' },
              ].map((t, i) => (
                <figure key={i} className="testimonial">
                  <div className="stars">★★★★★</div>
                  <blockquote className="quote">"{t.q}"</blockquote>
                  <figcaption className="attrib">— {t.a}</figcaption>
                </figure>
              ))}
            </div>
          </Reveal>
          <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--muted)', marginTop: 32 }}>* placeholder quotes, real sentiment.</p>
        </div>
      </section>

      {/* PRICING TEASER */}
      <section className="price-teaser">
        <div className="container">
          <Reveal>
            <div className="eyebrow">pricing</div>
            <h2 className="section-title" style={{ marginTop: 12 }}>one price. <em>no guilt trips.</em></h2>
            <div className="price-card">
              <div className="price-big">$5<span style={{ fontSize: 36, fontWeight: 700 }}>.99</span><span className="price-per"> /mo</span></div>
              <div className="price-note">7 days free · cancel anytime · less than a coffee.</div>
              <div style={{ marginTop: 24 }}>
                <a href="#/pricing" className="btn btn-primary" style={{ width: '100%' }}>
                  <PixelHeart /> Start Free Trial
                </a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// --- Prayer Wall ---
const WALL_SEED = [
  { id: 'w1', cat: 'Health', text: 'Please pray for my mom. She goes in for surgery tomorrow and I\'m trying to be strong but I\'m really scared.', time: '12 min ago', count: 184 },
  { id: 'w2', cat: 'Work', text: 'Lost my job last week. Haven\'t told my kids yet. Pray I find the words and the courage.', time: '34 min ago', count: 412 },
  { id: 'w3', cat: 'Family', text: 'My teenage son and I haven\'t spoken in three weeks. I don\'t even know how to start.', time: '1 hr ago', count: 298 },
  { id: 'w4', cat: 'Gratitude', text: 'First clean day in 90. Please pray it becomes 91.', time: '2 hr ago', count: 1147 },
];

function PrayerWallSection() {
  const [prayed, setPrayed] = useState(() => {
    try { return JSON.parse(localStorage.getItem('unspoken_prayed') || '{}'); }
    catch { return {}; }
  });
  const count = useLiftedCounter(2848);

  const toggle = (id) => {
    setPrayed(p => {
      const next = { ...p, [id]: !p[id] };
      try { localStorage.setItem('unspoken_prayed', JSON.stringify(next)); } catch {}
      return next;
    });
  };

  return (
    <section className="wall-section" id="prayer-wall" aria-labelledby="wall-heading">
      <FloatingHearts count={5} />
      <div className="container" style={{ position: 'relative' }}>
        <Reveal>
          <div className="wall-banner">
            <span className="live-dot" style={{ width: 8, height: 8, borderRadius: '50%', display: 'inline-block' }}></span>
            <strong style={{ fontVariantNumeric: 'tabular-nums' }}>{count.toLocaleString()}</strong>
            &nbsp;prayers lifted today
          </div>
          <h2 id="wall-heading" className="section-title">you're not <em>alone</em> in this.</h2>
          <p className="section-sub">thousands of people praying anonymously, together. tap the heart to lift someone up.</p>
        </Reveal>

        <div className="wall-grid">
          {WALL_SEED.map((p, i) => {
            const isPrayed = !!prayed[p.id];
            return (
              <Reveal key={p.id} delay={i * 80}>
                <article className="wall-card">
                  <span className="category-pill">{p.cat}</span>
                  <p className="wall-text">"{p.text}"</p>
                  <div className="wall-meta">
                    <span className="wall-time">anonymous · {p.time}</span>
                    <button
                      className={`prayed-btn ${isPrayed ? 'prayed' : ''}`}
                      onClick={() => toggle(p.id)}
                      aria-pressed={isPrayed}
                      aria-label={isPrayed ? `Unprayed for ${p.cat}` : `Pray for ${p.cat}`}
                    >
                      <PixelHeart />
                      <span>{isPrayed ? 'prayed' : 'pray'}</span>
                      <span style={{ opacity: 0.8, fontVariantNumeric: 'tabular-nums' }}>
                        {(p.count + (isPrayed ? 1 : 0)).toLocaleString()}
                      </span>
                    </button>
                  </div>
                </article>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// --- Prayer Plans ---
const PLANS = [
  { klass: 'plan-anxiety', days: '7 DAYS', title: '7 Days Through Anxiety', desc: 'for the mornings that don\'t feel safe yet. short prayers, grounded breathwork, scripture that actually lands.' },
  { klass: 'plan-grief', days: '14 DAYS', title: '14 Days of Grief', desc: 'for when the world keeps going and you\'re still stuck at the last conversation.' },
  { klass: 'plan-gratitude', days: '30 DAYS', title: '30 Days of Gratitude', desc: 'notice the small things on purpose. build a habit that outlasts the bad days.' },
  { klass: 'plan-work', days: '10 DAYS', title: 'For the Hard Season at Work', desc: 'for the meeting you dread, the boss who doesn\'t see you, the season that feels too long.' },
  { klass: 'plan-sleep', days: '21 NIGHTS', title: 'When You Can\'t Sleep', desc: 'for 2am ceilings. quiet prayers, slow scripture, permission to rest.' },
  { klass: 'plan-left', days: '14 DAYS', title: 'Praying for Someone Who Left', desc: 'the one who walked out. the one who stopped calling. start here.' },
];

function PrayerPlansSection() {
  return (
    <section className="plans-section" id="plans" aria-labelledby="plans-heading">
      <div className="container">
        <Reveal>
          <div className="eyebrow">prayer plans</div>
          <h2 id="plans-heading" className="section-title" style={{ marginTop: 12 }}>
            don't know where to start? <em>we'll meet you there.</em>
          </h2>
          <p className="section-sub">guided multi-day plans. daily prayer + scripture + one real thing to do. swipe to explore.</p>
        </Reveal>
      </div>
      <div className="container">
        <div className="plans-scroll" role="list">
          {PLANS.map((p, i) => (
            <article key={i} className={`plan-card ${p.klass}`} role="listitem">
              <div>
                <div className="plan-days">{p.days}</div>
                <h3 className="plan-title">{p.title}</h3>
                <p className="plan-desc">{p.desc}</p>
              </div>
              <div className="plan-cta-row">
                <span>start plan</span>
                <span style={{ fontSize: 24 }}>→</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- Love Letter ---
const LETTERS = [
  { body: "dear one, you don't have to have it together today. i'd rather have you honest than impressive. rest here a minute.", sign: "— love, God" },
  { body: "i saw you try again this morning. no one else noticed. i did. that counts.", sign: "— love, God" },
  { body: "the thing you're afraid to ask for? ask for it. i'm not tired of you.", sign: "— love, God" },
  { body: "you don't have to earn this back. you never had to. come sit down.", sign: "— love, God" },
  { body: "the small thing you did today — the text, the apology, the deep breath — that was brave. i saw.", sign: "— love, God" },
  { body: "you are not behind. you are not too much. you are not alone. try that on today.", sign: "— love, God" },
];

function LoveLetterSection() {
  const [open, setOpen] = useState(false);
  const [idx, setIdx] = useState(0);
  const pickNew = () => {
    let n;
    do { n = Math.floor(Math.random() * LETTERS.length); } while (n === idx && LETTERS.length > 1);
    setIdx(n);
  };
  const handleOpen = () => {
    if (!open) { pickNew(); setOpen(true); }
  };
  const handleAgain = () => { pickNew(); };

  return (
    <section className="letter-section" id="love-letter" aria-labelledby="letter-heading">
      <div className="container">
        <Reveal>
          <div className="eyebrow">daily, tender, specific</div>
          <h2 id="letter-heading" className="section-title" style={{ marginTop: 12 }}>
            a love letter <em>from God.</em> today.
          </h2>
          <p className="section-sub">a short, personal note rotating every day. tap the envelope. we promise to be gentle.</p>
        </Reveal>

        <Reveal delay={120}>
          <div className="letter-stage">
            <div className="letter-card">
              <span className="sparkle" style={{ top: 20, left: 30, fontSize: 20 }}><Sparkle size={18} /></span>
              <span className="sparkle" style={{ top: 40, right: 40, fontSize: 26, animationDelay: '0.8s' }}><Sparkle size={22} /></span>
              <span className="sparkle" style={{ bottom: 30, left: 60, fontSize: 16, animationDelay: '1.6s' }}><Sparkle size={14} /></span>
              <span className="sparkle" style={{ bottom: 50, right: 30, fontSize: 20, animationDelay: '2.2s' }}><Sparkle size={20} /></span>

              {!open ? (
                <>
                  <button
                    className={`envelope`}
                    onClick={handleOpen}
                    aria-label="Open today's love letter"
                    style={{ background: 'transparent', padding: 0 }}
                  >
                    <div className="envelope-body"></div>
                    <div className="envelope-heart"><PixelHeart /></div>
                    <div className="envelope-flap"></div>
                  </button>
                  <div className="letter-prompt">tap to open today's letter</div>
                </>
              ) : (
                <>
                  <p className="letter-body" key={idx}>"{LETTERS[idx].body}"</p>
                  <div className="letter-sign">{LETTERS[idx].sign}</div>
                  <button className="letter-again" onClick={handleAgain}>
                    ↻ read another
                  </button>
                </>
              )}
            </div>
            <p style={{ textAlign: 'center', marginTop: 20, color: 'var(--ink-soft)', fontSize: 14 }}>
              a new letter every day inside the app.
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Home, MOODS, LETTERS, PLANS });