// ─── SEO detail page ──────────────────────────────────────────────

function SEO({ go }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="SERVICE DETAIL / 05"
        num="→"
        title={<>検索に強く、<br /><span style={{ color: "var(--accent-strong)" }}>事業に効く</span>SEOを。</>}
        lead="小手先の順位対策ではなく、Core Web Vitals・情報設計・コンテンツ戦略の三位一体で、長期的な流入基盤を築きます。" />

      <SEOApproach />
      <SEOModules />
      <CWVBars />
      <SEOProcess />
      <BigCTA go={go} />
    </div>);

}

function SEOApproach() {
  return (
    <section className="section" style={{ background: "var(--bg-alt)" }}>
      <div className="wrap">
        <div className="stack-mobile seo-approach__grid">
          <div>
            <Eyebrow num="01">OUR STANCE</Eyebrow>
            <h2 className="h1 seo-approach__title">
              「検索ワード順位」ではなく、<br />
              <span style={{ color: "var(--accent-strong)" }}>事業指標</span>で語る
            </h2>
            <p className="lead seo-approach__lead">
              順位1位が目的ではありません。事業のKPI(問い合わせ数・売上・LTV)に繋がる設計が、本物のSEOです。
            </p>
          </div>
          <div className="seo-approach__donts">
            <div className="en seo-approach__donts-label">WHAT WE DON'T DO</div>
            <ul className="seo-donts-list">
              {[
              "外部リンクの大量購入",
              "低品質AI生成記事の量産",
              "ブラックハット的なクローキング",
              "順位保証を謳う契約"].
              map((x, i) =>
              <li key={i} className="seo-donts-item">
                  <span className="seo-donts-item__x">✕</span>
                  <span>{x}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function SEOModules() {
  return (
    <section className="section">
      <div className="wrap">
        <SectionHeader eyebrowNum="02" eyebrow="MODULES" title={<>4つのモジュール、<br />組み合わせて。</>} />
        <div className="seo-modules-grid">
          {SEO_MODULES.map((m, i) =>
          <div key={m.k} className="seo-module-card">
              <div className="en seo-module-card__num">MODULE 0{i + 1}</div>
              <h3 className="h3 seo-module-card__title">{m.title}</h3>
              <ul className="seo-module-card__items">
                {m.items.map((it, j) =>
              <li key={j} className="seo-module-card__item">
                    <span className="seo-module-card__item-num">0{j + 1}</span>
                    <span>{it}</span>
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function CWVBars() {
  const metrics = [
  { k: "LCP", label: "Largest Contentful Paint", before: 4.2, after: 1.8, unit: "s", target: 2.5, max: 5 },
  { k: "INP", label: "Interaction to Next Paint", before: 320, after: 148, unit: "ms", target: 200, max: 500 },
  { k: "CLS", label: "Cumulative Layout Shift", before: 0.24, after: 0.04, unit: "", target: 0.1, max: 0.3 }];

  return (
    <section className="section" style={{ background: "var(--bg-dark)", color: "#fff" }}>
      <div className="wrap">
        <SectionHeader
          eyebrowNum="03"
          eyebrow="CORE WEB VITALS"
          title={<span style={{ color: "#fff" }}>実装で、改善する。</span>}
          lead={<span style={{ color: "rgba(255,255,255,0.7)" }}>設定変更だけでは改善しない指標を、コードの書き換えで抜本的に直します。平均改善実績。</span>} />

        <div className="cwv-metrics">
          {metrics.map((m) =>
          <div key={m.k}>
              <div className="cwv-metric__head">
                <div>
                  <span className="en cwv-metric__key">{m.k}</span>
                  <span className="cwv-metric__label">{m.label}</span>
                </div>
                <div className="cwv-metric__target">
                  target: <span className="cwv-metric__target-val">{m.target}{m.unit}</span>
                </div>
              </div>
              <CWVBar m={m} />
            </div>
          )}
        </div>
      </div>
    </section>);

}

function CWVBar({ m }) {
  const wBefore = Math.min(100, m.before / m.max * 100);
  const wAfter = Math.min(100, m.after / m.max * 100);
  const wTarget = m.target / m.max * 100;
  return (
    <div className="cwv-bar">
      {[
      { lbl: "BEFORE", w: wBefore, v: m.before, col: "oklch(0.65 0.2 25)" },
      { lbl: "AFTER", w: wAfter, v: m.after, col: "oklch(0.58 0.22 var(--accent-h))" }].
      map((b) =>
      <div key={b.lbl} className="cwv-row">
          <span className="en cwv-row__label">{b.lbl}</span>
          <div className="cwv-row__track">
            <div className="cwv-row__fill" style={{ width: `${b.w}%`, background: b.col }} />
            <div className="cwv-row__target-line" style={{ left: `${wTarget}%` }} />
          </div>
          <span className="en cwv-row__val">{b.v}{m.unit}</span>
        </div>
      )}
    </div>);

}

function SEOProcess() {
  const steps = [
  { n: "01", t: "技術監査", d: "サイト全体のテクニカル課題を洗い出し、優先度をつけた改善計画をご提示。" },
  { n: "02", t: "コンテンツ監査", d: "既存コンテンツの表示順位・流入・CV貢献度を分析し、リライト優先度を決定。" },
  { n: "03", t: "実装・改修", d: "構造化データ・内部リンク・表示速度・モバイル対応を実装レベルで改善。" },
  { n: "04", t: "月次運用", d: "GA4・Search Consoleを運用レポートに組み込み、改善サイクルを継続運転。" }];

  return (
    <section className="section">
      <div className="wrap">
        <SectionHeader eyebrowNum="04" eyebrow="PROCESS" title={<>監査から運用まで、<br />一気通貫で。</>} />
        <div className="seo-process-grid">
          {steps.map((s, i) =>
          <div key={i} className="seo-process-step">
              <div className="en seo-process-step__phase">PHASE {s.n}</div>
              <h3 className="h3 seo-process-step__title">{s.t}</h3>
              <p className="seo-process-step__desc">{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { SEO });