// pages.jsx — Services / Company / Contact / Privacy pages

const SERVICES_DATA = [
  {
    n: '01',
    t: 'コーポレートサイト制作',
    en: 'Corporate Website',
    note: '/ 公開まで2〜3ヶ月',
    body: [
      '企業の信頼を伝える「顔」となるサイトを、情報設計から構築までワンストップで。',
      'ヒアリング、競合調査、サイトマップ設計、デザイン、CMS実装、公開、運用引き継ぎまでを一気通貫で担当。WordPress / microCMS / 静的サイトジェネレータなど、運用体制に応じた技術選定をします。'
    ],
    deliver: ['情報設計（IA）','ワイヤーフレーム','UIデザイン','CMS実装','SEO初期設定','公開・運用引継ぎ','問い合わせフォーム','解析計測設定']
  },
  {
    n: '02', t: 'LP制作', en: 'Landing Page', note: '/ 4〜6週間',
    body: [
      'CV最大化を起点に、コピー・構成・デザインまで一気通貫で制作します。',
      '広告流入を前提にしたファーストビュー設計、ストーリーラインの組み立て、CTA配置、フォーム最適化までセットで。広告運用と並走することで、改善仮説を素早く回します。'
    ],
    deliver: ['コピーライティング','ストーリーボード設計','UIデザイン','フォーム実装','AB検証準備','広告連携','計測設計','改善レポート']
  },
  {
    n: '03', t: 'ECサイト制作', en: 'E-Commerce', note: '/ 3〜4ヶ月',
    body: [
      'Shopify / 自社ECどちらにも対応。ブランド体験と運用負荷を両立する設計を行います。',
      '商品撮影や原稿制作、決済・物流フローのレギュレーション、CRM・LINE連携、メールマーケまで含めた「売れる仕組み」を組み立てます。'
    ],
    deliver: ['Shopify構築','テーマカスタマイズ','商品登録','決済・物流連携','CRM設計','LP/特集ページ','メルマガ設計','運用マニュアル']
  },
  {
    n: '04', t: 'Webマーケティング支援', en: 'Web Marketing', note: '/ 最低3ヶ月',
    body: [
      '広告運用、CRM、コンテンツSEOを横断で支援します。',
      'ツールの導入だけで終わらせず、毎月の数値レビューと打ち手の意思決定を一緒に行います。マーケ専任を抱えていない企業の「外部マーケ部」として機能します。'
    ],
    deliver: ['広告運用代行','LP改善','CRM設計','メールシナリオ','SNS運用支援','数値レポート','改善仮説の立案','月次MTG']
  },
  {
    n: '05', t: 'SEO対策', en: 'SEO', note: '/ 6ヶ月推奨',
    body: [
      '検索意図のリサーチを起点に、コンテンツとサイト構造を整えていきます。',
      'テクニカルSEO監査、内部リンク再設計、サイト速度改善、コンテンツ制作運用までを継続的に。一過性の対策ではなく、検索流入を「資産」として積み上げる方針です。'
    ],
    deliver: ['キーワード設計','テクニカル監査','内部リンク設計','コンテンツ制作','記事リライト','構造化データ','順位レポート','改善ロードマップ']
  },
  {
    n: '06', t: '保守運用', en: 'Maintenance', note: '/ 月次契約',
    body: [
      'サイト公開後の更新・改善・障害対応を、月次定額プランで継続的にサポート。',
      '軽微な更新代行から、CMSバージョン管理、セキュリティ監視、改善提案、AB検証まで、ご利用状況に合わせて柔軟に運用します。'
    ],
    deliver: ['更新代行','セキュリティ監視','バックアップ','障害対応','改善提案','月次レポート','SSL/ドメイン管理','CMS保守']
  }
];

function ServicesPage() {
  return (
    <main>
      <PageHero
        crumb="HOME / SERVICES"
        ja="サービス"
        en="What we do"
        sub="戦略・設計・制作・運用を、6つのサービスでひと続きに提供します。事業フェーズと目的に合わせて、必要なものから始めていただけます。"
      />
      <section className="container" style={{ padding: 'clamp(40px, 6vw, 96px) var(--pad) clamp(80px, 10vw, 140px)' }}>
        {SERVICES_DATA.map((s) => (
          <Reveal key={s.n}>
            <article id={`svc-${s.n}`} className="svc-detail">
              <div className="svc-detail__lead">
                <span className="eyebrow">Service / {s.n}</span>
                <h3>{s.t}<small>{s.en}</small></h3>
              </div>
              <div className="svc-detail__body">
                {s.body.map((p, i) => <p key={i}>{p}</p>)}
                <div className="svc-detail__deliver">
                  <h5>主な提供物</h5>
                  <ul>
                    {s.deliver.map((d, i) => <li key={i}>{d}</li>)}
                  </ul>
                </div>
              </div>
            </article>
          </Reveal>
        ))}

        <Reveal>
          <div className="cta" style={{ marginTop: 80, paddingTop: 80 }}>
            <h2 className="cta__title">どのサービスが合うか、<br/>ご一緒に考えます。</h2>
            <div className="cta__side">
              <p style={{ color: 'var(--ink-2)', margin: 0, fontSize: 15, lineHeight: 1.85 }}>
                サービスを組み合わせたご相談、<br/>段階的な導入のご相談も歓迎です。
              </p>
              <a href="#/contact" className="btn btn--primary btn--lg"
                onClick={(e)=>{e.preventDefault();navigate('contact');}}>
                相談する
                <span className="arr">
                  <svg width="14" height="12" viewBox="0 0 14 12" fill="none">
                    <path d="M1 6h12M8 1l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </a>
            </div>
          </div>
        </Reveal>
      </section>
    </main>
  );
}

function CompanyPage() {
  return (
    <main>
      <PageHero
        crumb="HOME / COMPANY"
        ja="会社概要"
        en="About us"
        sub="株式会社バラエティーズは、東京都西東京市を拠点とする小規模なウェブスタジオです。少人数だからこその速さと、長く伴走する姿勢を大切にしています。"
      />
      <section className="container" style={{ padding: 'clamp(40px, 6vw, 96px) var(--pad) clamp(80px, 10vw, 140px)' }}>
        <Reveal>
          <dl className="info">
            <div className="info__row">
              <dt>Company</dt>
              <dd>株式会社バラエティーズ<br/><span style={{ color: 'var(--ink-3)', fontSize: 13 }}>VARIETIES, Inc.</span></dd>
            </div>
            <div className="info__row">
              <dt>CEO</dt>
              <dd>永井祥司</dd>
            </div>
            <div className="info__row">
              <dt>Address</dt>
              <dd>東京都西東京市富士町４−２−７</dd>
            </div>
            <div className="info__row">
              <dt>Tel</dt>
              <dd>050-1793-8686<br/><span style={{ color: 'var(--ink-3)', fontSize: 13 }}>平日 10:00–18:00</span></dd>
            </div>
            <div className="info__row">
              <dt>Business</dt>
              <dd>
                <ul>
                  <li>ウェブサイトの企画・制作</li>
                  <li>ウェブコンテンツの企画・制作・運営</li>
                  <li>インターネットサービスの企画・開発</li>
                  <li>Webマーケティング支援</li>
                  <li>マーケティングリサーチ</li>
                  <li>EC・通信販売支援</li>
                  <li>デジタル戦略支援</li>
                </ul>
              </dd>
            </div>
            <div className="info__row">
              <dt>Established</dt>
              <dd>2021年2月21日</dd>
            </div>
          </dl>
        </Reveal>

        <div className="spacer-lg" />

        <Reveal className="section__head">
          <div>
            <span className="eyebrow">Philosophy</span>
            <h2 className="display">堅実なものづくりと、<br/>真摯な伴走を。</h2>
          </div>
          <p className="lede">
            派手なものを作るより、長く役に立つものを作りたい。<br/>
            目立つことより、信頼されることを大切にしたい。<br/>
            少人数だから、ひとつひとつのお仕事に正面から向き合えます。
          </p>
        </Reveal>

        <Reveal>
          <div className="cta" style={{ paddingTop: 0 }}>
            <h2 className="cta__title">お気軽にお問い合わせください。</h2>
            <div className="cta__side">
              <div className="cta__phone">
                <small>お電話 / 平日 10:00–18:00</small>
                050-1793-8686
              </div>
              <a href="#/contact" className="btn btn--primary btn--lg"
                onClick={(e)=>{e.preventDefault();navigate('contact');}}>
                お問い合わせフォーム
                <span className="arr">
                  <svg width="14" height="12" viewBox="0 0 14 12" fill="none">
                    <path d="M1 6h12M8 1l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </a>
            </div>
          </div>
        </Reveal>
      </section>
    </main>
  );
}

const PRIVACY_SECTIONS = [
  {
    title: '1. 個人情報の取得',
    body: [
      '当社は、お問い合わせ、サービスのお申し込み、各種ご相談への対応に必要な範囲で、会社名、お名前、メールアドレス、電話番号、お問い合わせ内容等の個人情報を取得することがあります。',
      '取得にあたっては、利用目的をできる限り明確にし、適正かつ公正な手段により行います。'
    ]
  },
  {
    title: '2. 個人情報の利用目的',
    body: [
      '取得した個人情報は、お問い合わせへの回答、見積り・提案・契約手続き、サービス提供、保守運用、請求・事務連絡、サービス改善および当社からのご案内のために利用します。',
      '法令により認められる場合を除き、あらかじめご本人の同意を得ることなく、上記目的の範囲を超えて利用することはありません。'
    ]
  },
  {
    title: '3. 個人情報の第三者提供',
    body: [
      '当社は、法令に基づく場合、生命・身体・財産の保護のために必要な場合、またはご本人の同意がある場合を除き、個人情報を第三者に提供しません。',
      '業務遂行上、外部事業者に取り扱いを委託する場合は、委託先を適切に選定し、必要かつ適切な監督を行います。'
    ]
  },
  {
    title: '4. 個人情報の安全管理',
    body: [
      '当社は、個人情報の漏えい、滅失、毀損、不正アクセス等を防止するため、必要かつ適切な安全管理措置を講じます。',
      'また、個人情報を取り扱う関係者に対し、適切な管理が行われるよう努めます。'
    ]
  },
  {
    title: '5. Cookie・アクセス解析について',
    body: [
      '当サイトでは、利便性向上、利用状況の把握、サイト改善のためにCookieやアクセス解析ツールを使用する場合があります。',
      'Cookieにより取得される情報には、通常、特定の個人を識別できる情報は含まれません。ブラウザの設定によりCookieの利用を拒否することができます。'
    ]
  },
  {
    title: '6. 開示・訂正・利用停止等',
    body: [
      'ご本人から個人情報の開示、訂正、追加、削除、利用停止等のご希望があった場合は、ご本人確認のうえ、法令に従って適切に対応します。',
      '手続きに関するお問い合わせは、下記窓口までご連絡ください。'
    ]
  },
  {
    title: '7. プライバシーポリシーの変更',
    body: [
      '当社は、法令の改正、サービス内容の変更、運用上の必要に応じて、本プライバシーポリシーを変更することがあります。',
      '重要な変更がある場合は、当サイト上で告知します。'
    ]
  }
];

function PrivacyPolicyPage() {
  return (
    <main>
      <PageHero
        crumb="HOME / PRIVACY POLICY"
        ja="プライバシーポリシー"
        en="Privacy Policy"
        sub="株式会社バラエティーズは、お客様からお預かりする個人情報を適切に管理し、安心してご相談いただける環境づくりに努めます。"
      />
      <section className="container" style={{ padding: 'clamp(40px, 6vw, 96px) var(--pad) clamp(80px, 10vw, 140px)' }}>
        <Reveal>
          <div className="policy-layout">
            <aside className="policy-meta">
              <span className="eyebrow">Policy</span>
              <h2>個人情報の取り扱いについて</h2>

              <p>株式会社バラエティーズ</p>
            </aside>
            <div className="policy-body">
              {PRIVACY_SECTIONS.map((section) => (
                <article className="policy-section" key={section.title}>
                  <h3>{section.title}</h3>
                  {section.body.map((p, i) => <p key={i}>{p}</p>)}
                </article>
              ))}

              <article className="policy-section policy-contact">
                <h3>8. お問い合わせ窓口</h3>
                <p>
                  本ポリシーおよび個人情報の取り扱いに関するお問い合わせは、以下の窓口までご連絡ください。
                </p>
                <dl className="info">
                  <div className="info__row">
                    <dt>Company</dt>
                    <dd>株式会社バラエティーズ</dd>
                  </div>
                  <div className="info__row">
                    <dt>Address</dt>
                    <dd>東京都西東京市富士町４−２−７</dd>
                  </div>
                  <div className="info__row">
                    <dt>Tel</dt>
                    <dd>050-1793-8686<br/><span style={{ color: 'var(--ink-3)', fontSize: 13 }}>平日 10:00–18:00</span></dd>
                  </div>
                  <div className="info__row">
                    <dt>Contact</dt>
                    <dd>
                      <a href="#/contact" onClick={(e)=>{e.preventDefault();navigate('contact');}}>
                        お問い合わせフォーム
                      </a>
                    </dd>
                  </div>
                </dl>
              </article>
            </div>
          </div>
        </Reveal>
      </section>
    </main>
  );
}

function ContactPage() {
  const [form, setForm] = useState({
    company: '', name: '', email: '', phone: '', subject: 'コーポレートサイト制作', message: '', agree: false, turnstileToken: ''
  });
  const [errs, setErrs] = useState({});
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [submitError, setSubmitError] = useState('');
  const turnstileRef = useRef(null);
  const widgetIdRef = useRef(null);

  useEffect(() => {
    const container = turnstileRef.current;
    if (!container) return;

    const renderWidget = () => {
      if (widgetIdRef.current !== null) return;
      widgetIdRef.current = window.turnstile.render(container, {
        sitekey: '0x4AAAAAADNYypZeWWEzOtpd',
        callback: (token) => {
          setForm((f) => ({ ...f, turnstileToken: token }));
          setErrs((er) => ({ ...er, turnstile: undefined }));
        },
        'error-callback': () => {
          setForm((f) => ({ ...f, turnstileToken: '' }));
          setErrs((er) => ({ ...er, turnstile: 'Bot 検証に失敗しました。再度お試しください。' }));
        },
      });
    };

    if (window.turnstile) {
      renderWidget();
    } else {
      const timer = setInterval(() => {
        if (window.turnstile) { clearInterval(timer); renderWidget(); }
      }, 100);
      return () => clearInterval(timer);
    }

    return () => {
      if (widgetIdRef.current !== null && window.turnstile) {
        window.turnstile.remove(widgetIdRef.current);
        widgetIdRef.current = null;
      }
    };
  }, []);

  const onChange = (k) => (e) => {
    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [k]: v }));
    if (errs[k]) setErrs((er) => ({ ...er, [k]: undefined }));
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!form.company.trim()) er.company = '会社名をご入力ください';
    if (!form.name.trim())    er.name    = 'お名前をご入力ください';
    if (!form.email.trim())   er.email   = 'メールアドレスをご入力ください';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) er.email = 'メールアドレスの形式が正しくありません';
    if (form.message.trim().length < 10) er.message = 'お問い合わせ内容は10文字以上でご入力ください';
    if (!form.agree)          er.agree   = 'プライバシーポリシーへの同意が必要です';
    if (!form.turnstileToken) er.turnstile = 'Bot 検証を完了してください';
    if (Object.keys(er).length) { setErrs(er); return; }

    setSending(true);
    setErrs({});
    setSubmitError('');

    try {
      const res = await fetch('https://next-app-navy-ten.vercel.app/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });
      const data = await res.json();
      if (!res.ok || data.error) {
        if (data.error === 'validation_failed' && data.issues) {
          setErrs(data.issues);
          setSubmitError('入力内容をご確認ください。');
        } else {
          setSubmitError(data.message || '送信中にエラーが発生しました。');
        }
        setSending(false);
        return;
      }
      setSent(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (err) {
      setSubmitError('送信に失敗しました。ネットワークを確認してください。');
      setSending(false);
    }
  };

  return (
    <main>
      <PageHero
        crumb="HOME / CONTACT"
        ja="お問い合わせ"
        en="Contact"
        sub="サービスや費用感、進め方など、お気軽にご相談ください。通常2営業日以内にご返答いたします。"
      />
      <section className="container" style={{ padding: 'clamp(40px, 6vw, 96px) var(--pad) clamp(80px, 10vw, 140px)' }}>
        <div className="contact-grid">
          <aside className="contact-side">
            <h4>はじめての方へ</h4>
            <p>
              事業内容と現状の課題、ご希望の公開時期をお知らせください。<br/>
              担当者よりヒアリングのご連絡を差し上げます。
            </p>
            <div className="big-phone">
              <span>Tel</span>
              <b>050-1793-8686</b>
              <i>平日 10:00–18:00</i>
            </div>
            <div className="big-phone">
              <span>Address</span>
              <b style={{ fontSize: 17, fontWeight: 500 }}>東京都西東京市富士町４−２−７</b>
              <i>株式会社バラエティーズ</i>
            </div>
          </aside>

          {sent ? (
            <div className="success">
              <div className="check">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                  <path d="M4 11l5 5 9-11" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h3>お問い合わせを受け付けました。</h3>
              <p>
                ご入力いただいたメールアドレスに、自動返信を送信しました。<br/>
                通常2営業日以内に、担当よりご連絡いたします。<br/>
                お急ぎの場合は <b>050-1793-8686</b> までお電話ください。
              </p>
              <div style={{ marginTop: 32 }}>
                <a href="#/home" className="btn btn--ghost"
                  onClick={(e)=>{e.preventDefault();navigate('home');}}>
                  トップへ戻る
                </a>
              </div>
            </div>
          ) : (
            <form onSubmit={onSubmit} noValidate>
              <div className="form-row">
                <div className="field">
                  <label>会社名 <span className="req">必須</span></label>
                  <input type="text" placeholder="株式会社○○" value={form.company} onChange={onChange('company')} />
                  {errs.company && <div className="err">{errs.company}</div>}
                </div>
                <div className="field">
                  <label>お名前 <span className="req">必須</span></label>
                  <input type="text" placeholder="山田 太郎" value={form.name} onChange={onChange('name')} />
                  {errs.name && <div className="err">{errs.name}</div>}
                </div>
              </div>

              <div className="form-row">
                <div className="field">
                  <label>メールアドレス <span className="req">必須</span></label>
                  <input type="email" placeholder="name@company.co.jp" value={form.email} onChange={onChange('email')} />
                  {errs.email && <div className="err">{errs.email}</div>}
                </div>
                <div className="field">
                  <label>電話番号 <span className="opt">任意</span></label>
                  <input type="tel" placeholder="03-0000-0000" value={form.phone} onChange={onChange('phone')} />
                </div>
              </div>

              <div className="field">
                <label>お問い合わせ種別 <span className="opt">任意</span></label>
                <select value={form.subject} onChange={onChange('subject')}>
                  <option>コーポレートサイト制作</option>
                  <option>LP制作</option>
                  <option>ECサイト制作</option>
                  <option>Webマーケティング支援</option>
                  <option>SEO対策</option>
                  <option>保守運用</option>
                  <option>AI / DX 導入支援</option>
                  <option>その他</option>
                </select>
              </div>

              <div className="field">
                <label>お問い合わせ内容 <span className="req">必須</span></label>
                <textarea placeholder="現状の課題や、ご希望の公開時期、ご予算感などをお書きください。" value={form.message} onChange={onChange('message')} />
                {errs.message && <div className="err">{errs.message}</div>}
              </div>

              <label className="checkbox-row">
                <input type="checkbox" checked={form.agree} onChange={onChange('agree')} />
                <span>
                  <a href="#/privacy" onClick={(e)=>{e.preventDefault();navigate('privacy');}} style={{ borderBottom: '1px solid var(--hairline)' }}>プライバシーポリシー</a> に同意の上、送信します。
                </span>
              </label>
              {errs.agree && <div className="err" style={{ marginTop: -16, marginBottom: 24 }}>{errs.agree}</div>}
              {errs.turnstile && <div className="err" style={{ marginTop: 8, marginBottom: 24 }}>{errs.turnstile}</div>}
              {submitError && <div className="err" style={{ marginTop: 8, marginBottom: 24 }}>{submitError}</div>}

              <button type="submit" className="btn btn--primary btn--lg" style={{ width: '100%', justifyContent: 'center' }} disabled={sending}>
                {sending ? '送信中…' : '送信する'}
                <span className="arr">
                  <svg width="14" height="12" viewBox="0 0 14 12" fill="none">
                    <path d="M1 6h12M8 1l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </button>

              {/* Cloudflare Turnstile */}
              <div ref={turnstileRef} style={{ marginTop: 24, display: 'flex', justifyContent: 'center' }}></div>
            </form>
          )}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ServicesPage, CompanyPage, ContactPage, PrivacyPolicyPage });