// All sections of the landing page

// ────────────────────────────────────────────────
//  Custom step visuals
// ────────────────────────────────────────────────

// Reusable: a real app screenshot in a phone-screen frame on a tinted stage
function ScreenStage({ src, alt, tint, badge, ratio }) {
  return (
    <div className={`screen-stage screen-stage--${tint}`}>
      <div className="screen-stage__phone" style={{aspectRatio: ratio || '1080 / 2248'}}>
        <img src={src} alt={alt} />
      </div>
      {badge && (
        <span className="screen-stage__badge">
          <span className="dot"></span>
          {badge}
        </span>
      )}
    </div>
  );
}

// Step 01 — walking / explore map
function WalkVisual() {
  return <ScreenStage src={res('screenWalk','assets/screens/walk.png')} alt="探索マップ画面" tint="cream" badge="歩いて探索" ratio="1179 / 2340" />;
}

// Step 02 — checking in at a spot
function CheckinVisual() {
  return <ScreenStage src={res('screenCheckin','assets/screens/checkin.png')} alt="スポットが開放された画面" tint="lavender" badge="スポットを開放" />;
}

// Step 03 — collecting a sneaker box
function CollectVisual() {
  return <ScreenStage src={res('screenCollect','assets/screens/collect.png')} alt="コレクションを埋める画面" tint="cream" badge="コレクションを埋める" />;
}

// Step 04 — showcase / shoes closet
function ShowcaseVisual() {
  return <ScreenStage src={res('screenDisplay','assets/screens/display.png')} alt="ショーケース画面" tint="lavender" badge="ショーケースに飾る" ratio="1179 / 2340" />;
}

// Step 05 — market: real marketplace screen
function MarketVisual() {
  return <ScreenStage src={res('screenTrade','assets/screens/trade.png')} alt="マーケット画面" tint="cream" badge="マーケットで取引" />;
}

// ────────────────────────────────────────────────
//  Sections
// ────────────────────────────────────────────────

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero__bgnumber">S</div>
      <div className="hero__inner">
        <div className="hero__lead">
          <div className="hero__meta">
            <span className="hero__issue">
              <span className="hero__issue-vol">VOL. 01 — WALK &amp; COLLECT</span>
            </span>
            <span className="hero__issue-num">2026 / SPRING</span>
          </div>
          <h1>
            <span>WALK.</span><br/>
            <span className="stroke">COLLECT.</span><br/>
            <span className="purple">FLEX.</span>
            <span className="jp">バーチャルスニーカーを、歩いて集める。</span>
          </h1>
          <p className="hero__tagline">
            毎日の一歩が、コレクションに変わる。Stepletは歩数をゲーム内通貨に変え、お気に入りのバーチャルスニーカーを集めて飾る、かつてM2Eブームに乗って一世を風靡したAgletをオマージュしたゲームです。
          </p>
          <div className="hero__cta">
            <AppStoreBadge />
            <GooglePlayBadge />
          </div>
        </div>

        <div className="hero__phone">
          <img className="hero__device" src={res('hero','assets/hero.png')} alt="Steplet アプリ画面" />
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    'WALK TO COLLECT', 'CHECK IN', 'COMPLETE THE SET', 'CURATE YOUR SHOWCASE', 'TRADE THE MARKET',
    'バーチャルスニーカー', '一歩が、価値になる。',
  ];
  const all = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {all.map((t, i) => (
          <React.Fragment key={i}>
            <span>{t}</span>
            <span className="marquee__star"></span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Concept() {
  return (
    <section className="section section--lavender" id="about">
      <div className="container">
        <div className="concept__grid">
          <div className="concept__head">
            <span className="eyebrow">No. 01 / About Steplet</span>
            <h2 className="headline" style={{marginTop: 20}}>
              歩く、それだけで<br>
              </br><span style={{color:'var(--steplet-primary)'}}>世界が変わる。</span>
            </h2>
            <p className="body-lg" style={{marginTop: 24, maxWidth: 460}}>
              Stepletは、現実の歩数をバーチャルスニーカーに変える「歩いて集める」プラットフォーム。通勤、散歩、ランニング — どんな一歩でも、ゲームの中の資産になります。
            </p>
          </div>

          <div className="concept__intro">
            <div className="concept-card">
              <span className="concept-card__num">01.</span>
              <h3 className="concept-card__title">
                歩数が <span className="accent">ゲーム内通貨</span>に。
              </h3>
              <p className="concept-card__body">
                スマートフォンのモーションデータと連携して、毎日の歩数を自動で記録。歩いた分だけ、ゲーム内通貨「Steplet」が貯まります。
              </p>
            </div>

            <div className="concept-card">
              <span className="concept-card__num">02.</span>
              <h3 className="concept-card__title">
                <span className="accent">スニーカー</span>で個性を。
              </h3>
              <p className="concept-card__body">
                デザインも性能も異なる、何百種類ものバーチャルスニーカー。あなたの足元から、コレクターとしての個性が始まります。
              </p>
            </div>

            <div className="concept-card concept-card--feature">
              <span className="concept-card__num">FEATURE — 0.3</span>
              <h3 className="concept-card__title">
                ショーケースに <span className="accent">並べる</span>、マーケットで <span className="accent">交わる</span>。
              </h3>
              <p className="concept-card__body">
                集めたスニーカーは、ショーケースに展示。ダブついたものはマーケットで売却。コレクター同士で、価値が動き出す。
              </p>
              <img className="concept-card__currency" src={res('currency','assets/currency_icon.png')} alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Steps() {
  const steps = [
    {
      n: '01',
      en: 'WALK',
      jp: '歩く。',
      sub: 'Step out, every day.',
      body: '通勤も、散歩も、トレーニングも。スマートフォンのモーションデータから歩数を記録し、歩いた分だけStepletが貯まります。',
      chips: ['歩数を自動記録', 'バックグラウンド計測', 'GPSなしでもOK'],
      visual: 'walk',
    },
    {
      n: '02',
      en: 'CHECK IN',
      jp: 'チェックインする。',
      sub: 'Unbox the next pair.',
      body: '街にあるスポットに到着したら、その場でチェックイン。貯めたStepletでスニーカーボックスを購入し、タップ＆フリックで開封する瞬間がたまらない。',
      chips: ['スポット発見', '開封演出', '限定ドロップ'],
      visual: 'checkin',
      reverse: true,
    },
    {
      n: '03',
      en: 'COLLECT',
      jp: '集める。',
      sub: 'Complete the set.',
      body: 'シリーズごとの全色を揃える、新作モデルを誰よりも早く手に入れる。1足、また1足と埋まっていく図鑑が、また歩きたくなる理由になる。コンプリート時には特別な報酬も。',
      chips: ['シリーズ図鑑', 'コンプリート報酬', '新作通知'],
      visual: 'collect',
    },
    {
      n: '04',
      en: 'DISPLAY',
      jp: '飾る。',
      sub: 'Curate your showcase.',
      body: 'バーチャルショーケースに自分のコレクションを展示。壁紙、棚、床まで自由にカスタマイズして、自分だけのショーケースを完成させよう。友達と見せ合うのも楽しい。',
      chips: ['ショーケース編集', '壁紙カスタム', 'フレンド公開'],
      visual: 'showcase',
      reverse: true,
    },
    {
      n: '05',
      en: 'TRADE',
      jp: 'トレードする。',
      sub: 'Make the market move.',
      body: 'マーケットに出品して、コレクター同士でトレード。需要と希少性が価値を決める、リアルなセカンダリーマーケット。手放した一足が、誰かのお気に入りになる。',
      chips: ['即時出品', '価格自由設定', '売り切れバッジ'],
      visual: 'market',
    },
  ];

  const renderVisual = (s) => {
    if (s.visual === 'walk')    return <WalkVisual />;
    if (s.visual === 'checkin') return <CheckinVisual />;
    if (s.visual === 'collect') return <CollectVisual />;
    if (s.visual === 'showcase') return <ShowcaseVisual />;
    if (s.visual === 'market')  return <MarketVisual />;
    return <img src={s.img} alt={s.jp} style={s.imgStyle || {}} />;
  };

  return (
    <section className="section" id="flow" style={{background:'var(--steplet-surface)'}}>
      <div className="container">
        <div className="steps__head">
          <span className="eyebrow">No. 02 / How it works</span>
          <h2 className="headline">
            歩く → チェックイン →<br/>
            集める → 飾る → トレード
          </h2>
        </div>

        {steps.map((s) => (
          <div key={s.n} className={`step ${s.reverse ? 'step--reverse' : ''}`}>
            <div className="step__copy">
              <div className="step__index">
                <span className="step__index-num">{s.n}</span>
                <span className="step__index-en">{s.en}</span>
              </div>
              <span className="step__sub">{s.sub}</span>
              <h3 className="step__title">{s.jp}</h3>
              <p className="step__body">{s.body}</p>
              <div className="step__meta">
                {s.chips.map((c) => <span className="step__chip" key={c}>{c}</span>)}
              </div>
            </div>

            <div className="step__visual" style={s.visualBg ? {background: s.visualBg} : {}}>
              {renderVisual(s)}
              {s.caption && (
                <span className="step__caption">
                  <span className="dot"></span>
                  {s.caption}
                </span>
              )}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="final-cta" id="download">
      <div className="final-cta__inner">
        <div>
          <span className="eyebrow eyebrow--on-primary">No. 03 / Now available</span>
          <h2 className="final-cta__lead" style={{marginTop: 20}}>
            さあ、<br/>
            <span className="underline">最初の一歩</span>を。
          </h2>
          <p className="final-cta__sub">
            iOSとAndroid、両方のストアで配信中。今すぐダウンロードして、あなただけのコレクションを始めよう。
          </p>
          <div className="hero__cta">
            <AppStoreBadge />
            <GooglePlayBadge />
          </div>
        </div>
        <div className="final-cta__box">
          <img src={res('sneakerbox','assets/sneakerbox.png')} alt="Steplet box" />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__top">
          <div className="footer__brand">
            <div className="footer__brand-row">
              <img src={res('appLogoReverse','assets/app_logo_reverse.png')} alt="" />
              <span className="footer__wordmark">STEPLET</span>
            </div>
            <p className="footer__tagline">
              バーチャルスニーカーを集めよう。<br/>
              一歩、また一歩。あなたのコレクションが、世界を変える。
            </p>
          </div>

          <div className="footer__col">
            <h4>Product</h4>
            <ul>
              <li><a href="#about">Stepletとは</a></li>
              <li><a href="#flow">遊び方</a></li>
              <li><a href="#download">ダウンロード</a></li>
            </ul>
          </div>

          <div className="footer__col">
            <h4>Legal</h4>
            <ul>
              <li><a href="/terms">利用規約</a></li>
              <li><a href="/privacy-policy">プライバシーポリシー</a></li>
            </ul>
          </div>

          <div className="footer__col">
            <h4>Support</h4>
            <ul>
              <li><a href="/contact">お問い合わせ</a></li>
              <li><a href="https://feedback.steplet.app/" target="_blank">ご意見・不具合報告</a></li>
              <li><a href="https://x.com/steplet_app" target="_blank">X(旧Twitter)</a></li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <span className="footer__copy">© 2026 STEPLET</span>
          <span className="footer__locale">🌐 日本語 / JA</span>
        </div>
      </div>
    </footer>
  );
}

window.Hero = Hero;
window.Marquee = Marquee;
window.Concept = Concept;
window.Steps = Steps;
window.FinalCTA = FinalCTA;
window.Footer = Footer;