// ABOUT PAGE

function AboutPage() {
  useEffect(() => {
    document.title = "About Unspoken | Built Because We Needed It Too";
    const meta = document.querySelector('meta[name="description"]');
    if (meta) meta.setAttribute('content', 'The story behind Unspoken — a prayer app built by a mom in Austin, TX, for people who don\'t always have the words.');
  }, []);

  return (
    <main id="main">
      <section className="page-hero">
        <FloatingHearts count={6} />
        <div className="container" style={{ position: 'relative' }}>
          <Reveal>
            <div className="eyebrow" style={{ display: 'inline-flex' }}>our story</div>
            <h1 style={{ marginTop: 16 }}>we built unspoken because <em>we needed it.</em></h1>
            <p>a short, honest story about why this app exists — and what we hope it does for you.</p>
          </Reveal>
        </div>
      </section>

      <section className="story-section">
        <div className="container-narrow">
          <Reveal>
            <div className="story-content">
              <p>i\'m laura. i\'m a mom in austin. i homeschool my kids. i build apps — this is one of them.</p>
              <p>a few years ago i was on my bathroom floor, phone in my hand, trying to find a prayer for what i was actually feeling. not what i should be feeling. what i <em>was</em> feeling. the difference was a canyon.</p>
              <p>every app gave me a verse. a "prayer of the day." a devotional with a sunset and a clean conclusion. i didn\'t need a verse. i needed someone to pray with me when i didn\'t have the words.</p>

              <div className="pull">so i built the thing i couldn\'t find.</div>

              <p>unspoken is not a content library. it\'s a companion. it meets you at the mood, writes the prayer for the moment, and gives you one small thing to do with it before you go back to your day.</p>
              <p>the love letters exist because i wanted my kids — and me — to hear something tender on purpose. not a bible verse repurposed as an instagram caption. an actual, specific note. "i see you. the thing you did today counts. rest."</p>
              <p>the mood check exists because the hardest part of praying is starting. if you can tap one button, you can pray today.</p>
              <p>the "so what now?" exists because i don\'t want this to be another app that makes you feel something for 90 seconds and then doesn\'t change your tuesday.</p>

              <div className="pull">this app doesn\'t care what you believe on your best day. it cares what you do on your worst one.</div>

              <p>we\'re small. i built this with a handful of people who also pray badly and often. we are not a big christian media company. we don\'t have a content calendar. we read every email.</p>
              <p>if it meets you — even once, even a little — that\'s the whole point.</p>
              <p style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', color: 'var(--purple-500)', fontSize: 22 }}>— laura</p>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="values-section" aria-labelledby="values-heading">
        <div className="container">
          <Reveal>
            <div className="eyebrow">what we believe about building this</div>
            <h2 id="values-heading" className="section-title" style={{ marginTop: 12 }}>
              three things we <em>won\'t compromise on.</em>
            </h2>
          </Reveal>
          <div className="values-grid">
            <Reveal delay={80}>
              <div className="value-card">
                <div className="value-icon">🤍</div>
                <h3>honest, not polished.</h3>
                <p>we\'d rather be real than impressive. the copy is lowercase for a reason. the prayers are messy on purpose. we\'re not aiming for the cover of christian today.</p>
              </div>
            </Reveal>
            <Reveal delay={160}>
              <div className="value-card">
                <div className="value-icon">🔒</div>
                <h3>private, always.</h3>
                <p>your prayers are yours. we don\'t sell data. we don\'t share data. prayer wall posts are fully anonymous — even to us. we can\'t read your journal. we built it that way on purpose.</p>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div className="value-card">
                <div className="value-icon">✨</div>
                <h3>a nudge, never a sermon.</h3>
                <p>we meet you. we don\'t lecture you. the app won\'t guilt-trip you for skipping a day. it will still be here when you come back. so will we.</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--paper)' }}>
        <div className="container-narrow">
          <Reveal>
            <div style={{
              background: 'white', borderRadius: 'var(--card-radius)',
              padding: 40, boxShadow: 'var(--card-shadow)',
              border: '2px solid rgba(16,4,45,0.06)',
              textAlign: 'center',
            }}>
              <div className="eyebrow" style={{ display: 'inline-flex' }}>the company</div>
              <h2 style={{ fontSize: 32, fontWeight: 900, letterSpacing: '-0.02em', marginTop: 10 }}>Soleo Technologies</h2>
              <p style={{ fontSize: 17, color: 'var(--ink-soft)', marginTop: 14, lineHeight: 1.6 }}>
                a tiny studio in austin, tx. ten apps shipped. one founder, a few collaborators, a lot of coffee. we build in public, and we answer every email.
              </p>
              <div style={{ marginTop: 24, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <a href="#" className="btn btn-ghost" style={{ fontSize: 13 }}>watch us build on tiktok</a>
                <Link to="/contact" className="btn btn-purple" style={{ fontSize: 13 }}>get in touch</Link>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <CTABlock title="try unspoken. free for 7 days." sub="because the best way to understand this is to open it." />
    </main>
  );
}

Object.assign(window, { AboutPage });