// welcome.jsx — Screen 1: Welcome
const WelcomeScreen = ({ name, callDateLabel, onStart }) => {
  return (
    <main className="screen-enter welcome-grid">
      {/* LEFT — copy */}
      <div className="welcome-left">
        <div className="welcome-eyebrow-row">
          <span className="welcome-eyebrow-text">
            Pre-Call Briefing für <strong>{name}</strong>
          </span>
        </div>

        <h1 className="welcome-h1">
          <em>5&nbsp;Minuten</em> Briefing. Dann startet unser Call nicht bei Null.
        </h1>

        <p className="welcome-lead">
          Damit wir am <strong>{callDateLabel}</strong> direkt beim Wesentlichen sind. Du erzählst uns kurz, was bei euch klemmt. Wir kommen mit konkreten Vorschlägen in den Call.
        </p>

        <div className="welcome-step-strip">
          <div className="step">
            <div className="step-num">01</div>
            <div className="step-body">
              <div className="step-t">Du erzählst</div>
              <div className="step-s">6 Fragen, schreiben oder sprechen.</div>
            </div>
          </div>
          <div className="step-divider"/>
          <div className="step">
            <div className="step-num">02</div>
            <div className="step-body">
              <div className="step-t">Wir bereiten vor</div>
              <div className="step-s">Konkrete Vorschläge zu deinen Use Cases.</div>
            </div>
          </div>
          <div className="step-divider"/>
          <div className="step">
            <div className="step-num">03</div>
            <div className="step-body">
              <div className="step-t">Wir reden</div>
              <div className="step-s">Vorschläge durchgehen, nächste Schritte.</div>
            </div>
          </div>
        </div>

        <div className="welcome-cta-row">
          <button className="btn btn-primary btn-lg" onClick={onStart}>
            Briefing starten
            <I.ArrowRight style={{ width: 18, height: 18 }}/>
          </button>
          <span className="welcome-cta-meta">
            <span className="cta-dot"/>
            Deine Antworten werden automatisch gespeichert.
          </span>
        </div>
      </div>

      {/* RIGHT — video card with real photo */}
      <VideoCard name={name}/>
    </main>
  );
};

const VideoCard = ({ name }) => {
  const [playing, setPlaying] = React.useState(false);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    if (!playing) return;
    const start = Date.now() - progress * 60000;
    const id = setInterval(() => {
      const elapsed = (Date.now() - start) / 1000;
      const p = Math.min(elapsed / 60, 1);
      setProgress(p);
      if (p >= 1) { setPlaying(false); clearInterval(id); }
    }, 100);
    return () => clearInterval(id);
  }, [playing]);

  return (
    <div className="video-wrap">
      <div className="video-card">
        <div
          className={`video-frame ${playing ? 'playing' : ''}`}
          onClick={() => !playing && setPlaying(true)}
        >
          {/* Real photo */}
          <img src="assets/photo-office-1.jpg" alt="" className="video-photo"/>

          {/* Tonal gradient over photo for legibility */}
          <div className="video-tone-overlay"/>

          {/* Top label */}
          <div className="video-top-label">
            <span className="rec-pulse-dot"/>
            <span className="video-top-label-text">Persönliche Nachricht · 60 SEK</span>
          </div>

          {/* Top right — handwritten greeting sticker */}
          <div className="video-sticker">
            Hey, {name}
          </div>

          {/* Play button */}
          {!playing && (
            <button
              className="video-play-btn"
              onClick={(e) => { e.stopPropagation(); setPlaying(true); }}
              aria-label="Nachricht abspielen"
            >
              <I.Play style={{ width: 22, height: 22, marginLeft: 3 }}/>
            </button>
          )}

          {/* Caption */}
          <div className="video-caption">
            <div className="video-caption-quote">
              "Freut mich, dass wir reden. Hier ist, was jetzt passiert."
            </div>
            <div className="video-caption-meta">
              <span>Jens Bohse · Co-Founder bakedwith</span>
            </div>

            <div className="video-progress">
              <div className="video-progress-bar" style={{ width: `${progress * 100}%` }}/>
            </div>
          </div>
        </div>
      </div>

    </div>
  );
};

window.WelcomeScreen = WelcomeScreen;