// Page sections
const { useState: useStateS } = React;

const LINE_URL = 'https://line.me/R/ti/p/%40146pocex';

function CTAButton({ size = 'md', label = '無料相談を予約する', sub }) {
  return (
    <a href={LINE_URL} target="_blank" rel="noopener" className={`cta cta--${size}`}>
      <span className="cta__icon" aria-hidden="true">
        <i className="fa-regular fa-comment-dots"></i>
      </span>
      <span className="cta__text">
        <span className="cta__label">{label}</span>
        {sub && <span className="cta__sub">{sub}</span>}
      </span>
      <span className="cta__arrow" aria-hidden="true">
        <i className="fa-solid fa-arrow-right"></i>
      </span>
    </a>);

}

function Hero() {
  return (
    <section className="hero hero--vertical">
      <div className="hero__bg">
        <div className="hero__blob hero__blob--a"></div>
        <div className="hero__blob hero__blob--b"></div>
      </div>
      <div className="container hero__inner">
        <div className="hero__copy hero__copy--centered">
          <div className="eyebrow eyebrow--center">
            <span className="eyebrow__dot"></span>
            自動車整備工場・中古車販売店向け｜LINE構築サービス
          </div>
          <h1 className="hero__title hero__title--lg">
            「できない」が<mark>「できた」</mark>に変わる。
          </h1>
          <p className="hero__lead">
            車検の案内、夜間の予約受付、納車後のリピート促進。
            <br />
            お店の業務に合わせた仕組みを、LINEひとつで構築します。
          </p>
          <div className="hero__cta-stack">
            <a href="#scenarios" className="cta-secondary">
              <span className="cta-secondary__text">7つの活用シーンを見る</span>
              <span className="cta-secondary__arrow" aria-hidden="true">
                <i className="fa-solid fa-arrow-down"></i>
              </span>
            </a>
          </div>
        </div>
        <div className="hero__visual hero__visual--wide">
          <div className="hero__image-frame">
            <img
              src="images/hero-main.png"
              alt="自動車整備工場の店主とお客様がカウンターでLINE活用について相談しているイラスト"
              className="hero__image" />

          </div>
          <div className="hero__image-accent hero__image-accent--a"></div>
          <div className="hero__image-accent hero__image-accent--b"></div>
        </div>
      </div>
    </section>);

}

function Problems() {
  const items = [
  { q: '車検の案内', em: '電話で一人ずつ連絡する時間が取れない。', icon: 'fa-solid fa-phone-volume' },
  { q: '営業時間外', em: '夜間や定休日の問い合わせが機会損失に。', icon: 'fa-regular fa-clock' },
  { q: '在庫情報', em: '希望条件のお客様に、新着在庫を届ける手段がない。', icon: 'fa-solid fa-car' },
  { q: '納車後フォロー', em: 'リピートに繋げたいが、用件もなく連絡しづらい。', icon: 'fa-solid fa-handshake' }];

  return (
    <section className="problems">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow eyebrow--center"><span className="eyebrow__dot"></span>整備工場・中古車販売店でよくあるお悩み</div>
          <h2 className="section-title">
            業務に追われ、<br />
            <span className="title-highlight">お客様フォローの時間</span>が取れない。
          </h2>
        </div>
        <div className="problems__hero">
          <img
            src="images/problems-overview.png"
            alt="整備工場の店主が、電話・営業時間・在庫・納車後フォローなど多くの業務に追われているイラスト"
            className="problems__hero-img" />
        </div>
        <div className="problems__grid">
          {items.map((it, i) =>
          <div key={i} className="problem-card">
              <div className="problem-card__icon" aria-hidden="true">
                <i className={it.icon}></i>
              </div>
              <h3 className="problem-card__heading">{it.q}</h3>
              <p className="problem-card__text">{it.em}</p>
            </div>
          )}
        </div>
        <div className="problems__bridge">
          <div className="bridge-line"></div>
          <p className="bridge-text">
            これらの「手が回らない業務」を、<br />
            <span className="bridge-emph">LINEで自動化・仕組み化します。</span>
          </p>
          <p className="problems__cta-copy">
            お店の業務が、どう変わるのか。<br />
            <strong>7つの活用シーンで具体的にイメージしてください。</strong>
          </p>
          <div className="problems__cta-buttons">
            <a href="#scenarios" className="cta-secondary cta-secondary--on-dark">
              <span className="cta-secondary__text">7つの活用シーンを見る</span>
              <span className="cta-secondary__arrow" aria-hidden="true">
                <i className="fa-solid fa-arrow-down"></i>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function ScenarioSection() {
  const [active, setActive] = useStateS(0);
  const [phase, setPhase] = useStateS('idle'); // 'idle' | 'leaving' | 'entering'
  const s = SCENARIOS[active];

  const switchTo = (i) => {
    if (i === active || phase !== 'idle') return;
    setPhase('leaving');
    setTimeout(() => {
      setActive(i);
      setPhase('entering');
      // 次フレームで idle に戻して transition を起動
      requestAnimationFrame(() => {
        requestAnimationFrame(() => setPhase('idle'));
      });
    }, 280);
  };

  const detailCls = 'scenario-detail' + (
    phase === 'leaving' ? ' is-leaving' :
    phase === 'entering' ? ' is-entering' : '');

  return (
    <section className="scenarios" id="scenarios">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow eyebrow--center"><span className="eyebrow__dot"></span>実装シナリオ集</div>
          <h2 className="section-title">
            自動車業界の業務に合わせた、<br />
            <span className="num-emph">7</span>つの実装シナリオ。
          </h2>
          <p className="section-lead">
            実際のLINE画面でお客様とのやりとり例をご覧いただけます。<br />
            お店の業務に合うかどうか、具体的にイメージしてください。
          </p>
        </div>

        <div className="scenarios__hint">
          <i className="fa-solid fa-hand-pointer" aria-hidden="true"></i>
          下のボタンをタップすると、シナリオが切り替わります
        </div>

        <div className="scenario-tabs" role="tablist">
          {SCENARIOS.map((sc, i) =>
          <button
            key={sc.id}
            className={`scenario-tab ${i === active ? 'is-active' : ''}`}
            onClick={() => switchTo(i)}
            role="tab"
            aria-selected={i === active}>

              <span className="scenario-tab__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="scenario-tab__body">
                <span className="scenario-tab__label">{sc.label}</span>
                <span className="scenario-tab__sub">{sc.sub}</span>
              </span>
              <span className="scenario-tab__indicator" aria-hidden="true">
                <i className="fa-solid fa-chevron-right"></i>
              </span>
            </button>
          )}
        </div>

        <div className={detailCls} key={s.id}>
          <div className="scenario-detail__copy">
            <div className="scenario-detail__num">SCENE / {String(active + 1).padStart(2, '0')}</div>
            <h3 className="scenario-detail__title">{s.title}</h3>

            <div className="scenario-block">
              <div className="scenario-block__label">
                <span className="scenario-block__pip scenario-block__pip--before"></span>
                これまで
              </div>
              <p className="scenario-block__text">{s.problem}</p>
            </div>

            <div className="scenario-block scenario-block--after">
              <div className="scenario-block__label">
                <span className="scenario-block__pip scenario-block__pip--after"></span>
                LINE導入後
              </div>
              <p className="scenario-block__text">{s.solution}</p>
            </div>

            <ul className="scenario-bullets">
              {s.bullets.map((b, i) =>
              <li key={i}><span className="bullet-check">✓</span>{b}</li>
              )}
            </ul>
          </div>

          <div className="scenario-detail__visual">
            <LineChatMock scenario={s} autoPlay={true} />
            <div className="scenario-detail__caption">
              <span>↑</span> 実際のお客様とのやりとり例
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Flow() {
  const steps = [
  { n: '01', t: 'お問い合わせ・ご相談', d: '車検の管理、予約対応、在庫の告知…どんなお悩みでもお気軽にご相談ください。オンライン（Zoom）や対面でのご相談が可能です。', icon: 'fa-regular fa-comment-dots' },
  { n: '02', t: 'ヒアリング', d: 'お店の車検件数、客層、現在の予約方法などを詳しくお伺いします。お店に最適なLINE活用を一緒に考えます。', icon: 'fa-solid fa-ear-listen' },
  { n: '03', t: 'プラン提案・お見積もり', d: 'ヒアリングを元に、お店に合ったプランと具体的な活用シーンをご提案します。内容にご納得いただけましたら、正式にお申し込み・ご契約となります。', icon: 'fa-solid fa-file-invoice' },
  { n: '04', t: '制作・構築開始', d: '車検リマインド、予約機能、リッチメニュー等を構築。オーナーの作業はほぼゼロです。', icon: 'fa-solid fa-screwdriver-wrench' },
  { n: '05', t: '納品・操作説明', d: '実際の画面を見ながら操作方法をご説明します。LINEが使えれば十分対応できます。修正があればこの段階で対応します。', icon: 'fa-solid fa-truck-ramp-box' },
  { n: '06', t: '運用フォロー', d: '納品後も定期的にお声がけし、配信内容の改善や効果測定をサポートします。「作って終わり」ではなく、お店に合った使い方を一緒に見つけていきます。', icon: 'fa-solid fa-handshake' }];

  return (
    <section className="flow">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow eyebrow--center"><span className="eyebrow__dot"></span>制作の流れ</div>
          <h2 className="section-title">
            お問い合わせから運用フォローまで、<br />
            <span className="title-emph">6ステップでお任せ。</span>
          </h2>
        </div>
        <div className="flow__list">
          {steps.map((s, i) =>
          <div key={i} className="flow-step">
              <div className="flow-step__rail">
                <div className="flow-step__num">{s.n}</div>
                {i < steps.length - 1 && <div className="flow-step__line"></div>}
              </div>
              <div className="flow-step__body">
                <div className="flow-step__head">
                  <span className="flow-step__icon"><i className={s.icon} aria-hidden="true"></i></span>
                  <h3 className="flow-step__title">{s.t}</h3>
                </div>
                <p className="flow-step__desc">{s.d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FAQ() {
  const faqs = [
  { q: 'パソコンが苦手なのですが、本当に運用できますか？', a: '構築・設定作業はすべて当方で担当します。お店側で必要なのは「お客様からのLINE返信」だけで、スマホ1台あれば完結します。返信用のテンプレートも事前にご用意するので、迷うことはありません。' },
  { q: '導入までどのくらいかかりますか？', a: 'ヒアリングから運用開始まで、最短2週間程度です。構築する内容や既存環境の有無により変動します。お急ぎの場合は別途ご相談いただきたいです。' },
  { q: 'LINE公式アカウントを持っていないのですが、開設から手伝ってもらえますか？', a: 'もちろんです。アカウント開設・初期設定・プロフィール作成・友だち追加用QRコード発行まで、すべて当方で代行します。お店側でやっていただくのは、必要書類のご提示と最終確認だけです。' },
  { q: '料金体系はどうなっていますか？', a: '初期構築費＋月額運用費の2軸です。お店の規模やシナリオ数により料金が変動します。無料相談時に詳細なお見積りをお出ししますので、まずは無理のないプランからご相談ください。' },
  { q: '契約後に「合わない」と感じたら解約できますか？', a: '月単位で解約可能で、長期契約の縛りはありません。「お店に合わない」と判断された場合は、遠慮なくお申し付けください。' }];

  const [open, setOpen] = useStateS(-1);
  return (
    <section className="faq">
      <div className="container container--narrow">
        <div className="section-head">
          <div className="eyebrow eyebrow--center"><span className="eyebrow__dot"></span>FAQ</div>
          <h2 className="section-title">よくいただく<span className="title-emph-green">ご質問</span></h2>
        </div>
        <div className="faq__list">
          {faqs.map((f, i) =>
          <div key={i} className={`faq-item ${open === i ? 'is-open' : ''}`}>
              <button className="faq-item__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq-item__qmark">Q</span>
                <span className="faq-item__qtext">{f.q}</span>
                <span className="faq-item__toggle">{open === i ? '−' : '+'}</span>
              </button>
              <div className="faq-item__a">
                <span className="faq-item__amark">A</span>
                <p>{f.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Support() {
  return (
    <section className="support">
      <div className="container">
        <div className="support__inner">
          <div className="support__copy">
            <div className="eyebrow"><span className="eyebrow__dot"></span>Empath LINEの価値観</div>
            <h2 className="support__title">
              <span className="support__title-em">お客さまと、もっと繋がる時間</span>を。
            </h2>
            <div className="support__body">
              <p>
                個人経営の整備工場や中古車販売店の強みは、お客様一人ひとりとの密な関係性にあります。
              </p>
              <p>
                ですが、日々の整備・販売業務に追われ、<strong>もっとお声がけしたかったお客様</strong>へのフォローまで手が回らない——そんな声を多くいただきます。
              </p>
              <p>
                <strong>むずかしい設定や運用作業はわたし達で担当します。</strong><br />
                お店の方には、いままで忙しくて手が回らなかった、<strong>「お客さまともっと繋がる時間」</strong>を創出していただければと考えています。
              </p>
              <p>
                運用開始後も、改善提案・トラブル対応まで継続的にサポート。<br />
                お店とお客さまの距離が、もっと近くなる毎日を一緒につくりましょう。
              </p>
            </div>
          </div>
          <div className="support__visual">
            <img
              src="images/support-partnership.png"
              alt="Empath LINEが整備工場・中古車販売店オーナーと一緒に伴走し、運用を支えるイメージ"
              className="support__image" />

          </div>
        </div>
      </div>
    </section>);

}

function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="final-cta__bg">
        <div className="final-cta__shape final-cta__shape--a"></div>
        <div className="final-cta__shape final-cta__shape--b"></div>
      </div>
      <div className="container">
        <div className="final-cta__inner">
          <div className="final-cta__eyebrow">— まずは、お店のことをお聞かせください —</div>
          <h2 className="final-cta__title">
            お店の「できない」を、<br />
            「できた」に。
          </h2>
          <p className="final-cta__lead">
            30分の無料相談で、お店に合うかどうかも含めて率直にお話しします。
          </p>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="site-footer__top">
          <div className="site-footer__brand">
            <div className="site-footer__logo">Empath LINE</div>
            <div className="site-footer__tag">自動車業界特化｜LINE構築・運用代行サービス</div>
          </div>
          <nav className="site-footer__nav" aria-label="法的情報">
            <a href="privacy.html" className="site-footer__link">プライバシーポリシー</a>
            <a href="tokutei.html" className="site-footer__link">特定商取引法に基づく表記</a>
          </nav>
        </div>
        <div className="site-footer__bottom">
          <div>© Empath LINE</div>
          <div>整備工場・中古車販売店専門</div>
        </div>
      </div>
    </footer>);

}

function FloatingCTA() {
  return (
    <a
      href={LINE_URL}
      target="_blank"
      rel="noopener"
      className="floating-cta"
      aria-label="無料相談を予約する">

      <span className="floating-cta__icon" aria-hidden="true">
        <i className="fa-regular fa-comment-dots"></i>
      </span>
      <span className="floating-cta__text">
        <span className="floating-cta__label">無料相談を予約</span>
      </span>
    </a>);

}

Object.assign(window, { Hero, Problems, ScenarioSection, Flow, FAQ, Support, FinalCTA, Footer, CTAButton, FloatingCTA });