// Memoriz onboarding — Splash + Screens 1–3

// ---------------- SPLASH ----------------
const SplashScreen = ({ onStart }) => (
  <div className="screen">
    <div className="aurora" />
    <StatusBar />

    <div className="splash-polaroids">
      <div className="poly" style={{ top: 110, left: 22, '--r': '-9deg' }}>
        <div className="img" style={{ backgroundImage: 'url(assets/photo-baby.png)' }} />
      </div>
      <div className="poly" style={{ top: 96, right: 28, '--r': '8deg', animationDelay: '.6s' }}>
        <div className="img" style={{ backgroundImage: 'url(assets/photo-wedding.jpg)' }} />
      </div>
      <div className="poly" style={{ top: 240, left: 36, '--r': '6deg', animationDelay: '1.2s' }}>
        <div className="img" style={{ backgroundImage: 'url(assets/photo-couple-sunset.png)' }} />
      </div>
      <div className="poly" style={{ top: 240, right: 22, '--r': '-7deg', animationDelay: '1.8s' }}>
        <div className="img" style={{ backgroundImage: 'url(assets/photo-hike.png)' }} />
      </div>
    </div>

    <div className="splash">
      <div className="logo"><MemorizLogo size={48} /></div>
      <div className="tagline">Private timelines for the people you love most.</div>
    </div>

    <div className="bottom-halo" />
    <div className="start-btn">
      <button className="btn primary" onClick={onStart}>Get started</button>
    </div>
  </div>
);

// ---------------- SCREEN 1: GOAL SELECTION ----------------
const GOAL_OPTIONS = [
  { id: 'child',  emoji: '👶',   text: "My child's milestones", hint: 'First smile, steps, words…' },
  { id: 'family', emoji: '👨‍👩‍👧‍👦', text: 'Family memories together', hint: 'Holidays, birthdays, everyday' },
  { id: 'couple', emoji: '💑',   text: "Our couple's story", hint: 'Dates, trips, the small things' },
  { id: 'trips',  emoji: '✈️',   text: 'Trips & adventures', hint: 'Places you want to relive' },
];

const ScreenGoal = ({ step, total, value, onSelect, onBack }) => {
  const [picked, setPicked] = useState(value);
  const handle = (id) => {
    setPicked(id);
    setTimeout(() => onSelect(id), 320);
  };
  return (
    <div className="screen">
      <div className="aurora subtle" />
      <StatusBar />
      <TopNav step={step} total={total} onBack={onBack} hideBack />
      <div className="headline-block">
        <h1>What do you want to preserve?</h1>
      </div>
      <div className="body-region">
        <div className="select-list">
          {GOAL_OPTIONS.map(o => (
            <button
              key={o.id}
              className={'option-card' + (picked === o.id ? ' selected' : '')}
              onClick={() => handle(o.id)}
            >
              <span className="emoji">{o.emoji}</span>
              <span className="text-wrap">
                <span className="text">{o.text}<span className="hint">{o.hint}</span></span>
              </span>
              <span className="check-circle">
                {picked === o.id && <Icon name="check" size={14} stroke={2.6} />}
              </span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

// ---------------- SCREEN 2: FAMILY CIRCLE ----------------
const CIRCLE_OPTIONS = [
  { id: 'partner', label: 'Partner' },
  { id: 'mom',     label: 'Mom' },
  { id: 'dad',     label: 'Dad' },
  { id: 'grandma', label: 'Grandma' },
  { id: 'grandpa', label: 'Grandpa' },
  { id: 'sibling', label: 'Brother/Sister' },
  { id: 'friend',  label: 'Close friend' },
  { id: 'other',   label: 'Other', other: true },
];

const ScreenFamily = ({ step, total, value, onContinue, onBack }) => {
  const [picked, setPicked] = useState(value || []);
  const toggle = (id) => {
    setPicked(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };
  return (
    <div className="screen">
      <div className="aurora subtle" />
      <StatusBar />
      <TopNav step={step} total={total} onBack={onBack} />
      <div className="headline-block">
        <h1>Who will share this space with you?</h1>
        <p className="subhead">Select everyone you'd like to invite later.</p>
      </div>
      <div className="body-region">
        <div className="chip-grid">
          {CIRCLE_OPTIONS.map(o => (
            <button
              key={o.id}
              className={'circle-chip' + (picked.includes(o.id) ? ' selected' : '') + (o.other ? ' other' : '')}
              onClick={() => toggle(o.id)}
            >
              <span className="avatar">
                {o.other
                  ? <Icon name="plus" size={22} stroke={2.4} />
                  : <Icon name="user" size={28} color="currentColor" />
                }
              </span>
              <span className="label">{o.label}</span>
              <span className="mini-check"><Icon name="check" size={11} stroke={2.8}/></span>
            </button>
          ))}
        </div>
      </div>
      <div className="bottom-halo" />
      <div className="cta-region">
        <button
          className="btn primary"
          disabled={picked.length === 0}
          onClick={() => onContinue(picked)}
        >
          {picked.length === 0 ? 'Select at least one' : `Continue · ${picked.length}`}
        </button>
      </div>
    </div>
  );
};

// ---------------- SCREEN 3: FIRST MOMENT ----------------
const MOMENT_OPTIONS = [
  { id: 'photo',     emoji: '📸', text: 'A photo I keep going back to',           hint: 'That one image that always stops you' },
  { id: 'voice',     emoji: '🎤', text: 'A voice message from someone I love',    hint: 'A laugh, a phone call, a goodnight' },
  { id: 'video',     emoji: '🎬', text: 'A video I never want to lose',           hint: 'A first step, a vow, a song' },
  { id: 'milestone', emoji: '📝', text: 'A milestone or date to remember',        hint: 'A day worth marking forever' },
];

const ScreenMoment = ({ step, total, value, onSelect, onBack }) => {
  const [picked, setPicked] = useState(value);
  const handle = (id) => {
    setPicked(id);
    setTimeout(() => onSelect(id), 320);
  };
  return (
    <div className="screen">
      <div className="aurora subtle" />
      <StatusBar />
      <TopNav step={step} total={total} onBack={onBack} />
      <div className="headline-block">
        <h1>What's the first moment<br/>you'd want to save?</h1>
        <p className="subhead">There's no wrong answer — just pick the one that's on your mind.</p>
      </div>
      <div className="body-region">
        <div className="select-list">
          {MOMENT_OPTIONS.map(o => (
            <button
              key={o.id}
              className={'option-card tall' + (picked === o.id ? ' selected' : '')}
              onClick={() => handle(o.id)}
            >
              <span className="emoji">{o.emoji}</span>
              <span className="text-wrap">
                <span className="text">{o.text}<span className="hint">{o.hint}</span></span>
              </span>
              <span className="check-circle">
                {picked === o.id && <Icon name="check" size={14} stroke={2.6} />}
              </span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SplashScreen, ScreenGoal, ScreenFamily, ScreenMoment });