// ────────────────────────────────────────────────────────────────
// site-common.jsx
// Production site用の共通コンポーネント
//   - SiteNav   : 実リンク付きナビゲーション（PHILOSOPHY / SERVICES / ...）
//   - SiteFooter: 実リンク付きフッター
//   - ContactForm: プレースホルダ送信付きの問い合わせフォーム
//
// 既存の DesignCanvas プレビューを壊さないよう、既存 PageFooter は残し、
// production 用の各ページ JSX から SiteNav / SiteFooter を参照する。
// ────────────────────────────────────────────────────────────────

// Base path for all internal links. Each HTML sets window.__ASSET_BASE__ ('./' or '../').
const __base = () => (typeof window !== 'undefined' && window.__ASSET_BASE__) || './';

// ── ビューポート検知 ────────────────────────────────────────────
// isMobile: 768未満 (スマホ), isTablet: 768-1023, それ以上は desktop
const useViewport = () => {
  const [w, setW] = React.useState(() =>
    typeof window !== 'undefined' ? window.innerWidth : 1200);
  React.useEffect(() => {
    const on = () => setW(window.innerWidth);
    window.addEventListener('resize', on);
    return () => window.removeEventListener('resize', on);
  }, []);
  return { width: w, isMobile: w < 768, isTablet: w >= 768 && w < 1024 };
};

// ── 言語切替 (JP / EN) ────────────────────────────────────────────
// 翻訳辞書。キー = 日本語原文、値 = 英語訳
// 辞書にない文字列は日本語のまま表示される（段階的に翻訳を追加できる）
const TRANSLATIONS_EN = {
  // Nav
  'PHILOSOPHY': 'PHILOSOPHY', 'SERVICES': 'SERVICES', 'COMPANY': 'COMPANY',
  'NEWS': 'NEWS', 'CAREERS': 'CAREERS',
  'CONTACT →': 'CONTACT →',

  // Top page hero
  'Technology で 食': 'Technology, alongside food',
  '（職人）': '(and its makers)',
  'に寄り添い': '',
  '四方': 'Shihou',
  '良し': 'Good',
  'の': ' ',
  'AX': 'AX',
  'を。': '.',
  '事業を見る →': 'See Services →',
  '会社概要': 'About',
  '採用情報': 'Careers',
  'SCROLL ／ 読み進める': 'SCROLL ／ READ ON',

  // Intro
  '食の現場には、': 'In the field of food,',
  '熟練の手': 'skilled hands',
  'と、': ' and',
  '伝えきれない': 'untold',
  '知恵': 'wisdom',
  'があります。': 'endure.',

  // Philosophy
  '三方から、': 'From three,',
  '四方': 'four.',
  'へ。': '',
  '四方のうちどれか一つでも欠ければ、事業は続かない。':
    'A business cannot endure if any one of the four is missing.',

  // Tech × Craft
  'Technologyは、': 'Technology is',
  '道具': 'a tool.',
  '。': '.',
  '主役は、': 'The protagonist is',
  '人の手': 'the human hand',

  // Services section
  '八つの、': 'Eight',
  '具体的な': 'tangible',
  '伴走': 'partnerships',
  '詳しく見る →': 'Learn more →',

  // CTA
  'お問い合わせ →': 'Contact us →',
  '会社資料 DL': 'Download deck',

  // Manifesto
  'プロフェッショナルが、': 'Professionals',
  '創造だけ': 'dedicated solely to creation',
  'に、': ',',
  '専念できる世界を。': 'in a world that lets them.',

  // Footer
  'ABOUT': 'ABOUT',
  'Philosophy': 'Philosophy', 'Company': 'Company', 'Careers': 'Careers',
  'Curecipe': 'Curecipe', 'CuliNFC': 'CuliNFC', 'Curegi': 'Curegi', 'Consulting': 'Consulting',
  'お問い合わせ': 'Contact',
  '資料請求': 'Request materials',
  '採用エントリー': 'Apply',
  'PRIVACY ／ TERMS': 'PRIVACY ／ TERMS',
  'TOKYO ／ JAPAN': 'TOKYO ／ JAPAN',

  // Contact form
  'FORM ／ GENERAL INQUIRY': 'FORM ／ GENERAL INQUIRY',
  'お名前': 'Name', '会社名': 'Company', 'メール': 'Email', '電話番号': 'Phone',
  'お問い合わせの種類': 'Subject', 'ご相談内容': 'Message',
  '送信する →': 'Submit →',
  '送信中...': 'Sending...',
  'プライバシーポリシーに同意します': 'I agree to the privacy policy',
};

const LangContext = React.createContext({ lang: 'jp', setLang: () => {}, t: (x) => x });

const LangProvider = ({ children }) => {
  const [lang, setLang] = React.useState(() => {
    try { return localStorage.getItem('culina-lang') || 'jp'; } catch { return 'jp'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('culina-lang', lang); } catch {}
    if (typeof document !== 'undefined') document.documentElement.lang = lang === 'en' ? 'en' : 'ja';
  }, [lang]);
  const t = React.useCallback((s) => {
    if (lang !== 'en') return s;
    return Object.prototype.hasOwnProperty.call(TRANSLATIONS_EN, s) ? TRANSLATIONS_EN[s] : s;
  }, [lang]);
  return <LangContext.Provider value={{ lang, setLang, t }}>{children}</LangContext.Provider>;
};

const useLang = () => React.useContext(LangContext);

const NAV_ITEMS = [
  { key: 'top',      label: 'PHILOSOPHY', path: '' },
  { key: 'services', label: 'SERVICES',   path: 'services/' },
  { key: 'company',  label: 'COMPANY',    path: 'company/' },
  { key: 'news',     label: 'NEWS',       path: 'news/' },
  { key: 'careers',  label: 'CAREERS',    path: 'careers/' },
];

// メインナビ ─ 現在ページは accent 色でハイライト
const SiteNav = ({ active }) => {
  const { theme, mode, toggle } = useTheme();
  const { lang, setLang, t } = useLang();
  const { isMobile } = useViewport();
  const [menuOpen, setMenuOpen] = React.useState(false);
  const v1 = {
    paper: theme.paper, ink: theme.ink, sumi: theme.sumi,
    shu: theme.accent, muted: theme.muted, line: theme.line,
    serif: theme.fonts.serif, sans: theme.fonts.sans, mono: theme.fonts.mono,
  };

  // Mobile: hamburger-expandable menu
  if (isMobile) {
    return (
      <nav style={{
        position: 'sticky', top: 0, zIndex: 10,
        background: `${v1.paper}f0`, backdropFilter: 'blur(12px)',
        borderBottom: `1px solid ${v1.line}`,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '14px 20px',
        }}>
          <a href={__base()} style={{ textDecoration: 'none' }}>
            <CulinaWordmark color={v1.ink} size={14} />
          </a>
          <button onClick={() => setMenuOpen(!menuOpen)} aria-label="menu" aria-expanded={menuOpen}
            style={{
              background: 'transparent', border: `1px solid ${v1.line}`,
              width: 40, height: 40, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              cursor: 'pointer', padding: 0, color: v1.ink,
            }}>
            {menuOpen ? (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <path d="M18 6L6 18M6 6l12 12"/>
              </svg>
            ) : (
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <path d="M3 6h18M3 12h18M3 18h18"/>
              </svg>
            )}
          </button>
        </div>
        {menuOpen && (
          <div style={{
            display: 'flex', flexDirection: 'column',
            borderTop: `1px solid ${v1.line}`,
            padding: '8px 0',
          }}>
            {NAV_ITEMS.map((n) => (
              <a key={n.key} href={__base() + n.path}
                 style={{
                   padding: '14px 20px',
                   color: active === n.key ? v1.shu : v1.ink,
                   textDecoration: 'none',
                   fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em',
                   borderBottom: `1px solid ${v1.line}`,
                 }}>
                {t(n.label)}
              </a>
            ))}
            <a href={__base() + 'contact/'}
               style={{
                 margin: '12px 20px',
                 padding: '14px',
                 background: v1.ink, color: v1.paper,
                 textDecoration: 'none', textAlign: 'center',
                 fontFamily: v1.sans, fontSize: 11, letterSpacing: '0.2em',
               }}>
              {t('CONTACT →')}
            </a>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              gap: 16, padding: '16px 20px', borderTop: `1px solid ${v1.line}`,
            }}>
              <button onClick={() => setLang('jp')}
                style={{
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em',
                  color: lang === 'jp' ? v1.ink : v1.muted,
                  borderBottom: lang === 'jp' ? `1px solid ${v1.ink}` : '1px solid transparent',
                  padding: '4px 2px',
                }}>JP</button>
              <span style={{ color: v1.muted, fontSize: 10 }}>/</span>
              <button onClick={() => setLang('en')}
                style={{
                  background: 'transparent', border: 'none', cursor: 'pointer',
                  fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em',
                  color: lang === 'en' ? v1.ink : v1.muted,
                  borderBottom: lang === 'en' ? `1px solid ${v1.ink}` : '1px solid transparent',
                  padding: '4px 2px',
                }}>EN</button>
              <span style={{ width: 1, height: 14, background: v1.line, marginInline: 8 }}/>
              <button onClick={toggle} aria-label="toggle theme"
                style={{
                  background: 'transparent', border: `1px solid ${v1.line}`,
                  width: 32, height: 32, borderRadius: '50%',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  cursor: 'pointer', padding: 0, color: v1.ink,
                }}>
                {mode === 'light' ? (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
                ) : (
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
                )}
              </button>
            </div>
          </div>
        )}
      </nav>
    );
  }

  // Desktop nav (unchanged)
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 10,
      display: 'grid', gridTemplateColumns: 'auto 1fr auto',
      alignItems: 'center', gap: 40, padding: '18px 48px',
      background: `${v1.paper}f0`, backdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${v1.line}`,
    }}>
      <a href={__base()} style={{ textDecoration: 'none' }}>
        <CulinaWordmark color={v1.ink} size={16} />
      </a>
      <div style={{ display: 'flex', gap: 32, justifyContent: 'center', fontSize: 11, letterSpacing: '0.2em' }}>
        {NAV_ITEMS.map((n) => (
          <a key={n.key} href={__base() + n.path}
             style={{
               color: active === n.key ? v1.shu : v1.ink,
               textDecoration: 'none',
               transition: 'color 0.15s',
             }}
             onMouseEnter={(e) => { if (active !== n.key) e.currentTarget.style.color = v1.shu; }}
             onMouseLeave={(e) => { if (active !== n.key) e.currentTarget.style.color = v1.ink; }}
          >
            {t(n.label)}
          </a>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        {/* JP / EN 切替 */}
        <div role="group" aria-label="language" style={{
          display: 'flex', alignItems: 'center', gap: 6,
          fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em',
          userSelect: 'none',
        }}>
          <button onClick={() => setLang('jp')} aria-pressed={lang === 'jp'}
            style={{
              background: 'transparent', border: 'none', padding: '4px 2px',
              cursor: 'pointer', fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em',
              color: lang === 'jp' ? v1.ink : v1.muted,
              borderBottom: lang === 'jp' ? `1px solid ${v1.ink}` : '1px solid transparent',
            }}>JP</button>
          <span style={{ color: v1.muted }}>/</span>
          <button onClick={() => setLang('en')} aria-pressed={lang === 'en'}
            style={{
              background: 'transparent', border: 'none', padding: '4px 2px',
              cursor: 'pointer', fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em',
              color: lang === 'en' ? v1.ink : v1.muted,
              borderBottom: lang === 'en' ? `1px solid ${v1.ink}` : '1px solid transparent',
            }}>EN</button>
        </div>

        {/* 境界線 */}
        <span style={{ width: 1, height: 14, background: v1.line }}/>

        {/* ダーク／ライト切替 */}
        <button onClick={toggle} aria-label="toggle theme" title={mode === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
          style={{
            background: 'transparent', border: `1px solid ${v1.line}`,
            width: 32, height: 32, borderRadius: '50%',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', padding: 0,
            color: v1.ink,
            transition: 'border-color 0.15s, background 0.15s',
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = v1.shu; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = v1.line; }}>
          {mode === 'light' ? (
            /* moon icon */
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
          ) : (
            /* sun icon */
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="4"/>
              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
            </svg>
          )}
        </button>

        <a href={__base() + 'contact/'} style={{ textDecoration: 'none' }}>
          <button style={{
            background: active === 'contact' ? v1.shu : v1.ink,
            color: v1.paper, border: 'none',
            padding: '10px 22px', fontSize: 11, letterSpacing: '0.2em',
            fontFamily: v1.sans, cursor: 'pointer',
          }}>{t('CONTACT →')}</button>
        </a>
      </div>
    </nav>
  );
};

// 共通フッター ─ 実リンク化
const SiteFooter = () => {
  const { theme } = useTheme();
  const { t } = useLang();
  const { isMobile } = useViewport();
  const v1 = {
    paper: theme.paper, ink: theme.ink, sumi: theme.sumi,
    shu: theme.accent, muted: theme.muted, line: theme.line,
    serif: theme.fonts.serif, sans: theme.fonts.sans, mono: theme.fonts.mono,
  };
  const A = ({ href, children }) => (
    <a href={href} style={{ color: v1.sumi, textDecoration: 'none', transition: 'color 0.15s' }}
       onMouseEnter={(e) => e.currentTarget.style.color = v1.shu}
       onMouseLeave={(e) => e.currentTarget.style.color = v1.sumi}>
      {children}
    </a>
  );
  return (
    <footer style={{
      borderTop: `1px solid ${v1.ink}`,
      padding: isMobile ? '40px 20px 24px' : '60px 80px 40px',
      display: 'grid',
      gridTemplateColumns: isMobile ? '1fr 1fr' : '2fr 1fr 1fr 1fr',
      gap: isMobile ? 28 : 48,
      fontSize: 12, color: v1.muted, background: v1.paper,
    }}>
      <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
        <CulinaWordmark color={v1.ink} size={16} />
        <div style={{ marginTop: 24, fontFamily: v1.serif, fontSize: 13, lineHeight: 1.9, color: v1.sumi }}>
          キュリナ株式会社<br/>
          神奈川県横浜市青葉区
        </div>
      </div>
      <div>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.ink, marginBottom: 14 }}>{t('ABOUT')}</div>
        <div style={{ lineHeight: 2, fontFamily: v1.serif, fontSize: 13 }}>
          <A href={__base() + '#philosophy'}>{t('Philosophy')}</A><br/>
          <A href={__base() + 'company/'}>{t('Company')}</A><br/>
          <A href={__base() + 'careers/'}>{t('Careers')}</A>
        </div>
      </div>
      <div>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.ink, marginBottom: 14 }}>{t('SERVICES')}</div>
        <div style={{ lineHeight: 2, fontFamily: v1.serif, fontSize: 13 }}>
          <A href={__base() + 'services/#curecipe'}>Curecipe</A><br/>
          <A href={__base() + 'services/#culinfc'}>CuliNFC</A><br/>
          <A href={__base() + 'services/#curegi'}>Curegi</A><br/>
          <A href={__base() + 'services/#culiec'}>CuliEC</A><br/>
          <A href={__base() + 'services/#culimanage'}>Culimanage</A><br/>
          <A href={__base() + 'services/#culimedia'}>Culimedia</A>
        </div>
      </div>
      <div>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.ink, marginBottom: 14 }}>{t('CONTACT →')}</div>
        <div style={{ lineHeight: 2, fontFamily: v1.serif, fontSize: 13 }}>
          <A href={__base() + 'contact/'}>{t('お問い合わせ')}</A><br/>
          <A href={__base() + 'contact/'}>{t('資料請求')}</A><br/>
          <A href={__base() + 'careers/'}>{t('採用エントリー')}</A>
        </div>
      </div>
      <div style={{
        gridColumn: '1 / -1',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between',
        gap: isMobile ? 8 : 0,
        paddingTop: 28, borderTop: `1px solid ${v1.line}`,
        fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em',
      }}>
        <span>© 2026 CULINA, INC.</span>
        <span>{t('PRIVACY ／ TERMS')}</span>
        <span>{t('TOKYO ／ JAPAN')}</span>
      </div>
    </footer>
  );
};

// プレースホルダ問い合わせフォーム (後で実際の送信先を設定)
const ContactForm = () => {
  const { theme } = useTheme();
  const v1 = {
    paper: theme.paper, paperDeep: theme.paperDeep, ink: theme.ink, sumi: theme.sumi,
    shu: theme.accent, muted: theme.muted, line: theme.line,
    serif: theme.fonts.serif, sans: theme.fonts.sans, mono: theme.fonts.mono,
  };
  const [form, setForm] = React.useState({
    name: '', company: '', email: '', tel: '', subject: '', message: '', agree: false,
  });
  const [status, setStatus] = React.useState('idle'); // 'idle' | 'sending' | 'success' | 'error'
  const upd = (k) => (e) => setForm(s => ({ ...s, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.subject || !form.message) {
      setStatus('error');
      return;
    }
    if (!form.agree) {
      setStatus('error');
      return;
    }
    // ★ 本番実装: 送信先 (Formspree / API Route / mailto) を後で設定
    // 現状はプレースホルダとして 800ms 後に success 表示
    setStatus('sending');
    setTimeout(() => setStatus('success'), 800);
  };

  const Field = ({ label, required, type = 'text', placeholder, value, onChange, name, span }) => (
    <label style={{ display: 'block', gridColumn: span }}>
      <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.muted, marginBottom: 10 }}>
        {label} {required && <span style={{ color: v1.shu }}>＊</span>}
      </div>
      {type === 'textarea'
        ? <textarea rows={5} placeholder={placeholder} value={value} onChange={onChange} name={name}
            style={{
              width: '100%', background: 'transparent', border: 'none',
              borderBottom: `1px solid ${v1.line}`, padding: '8px 0',
              fontFamily: v1.serif, fontSize: 16, color: v1.ink, resize: 'vertical',
              outline: 'none',
            }} />
        : <input type={type} placeholder={placeholder} value={value} onChange={onChange} name={name}
            style={{
              width: '100%', background: 'transparent', border: 'none',
              borderBottom: `1px solid ${v1.line}`, padding: '8px 0',
              fontFamily: v1.serif, fontSize: 16, color: v1.ink, outline: 'none',
            }} />
      }
    </label>
  );

  if (status === 'success') {
    return (
      <div style={{ border: `1px solid ${v1.line}`, padding: 64, background: v1.paperDeep, textAlign: 'center' }}>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 20 }}>
          SUBMITTED ／ 受付完了
        </div>
        <h3 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 32, margin: '0 0 20px' }}>
          お問い合わせありがとうございました。
        </h3>
        <p style={{ fontFamily: v1.serif, fontSize: 15, lineHeight: 2, color: v1.sumi, margin: 0 }}>
          担当者より2〜3営業日以内にご連絡させていただきます。
        </p>
        <button onClick={() => { setForm({ name: '', company: '', email: '', tel: '', subject: '', message: '', agree: false }); setStatus('idle'); }}
          style={{ marginTop: 32, background: 'transparent', color: v1.ink, border: `1px solid ${v1.ink}`, padding: '14px 28px', fontSize: 12, letterSpacing: '0.25em', fontFamily: v1.sans, cursor: 'pointer' }}>
          もう一度送信する
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} style={{ border: `1px solid ${v1.line}`, padding: 48, background: v1.paperDeep }}>
      <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 32 }}>
        FORM ／ GENERAL INQUIRY
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
        <Field label="お名前" required placeholder="山田 太郎" value={form.name} onChange={upd('name')} name="name" />
        <Field label="会社名" placeholder="株式会社〇〇" value={form.company} onChange={upd('company')} name="company" />
        <Field label="メール" required type="email" placeholder="name@example.com" value={form.email} onChange={upd('email')} name="email" />
        <Field label="電話番号" type="tel" placeholder="03-0000-0000" value={form.tel} onChange={upd('tel')} name="tel" />
        <Field label="お問い合わせの種類" required placeholder="サービス導入相談 / 採用 / その他" value={form.subject} onChange={upd('subject')} name="subject" span="1 / -1" />
        <Field label="ご相談内容" required type="textarea" placeholder="できるだけ具体的にお書きください" value={form.message} onChange={upd('message')} name="message" span="1 / -1" />
      </div>
      {status === 'error' && (
        <div style={{ marginTop: 24, padding: 16, border: `1px solid ${v1.shu}`, background: `${v1.shu}15`, fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.15em', color: v1.shu }}>
          ＊必須項目とプライバシーポリシーへの同意をご確認ください
        </div>
      )}
      <div style={{ display: 'flex', gap: 16, marginTop: 48, justifyContent: 'flex-end', alignItems: 'center', flexWrap: 'wrap' }}>
        <label style={{ display: 'flex', gap: 10, alignItems: 'center', fontFamily: v1.serif, fontSize: 13, color: v1.sumi, cursor: 'pointer' }}>
          <input type="checkbox" checked={form.agree} onChange={upd('agree')} />
          <span>プライバシーポリシーに同意します</span>
        </label>
        <button type="submit" disabled={status === 'sending'}
          style={{
            background: v1.ink, color: v1.paper, border: 'none',
            padding: '18px 36px', fontSize: 12, letterSpacing: '0.25em',
            fontFamily: v1.sans, cursor: status === 'sending' ? 'wait' : 'pointer',
            opacity: status === 'sending' ? 0.6 : 1,
          }}>
          {status === 'sending' ? '送信中...' : '送信する →'}
        </button>
      </div>
    </form>
  );
};

// 右下フロート ─ 言語切替 (ThemeToggle の上に積む)
const LangToggle = () => {
  const { theme } = useTheme();
  const { lang, setLang } = useLang();
  const { isMobile } = useViewport();
  const t = theme;
  return (
    <button
      onClick={() => setLang(lang === 'jp' ? 'en' : 'jp')}
      aria-label="toggle language"
      style={{
        position: 'fixed',
        bottom: isMobile ? 56 : 60,
        right: isMobile ? 12 : 20,
        zIndex: 50,
        background: t.ink, color: t.paper,
        border: `1px solid ${t.ink}`,
        padding: isMobile ? '8px 10px' : '10px 14px',
        fontFamily: theme.fonts.mono,
        fontSize: isMobile ? 9 : 10,
        letterSpacing: '0.2em', cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: isMobile ? 6 : 8,
      }}
    >
      <span style={{
        width: 7, height: 7, borderRadius: '50%',
        background: t.accent,
      }} />
      {isMobile ? (lang === 'jp' ? 'JP' : 'EN') : (lang === 'jp' ? 'JP ／ 日本語' : 'EN ／ ENGLISH')}
    </button>
  );
};

// 右下 Back-to-top ボタン ─ 便利系
const BackToTop = () => {
  const { theme } = useTheme();
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow((window.scrollY || document.documentElement.scrollTop) > 400);
    window.addEventListener('scroll', onScroll, { passive: true });
    // Also listen for the page's inner scroll container if any
    const inner = document.querySelector('[data-scroll-root]');
    if (inner) inner.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (inner) inner.removeEventListener('scroll', onScroll);
    };
  }, []);
  if (!show) return null;
  return (
    <button
      onClick={() => {
        const inner = document.querySelector('[data-scroll-root]');
        if (inner) inner.scrollTo({ top: 0, behavior: 'smooth' });
        else window.scrollTo({ top: 0, behavior: 'smooth' });
      }}
      aria-label="Back to top"
      style={{
        position: 'fixed', bottom: 108, right: 20, zIndex: 40,
        background: theme.ink, color: theme.paper,
        border: `1px solid ${theme.ink}`,
        width: 44, height: 44,
        fontFamily: theme.fonts.mono, fontSize: 14,
        cursor: 'pointer',
      }}>
      ↑
    </button>
  );
};

Object.assign(window, {
  SiteNav, SiteFooter, ContactForm, BackToTop, NAV_ITEMS,
  LangProvider, LangContext, useLang, LangToggle, TRANSLATIONS_EN,
  useViewport,
});
