// Start / intro screen.
// Big brand colour-block, logo tag, subtitle, big CTA.

function StartScreen({ data, onStart }) {
  return (
    <div className="dk-screen dk-screen-start">
      {/* top bar with conference chip */}
      <div className="dk-topbar">
        <Chip tone="ink">{data.eventTag}</Chip>
      </div>

      {/* hero */}
      <div className="dk-start-hero">
        <div className="dk-start-logo">
          <LogoTag size={120} />
        </div>

        <div className="dk-start-title">
          <div className="dk-start-kicker">ブース来場ありがとうございます！</div>
          <h1 className="dk-start-h1">
            {data.boothHeadline}
          </h1>
          <p className="dk-start-sub">{data.boothSub}</p>
        </div>

        {/* decorative food row — uses brand SVG icons */}
        <div className="dk-start-foods" aria-hidden>
          <span className="dk-start-food-ico" style={{ transform: "rotate(-8deg)" }}>
            <img src="assets/icon-skillet.svg" alt="" />
          </span>
          <span className="dk-start-food-ico" style={{ transform: "rotate(6deg) translateY(-6px)" }}>
            <img src="assets/icon-maindish.svg" alt="" />
          </span>
          <span className="dk-start-food-ico" style={{ transform: "rotate(-4deg) translateY(2px)" }}>
            <img src="assets/icon-japanesefood.svg" alt="" />
          </span>
          <span className="dk-start-food-ico" style={{ transform: "rotate(10deg) translateY(-4px)" }}>
            <img src="assets/icon-bread.svg" alt="" />
          </span>
          <span className="dk-start-food-ico" style={{ transform: "rotate(-6deg)" }}>
            <img src="assets/icon-candy.svg" alt="" />
          </span>
        </div>
      </div>

      {/* info card */}
      <div className="dk-start-info">
        <div className="dk-start-info-row">
          <div className="dk-start-info-num">3</div>
          <div>
            <div className="dk-start-info-k">QUESTIONS</div>
            <div className="dk-start-info-v">全3問・所要 約1分</div>
          </div>
        </div>
        <div className="dk-divider" />
        <div className="dk-start-info-row">
          <div className="dk-start-info-num">⏱</div>
          <div>
            <div className="dk-start-info-k">NO TIMER</div>
            <div className="dk-start-info-v">自分のペースでどうぞ</div>
          </div>
        </div>
      </div>

      <button className="dk-primary-btn" onClick={onStart}>
        <span>クイズをはじめる</span>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path
            d="M5 12h14M13 6l6 6-6 6"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </button>

      <div className="dk-start-footer">
        <span>Powered by</span>
        <img
          src="assets/delish-wordmark.png"
          alt="デリッシュキッチン"
          className="dk-wordmark"
        />
      </div>
    </div>
  );
}

window.StartScreen = StartScreen;