// Savvie · welcome / first-time visitor screen
// Hero (copy + clustered category blobs) → step strip → live save module

const CATEGORY_BALLS = [
  // Tight cluster, workflow as the anchor · bigger + closer
  { size: 260, color: 'orange', label: 'workflow',    top: 22, left: 22, dur: 9,  delay: 0,    drift: 18 },
  { size: 210, color: 'cobalt', label: 'travel',      top: 0,  left: 54, dur: 11, delay: 0.4,  drift: 16 },
  { size: 180, color: 'pink',   label: 'recipe',      top: 50, left: 54, dur: 10, delay: 0.8,  drift: 20 },
  { size: 140, color: 'lime',   label: 'read later',  top: 10, left: 14, dur: 12, delay: 0.6,  drift: 14 },
  { size: 124, color: 'orange', label: 'tutorial',    top: 62, left: 6,  dur: 10, delay: 1.2,  drift: 22 },
  { size: 102, color: 'lime',   label: 'fashion',     top: 70, left: 30, dur: 11, delay: 0.9,  drift: 16 },
  { size: 92,  color: 'pink',   label: 'shopping',    top: 30, left: 78, dur: 9,  delay: 0.2,  drift: 12 },
  { size: 80,  color: 'cobalt', label: 'music',       top: 66, left: 80, dur: 10, delay: 1.5,  drift: 18 },
];

function CategoryConstellation() {
  const isMobile = window.innerWidth <= 640;
  const scale = isMobile ? 0.5 : 1;
  return (
    <div className="sv-constellation">
      {CATEGORY_BALLS.map((b) => {
        const s = Math.round(b.size * scale);
        return (
          <div
            key={b.label}
            className={`sv-cat-ball c-${b.color}`}
            style={{
              width: s,
              height: s,
              top: `${b.top}%`,
              left: `${b.left}%`,
              animationDuration: `${b.dur}s, ${b.dur * 0.65}s`,
              animationDelay: `${b.delay}s, ${b.delay + 0.3}s`,
              fontSize: Math.max(9, s * 0.115),
              '--drift': `${Math.round(b.drift * scale)}px`,
            }}
          >
            <span className="label">{b.label}</span>
          </div>
        );
      })}
      <span className="constellation-sticker tl">
        2 clicks.<br/>thought to action.
      </span>
      <span className="constellation-sticker br">
        chip away.<br/>start today.
      </span>
    </div>
  );
}

function StepStrip() {
  return (
    <div className="sv-step-strip">
      <div className="sv-step-card primary">
        <div className="num">01</div>
        <div className="big">save <em>anything.</em></div>
        <div className="sub">screenshot · link · reminder</div>
      </div>
      <div className="sv-step-arrow">→</div>
      <div className="sv-step-card">
        <div className="num">02</div>
        <div className="big">claude <em>pulls it.</em></div>
        <div className="sub">categorized · tagged · ready</div>
      </div>
      <div className="sv-step-arrow">→</div>
      <div className="sv-step-card">
        <div className="num">03</div>
        <div className="big">you <em>ship it.</em></div>
        <div className="sub">one click · claude does the action</div>
      </div>
    </div>
  );
}

function Welcome({ onEnter, onSave, user, onAuthClick, onSignOut }) {
  return (
    <div className="sv-welcome" data-screen-label="welcome">
      <div className="sv-welcome-nav">
        <Logo size={28} />
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
          {user ? (
            <>
              <span style={{ fontFamily: 'var(--vz-mono)', fontSize: 11, color: 'var(--vz-ink-40)' }}>
                {user.email}
              </span>
              <button
                onClick={onSignOut}
                style={{
                  padding: '6px 12px', border: '1px solid var(--vz-ink-15)', borderRadius: 8,
                  background: 'transparent', fontFamily: 'var(--vz-mono)', fontSize: 11,
                  color: 'var(--vz-ink-40)', cursor: 'pointer',
                }}
              >sign out</button>
            </>
          ) : (
            <>
              <button
                onClick={() => onAuthClick && onAuthClick('signup')}
                style={{
                  padding: '7px 14px', border: '1px solid var(--vz-cobalt)', borderRadius: 8,
                  background: 'var(--vz-cobalt)', fontFamily: 'var(--vz-mono)', fontSize: 11,
                  color: 'white', cursor: 'pointer',
                }}
              >sign up</button>
              <button
                onClick={() => onAuthClick && onAuthClick('signin')}
                style={{
                  padding: '7px 14px', border: '1px solid var(--vz-ink-15)', borderRadius: 8,
                  background: 'transparent', fontFamily: 'var(--vz-mono)', fontSize: 11,
                  color: 'var(--vz-ink)', cursor: 'pointer',
                }}
              >sign in</button>
            </>
          )}
        </div>
      </div>

      <div className="sv-welcome-hero-row">
        <div className="sv-welcome-left">
          <div className="sv-welcome-eyebrow">
            a claude-native app · do the things you keep
          </div>
          <h1 className="sv-welcome-h1">your saves,<br/><em>actioned.</em></h1>
          <p className="sv-welcome-blurb">
            drop a screenshot. paste a link. jot a reminder. savvie sorts what
            you keep, and turns it into actions. run now.
          </p>

          <div className="sv-welcome-cta-row">
            <button className="sv-welcome-secondary primary" onClick={onEnter}>
              start actioning →
            </button>
          </div>

          <div className="sv-welcome-platforms">
            <span className="sv-welcome-platforms-label">
              saves from <span className="arrow">→</span>
            </span>
            <div className="sv-platform-row">
              <a href="https://youtube.com" target="_blank" rel="noopener noreferrer" className="sv-platform p-youtube"  title="youtube"><span className="glyph">▶</span></a>
              <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="sv-platform p-instagram" title="instagram"><span className="glyph">◯</span></a>
              <a href="https://tiktok.com" target="_blank" rel="noopener noreferrer" className="sv-platform p-tiktok"   title="tiktok"><span className="glyph">♪</span></a>
              <a href="https://x.com" target="_blank" rel="noopener noreferrer" className="sv-platform p-x"        title="x"><span className="glyph">𝕏</span></a>
              <a href="https://reddit.com" target="_blank" rel="noopener noreferrer" className="sv-platform p-reddit"   title="reddit"><span className="glyph">r/</span></a>
              <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="sv-platform p-linkedin" title="linkedin"><span className="glyph">in</span></a>
              <a href="https://pinterest.com" target="_blank" rel="noopener noreferrer" className="sv-platform p-pinterest" title="pinterest"><span className="glyph">P</span></a>
              <span className="sv-platform p-plus" title="and more"><span className="glyph" style={{ fontSize: 16 }}>+</span></span>
            </div>
          </div>
        </div>

        <CategoryConstellation />
      </div>

      {/* Live save module */}
      <div className="sv-welcome-save-section">
        <div className="sv-welcome-save-frame">
          <div className="sv-welcome-save-head">
            <div>
              <h2 className="sv-welcome-save-title">drop your <em>first</em> save.</h2>
              <div className="sv-welcome-save-sub">try it now ↓</div>
            </div>
          </div>
          <SaveCore onSave={(payload) => { onSave(payload); }} autoFocus={false} />
        </div>
      </div>

      {/* Simplified step strip — below the save module */}
      <StepStrip />

      <div className="sv-welcome-foot">
        no more screenshots you'll never look at again. let's go.
      </div>
    </div>
  );
}

window.Welcome = Welcome;