/* ============================================================
   YourCelf marketing site — page components
   Each page mirrors the wireframe v3-hybrid structure.
   ============================================================ */

/* ============ 01 · Home ===================================== */
/* ============ 01 · Home ===================================== */
function HomePage({ setRoute }) {
  return (
    <main className="page">
      {/* Hero */}
      <section className="hero" style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: '48px', alignItems: 'start', maxWidth: '960px', margin: '0 auto', padding: '48px 20px 24px 20px' }}>
        <div className="hero-prose" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', textAlign: 'left' }}>
          <h1 style={{ fontSize: '38px', lineHeight: '1.15', margin: '0 0 24px' }}>
            Your photos are already the autobiography you've been meaning to write.<br/>
            <span style={{ color: 'var(--celf-amber)' }}>We just read them back.</span>
          </h1>
          <p className="em-line" style={{ fontSize: '18px', color: 'var(--ink-70)', marginBottom: '16px', maxWidth: '46ch' }}>
            YourCelf reads your photo library, really reads it, and helps you write the stories of your life. The birthdays. The holidays. The trips. The Tuesdays with the people who matter.
          </p>
          <p className="em-line" style={{ fontSize: '18px', color: 'var(--ink-70)', marginBottom: '24px', maxWidth: '46ch' }}>
            It does this entirely offline. You can opt-in to download a local Ai writing model that runs 100% on your device to write richer stories. Without it, a simpler built-in writer still tells your story.
          </p>
          <h3 style={{ fontSize: '22px', fontWeight: 600, color: 'var(--ink)', marginTop: '28px', marginBottom: 0, fontFamily: 'var(--font-display)' }}>
            Your life story, owned by you.
          </h3>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneFrame
            src="../../assets/photos/simulator_screenshot.png"
            isScreenshot={true}
          />
        </div>
      </section>

      {/* 3 previews */}
      <section className="section">
        <div className="previews">
          <article className="preview-card">
            <Eyebrow>Your Story</Eyebrow>
            <h4>A biographer in your pocket</h4>
            <p>We built YourCelf because your phone holds the real story of your life, and you deserve a private, permanent book of it that you actually own.</p>
            <div className="visual" style={{ backgroundImage: 'url("../../assets/photos/mylife_story_card.png")', backgroundSize: 'cover', backgroundPosition: 'center 70%', position: 'relative' }}>
            </div>
          </article>
          <article className="preview-card">
            <Eyebrow>Your Circle</Eyebrow>
            <h4>The people in the story</h4>
            <p>Share moments directly with the people who were in them. Sync memories phone-to-phone with zero feeds, ads, or algorithms.</p>
            <div className="visual" style={{ backgroundImage: 'url("../../assets/photos/circles_gathering_card.png")', backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
            </div>
          </article>
          <article className="preview-card">
            <Eyebrow>Your Privacy</Eyebrow>
            <h4>Cut the cloud</h4>
            <p>Everything in YourCelf runs locally with zero servers. Your life history belongs to you and your family, not a corporation's cloud.</p>
            <div className="visual" style={{ backgroundImage: 'url("../../assets/photos/five_people_gathering.png")', backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
            </div>
          </article>
        </div>
      </section>


    </main>
  );
}

/* ============ 02 · Your Story =============================== */
function YourStoryPage({ setRoute }) {
  return (
    <main className="page">
      <section className="section story-grid">
        {/* Left Column: Copy & features */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
          <div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '38px', lineHeight: '1.15', margin: '0 0 16px' }}>
              Your Story
            </h1>
            <p style={{ fontSize: '18px', color: 'var(--ink-70)', lineHeight: '1.4' }}>
              Your photo library is already the biography of your life. We just read it back.
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
            <div>
              <strong style={{ display: 'block', fontSize: '16px', color: 'var(--ink)', marginBottom: '4px' }}>On-Device AI.</strong>
              <p style={{ fontSize: '15px', color: 'var(--ink-70)' }}>Opt to download a local 580MB model to write richer prose on-device. Without it, a simpler built-in writer still tells your story.</p>
            </div>
            <div>
              <strong style={{ display: 'block', fontSize: '16px', color: 'var(--ink)', marginBottom: '4px' }}>Books & Chapters.</strong>
              <p style={{ fontSize: '15px', color: 'var(--ink-70)' }}>Your life sorts itself by era and season—Childhood, College, Brooklyn. Read it back the way you'd open a book.</p>
            </div>
            <div>
              <strong style={{ display: 'block', fontSize: '16px', color: 'var(--ink)', marginBottom: '4px' }}>Whole and yours.</strong>
              <p style={{ fontSize: '15px', color: 'var(--ink-70)' }}>Export your entire history to open formats at any time. If YourCelf disappeared tomorrow, your stories would still open.</p>
            </div>
          </div>

          <div style={{ marginTop: '8px' }}>
            <a href="/testers.html" className="ys-btn ys-btn-primary">Join the Beta</a>
          </div>
        </div>

        {/* Right Column: Phone screenshot */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneFrame
            src="../../assets/photos/story_screenshot.png"
            isScreenshot={true}
          />
        </div>
      </section>
    </main>
  );
}

/* ============ 04 · Circles ================================== */
function CirclesPage({ setRoute }) {
  return (
    <main className="page">
      <section className="section story-grid">
        {/* Left Column: Copy & features */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
          <div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '38px', lineHeight: '1.15', margin: '0 0 16px' }}>
              Your Circles
            </h1>
            <p style={{ fontSize: '18px', color: 'var(--ink-70)', lineHeight: '1.4' }}>
              Share stories directly with the people who were in them. No public feeds, no cloud storage, no corporation in the middle.
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
            <div>
              <strong style={{ display: 'block', fontSize: '16px', color: 'var(--ink)', marginBottom: '4px' }}>Sync phone-to-phone.</strong>
              <p style={{ fontSize: '15px', color: 'var(--ink-70)' }}>Circles do not live on our servers. When you connect, your devices talk directly to each other locally over Wi-Fi or Bluetooth, copying only the photos from that specific evening.</p>
            </div>
            <div>
              <strong style={{ display: 'block', fontSize: '16px', color: 'var(--ink)', marginBottom: '4px' }}>Grouped automatically.</strong>
              <p style={{ fontSize: '15px', color: 'var(--ink-70)' }}>The app automatically groups photos from up to four phones based on metadata and proximity, creating a single, shared record of the event.</p>
            </div>
            <div>
              <strong style={{ display: 'block', fontSize: '16px', color: 'var(--ink)', marginBottom: '4px' }}>Zero tracking.</strong>
              <p style={{ fontSize: '15px', color: 'var(--ink-70)' }}>No advertisements, no accounts, and no data collection. When everyone leaves the campfire, the sync ends.</p>
            </div>
          </div>

          <div style={{ marginTop: '8px' }}>
            <a href="/testers.html" className="ys-btn ys-btn-primary">Join the Beta</a>
          </div>
        </div>

        {/* Right Column: Phone screenshot */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <PhoneFrame
            src="../../assets/photos/circles_screenshot.png"
            isScreenshot={true}
          />
        </div>
      </section>
    </main>
  );
}

/* ============ 05 · Sovereignty ============================= */
function SovereigntyPage({ setRoute }) {
  return (
    <main className="page">
      <PageHero
        title="Your Privacy"
        lede="Your life is not training data. YourCelf is built from the ground up to keep your history local and owned by you."
      />

      <section className="section">
        <div className="previews">
          <article className="preview-card">
            <Eyebrow>Sealed On-Device</Eyebrow>
            <h4>Local secure vault</h4>
            <p>Stored inside your phone's sandbox in a secure SQLite database. Decrypted only when you unlock your screen.</p>
            <div className="visual" style={{ backgroundImage: 'url("../../assets/photos/five_people_gathering.png")', backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
            </div>
          </article>
          <article className="preview-card">
            <Eyebrow>Zero Servers</Eyebrow>
            <h4>No accounts, no cloud</h4>
            <p>We collect nothing. There is no server holding your credentials, your photos, or your written biography prose.</p>
            <div className="visual" style={{ backgroundImage: 'url("../../assets/photos/circles_gathering_card.png")', backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}>
            </div>
          </article>
          <article className="preview-card">
            <Eyebrow>Whole & Yours</Eyebrow>
            <h4>Open format exports</h4>
            <p>Export your entire database in open formats in one click. If YourCelf disappeared tomorrow, your stories would still open.</p>
            <div className="visual" style={{ backgroundImage: 'url("../../assets/photos/mylife_story_card.png")', backgroundSize: 'cover', backgroundPosition: 'center 70%', position: 'relative' }}>
            </div>
          </article>
        </div>
      </section>
    </main>
  );
}

/* ============ 06 · Be YourCelf ============================= */
function BeYourCelfPage() {
  return (
    <main className="page">
      <PageHero title="Free while we build." lede="YourCelf is in open beta, and the beta is free."/>

      <section className="section" style={{ maxWidth: 560, margin: '0 auto', textAlign: 'center' }}>
        <p style={{ fontSize: 17, color: 'var(--ink-70)' }}>
          Pricing comes with the public launch this fall. When it does, it will honor the
          same principle as everything else here: your story is yours. No data held
          hostage, no story behind a paywall you already wrote.
        </p>
        <p className="under-line" style={{ marginTop: 28 }}>"Beta testers are building this with me. That won't be forgotten when pricing lands."</p>
        <p className="under-sig">Robert</p>
      </section>

      <section className="section">
        <Waitlist/>
      </section>
    </main>
  );
}

/* ---------- Export ---------------------------------------- */
Object.assign(window, {
  HomePage, YourStoryPage, CirclesPage, SovereigntyPage, BeYourCelfPage,
});