// 見てからweb — Hi-fi Design: Sections 10–16 + Footer + Assembly

// ──────────────── 09 INCLUDED ────────────────
const DxIncluded = () => (
  <section id="included" className="dx-section alt">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">09</span>
        <span>WHAT'S INCLUDED</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">月額に含まれるもの</span>
        <h2 className="dx-h2">
          全プラン<span className="accent">更新・保守付き</span>
        </h2>
        <p className="dx-sub">
          プランによって変わるのは、主にページ数です。
          サービス品質や基本的な支援範囲を大きく変えるものではありません。
        </p>
      </div>
      <div className="dx-included">
        {[
          { ix: 'i', h: '制作', items: ['1からデザイン', 'スマホページ対応', '文章作成サポート'] },
          { ix: 'ii', h: '運用', items: ['月3回までの軽微な修正・更新', '公式LINEでの相談受付', 'お知らせ更新の相談'] },
          { ix: 'iii', h: '集客基盤', items: ['SEO対策', 'アクセス解析', 'SNS連携'] },
          { ix: 'iv', h: '保守', items: ['SSL対応', 'サーバー管理', '独自・既存ドメイン対応'] },
        ].map((c, i) => (
          <div className="cat" key={i}>
            <div className="ix">{c.ix.toUpperCase()}</div>
            <h4>{c.h}</h4>
            <ul>{c.items.map((it, j) => <li key={j}>{it}</li>)}</ul>
          </div>
        ))}
      </div>
      <div className="dx-note" style={{marginTop: 24}}>
        月3回の修正・更新は、文章変更、画像差し替え、お知らせ追加などの軽微な内容を想定しています。
        <strong>新規ページ追加や大幅なデザイン変更は別途お見積もりです。</strong>
      </div>
    </div>
  </section>
);

// ──────────────── 10 WHICH PLAN ────────────────
const DxPageSelect = () => (
  <section className="dx-section">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">10</span>
        <span>WHICH PLAN</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">ページ数の選び方</span>
        <h2 className="dx-h2">
          プランの相談も<span className="accent">面談で可能</span>
        </h2>
        <p className="dx-sub">
          最初から必要なページ数が決まっていなくても大丈夫です。
          無料トップページを確認したあと、面談で必要なページを整理します。
        </p>
      </div>
      <div className="dx-pageselect">
        <div className="item">
          <span className="pn">ライトプラン</span>
          <div className="when">1〜2ページでよい場合</div>
          <h4>最低限の会社案内</h4>
          <ul>
            <li>会社情報を最低限まとめたい</li>
            <li>まずはWeb上にきちんとした窓口を作りたい</li>
          </ul>
        </div>
        <div className="item">
          <span className="pn">企業ページ作成プラン</span>
          <div className="when">3〜7ページがよい場合</div>
          <h4>一般的な企業ホームページ</h4>
          <ul>
            <li>会社概要・事業内容・採用情報・お問い合わせを分けて掲載したい</li>
            <li>企業ホームページとして整えたい</li>
          </ul>
        </div>
        <div className="item">
          <span className="pn">採用＋企業ページプラン</span>
          <div className="when">8〜12ページがよい場合</div>
          <h4>営業・採用にも使うサイト</h4>
          <ul>
            <li>複数事業、実績紹介、採用情報、FAQなどをしっかり載せたい</li>
            <li>営業や採用にも使えるホームページにしたい</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

// ──────────────── 11 EXTRA FEES ────────────────
const DxExtraFee = () => (
  <section id="extra-fees" className="dx-section alt">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">11</span>
        <span>EXTRA FEES</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">別途費用になるもの</span>
        <h2 className="dx-h2">
          追加費用になる範囲も、<br/>
          <span className="accent">先にお伝え</span>します。
        </h2>
        <p className="dx-sub">
          月額内で対応できるものと、別途お見積もりになるものを事前に分けてお伝えします。
          後から費用が分かりづらくならないよう、制作前に確認します。
        </p>
      </div>
      <div className="dx-fees-box">
        <span className="lbl">別途お見積もり例</span>
        <div className="dx-chips">
          {['写真撮影', '動画制作', 'ロゴ制作', '原稿の大幅な作成',
            '新規ページ追加', '13ページ以上の制作', '予約機能', '決済機能',
            '会員機能', '多言語対応', '大幅なデザイン変更'].map((c, i) => (
            <span className="chip" key={i}>{c}</span>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ──────────────── 12 DOMAIN ────────────────
const DxDomain = () => (
  <section id="domain-server" className="dx-section">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">12</span>
        <span>DOMAIN & SERVER</span>
        <span className="rule" />
      </div>
      <div className="dx-domain">
        <div>
          <span className="dx-eyebrow">ドメイン・サーバー</span>
          <h2 className="dx-h2">
            既存のドメイン・サーバーを<span className="accent">再利用</span>
          </h2>
          <p style={{color: 'var(--ink-soft)', margin: '0 0 14px', fontSize: 14.5, lineHeight: 1.95}}>
            既存のドメインやサーバーを活用しながら、ホームページだけを新しくすることも可能です。
            会社メールへの影響をできるだけ抑えながら進めます。作業前には、必要に応じてバックアップを確認します。
          </p>
          <div className="dx-note">
            <strong>サーバーやドメインの契約状況によっては、別途対応が必要になる場合があります。</strong><br/>
            既存契約やサーバー側の障害は、原則としてお客様の管理範囲となります。
          </div>
        </div>
        <div className="dx-domain-diagram">
          <div className="row">
            <div className="blk old">
              <div className="l">OLD SITE</div>
              <div className="v">旧ホームページ</div>
            </div>
            <div className="arr">→</div>
            <div className="blk new">
              <div className="l">NEW SITE</div>
              <div className="v">新しいページ</div>
            </div>
          </div>
          <div className="row">
            <div className="blk keep">
              <div className="l">KEEP</div>
              <div className="v">ドメイン</div>
            </div>
            <div className="arr">＝</div>
            <div className="blk keep">
              <div className="l">KEEP</div>
              <div className="v">そのまま</div>
            </div>
          </div>
          <div className="row">
            <div className="blk keep">
              <div className="l">KEEP</div>
              <div className="v">会社メール</div>
            </div>
            <div className="arr">＝</div>
            <div className="blk keep">
              <div className="l">KEEP</div>
              <div className="v">影響なし</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ──────────────── 13 QUALITY ────────────────
const DxQuality = () => (
  <section className="dx-section alt">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">13</span>
        <span>QUALITY CHECK</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">品質確認</span>
        <h2 className="dx-h2">
          安さだけでなく、<br/>
          公開前に<span className="accent">きちんと確認</span>します。
        </h2>
        <p className="dx-sub">
          ホームページは、見た目だけでなく、スマートフォンでの表示や問い合わせフォームの動作も大切です。
          公開前に必要な確認を行い、安心して公開できる状態を目指します。
        </p>
      </div>
      <div className="dx-checks">
        {[
          'スマートフォンでの表示確認',
          '主要ブラウザでの表示確認',
          '問い合わせフォームの動作確認',
          'リンク切れの確認',
          '文章・画像の最終確認',
          '公開前の最終確認',
        ].map((it, i) => (
          <div className="item" key={i}>
            <span className="chk">✓</span>
            <span className="n">{String(i + 1).padStart(2, '0')}</span>
            <span>{it}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ──────────────── 14 TARGET ────────────────
const DxTarget = () => (
  <section className="dx-section">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">14</span>
        <span>FIT FOR YOU</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">向いている企業</span>
        <h2 className="dx-h2">
          このような企業に<br/>
          <span className="accent">向いています</span>。
        </h2>
        <p className="dx-sub">
          大きな制作費をかけずに、今のホームページを見直したい企業様に向いています。
        </p>
      </div>
      <div className="dx-target">
        {[
          '今のホームページが古く見える',
          'スマートフォンで見づらい',
          '問い合わせが少ない',
          '採用ページを整えたい',
          '会社の印象を良くしたい',
          'ドメインやサーバーは今のまま使いたい',
          '大きな制作費はかけにくい',
          'まずはトップページだけ見て判断したい',
        ].map((it, i) => (
          <div className="row" key={i}>
            <span className="chk">✓</span>
            <span>{it}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ──────────────── 15 FAQ ────────────────
const DxFAQ = () => {
  const [openItems, setOpenItems] = React.useState(() => new Set([0, 1]));
  const toggleItem = (index) => {
    setOpenItems((current) => {
      const next = new Set(current);
      if (next.has(index)) {
        next.delete(index);
      } else {
        next.add(index);
      }
      return next;
    });
  };
  const items = [
    { q: '本当に無料でトップページを作ってもらえますか？', a: 'はい。契約前に、トップページを無料で制作します。全ページ制作に進まない場合、費用はかかりません。' },
    { q: '無料で作ってもらえる範囲はどこまでですか？', a: 'トップページ1枚です。最大3案をご提案し、選んだ1案に対して2回まで修正できます。' },
    { q: 'トップページは何日くらいで確認できますか？', a: '3営業日以内を目安に作成します。面談日が決まっている場合は、面談までに確認できるよう進めます。' },
    { q: '全ページ制作に進む場合、費用はどうなりますか？', a: '選んだプランの初回3ヶ月分を先払いでお支払いいただきます。ライトプラン29,700円／企業ページ作成プラン44,700円／採用＋企業ページプラン59,700円です。' },
    { q: '制作費は別でかかりますか？', a: '制作費は別途いただきません。全ページ制作に進む場合も、初回3ヶ月分の先払いのみで始められます。' },
    { q: '最低契約期間はありますか？', a: 'はい。最低契約期間は6ヶ月です。' },
    { q: '途中でキャンセルした場合、先払い分は返金されますか？', a: '全ページ制作開始後のお客様都合によるキャンセルの場合、先払い分の返金はできません。' },
    { q: 'どのプランを選べばよいか分かりません。', a: '無料トップページ確認後の面談で、必要なページ数を一緒に整理します。最初から決めていなくても大丈夫です。' },
    { q: '写真や文章は用意する必要がありますか？', a: '既存ホームページの情報をもとに制作できます。ただし、写真や文章の希望がある場合は、お送りいただくとより御社に合った内容にできます。' },
    { q: '今のドメインやサーバーは使えますか？', a: '利用できる場合があります。現在の契約状況を確認したうえで、できるだけ会社メールなどへの影響を抑えて進めます。' },
    { q: '予約機能や決済機能も作れますか？', a: '対応可能な場合がありますが、別途お見積もりです。通常の企業ホームページ制作とは分けてご相談ください。' },
  ];
  return (
    <section id="faq" className="dx-section alt">
      <div className="dx-inner">
        <div className="dx-secnum">
          <span className="num">14</span>
          <span>FAQ</span>
          <span className="rule" />
        </div>
        <div className="dx-shead">
          <span className="dx-eyebrow">よくあるご質問</span>
          <h2 className="dx-h2">FAQ</h2>
        </div>
        <div className="dx-faq">
          {items.map((it, i) => {
            const isOpen = openItems.has(i);
            return (
            <div className={`item ${isOpen ? 'open' : ''}`} key={i}>
              <button className="q" type="button" onClick={() => toggleItem(i)} aria-expanded={isOpen}>
                <span style={{display: 'flex', alignItems: 'center', flex: 1}}>{it.q}</span>
                <span className="toggle">{isOpen ? '−' : '+'}</span>
              </button>
              <div className="a">{it.a}</div>
            </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ──────────────── 16 FINAL CTA ────────────────
// ──────────────── 相談フォーム ────────────────
const DxContactForm = () => {
  const [status, setStatus] = React.useState('idle'); // idle | submitting | success | error
  const endpoint = window.MITEKARA_FORM_ENDPOINT || '';
  const privacyUrl = window.MITEKARA_PRIVACY_URL || '#';
  const configured = Boolean(endpoint);

  React.useEffect(() => {
    if (!configured) {
      console.warn('[見てからweb] window.MITEKARA_FORM_ENDPOINT が未設定のため、相談フォームの送信は無効化されています。');
    }
  }, [configured]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!configured) return;
    const form = e.currentTarget;
    // ハニーポット：人間は空のはず。値が入っていればボットとみなし送信せず完了風に見せる
    const hp = form.querySelector('[name="_gotcha"]');
    if (hp && hp.value) {
      setStatus('success');
      form.reset();
      return;
    }
    setStatus('submitting');
    try {
      const res = await fetch(endpoint, {
        method: 'POST',
        // Content-Type は指定しない（FormData = multipart のまま送る）。
        // X-Requested-With により SSGform はリダイレクトせず 200 を返す（AJAX判定）。
        headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
        body: new FormData(form),
      });
      if (res.ok) {
        setStatus('success');
        form.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  if (status === 'success') {
    return (
      <div className="dx-form dx-form-done">
        <div className="dx-form-done-icon">✓</div>
        <h3>ご相談ありがとうございます。</h3>
        <p>担当より2営業日以内にご連絡いたします。今しばらくお待ちください。</p>
      </div>
    );
  }

  return (
    <form className="dx-form" onSubmit={handleSubmit}>
      {/* スパム対策のハニーポット（人間には見えない） */}
      <input type="text" name="_gotcha" className="dx-form-hp" tabIndex="-1" autoComplete="off" aria-hidden="true" />
      <div className="dx-form-field">
        <label htmlFor="cf-company">貴社名</label>
        <input id="cf-company" name="company" type="text" placeholder="例：〇〇株式会社（所属組織名）" />
      </div>
      <div className="dx-form-field">
        <label htmlFor="cf-name">お名前<span className="req">必須</span></label>
        <input id="cf-name" name="name" type="text" required placeholder="例：山田 花子" />
      </div>
      <div className="dx-form-field">
        <label htmlFor="cf-email">メールアドレス<span className="req">必須</span></label>
        <input id="cf-email" name="email" type="email" required placeholder="例：mail@example.com" />
      </div>
      <div className="dx-form-field">
        <label htmlFor="cf-phone">電話番号</label>
        <input id="cf-phone" name="phone" type="tel" placeholder="例：090-0000-0000" />
      </div>
      <div className="dx-form-field">
        <label htmlFor="cf-url">現在のサイトURL</label>
        <input id="cf-url" name="url" type="url" placeholder="例：https://example.com" />
      </div>
      <div className="dx-form-field">
        <label htmlFor="cf-message">ご要望</label>
        <textarea id="cf-message" name="message" rows="3" placeholder="例：採用を強化したい／問い合わせを増やしたい など" />
      </div>
      <label className="dx-form-consent">
        <input type="checkbox" name="consent" required />
        <span><a href={privacyUrl} target="_blank" rel="noopener noreferrer">プライバシーポリシー</a>に同意します<span className="req">必須</span></span>
      </label>
      {status === 'error' && (
        <p className="dx-form-msg error" role="alert">
          送信に失敗しました。お手数ですが時間をおいて再度お試しいただくか、LINEからご連絡ください。
        </p>
      )}
      <button type="submit" className="dx-btn primary block dx-form-submit" disabled={status === 'submitting' || !configured}>
        {status === 'submitting' ? '送信中…' : '無料で相談する'}
        {status !== 'submitting' && <span className="arrow">→</span>}
      </button>
      <p className="dx-form-note">入力いただいた内容は制作のご相談以外には利用しません。</p>
    </form>
  );
};

const DxFinalCTA = ({ device }) => (
    <section id="contact" className="dx-section" style={{padding: device === 'mobile' ? '44px 22px 56px' : '80px 80px'}}>
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">15</span>
        <span>FINAL CTA</span>
        <span className="rule" />
      </div>
      <div className="dx-final">
        <div className="dx-final-content">
          <div className="stamp-row">
            <span className="dx-pill" style={{background: 'var(--yellow)', color: 'var(--ink)'}}>
              <span className="dot" style={{background: 'var(--vermillion)'}}></span>
              制作費 0円
            </span>
            <span className="dx-pill" style={{background: 'transparent', border: '1px solid rgba(246,241,232,0.3)', color: 'rgba(246,241,232,0.85)'}}>
              <span className="dot"></span>
              気に入った場合のみ全ページ制作へ
            </span>
          </div>
          <h2>
            まずは、<br/>
            <span className="yel">無料トップページ制作</span>から。
          </h2>
          <p className="sub">
            {device === 'mobile'
              ? '現在のホームページURLと、ご希望を一言お送りください。無料トップページ案を見てから、進むかどうか判断できます。'
              : '御社向けのトップページを先に確認してから、全ページ制作に進むかどうかを判断できます。まずは現在のホームページURLと、「採用を強くしたい」「問い合わせを増やしたい」などの要望を一言お送りください。'}
          </p>
          <div className="ctas">
            <a className="dx-btn primary lg" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer">
              <span className="icon-line"></span>
              LINEで相談
              <span className="arrow">→</span>
            </a>
            <a className="dx-btn lg ghost-light" href="#apply">フォームで相談</a>
          </div>
          <p className="micro">相談だけでも可能です。全ページ制作に進まない場合、費用はかかりません。</p>
        </div>
      </div>
    </div>
  </section>
);

// ──────────────── 16 CONTACT（相談フォーム） ────────────────
const DxApply = () => (
  <section id="apply" className="dx-section alt">
    <div className="dx-inner">
      <div className="dx-secnum">
        <span className="num">16</span>
        <span>CONTACT</span>
        <span className="rule" />
      </div>
      <div className="dx-shead">
        <span className="dx-eyebrow">無料相談</span>
        <h2 className="dx-h2">無料相談フォーム</h2>
        <p className="dx-sub">
          現在のサイトURLとご要望を添えてお送りください。<br/>
          無料トップページ案をご確認いただけます。
        </p>
      </div>
      <div className="dx-apply-wrap">
        <DxContactForm />
      </div>
    </div>
  </section>
);

// ──────────────── FOOTER ────────────────
const DxFooter = () => (
  <footer className="dx-footer">
    <div className="dx-footer-top">
      <div className="dx-footer-brand">
        <div className="dx-logo">
          <img className="dx-logo-img" src="assets/logo.png?v=20260528-6" alt="見てからweb" width="1440" height="300" />
        </div>
        <p>
          まずは無料でトップページを見てから判断できる、<br/>
          中小企業向けのホームページ制作サービス。
        </p>
      </div>
      <div>
        <h5>サービス</h5>
        <ul>
          <li><a href="#free-production">無料トップページ制作</a></li>
          <li><a href="#pricing">料金プラン</a></li>
          <li><a href="#flow">ご利用の流れ</a></li>
          <li><a href="#included">月額に含まれるもの</a></li>
        </ul>
      </div>
      <div>
        <h5>会社情報</h5>
        <ul>
          <li><a href="https://reorga.co.jp/" target="_blank" rel="noopener noreferrer">REOrGA株式会社</a></li>
        </ul>
      </div>
      <div>
        <h5>その他</h5>
        <ul>
          <li><a href="#faq">よくあるご質問</a></li>
          <li><a href="#extra-fees">追加費用について</a></li>
          <li><a href="#domain-server">ドメイン・サーバー</a></li>
        </ul>
      </div>
    </div>
    <div className="dx-footer-bottom">
      <span>© 2026 見てからweb</span>
      <span>運営：<a href="https://reorga.co.jp/" target="_blank" rel="noopener noreferrer">REOrGA株式会社</a></span>
    </div>
  </footer>
);

const DxMobileCTA = () => (
  <div className="dx-mobile-cta">
    <a className="dx-btn block" href="#apply" style={{padding: '12px 14px', fontSize: 12}}>
      フォームで相談
    </a>
    <a className="dx-btn primary block" href={window.MITEKARA_LINE_URL} target="_blank" rel="noopener noreferrer" style={{padding: '12px 14px', fontSize: 12}}>
      <span className="icon-line"></span>
      LINEで相談
    </a>
  </div>
);

// ──────────────── ASSEMBLY ────────────────
const DxLanding = ({ device, pricingVariant }) => (
  <div className={`dx ${device === 'mobile' ? 'dx-mobile' : ''}`}>
    <DxHeader device={device} />
    <DxHero device={device} />
    <DxProblem />
    <DxSolution />
    <DxFeature />
    <DxFreeContent />
    <DxFlow />
    <DxWhyChoose />
    <DxPricingSection variant={pricingVariant} />
    <DxIncluded />
    <DxPageSelect />
    <DxExtraFee />
    <DxDomain />
    <DxQuality />
    <DxFAQ />
    <DxFinalCTA device={device} />
    <DxApply />
    <DxFooter />
    {device === 'mobile' && <DxMobileCTA />}
  </div>
);

Object.assign(window, {
  DxIncluded, DxPageSelect, DxExtraFee, DxDomain,
  DxQuality, DxTarget, DxFAQ, DxFinalCTA,
  DxFooter, DxMobileCTA, DxLanding,
});