/* ============================================================
   YourCelf marketing site — shared components
   ============================================================ */

const { useState, useEffect } = React;

/* ---------- Brand wordmark --------------------------------- */
function Wordmark({ size = 19 }) {
  return (
    <span className="brand" style={{ fontSize: size }}>
      YourC<span className="e">e</span>lf
    </span>
  );
}

/* ---------- Nav -------------------------------------------- */
function Nav({ route, setRoute }) {
  const links = [
    { id: 'your-story', label: 'Your Story' },
    { id: 'circles', label: 'Your Circles' },
    { id: 'sovereignty', label: 'Your Privacy' },
  ];
  return (
    <nav className="ys-nav">
      <button className="brand" onClick={() => setRoute('home')}>
        YourC<span className="e">e</span>lf
      </button>
      <div className="links">
        {links.map(l => (
          <button
            key={l.id}
            className={route === l.id ? 'active' : ''}
            onClick={() => setRoute(l.id)}
          >{l.label}</button>
        ))}
      </div>
      <span className="spacer"></span>
      <button className="ys-btn ys-btn-primary sm" onClick={() => setRoute('be-yourcelf')}>
        Join the Beta
      </button>
    </nav>
  );
}

/* ---------- Footer ----------------------------------------- */
function Footer({ setRoute }) {
  return (
    <footer className="ys-foot">
      <span className="copy">YourCelfCo</span>
      <button onClick={() => setRoute('sovereignty')}>Privacy</button>
      <span>·</span>
      <a href="privacy-policy.html">Privacy Policy</a>
      <span>·</span>
      <a href="mailto:ra@robertangelo.com">Support</a>
    </footer>
  );
}

/* ---------- Reusable: Eyebrow, Button --------------------- */
function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function Button({ kind = 'primary', children, onClick }) {
  return (
    <button className={`ys-btn ys-btn-${kind}`} onClick={onClick}>{children}</button>
  );
}

/* ---------- PhoneFrame ------------------------------------ */
function PhoneFrame({ caption, who, place, story, chapterMeta, empty, src, isScreenshot }) {
  if (isScreenshot) {
    return (
      <div className="phone" style={{ padding: 0, overflow: 'hidden' }}>
        <img src={src} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} alt="App Screenshot"/>
      </div>
    );
  }
  return (
    <div className="phone">
      <div className="status">9:41</div>
      <div
        className={`photo ${empty ? 'photo-empty' : ''} ${src ? 'photo-real' : ''}`}
        style={src ? { backgroundImage: `url("${src}")`, backgroundSize: 'cover', backgroundPosition: 'center' } : null}
      >
        {caption && <span className="cap">{caption}</span>}
      </div>
      {(who || place || story || chapterMeta) && (
        <div className="context">
          {chapterMeta && <div>{chapterMeta}</div>}
          {who && <div><span className="who">{who}</span></div>}
          {place && <div>{place}</div>}
          {story && <div><em>{story}</em></div>}
        </div>
      )}
    </div>
  );
}

/* ---------- HeroPhoto (full-bleed for Circles) ------------ */
function HeroPhoto({ src, caption }) {
  return (
    <div
      className="hero-photo"
      style={{ backgroundImage: `url("${src}")` }}
    >
      {caption && <span className="hero-photo-cap">{caption}</span>}
    </div>
  );
}

/* ---------- PhotoPlaceholder ------------------------------ */
function PhotoPlaceholder({ caption, real = true, style }) {
  if (real) {
    return (
      <div className="visual" style={{ background:
        'linear-gradient(160deg, #1a2230, #2a1f15 70%, #4a311a)',
        color: '#E8E2D5', textShadow: '0 1px 8px rgba(0,0,0,0.5)',
        position: 'relative', overflow: 'hidden', ...style }}>
        <div style={{ position:'absolute', inset:0,
          background:'radial-gradient(60% 50% at 50% 60%, rgba(214,144,74,0.32), transparent 70%)' }}/>
        <span style={{ position:'relative' }}>{caption}</span>
      </div>
    );
  }
  return (
    <div className="visual" style={{ borderStyle: 'dashed', border: '1px dashed var(--rule)', ...style }}>
      {caption}
    </div>
  );
}

/* ---------- PageHero --------------------------------------- */
function PageHero({ title, lede }) {
  return (
    <header className="page-hero">
      <h1>{title}</h1>
      {lede && <p className="lede">{lede}</p>}
    </header>
  );
}

/* ---------- Five-People panel ----------------------------- */
function FivePeople() {
  const people = [
    { name: 'Maya',  meta: '412 photos' },
    { name: 'Sarah', meta: '298 photos' },
    { name: 'Tom',   meta: '187 photos' },
    { name: 'Mom',   meta: '156 photos' },
    { name: 'Will',  meta: '142 photos' },
  ];
  return (
    <div className="five-people">
      <div className="five-people-row">
        {people.map(p => (
          <div key={p.name} className="person">
            <div className="circle"></div>
            <div className="name">{p.name}</div>
            <div className="meta">{p.meta}</div>
          </div>
        ))}
      </div>
      <div className="caption-line">These are the five people in your life.</div>
    </div>
  );
}

/* ---------- Vault export envelope -------------------------- */
function InheritanceEnvelope() {
  return (
    <div className="envelope">
      <div className="label">Your vault, exported</div>
      <div className="to">Everything</div>
      <p className="body">Open formats. Your photos, your stories, your names for things — a folder anyone could open.</p>
    </div>
  );
}

/* ---------- Campfire diagram ------------------------------ */
function Campfire() {
  const contributors = [
    { who: 'You',   what: '3 photos · 1 voice memo' },
    { who: 'Sarah', what: '5 photos' },
    { who: 'Tom',   what: '2 photos · 1 video' },
    { who: 'Mom',   what: '4 photos · "the cake"' },
  ];
  return (
    <div className="campfire">
      <div className="title-row">
        <img src="../../assets/icons/campfire.svg" className="icon" alt=""/>
        <span>Maya's 3rd birthday</span>
      </div>
      <div className="contributors">
        {contributors.map(c => (
          <div key={c.who} className="contributor">
            <div className="who">{c.who}</div>
            <div className="what">{c.what}</div>
          </div>
        ))}
      </div>
      <div className="arrow">↓ all woven into one shared memory ↓</div>
      <div className="outcome">
        <div className="title">Maya's 3rd birthday</div>
        <div className="summary">15 photos · 2 voice memos · 1 video · 4 people · one evening</div>
      </div>
    </div>
  );
}

/* ---------- Architecture diagram (Sovereignty) ----------- */
function ArchDiagram() {
  return (
    <div className="arch">
      <div className="arch-row">
        <div className="arch-node">
          <div className="title">Your phone</div>
          <div className="desc">Vault · capture · composition</div>
        </div>
        <div className="arch-link">↔</div>
        <div className="arch-node">
          <div className="title">Your Mac</div>
          <div className="desc">Deeper composition · optional</div>
        </div>
        <div className="arch-link">↔</div>
        <div className="arch-node">
          <div className="title">Your people</div>
          <div className="desc">Peer to peer · end to end</div>
        </div>
      </div>
      <div className="arch-foot">no cloud · no account · no us in the middle</div>
    </div>
  );
}

/* ---------- Beta invite (replaces the waitlist form) ------ */
function Waitlist() {
  return (
    <div className="waitlist">
      <h3>Be YourCelf.</h3>
      <div className="waitlist-row" style={{ justifyContent: 'center' }}>
        <a href="/testers.html" className="ys-btn ys-btn-primary">Join the Beta</a>
      </div>
      <span className="micro">The beta is open now, through Apple's TestFlight. Free.</span>
    </div>
  );
}

/* ---------- Export to window ------------------------------ */
Object.assign(window, {
  Wordmark, Nav, Footer, Eyebrow, Button,
  PhoneFrame, HeroPhoto, PhotoPlaceholder, PageHero,
  FivePeople, InheritanceEnvelope, Campfire, ArchDiagram, Waitlist,
});