/* global React, Icon, CtaBand */

function FeaturesPage({ navigate }) {
  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">Features</div>
          <h1 className="page-hero__title">
            Quiet tools.<br /><em>Lasting work.</em>
          </h1>
          <p className="page-hero__lede">
            Everything you need to record, schedule, and pass down the things that matter — and
            nothing that pretends to be more important than the people you love.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          {/* RECORD */}
          <div className="feature-row">
            <div className="feature-row__copy">
              <div className="em-eyebrow">Record</div>
              <h2>One button. One <em>story</em>. No script.</h2>
              <p>
                Press record when you're ready. Pause whenever you need to. Re-record as many
                times as you'd like — there's no wrong way to do this. We'll keep what you keep.
              </p>
              <ul className="feature-row__list">
                <li>4K video and lossless audio capture</li>
                <li>Built-in prompts when the words don't come easy</li>
                <li>Pause, resume, and re-record without losing your place</li>
                <li>Works on phone, tablet, and desktop</li>
              </ul>
            </div>
            <div className="feature-row__visual">
              <div className="viz-record">
                <div className="viz-record__btn"><Icon name="mic" size={32} /></div>
                <div className="viz-record__time"><span className="live">●</span> 02:34</div>
                <div className="viz-record__meter">
                  {[14, 22, 18, 26, 12, 20, 28, 16, 24, 14, 22, 18, 28, 14, 20, 18, 24, 16, 22, 12].map((h, i) => (
                    <div className="viz-record__bar" key={i} style={{ height: h }} />
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* SCHEDULE */}
          <div className="feature-row feature-row--reverse">
            <div className="feature-row__copy">
              <div className="em-eyebrow">Schedule</div>
              <h2>Choose <em>exactly</em> when they hear from you.</h2>
              <p>
                A birthday. A graduation. The morning after. Schedule each message for the
                moment it'll matter most — to a single date, a recurring milestone, or a
                triggered event you set in advance.
              </p>
              <ul className="feature-row__list">
                <li>One-time, recurring, or milestone-based delivery</li>
                <li>Reschedule, edit, or delete at any time</li>
                <li>Optional preview to recipients before unlock</li>
              </ul>
            </div>
            <div className="feature-row__visual">
              <div className="viz-schedule">
                <div className="viz-schedule__row">
                  <div className="viz-schedule__date">May 12, 2026</div>
                  <div className="viz-schedule__title">Maya's 30th — "On the day you were born"</div>
                  <div className="viz-schedule__icon"><Icon name="gift" size={16} /></div>
                </div>
                <div className="viz-schedule__row viz-schedule__row--featured">
                  <div className="viz-schedule__date">Jun 21, 2027</div>
                  <div className="viz-schedule__title">Lila's wedding — "The toast I would've given"</div>
                  <div className="viz-schedule__icon"><Icon name="heart" size={16} /></div>
                </div>
                <div className="viz-schedule__row">
                  <div className="viz-schedule__date">Annually</div>
                  <div className="viz-schedule__title">Father's Day — "Thinking of you"</div>
                  <div className="viz-schedule__icon"><Icon name="calendar" size={16} /></div>
                </div>
                <div className="viz-schedule__row">
                  <div className="viz-schedule__date">On 18th</div>
                  <div className="viz-schedule__title">Sam graduates — "What I learned at your age"</div>
                  <div className="viz-schedule__icon"><Icon name="book" size={16} /></div>
                </div>
              </div>
            </div>
          </div>

          {/* SECURE VAULT */}
          <div className="feature-row">
            <div className="feature-row__copy">
              <div className="em-eyebrow">Protect</div>
              <h2>Encrypted on your device. <em>Yours alone.</em></h2>
              <p>
                Every recording is encrypted before it leaves you. We hold the storage; you hold
                the keys. Only the recipients you name can ever unlock a message — and only when
                you said they could.
              </p>
              <ul className="feature-row__list">
                <li>End-to-end encryption with keys you control</li>
                <li>Recipient identity verification at unlock</li>
                <li>Independent third-party security audits</li>
                <li>Open-source client; published threat model</li>
              </ul>
            </div>
            <div className="feature-row__visual">
              <div className="viz-vault">
                <div className="viz-vault__lock">
                  <div className="viz-vault__lock-mark"><Icon name="lock" size={16} /></div>
                  <div className="viz-vault__lock-text">
                    <strong>17 recordings</strong> · sealed and encrypted
                  </div>
                </div>
                <div className="viz-vault__chips">
                  <div className="viz-vault__chip"><div className="viz-vault__chip-dot" />Maya</div>
                  <div className="viz-vault__chip"><div className="viz-vault__chip-dot" />Lila</div>
                  <div className="viz-vault__chip"><div className="viz-vault__chip-dot" />Sam</div>
                  <div className="viz-vault__chip"><div className="viz-vault__chip-dot" />Mom</div>
                  <div className="viz-vault__chip"><div className="viz-vault__chip-dot" />+ 4</div>
                </div>
                <div className="viz-vault__list">
                  <div className="viz-vault__item">
                    <div className="viz-vault__item-name">The day you were born</div>
                    <div className="viz-vault__item-meta">2:34</div>
                  </div>
                  <div className="viz-vault__item">
                    <div className="viz-vault__item-name">What grandma taught me</div>
                    <div className="viz-vault__item-meta">4:12</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* DELIVERY */}
          <div className="feature-row feature-row--reverse">
            <div className="feature-row__copy">
              <div className="em-eyebrow">Deliver</div>
              <h2>Arriving on time. <em>Even when you can't.</em></h2>
              <p>
                When the day comes, we deliver gently — never as a pop-up, never as a
                notification on a Tuesday morning. A quiet email, an envelope to open, your
                voice on the other side.
              </p>
              <ul className="feature-row__list">
                <li>Recipients verified by ID before unlock</li>
                <li>Personalized delivery email — written by you</li>
                <li>Recipients can revisit any time after unlock</li>
                <li>Optional printed letter accompanying each release</li>
              </ul>
            </div>
            <div className="feature-row__visual">
              <div className="viz-deliver">
                <div className="viz-deliver__step viz-deliver__step--done">
                  <div className="viz-deliver__step-num">i.</div>
                  <div className="viz-deliver__step-text"><strong>You record.</strong>Pressed record on May 6, 2026</div>
                  <div className="viz-deliver__step-state">Sealed</div>
                </div>
                <div className="viz-deliver__step viz-deliver__step--done">
                  <div className="viz-deliver__step-num">ii.</div>
                  <div className="viz-deliver__step-text"><strong>You schedule.</strong>For Maya's 30th birthday</div>
                  <div className="viz-deliver__step-state">Scheduled</div>
                </div>
                <div className="viz-deliver__step">
                  <div className="viz-deliver__step-num">iii.</div>
                  <div className="viz-deliver__step-text"><strong>We wait.</strong>Holding quietly until May 12, 2026</div>
                  <div className="viz-deliver__step-state">Waiting</div>
                </div>
                <div className="viz-deliver__step">
                  <div className="viz-deliver__step-num">iv.</div>
                  <div className="viz-deliver__step-text"><strong>She hears you.</strong>Verified, unlocked, delivered</div>
                  <div className="viz-deliver__step-state">In time</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CtaBand
        navigate={navigate}
        title="Quiet tools.<br/><em>Lasting work.</em>"
        body="Press the button when you're ready. There's no wrong way to do this."
      />
    </div>
  );
}

window.FeaturesPage = FeaturesPage;