/* global React, Icon, CtaBand */

function AboutPage({ 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">About us</div>
          <h1 className="page-hero__title">
            We started this for the <em>people we'd already lost</em>.
          </h1>
          <p className="page-hero__lede">
            And then for everyone who still has time to leave something behind.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="about-intro">
            <h2 className="about-intro__label">Our story</h2>
            <div className="about-intro__copy">
              <h3>The first recording we ever kept was a <em>voicemail</em>.</h3>
              <p>
                It was thirty-four seconds long. A grandmother, calling on a Tuesday, just to say
                she'd been thinking about us. Five years after she passed, that voicemail was the
                only sound of her left in the world.
              </p>
              <p>
                We built Everlasting Memory because thirty-four seconds shouldn't have to be enough.
                Because the people we love deserve to be heard, not just remembered. And because
                some things — a laugh, a turn of phrase, the way someone says your name — only
                survive in the recording.
              </p>
              <p>
                We're a small team. We answer our own emails. We treat your stories the way we'd
                want ours to be treated when our turn comes.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--paper">
        <div className="container">
          <div className="section__head">
            <div className="em-eyebrow">What we believe</div>
            <h2 className="em-h1" style={{ fontSize: 44 }}>Three principles. Nothing fancy.</h2>
          </div>
          <div className="values">
            <div className="value">
              <div className="value__num">i.</div>
              <h3>Dignity at every price point.</h3>
              <p>
                People in grief shouldn't be upsold. Our free tier is genuinely useful, our paid
                tiers are honestly priced, and we'll never put a memory behind a paywall to
                pressure you.
              </p>
            </div>
            <div className="value">
              <div className="value__num">ii.</div>
              <h3>Privacy is the product.</h3>
              <p>
                Your recordings are encrypted on your device before they ever reach us. We can't
                watch them. We can't show them to anyone. We can't even use them to "improve our
                AI." We never will.
              </p>
            </div>
            <div className="value">
              <div className="value__num">iii.</div>
              <h3>Forever means forever.</h3>
              <p>
                We have a published succession plan and a funded endowment for storage. If we
                disappear, your recordings don't. We've thought about this so you don't have to.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--ink" data-em-surface="ink" style={{ padding: '8px 0' }}>
        <div className="pullquote">
          <div className="pullquote__rule" />
          <q>
            We're not building a product for tech people. We're building it for our parents.
            For our parents' parents. And one day — for ourselves.
          </q>
          <div className="pullquote__attr">— The team at Everlasting Memory</div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section__head">
            <div className="em-eyebrow">Who we are</div>
            <h2 className="em-h1" style={{ fontSize: 44 }}>A small team. A long-term promise.</h2>
          </div>
          <div className="team">
            <Member initials="RF" name="Richard Fiest" role="Co-founder, Care" bio="Hospice social worker for fourteen years. Believes the best technology gets out of the way and lets people speak." />
            <Member initials="MP" name="Matt Pope" role="Co-founder, Engineering" bio="Built privacy-preserving systems at two banks. Lost his father in 2021 with no recordings. Built this so others wouldn't." />
            <Member initials="MP" name="Matt Peace" role="Co-founder, Head of Archivists" bio="Twelve years at the National Archives. Knows how to hold a story so it lasts longer than the person who told it." />
          </div>
        </div>
      </section>

      <CtaBand
        navigate={navigate}
        title="Start with <em>one</em> memory.<br/>That's enough for today."
        body="Press the button when you're ready. There's no wrong way to do this."
      />
    </div>
  );
}

function Member({ initials, name, role, bio }) {
  return (
    <div className="member">
      <div className="member__photo" role="img" aria-label={`Portrait placeholder for ${name}`}>{initials}</div>
      <div className="member__name">{name}</div>
      <div className="member__role">{role}</div>
      <p className="member__bio">{bio}</p>
    </div>
  );
}

window.AboutPage = AboutPage;