/* global React */
const { useState: useState2 } = React;

// ========== Services ==========
function Services() {
  const [tab, setTab] = useState2(0);
  const services = [
    {
      label: "公式LINE構築・運用",
      badge: "01",
      sub: "ファンづくり",
      title: "リピーターが育つLINEを、アイデアと仕組みで。",
      desc: "新規を追いかけ続ける運用ではなく、既にお店を好きでいてくれる人と、もっと深くつながるためのLINE。お便りのように届く配信、迷わないメニュー導線、ちょうどいい温度感のシナリオ設計まで。",
      list: [
        ["アカウント設計", "配信方針・タグ設計・運用ルールを一緒に言語化"],
        ["リッチメニュー制作", "“押したくなる”導線設計と、ブランドに馴染むデザイン"],
        ["シナリオ・ステップ配信", "登録後の体験を、お便りのように丁寧に設計"],
        ["流入導線づくり", "店頭POP・サイト・SNSからの追加導線をまとめて"],
        ["運用伴走", "配信ネタの相談から月次の振り返りまで、隣で支える"],
      ],
      visual: "line",
    },
    {
      label: "Instagram 活用支援",
      badge: "02",
      sub: "認知・ブランディング",
      title: "魅力を、正しいかたちで届ける発信を。",
      desc: "“バズらせる”のではなく、本業の魅力が伝わるべき人に届く設計。リールの構成・撮影・編集から、プロフィール導線、LINE連携まで。ブランドの温度感を崩さずに、認知を広げていきます。",
      list: [
        ["発信戦略の設計", "誰に・何を・どう届けるかの言語化からスタート"],
        ["リール構成・編集", "縦型最適化、お店のトーンに馴染む見せ方で"],
        ["撮影ディレクション", "現地同行 or オンラインで指示書納品"],
        ["LINE連携導線", "プロフィール・キャプションから自然な流入を"],
      ],
      visual: "reels",
    },
    {
      label: "業務効率化・システム",
      badge: "03",
      sub: "余白の創出",
      title: "“やらなくていい仕事”を、システムに任せる。",
      desc: "予約管理、在庫確認、お問い合わせ対応、レジ締め。一つひとつは小さくても、積み重なれば本業を圧迫します。ITで仕組みに落とし込み、経営者の“余白”を取り戻す。それがGiftyの本領です。",
      list: [
        ["業務の棚卸し", "現場に同席し、削れる作業を一緒に見つける"],
        ["予約・顧客管理", "LINE/Web/電話からの予約を一元化"],
        ["自動化・連携", "Google・Notion・LINEを繋いで“勝手に動く”仕組みに"],
        ["Web・LP制作", "元Web制作の経験を活かし、必要十分のサイトを"],
      ],
      visual: "design",
    },
  ];

  const current = services[tab];

  return (
    <section id="services" className="section">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <span className="eyebrow">Service</span>
            <h2 style={{ marginTop: 28 }}>
              「愛されるお店」を<br />
              一緒に育てる、<br />
              <span className="band"><span className="c1">3</span><span className="c3">つ</span><span className="c4">の</span><span className="c6">アプローチ</span></span>。
            </h2>
            <p>公式LINEを軸に、Instagram発信と業務効率化までを同じ温度感で。バラバラのパートナーに頼まなくていい安心感を、宮崎から。</p>
          </div>
        </Reveal>

        <div className="svc-tabs" role="tablist">
          {services.map((s, i) => (
            <button
              key={i}
              className={`svc-tab ${tab === i ? "active" : ""}`}
              onClick={() => setTab(i)}
              role="tab"
            >
              <span className="tab-pill"></span>
              <span className="tab-num">{s.badge}</span>
              <span className="svc-tab-label">
                <span>{s.label}</span>
                <span className="sub">{s.sub}</span>
              </span>
            </button>
          ))}
        </div>

        <div className="svc-panel" key={tab}>
          <div>
            <Reveal>
              <h3 className="svc-title">{current.title}</h3>
            </Reveal>
            <Reveal delay={100}>
              <p className="svc-desc">{current.desc}</p>
            </Reveal>
            <Reveal delay={200}>
              <ul className="svc-list">
                {current.list.map((item, i) => (
                  <li key={i}>
                    <span className="check">✓</span>
                    <div>
                      <strong>{item[0]}</strong>
                      <span>{item[1]}</span>
                    </div>
                  </li>
                ))}
              </ul>
            </Reveal>
            <Reveal delay={300}>
              <a href="#contact" className="btn btn-ghost">このサービスについて聞いてみる</a>
            </Reveal>
          </div>
          <Reveal delay={150}>
            <ServiceVisual kind={current.visual} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function ServiceVisual({ kind }) {
  if (kind === "line") return <CustomerJourneyVisual />;
  if (kind === "reels") return <ReelsVisual />;
  if (kind === "design") return <EfficiencyVisual />;
  return null;
}

function CustomerJourneyVisual() {
  const steps = [
    { n: "01", icon: "👋", title: "友だち追加", desc: "店頭POP・サイト・SNSから自然と", cls: "s1" },
    { n: "02", icon: "💌", title: "はじめましてのお便り", desc: "お店の想い + ささやかなプレゼント", cls: "s2" },
    { n: "03", icon: "✨", title: "ちょうどいい配信", desc: "新メニュー・季節のご案内をお便り感覚で", cls: "s3" },
    { n: "04", icon: "🛍", title: "ご来店・ご購入", desc: "リッチメニューから迷わず予約・購入", cls: "s4" },
    { n: "05", icon: "💖", title: "ファン化・リピート", desc: "また来たくなる体験で、自然と常連様に", cls: "s5" },
  ];
  return (
    <div className="svc-visual">
      <div className="svc-visual-label">CUSTOMER JOURNEY</div>
      <div className="cj-flow">
        {steps.map((s, i) => (
          <React.Fragment key={i}>
            <div className={`cj-step ${s.cls}`}>
              <div className="cj-step-icon" aria-hidden="true">{s.icon}</div>
              <div>
                <strong>{s.title}</strong>
                <span>{s.desc}</span>
              </div>
              <div className="cj-step-num">{s.n}</div>
            </div>
            {i < steps.length - 1 && <div className="cj-arrow">↓</div>}
          </React.Fragment>
        ))}
        <div className="cj-result">
          <div>
            <div className="cj-result-label">RESULT</div>
            <div className="cj-result-val">愛される<span className="rb">お店</span>になる。</div>
          </div>
          <div style={{ fontSize: 32 }}>🌟</div>
        </div>
      </div>
    </div>
  );
}

function ReelsVisual() {
  return (
    <div className="svc-visual">
      <div className="svc-visual-label">INSTAGRAM → LINE FUNNEL</div>
      <div className="ig-funnel">
        <div className="ig-stage s1">
          <div className="ig-stage-head">
            <div className="ig-stage-num">STEP 01</div>
            <div className="ig-stage-title">リールで<span className="rb">発見</span>される</div>
          </div>
          <div className="ig-grid">
            <div className="ig-thumb t1">
              <div className="ig-thumb-tag">▶ REEL</div>
              <div className="ig-thumb-cap">朝の仕込み風景</div>
            </div>
            <div className="ig-thumb t2">
              <div className="ig-thumb-tag">▶ REEL</div>
              <div className="ig-thumb-cap">店主の3分トーク</div>
            </div>
            <div className="ig-thumb t3">
              <div className="ig-thumb-tag">▶ REEL</div>
              <div className="ig-thumb-cap">秋の新メニュー</div>
            </div>
          </div>
          <div className="ig-stat-row">
            <span className="ig-stat-pill"><b>48K</b> 再生 / 本</span>
            <span className="ig-stat-pill"><b>8.4%</b> 保存率</span>
          </div>
        </div>

        <div className="ig-flow-arrow">
          <span className="ig-flow-line"></span>
          <span className="ig-flow-label">気になる ↓</span>
          <span className="ig-flow-line"></span>
        </div>

        <div className="ig-stage s2">
          <div className="ig-stage-head">
            <div className="ig-stage-num">STEP 02</div>
            <div className="ig-stage-title">プロフィールから<span className="rb">LINE登録</span>へ</div>
          </div>
          <div className="ig-profile">
            <div className="ig-profile-pic">店</div>
            <div className="ig-profile-body">
              <div className="ig-profile-name">your_shop_official</div>
              <div className="ig-profile-bio">
                宮崎の小さなお店 🌿<br />
                <span className="ig-link">▸ LINE限定クーポン配布中</span>
              </div>
              <div className="ig-profile-cta">
                <span>↓ プロフィールリンク</span>
                <div className="ig-cta-btn">
                  <span className="ig-cta-line"></span>
                  LINEで友だち追加
                  <span>→</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="ig-final">
          <div className="ig-final-label">月間の友だち追加</div>
          <div className="ig-final-num">
            <span className="rb">+312</span>
            <span className="ig-final-unit">人</span>
          </div>
          <div className="ig-final-sub">リール経由のLINE登録</div>
        </div>
      </div>
    </div>
  );
}

function EfficiencyVisual() {
  return (
    <div className="svc-visual">
      <div className="svc-visual-label">BEFORE / AFTER</div>
      <div className="ba-grid">
        <div className="ba-card before">
          <div className="ba-tag"><span className="dot"></span>BEFORE — 毎日の負担</div>
          <div className="ba-tasks">
            <div className="ba-task"><span className="tick">!</span>電話で予約を受けてメモする</div>
            <div className="ba-task"><span className="tick">!</span>カレンダーに手入力</div>
            <div className="ba-task"><span className="tick">!</span>在庫を表で確認</div>
            <div className="ba-task"><span className="tick">!</span>確認の連絡をする</div>
            <div className="ba-task"><span className="tick">!</span>レジ締めで集計</div>
          </div>
        </div>
        <div className="ba-arrow">仕組みに任せる</div>
        <div className="ba-card after">
          <div className="ba-tag"><span className="dot"></span>AFTER — 自動化された世界</div>
          <div className="ba-tasks">
            <div className="ba-task"><span className="tick">✓</span><span className="strike">電話で予約を受けてメモする</span></div>
            <div className="ba-task"><span className="tick">✓</span><span className="strike">カレンダーに手入力</span></div>
            <div className="ba-task"><span className="tick">✓</span><span className="strike">在庫を表で確認</span></div>
            <div className="ba-task"><span className="tick">✓</span><span className="strike">確認の連絡をする</span></div>
            <div className="ba-task"><span className="tick">✓</span><span className="strike">レジ締めで集計</span></div>
          </div>
        </div>
      </div>
      <div className="ba-savings">
        <div className="lbl">1日あたりの“余白”</div>
        <div className="num"><span className="rb">+2</span><span className="unit">時間</span></div>
      </div>
    </div>
  );
}

Object.assign(window, { Services });