// pages.jsx — all page components for 康大商会

/* ── PRODUCTS DATA ── */
const PRODUCTS = [
  {
    id: 'shirobincho',
    image: 'images/shirobincho.jpg',
    name: '上土佐白炭',
    sub: 'Kamitosa Shirobincho',
    category: '炭',
    desc: '高知県産の最高級白炭。火持ちがよく、煙・臭いが少ない。料亭・焼肉店・炭火焼き専門店など、プロの現場で長年愛用される逸品です。',
    detail: '原料には高知県産のウバメガシを使用。伝統的な土窯製法で丁寧に焼き上げた白炭は、着火後の安定した火力と長時間の火持ちが特長。食材の旨みを最大限に引き出します。',
    specs: [
      { label: '原産地', value: '高知県' },
      { label: '原木', value: 'ウバメガシ' },
      { label: '荷姿', value: '箱入り（10kg/箱）' },
      { label: '用途', value: '料亭・焼肉・炉端' },
    ],
  },
  {
    id: 'ogatan',
    image: 'images/ogatan.jpg',
    name: '国産オガ炭',
    sub: 'Domestic Ogatan',
    category: '炭',
    desc: '国内産のオガクズを圧縮成型した成形炭。安定した火力・低コスト・扱いやすさで、居酒屋・焼肉チェーン店などの業務用途に最適です。',
    detail: '純国産のオガクズを高温圧縮して製造。均一な形状で火の管理がしやすく、灰も少ない。大量使用の業務シーンでもコスト効率よくご利用いただけます。',
    specs: [
      { label: '原産地', value: '国内産' },
      { label: '形状', value: '円柱形（均一成型）' },
      { label: '荷姿', value: '袋入り（10kg/袋）' },
      { label: '用途', value: '業務用・居酒屋・焼肉' },
    ],
  },
  {
    id: 'other',
    image: 'images/other.jpg',
    name: 'その他商品',
    sub: 'Other Products',
    category: 'その他',
    desc: '七輪・火起こし器・炭ばさみなど、炭火に関する用具全般をご用意しております。詳細はお問い合わせください。',
    detail: '七輪（珪藻土製・鉄製）、火起こし器、炭ばさみ、灰受け皿など関連用具を幅広く取り扱っております。業務用の大量注文にも対応いたします。お気軽にご相談ください。',
    specs: [
      { label: '商品', value: '七輪・用具各種' },
      { label: '対応', value: '業務用大量注文可' },
      { label: '問合せ', value: '電話・メール' },
    ],
  },
];

/* ── HOME PAGE ── */
function HomePage({ setPage, theme }) {
  const t = theme;
  return (
    <div>
      {/* Hero */}
      <section style={{ background: t.navBg, minHeight: 520, display: 'flex', alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
        {/* Hero background image */}
        <img src="images/hero.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', opacity: 0.45 }} />
        {/* Background texture overlay */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.04 }} preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="woodgrain" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="rotate(15)">
              <rect width="40" height="40" fill="none"/>
              <line x1="0" y1="10" x2="40" y2="10" stroke={t.accent2} strokeWidth="1"/>
              <line x1="0" y1="25" x2="40" y2="25" stroke={t.accent2} strokeWidth="0.5"/>
              <line x1="0" y1="36" x2="40" y2="36" stroke={t.accent2} strokeWidth="0.8"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#woodgrain)"/>
        </svg>
        <div style={{ maxWidth: 1100, margin: '0 auto', padding: '80px 24px', position: 'relative' }}>
          <p style={{ color: t.accent2, fontSize: 13, letterSpacing: '0.3em', marginBottom: 20, fontFamily: "'Noto Sans JP', sans-serif" }}>KOHDAI SHOKAI</p>
          <h1 style={{ color: t.navFg, fontFamily: "'Noto Serif JP', serif", fontSize: 'clamp(32px, 5vw, 52px)', fontWeight: 700, lineHeight: 1.5, marginBottom: 24 }}>
            薪・炭・七輪のことなら<br /><span style={{ color: t.accent2 }}>康大商会</span>
          </h1>
          <p style={{ color: t.navFg, opacity: 0.7, fontSize: 15, lineHeight: 2, maxWidth: 480, marginBottom: 40, fontFamily: "'Noto Sans JP', sans-serif" }}>
            大阪・東大阪を拠点に、業務用の炭・七輪を全国へお届け。<br />料亭・焼肉店・居酒屋など、プロの現場を支え続けています。
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <button onClick={() => setPage('products')} style={{ background: t.accent, color: '#fff', border: 'none', padding: '14px 32px', fontSize: 14, fontFamily: "'Noto Sans JP', sans-serif", letterSpacing: '0.1em', cursor: 'pointer', transition: 'opacity 0.2s' }}
              onMouseEnter={e => e.target.style.opacity = '0.85'} onMouseLeave={e => e.target.style.opacity = '1'}>
              商品を見る
            </button>
            <button onClick={() => setPage('contact')} style={{ background: 'transparent', color: t.navFg, border: `1px solid ${t.navFg}40`, padding: '14px 32px', fontSize: 14, fontFamily: "'Noto Sans JP', sans-serif", letterSpacing: '0.1em', cursor: 'pointer', transition: 'opacity 0.2s' }}
              onMouseEnter={e => e.target.style.borderColor = t.accent2} onMouseLeave={e => e.target.style.borderColor = `${t.navFg}40`}>
              お問い合わせ
            </button>
          </div>
        </div>
      </section>

      {/* Products Overview */}
      <section style={{ background: t.bg, padding: '80px 24px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionTitle theme={t} sub="PRODUCTS" center>取扱商品</SectionTitle>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24, marginTop: 40 }}>
            {PRODUCTS.map(p => (
              <button key={p.id} onClick={() => setPage('products')}
                style={{ background: t.bg2, border: `1px solid ${t.border}`, padding: 0, cursor: 'pointer', textAlign: 'left', transition: 'transform 0.2s, box-shadow 0.2s' }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = `0 8px 24px ${t.navBg}30`; }}
                onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
                {p.image
                  ? <img src={p.image} alt={p.name} style={{ width: '100%', height: 180, objectFit: 'cover', display: 'block' }} />
                  : <ImgPlaceholder label={p.name} height={180} theme={t} />
                }
                <div style={{ padding: '20px 24px 24px' }}>
                  <span style={{ color: t.accent, fontSize: 11, letterSpacing: '0.15em', fontFamily: "'Noto Sans JP', sans-serif" }}>{p.category}</span>
                  <p style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 18, fontWeight: 700, margin: '6px 0 10px' }}>{p.name}</p>
                  <p style={{ color: t.fg2, fontSize: 13, lineHeight: 1.8, fontFamily: "'Noto Sans JP', sans-serif" }}>{p.desc.slice(0, 60)}…</p>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Company brief */}
      <section style={{ background: t.bg2, padding: '80px 24px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 60, alignItems: 'center' }}>
          <div>
            <SectionTitle theme={t} sub="ABOUT">会社について</SectionTitle>
            <p style={{ color: t.fg2, fontSize: 14, lineHeight: 2.2, fontFamily: "'Noto Sans JP', sans-serif", marginBottom: 32 }}>
              株式会社 康大商会は、大阪・東大阪市を拠点に業務用の炭・七輪を専門に取り扱う会社です。上土佐白炭をはじめとした高品質な炭を、料亭・焼肉店・居酒屋など全国のプロの現場へお届けしております。
            </p>
            <button onClick={() => setPage('company')} style={{ background: 'none', border: `1px solid ${t.accent}`, color: t.accent, padding: '10px 28px', fontSize: 13, fontFamily: "'Noto Sans JP', sans-serif", letterSpacing: '0.1em', cursor: 'pointer' }}>
              会社案内を見る
            </button>
          </div>
          <img src="images/company1.jpg" alt="倉庫の炭" style={{ width: '100%', height: 280, objectFit: 'cover', display: 'block' }} />
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: t.accent, padding: '60px 24px', textAlign: 'center' }}>
        <p style={{ color: '#fff', fontFamily: "'Noto Serif JP', serif", fontSize: 22, fontWeight: 700, marginBottom: 12 }}>ご購入・お見積もりはお気軽に</p>
        <p style={{ color: '#fff', opacity: 0.85, fontSize: 14, marginBottom: 32, fontFamily: "'Noto Sans JP', sans-serif" }}>TEL/FAX: 06-6746-2436　携帯: 090-8168-8057</p>
        <button onClick={() => setPage('contact')} style={{ background: '#fff', color: t.accent, border: 'none', padding: '14px 40px', fontSize: 14, fontFamily: "'Noto Sans JP', sans-serif", letterSpacing: '0.1em', cursor: 'pointer', fontWeight: 700 }}>
          お問い合わせフォーム
        </button>
      </section>
    </div>
  );
}

/* ── PRODUCTS PAGE ── */
function ProductsPage({ theme }) {
  const t = theme;
  const [selected, setSelected] = React.useState(null);

  return (
    <div style={{ background: t.bg, minHeight: '60vh' }}>
      <div style={{ background: t.bg2, padding: '48px 24px 40px', borderBottom: `1px solid ${t.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <p style={{ color: t.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 8, fontFamily: "'Noto Sans JP', sans-serif" }}>PRODUCTS</p>
          <h1 style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700 }}>商品紹介</h1>
        </div>
      </div>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '60px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 32 }}>
          {PRODUCTS.map(p => (
            <div key={p.id} style={{ background: t.bg2, border: `1px solid ${t.border}` }}>
              {p.image
                ? <img src={p.image} alt={p.name} style={{ width: '100%', height: 200, objectFit: 'cover', display: 'block' }} />
                : <ImgPlaceholder label={p.name + ' 商品写真'} height={200} theme={t} />
              }
              <div style={{ padding: '24px' }}>
                <span style={{ color: t.accent, fontSize: 11, letterSpacing: '0.15em', fontFamily: "'Noto Sans JP', sans-serif" }}>{p.category}</span>
                <h3 style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 20, fontWeight: 700, margin: '8px 0 4px' }}>{p.name}</h3>
                <p style={{ color: t.fg2, fontSize: 12, fontFamily: "'Noto Sans JP', sans-serif", marginBottom: 16 }}>{p.sub}</p>
                <p style={{ color: t.fg2, fontSize: 13, lineHeight: 1.9, fontFamily: "'Noto Sans JP', sans-serif", marginBottom: 20 }}>{p.desc}</p>
                <button onClick={() => setSelected(selected === p.id ? null : p.id)}
                  style={{ background: 'none', border: `1px solid ${t.accent}`, color: t.accent, padding: '8px 20px', fontSize: 12, fontFamily: "'Noto Sans JP', sans-serif", cursor: 'pointer', letterSpacing: '0.1em' }}>
                  {selected === p.id ? '閉じる ▲' : '詳細を見る ▼'}
                </button>
                {selected === p.id && (
                  <div style={{ marginTop: 20, paddingTop: 20, borderTop: `1px solid ${t.border}` }}>
                    <p style={{ color: t.fg2, fontSize: 13, lineHeight: 2, fontFamily: "'Noto Sans JP', sans-serif", marginBottom: 16 }}>{p.detail}</p>
                    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                      <tbody>
                        {p.specs.map(s => (
                          <tr key={s.label} style={{ borderBottom: `1px solid ${t.border}` }}>
                            <td style={{ padding: '8px 12px 8px 0', color: t.accent, fontSize: 12, fontFamily: "'Noto Sans JP', sans-serif", whiteSpace: 'nowrap', width: '40%' }}>{s.label}</td>
                            <td style={{ padding: '8px 0', color: t.fg, fontSize: 13, fontFamily: "'Noto Sans JP', sans-serif" }}>{s.value}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ── COMPANY PAGE ── */
function CompanyPage({ theme }) {
  const t = theme;
  const tableStyle = { width: '100%', borderCollapse: 'collapse' };
  const thStyle = { padding: '14px 16px', background: t.bg3, color: t.fg2, fontSize: 13, fontFamily: "'Noto Sans JP', sans-serif", textAlign: 'left', width: '30%', borderBottom: `1px solid ${t.border}` };
  const tdStyle = { padding: '14px 16px', color: t.fg, fontSize: 13, fontFamily: "'Noto Sans JP', sans-serif", borderBottom: `1px solid ${t.border}` };
  return (
    <div style={{ background: t.bg, minHeight: '60vh' }}>
      <div style={{ background: t.bg2, padding: '48px 24px 40px', borderBottom: `1px solid ${t.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <p style={{ color: t.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 8, fontFamily: "'Noto Sans JP', sans-serif" }}>COMPANY</p>
          <h1 style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700 }}>会社案内</h1>
        </div>
      </div>
      <div style={{ maxWidth: 900, margin: '0 auto', padding: '60px 24px' }}>
        <SectionTitle theme={t} sub="">会社情報</SectionTitle>
        <table style={tableStyle}>
          <tbody>
            {[['法人名','株式会社 康大商会'],['代表取締役','濟陽 康平'],['所在地','〒577-0001 大阪府東大阪市徳庵本町7-2-508'],['電話番号','06-6746-2436'],['FAX番号','06-6746-2436'],['携帯番号','090-8168-8057 / 090-3267-8325'],['メール','koudaiwood@gmail.com'],['URL','www.kohdaiwood.com']].map(([k,v]) => (
              <tr key={k}><th style={thStyle}>{k}</th><td style={tdStyle}>{v}</td></tr>
            ))}
          </tbody>
        </table>

        <div style={{ marginTop: 60 }}>
          <SectionTitle theme={t} sub="">ご注文・お支払について</SectionTitle>
          {[
            { title: '注文方法', body: '当サイトの商品よりお選びいただき、メールまたはお電話にてご注文ください。' },
            { title: '送料', body: '発送地域により料金が異なります。詳しくはお問い合わせください。' },
            { title: '消費税', body: '商品金額はすべて税込み金額となっております。' },
            { title: '支払方法（3万円未満）', body: '商品到着後3日以内に下記口座へお振込ください。' },
            { title: '支払方法（3万円以上）', body: '入金確認後に発送いたします。お振込先は下記をご参照ください。' },
            { title: '納品時期', body: '1週間以内にお届けいたします。在庫状況により遅延する場合はご連絡いたします。' },
            { title: '返品について', body: '商品不備・不良の場合はご連絡ください。お客様都合による返品はご対応できかねます。' },
          ].map(item => (
            <div key={item.title} style={{ borderBottom: `1px solid ${t.border}`, padding: '20px 0', display: 'grid', gridTemplateColumns: '200px 1fr', gap: 16 }}>
              <p style={{ color: t.accent, fontSize: 13, fontWeight: 700, fontFamily: "'Noto Sans JP', sans-serif" }}>{item.title}</p>
              <p style={{ color: t.fg2, fontSize: 13, lineHeight: 1.9, fontFamily: "'Noto Sans JP', sans-serif" }}>{item.body}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 60 }}>
          <SectionTitle theme={t} sub="">お振込先</SectionTitle>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
            {[
              { bank: '三井住友銀行', branch: '徳庵支店', type: '普通', num: '1852321' },
              { bank: '三菱UFJ銀行', branch: '鴻池新田支店', type: '普通', num: '0221662' },
            ].map(b => (
              <div key={b.bank} style={{ background: t.bg2, border: `1px solid ${t.border}`, padding: '24px' }}>
                <p style={{ color: t.accent, fontSize: 13, fontWeight: 700, marginBottom: 12, fontFamily: "'Noto Sans JP', sans-serif" }}>{b.bank}</p>
                {[['支店名', b.branch],['口座種別', b.type],['口座番号', b.num],['名義', '株式会社 康大商会']].map(([k,v]) => (
                  <div key={k} style={{ display: 'flex', gap: 12, marginBottom: 6 }}>
                    <span style={{ color: t.fg2, fontSize: 12, width: 70, fontFamily: "'Noto Sans JP', sans-serif" }}>{k}</span>
                    <span style={{ color: t.fg, fontSize: 13, fontFamily: "'Noto Sans JP', sans-serif" }}>{v}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>

        {/* 写真ギャラリー */}
        <div style={{ marginTop: 60 }}>
          <SectionTitle theme={t} sub="">倉庫・現場の様子</SectionTitle>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
            <img src="images/company1.jpg" alt="炭の仕分け" style={{ width: '100%', height: 240, objectFit: 'cover', display: 'block' }} />
            <img src="images/company2.jpg" alt="倉庫の炭" style={{ width: '100%', height: 240, objectFit: 'cover', display: 'block' }} />
            <img src="images/hero.jpg" alt="炭焼き窯" style={{ width: '100%', height: 240, objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── STORES PAGE ── */
const STORES = [
  { name: '焼肉 大阪○○店', area: '大阪市北区', type: '焼肉店', note: '上土佐白炭をご愛用いただいております。' },
  { name: '居酒屋 △△', area: '東大阪市', type: '居酒屋', note: '国産オガ炭をご愛用いただいております。' },
  { name: '料亭 □□', area: '大阪市中央区', type: '料亭', note: '上土佐白炭をご愛用いただいております。' },
  { name: '炉端焼き ◇◇', area: '堺市', type: '炉端焼き', note: '七輪・炭を合わせてご利用いただいております。' },
];

function StoresPage({ setPage, theme }) {
  const t = theme;
  return (
    <div style={{ background: t.bg, minHeight: '60vh' }}>
      <div style={{ background: t.bg2, padding: '48px 24px 40px', borderBottom: `1px solid ${t.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <p style={{ color: t.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 8, fontFamily: "'Noto Sans JP', sans-serif" }}>STORES</p>
          <h1 style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700 }}>ご利用店紹介</h1>
        </div>
      </div>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '60px 24px' }}>
        <p style={{ color: t.fg2, fontSize: 14, lineHeight: 2, marginBottom: 48, fontFamily: "'Noto Sans JP', sans-serif" }}>
          康大商会の炭・七輪をご愛用いただいている店舗様をご紹介します。
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
          {STORES.map(s => (
            <div key={s.name} style={{ background: t.bg2, border: `1px solid ${t.border}`, padding: '0' }}>
              <ImgPlaceholder label={s.name + ' 店舗写真'} height={160} theme={t} />
              <div style={{ padding: '20px 24px 24px' }}>
                <span style={{ color: t.accent, fontSize: 11, letterSpacing: '0.1em', fontFamily: "'Noto Sans JP', sans-serif" }}>{s.type}｜{s.area}</span>
                <p style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 17, fontWeight: 700, margin: '8px 0 10px' }}>{s.name}</p>
                <p style={{ color: t.fg2, fontSize: 13, lineHeight: 1.8, fontFamily: "'Noto Sans JP', sans-serif" }}>{s.note}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 60, textAlign: 'center', background: t.bg2, border: `1px solid ${t.border}`, padding: '40px 24px' }}>
          <p style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 18, marginBottom: 12 }}>掲載をご希望の店舗様</p>
          <p style={{ color: t.fg2, fontSize: 13, marginBottom: 24, fontFamily: "'Noto Sans JP', sans-serif" }}>ご利用店舗として掲載を希望される方は、お気軽にご連絡ください。</p>
          <button onClick={() => setPage('contact')} style={{ background: t.accent, color: '#fff', border: 'none', padding: '12px 32px', fontSize: 13, fontFamily: "'Noto Sans JP', sans-serif", cursor: 'pointer', letterSpacing: '0.1em' }}>
            お問い合わせ
          </button>
        </div>
      </div>
    </div>
  );
}

/* ── CONTACT PAGE ── */
function ContactPage({ theme }) {
  const t = theme;
  const [form, setForm] = React.useState({ name: '', company: '', email: '', phone: '', subject: '', message: '' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'お名前を入力してください';
    if (!form.email.trim()) e.email = 'メールアドレスを入力してください';
    else if (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) e.email = '正しいメールアドレスを入力してください';
    if (!form.message.trim()) e.message = 'お問い合わせ内容を入力してください';
    return e;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;
    setSending(true);
    try {
      const res = await fetch('https://formspree.io/f/mqenpqzq', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          company: form.company,
          email: form.email,
          phone: form.phone,
          subject: form.subject,
          message: form.message,
        }),
      });
      if (res.ok) {
        setSent(true);
      } else {
        const data = await res.json();
        setErrors({ submit: data.error || '送信に失敗しました。時間をおいて再度お試しください。' });
      }
    } catch (err) {
      setErrors({ submit: 'ネットワークエラーが発生しました。時間をおいて再度お試しください。' });
    } finally {
      setSending(false);
    }
  };

  const inputStyle = (field) => ({
    width: '100%', padding: '10px 14px', background: t.bg, border: `1px solid ${errors[field] ? '#c0392b' : t.border}`,
    color: t.fg, fontSize: 14, fontFamily: "'Noto Sans JP', sans-serif", outline: 'none', boxSizing: 'border-box',
    transition: 'border-color 0.2s',
  });
  const labelStyle = { color: t.fg2, fontSize: 13, fontFamily: "'Noto Sans JP', sans-serif", display: 'block', marginBottom: 6 };
  const errStyle = { color: '#c0392b', fontSize: 12, marginTop: 4, fontFamily: "'Noto Sans JP', sans-serif" };
  const fieldWrap = { marginBottom: 24 };

  if (sent) return (
    <div style={{ background: t.bg, minHeight: '60vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
      <div style={{ textAlign: 'center', maxWidth: 480 }}>
        <div style={{ width: 64, height: 64, borderRadius: '50%', background: t.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', fontSize: 28 }}>✓</div>
        <h2 style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 24, marginBottom: 16 }}>送信が完了しました</h2>
        <p style={{ color: t.fg2, fontSize: 14, lineHeight: 2, fontFamily: "'Noto Sans JP', sans-serif" }}>
          お問い合わせありがとうございます。<br />内容を確認の上、担当者よりご連絡いたします。
        </p>
      </div>
    </div>
  );

  return (
    <div style={{ background: t.bg, minHeight: '60vh' }}>
      <div style={{ background: t.bg2, padding: '48px 24px 40px', borderBottom: `1px solid ${t.border}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <p style={{ color: t.accent, fontSize: 12, letterSpacing: '0.2em', marginBottom: 8, fontFamily: "'Noto Sans JP', sans-serif" }}>CONTACT</p>
          <h1 style={{ color: t.fg, fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700 }}>購入・お問い合わせ</h1>
        </div>
      </div>
      <div style={{ maxWidth: 760, margin: '0 auto', padding: '60px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16, marginBottom: 48, background: t.bg2, border: `1px solid ${t.border}`, padding: '24px' }}>
          {[['TEL/FAX','06-6746-2436'],['携帯','090-8168-8057'],['メール','koudaiwood@gmail.com']].map(([k,v]) => (
            <div key={k}>
              <p style={{ color: t.accent, fontSize: 11, letterSpacing: '0.1em', fontFamily: "'Noto Sans JP', sans-serif", marginBottom: 4 }}>{k}</p>
              <p style={{ color: t.fg, fontSize: 14, fontFamily: "'Noto Sans JP', sans-serif" }}>{v}</p>
            </div>
          ))}
        </div>

        <form onSubmit={handleSubmit} noValidate>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div style={fieldWrap}>
              <label style={labelStyle}>お名前 <span style={{ color: '#c0392b' }}>*</span></label>
              <input style={inputStyle('name')} value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="山田 太郎" />
              {errors.name && <p style={errStyle}>{errors.name}</p>}
            </div>
            <div style={fieldWrap}>
              <label style={labelStyle}>会社名</label>
              <input style={inputStyle('company')} value={form.company} onChange={e => setForm({ ...form, company: e.target.value })} placeholder="株式会社○○" />
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div style={fieldWrap}>
              <label style={labelStyle}>メールアドレス <span style={{ color: '#c0392b' }}>*</span></label>
              <input type="email" style={inputStyle('email')} value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="info@example.com" />
              {errors.email && <p style={errStyle}>{errors.email}</p>}
            </div>
            <div style={fieldWrap}>
              <label style={labelStyle}>電話番号</label>
              <input style={inputStyle('phone')} value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="06-0000-0000" />
            </div>
          </div>
          <div style={fieldWrap}>
            <label style={labelStyle}>件名</label>
            <input style={inputStyle('subject')} value={form.subject} onChange={e => setForm({ ...form, subject: e.target.value })} placeholder="商品についてのご質問など" />
          </div>
          <div style={fieldWrap}>
            <label style={labelStyle}>お問い合わせ内容 <span style={{ color: '#c0392b' }}>*</span></label>
            <textarea style={{ ...inputStyle('message'), height: 160, resize: 'vertical' }} value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} placeholder="ご質問・ご要望をご記入ください" />
            {errors.message && <p style={errStyle}>{errors.message}</p>}
          </div>
          {errors.submit && <p style={{ ...errStyle, marginBottom: 16, padding: '12px 16px', background: '#fdf0f0', border: '1px solid #e0b0b0' }}>{errors.submit}</p>}
          <button type="submit" disabled={sending}
            style={{ width: '100%', background: sending ? t.border : t.accent, color: '#fff', border: 'none', padding: '16px', fontSize: 15, fontFamily: "'Noto Sans JP', sans-serif", letterSpacing: '0.15em', cursor: sending ? 'not-allowed' : 'pointer', transition: 'background 0.2s' }}>
            {sending ? '送信中…' : '送信する'}
          </button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, ProductsPage, CompanyPage, StoresPage, ContactPage });