// Variant A — Refined: white bg, navy + blue accent, all sans-serif, no italics

const A = {
  bg: '#ffffff',
  bg2: '#f7f8fa',
  bg3: '#eef1f6',
  navy: '#0b2a52',
  navyDeep: '#06183a',
  blue: '#2563eb',
  blueDeep: '#1d4ed8',
  blueSoft: '#dbeafe',
  ink: '#0f172a',
  inkSoft: '#475569',
  inkMuted: '#64748b',
  line: '#e2e8f0',
  lineSoft: '#f1f5f9'
};

const a_sans = `'Inter', 'Noto Sans JP', system-ui, sans-serif`;
const a_mono = `'JetBrains Mono', 'SF Mono', Menlo, monospace`;

function VariantA() {
  const [lang, setLang] = React.useState('ja');
  const t = lang === 'ja' ? a_ja : a_en;

  return (
    <div style={{
      width: '100%', minHeight: '100%', background: A.bg, color: A.ink,
      fontFamily: a_sans, fontSize: 15, lineHeight: 1.65,
      fontFeatureSettings: '"palt" 1'
    }}>
      <A_Nav lang={lang} setLang={setLang} t={t} />
      <A_Hero t={t} />
      <A_Problem t={t} />
      <A_Features t={t} />
      <A_Flow t={t} />
      <A_Stats t={t} />
      <A_FAQ t={t} />
      <A_CTA t={t} />
      <A_Footer t={t} />
    </div>);

}

function A_Nav({ lang, setLang, t }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${A.line}`
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '16px 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 28, height: 28, background: A.navy, borderRadius: 6,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontWeight: 800, fontSize: 14, letterSpacing: '-0.02em'
          }}>RA</div>
          <span style={{ fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: A.navyDeep }}>
            {t.brand}
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 14, color: A.inkSoft, fontWeight: 500 }}>
          <span>{t.nav.features}</span>
          <span>{t.nav.flow}</span>
          <span>{t.nav.cases}</span>
          <span>{t.nav.faq}</span>
          <div style={{
            display: 'flex', border: `1px solid ${A.line}`, borderRadius: 6,
            overflow: 'hidden', fontSize: 12
          }}>
            <button onClick={() => setLang('ja')} style={{
              padding: '5px 10px', border: 0, cursor: 'pointer',
              background: lang === 'ja' ? A.navy : '#fff',
              color: lang === 'ja' ? '#fff' : A.inkSoft, fontFamily: 'inherit', fontWeight: 600
            }}>JA</button>
            <button onClick={() => setLang('en')} style={{
              padding: '5px 10px', border: 0, cursor: 'pointer',
              background: lang === 'en' ? A.navy : '#fff',
              color: lang === 'en' ? '#fff' : A.inkSoft, fontFamily: 'inherit', fontWeight: 600
            }}>EN</button>
          </div>
          <a href="#contact" style={{
            background: A.navy, color: '#fff', border: 0,
            padding: '10px 18px', fontSize: 13, fontWeight: 600,
            fontFamily: 'inherit', cursor: 'pointer', borderRadius: 6,
            textDecoration: 'none', display: 'inline-block'
          }}>{t.nav.cta}</a>
        </div>
      </div>
    </div>);

}

function A_Hero({ t }) {
  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: A.bg }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '88px 48px 80px',
        position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 60,
        alignItems: 'center'
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', background: A.blueSoft, color: A.blueDeep,
            fontSize: 12, fontWeight: 600, letterSpacing: '0.02em',
            marginBottom: 28, borderRadius: 999
          }}>
            <span style={{ width: 6, height: 6, background: A.blue, borderRadius: 999 }} />
            {t.hero.badge}
          </div>
          <h1 style={{
            fontSize: 60, fontWeight: 800,
            lineHeight: 1.18, letterSpacing: '-0.025em',
            margin: '0 0 24px', color: A.navyDeep
          }}>
            {t.hero.h1a}
            <span style={{ color: A.blue }}>{t.hero.h1b}</span>
            {t.hero.h1c}
          </h1>
          <p style={{ fontSize: 18, color: A.inkSoft, lineHeight: 1.75, margin: '0 0 36px', maxWidth: 540 }}>
            {t.hero.sub}
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <a href="#contact" style={{
              background: A.navy, color: '#fff', border: 0,
              padding: '15px 28px', fontSize: 15, fontWeight: 600,
              fontFamily: 'inherit', cursor: 'pointer', borderRadius: 8,
              textDecoration: 'none', display: 'inline-block'
            }}>{t.hero.ctaPrimary}</a>
          </div>
          <div style={{ marginTop: 36, display: 'flex', gap: 28, fontSize: 13, color: A.inkSoft, flexWrap: 'wrap' }}>
            <div><span style={{ color: A.blue, marginRight: 6, fontWeight: 700 }}>✓</span>{t.hero.b1}</div>
            <div><span style={{ color: A.blue, marginRight: 6, fontWeight: 700 }}>✓</span>{t.hero.b2}</div>
            <div><span style={{ color: A.blue, marginRight: 6, fontWeight: 700 }}>✓</span>{t.hero.b3}</div>
          </div>
        </div>
        <A_HeroVisual t={t} />
      </div>
    </div>);

}

function A_HeroVisual({ t }) {
  return (
    <div style={{ position: 'relative', minHeight: 540 }}>
      {/* Behind: target list card */}
      <div style={{
        position: 'absolute', top: 0, right: 0, width: 380,
        background: '#fff', border: `1px solid ${A.line}`, borderRadius: 12,
        boxShadow: `0 20px 40px -16px rgba(15,23,42,0.12), 0 4px 8px -4px rgba(15,23,42,0.06)`,
        padding: 22
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: A.navyDeep }}>{t.hero.cardA}</div>
          <div style={{ fontSize: 11, color: A.blue, display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: A.blue }} />{t.hero.live}
          </div>
        </div>
        {[
        { c: 'Persol Holdings', s: '採用拡大中', m: 92 },
        { c: 'Recruit Co., Ltd.', s: '中途強化', m: 88 },
        { c: 'En Japan Inc.', s: 'IT職種', m: 85 },
        { c: 'Mynavi Corp.', s: '新規開拓', m: 81 }].
        map((row, i) =>
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '1fr auto',
          gap: 12, padding: '11px 0', borderTop: i ? `1px solid ${A.lineSoft}` : 0,
          alignItems: 'center', fontSize: 13
        }}>
            <div>
              <div style={{ fontWeight: 600, color: A.ink }}>{row.c}</div>
              <div style={{ fontSize: 11, color: A.inkMuted, marginTop: 2 }}>{row.s}</div>
            </div>
            <div style={{
            fontFamily: a_mono, fontSize: 13, color: A.blueDeep, fontWeight: 700,
            padding: '3px 8px', background: A.blueSoft, borderRadius: 4
          }}>{row.m}</div>
          </div>
        )}
      </div>

      {/* Front: personalized message card */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, width: 420,
        background: A.navyDeep, color: '#fff', borderRadius: 12,
        boxShadow: `0 32px 64px -16px rgba(11,42,82,0.4)`,
        padding: 26
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 24, height: 24, background: A.blue, borderRadius: 6,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontSize: 11, fontWeight: 800
            }}>AI</div>
            <div style={{ fontSize: 12, fontWeight: 600, color: '#fff' }}>{t.hero.cardB}</div>
          </div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontFamily: a_mono }}>v.1 · 0.8s</div>
        </div>
        <div style={{ fontSize: 13, lineHeight: 1.75, color: 'rgba(255,255,255,0.92)' }}>
          <span style={{ color: '#fff', fontWeight: 600 }}>{t.hero.msg.greet}</span>
          <br /><br />
          {t.hero.msg.body1}<br /><br />
          {t.hero.msg.body2}
          <span style={{ background: 'rgba(37,99,235,0.35)', padding: '1px 6px', color: '#fff', fontWeight: 600, borderRadius: 3 }}>{t.hero.msg.var1}</span>
          {t.hero.msg.body3}
        </div>
        <div style={{ marginTop: 20, paddingTop: 14, borderTop: `1px solid rgba(255,255,255,0.12)`, display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'rgba(255,255,255,0.55)' }}>
          <span>{t.hero.msg.from}</span>
          <span style={{ color: A.blue }}>{t.hero.msg.tone}</span>
        </div>
      </div>
    </div>);

}

function A_Logos({ t }) {
  // Place company logo files in /uploads and reference them here.
  // Each entry: { src: 'uploads/your-logo.svg', alt: 'Company Name' }
  // While files are missing, a styled placeholder renders in their place.
  const logos = [
    { src: 'uploads/logo-1.svg', alt: 'Client 1' },
    { src: 'uploads/logo-2.svg', alt: 'Client 2' },
    { src: 'uploads/logo-3.svg', alt: 'Client 3' },
    { src: 'uploads/logo-4.svg', alt: 'Client 4' },
    { src: 'uploads/logo-5.svg', alt: 'Client 5' },
    { src: 'uploads/logo-6.svg', alt: 'Client 6' }];

  return (
    <div style={{ borderTop: `1px solid ${A.line}`, borderBottom: `1px solid ${A.line}`, background: A.bg2 }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '32px 48px',
        display: 'flex', alignItems: 'center', gap: 32
      }}>
        <div style={{ fontSize: 12, color: A.inkMuted, letterSpacing: '0.06em', fontWeight: 600, minWidth: 200, textTransform: 'uppercase' }}>
          {t.logos.label}
        </div>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center', flex: 1, justifyContent: 'space-around', flexWrap: 'wrap' }}>
          {logos.map((logo, i) =>
          <div key={i} style={{
            height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
            minWidth: 110, position: 'relative'
          }}>
              <img
              src={logo.src}
              alt={logo.alt}
              style={{ maxHeight: 36, maxWidth: 140, objectFit: 'contain', filter: 'grayscale(1)', opacity: 0.75 }}
              onError={(e) => {
                e.currentTarget.style.display = 'none';
                if (e.currentTarget.nextSibling) e.currentTarget.nextSibling.style.display = 'flex';
              }} />
              <div style={{
              display: 'none', position: 'absolute', inset: 0,
              alignItems: 'center', justifyContent: 'center',
              border: `1px dashed ${A.line}`, borderRadius: 4,
              fontFamily: a_mono, fontSize: 10, color: A.inkMuted,
              padding: '0 12px', textAlign: 'center'
            }}>
                logo {i + 1}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function A_Problem({ t }) {
  return (
    <div style={{ padding: '120px 48px', background: A.bg }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div style={{ fontSize: 12, color: A.blue, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>
            {t.problem.eyebrow}
          </div>
          <h2 style={{ fontSize: 44, fontWeight: 800, margin: 0, color: A.navyDeep, lineHeight: 1.25, letterSpacing: '-0.02em' }}>
            {t.problem.h2a}<br />
            <span style={{ color: A.blue }}>{t.problem.h2b}</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 1fr', gap: 0, alignItems: 'stretch' }}>
          <div style={{ background: '#fff', border: `1px solid ${A.line}`, borderRadius: 12, padding: 36 }}>
            <div style={{
              display: 'inline-block', padding: '4px 12px',
              background: A.bg3, color: A.inkSoft,
              fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
              marginBottom: 20, borderRadius: 4, textTransform: 'uppercase'
            }}>{t.problem.before}</div>
            <h3 style={{ fontSize: 22, margin: '0 0 22px', color: A.navyDeep, fontWeight: 700 }}>
              {t.problem.beforeTitle}
            </h3>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {t.problem.beforeItems.map((item, i) =>
              <li key={i} style={{ display: 'flex', gap: 14, padding: '12px 0', borderTop: i ? `1px solid ${A.lineSoft}` : 0, fontSize: 14, color: A.inkSoft }}>
                  <span style={{ color: '#dc2626', fontSize: 16, lineHeight: 1.4, flexShrink: 0, fontWeight: 700 }}>×</span>
                  <span>{item}</span>
                </li>
              )}
            </ul>
            <div style={{ marginTop: 28, padding: 18, background: A.bg2, borderRadius: 8 }}>
              <div style={{ fontSize: 11, color: A.inkMuted, fontWeight: 600, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{t.problem.beforeMetric}</div>
              <div style={{ fontSize: 36, color: A.navyDeep, fontWeight: 800, letterSpacing: '-0.02em' }}>0.8<span style={{ fontSize: 18, color: A.inkMuted, marginLeft: 4 }}>%</span></div>
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
              <path d="M8 20 L32 20 M24 12 L32 20 L24 28" stroke={A.blue} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>

          <div style={{ background: A.navy, color: '#fff', padding: 36, borderRadius: 12, position: 'relative', overflow: 'hidden' }}>
            <div style={{
              position: 'absolute', top: 0, right: 0, padding: '6px 14px',
              background: A.blue, color: '#fff', fontSize: 11,
              fontWeight: 700, letterSpacing: '0.06em',
              borderBottomLeftRadius: 8, textTransform: 'uppercase'
            }}>{t.problem.afterTag}</div>
            <div style={{
              display: 'inline-block', padding: '4px 12px',
              background: 'rgba(37,99,235,0.2)', color: '#93c5fd',
              fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
              marginBottom: 20, borderRadius: 4, textTransform: 'uppercase'
            }}>{t.problem.after}</div>
            <h3 style={{ fontSize: 22, margin: '0 0 22px', fontWeight: 700 }}>
              {t.problem.afterTitle}
            </h3>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {t.problem.afterItems.map((item, i) =>
              <li key={i} style={{ display: 'flex', gap: 14, padding: '12px 0', borderTop: i ? `1px solid rgba(255,255,255,0.1)` : 0, fontSize: 14, color: 'rgba(255,255,255,0.88)' }}>
                  <span style={{ color: A.blue, fontWeight: 800, flexShrink: 0 }}>✓</span>
                  <span>{item}</span>
                </li>
              )}
            </ul>
            <div style={{ marginTop: 28, padding: 18, background: 'rgba(255,255,255,0.08)', borderRadius: 8, border: `1px solid rgba(37,99,235,0.3)` }}>
              <div style={{ fontSize: 11, color: '#93c5fd', fontWeight: 600, marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{t.problem.afterMetric}</div>
              <div style={{ fontSize: 36, color: '#fff', fontWeight: 800, letterSpacing: '-0.02em' }}>6.4<span style={{ fontSize: 18, color: 'rgba(255,255,255,0.6)', marginLeft: 4 }}>%</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

function A_Features({ t }) {
  return (
    <div style={{ padding: '120px 48px', background: A.bg2 }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end', marginBottom: 56 }}>
          <div>
            <div style={{ fontSize: 12, color: A.blue, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>
              {t.features.eyebrow}
            </div>
            <h2 style={{ fontSize: 44, fontWeight: 800, margin: 0, color: A.navyDeep, lineHeight: 1.25, letterSpacing: '-0.02em' }}>
              {t.features.h2a}<br />
              <span style={{ color: A.blue }}>{t.features.h2b}</span>
            </h2>
          </div>
          <p style={{ fontSize: 16, color: A.inkSoft, lineHeight: 1.75, margin: 0 }}>{t.features.lede}</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {t.features.items.map((f, i) =>
          <div key={i} style={{ background: '#fff', padding: 28, minHeight: 260, borderRadius: 12, border: `1px solid ${A.line}` }}>
              <div style={{
              width: 40, height: 40, background: A.blueSoft, borderRadius: 8,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: A.blueDeep, fontSize: 14, fontWeight: 800,
              marginBottom: 20
            }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <h4 style={{ fontSize: 18, margin: '0 0 10px', color: A.navyDeep, fontWeight: 700 }}>
                {f.title}
              </h4>
              <p style={{ fontSize: 14, color: A.inkSoft, lineHeight: 1.7, margin: 0 }}>{f.body}</p>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function A_Flow({ t }) {
  return (
    <div style={{ padding: '120px 48px', background: A.navyDeep, color: '#fff' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{ fontSize: 12, color: '#93c5fd', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>
            {t.flow.eyebrow}
          </div>
          <h2 style={{ fontSize: 44, fontWeight: 800, margin: 0, lineHeight: 1.25, letterSpacing: '-0.02em' }}>
            {t.flow.h2}
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, position: 'relative' }}>
          {t.flow.steps.map((s, i) =>
          <div key={i} style={{
            padding: 28, background: 'rgba(255,255,255,0.04)', borderRadius: 12,
            border: '1px solid rgba(255,255,255,0.08)'
          }}>
              <div style={{
              fontSize: 56, fontWeight: 800,
              color: A.blue, marginBottom: 16, lineHeight: 1, letterSpacing: '-0.04em'
            }}>{String(i + 1).padStart(2, '0')}</div>
              <div style={{ fontSize: 11, color: '#93c5fd', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 8 }}>{s.tag}</div>
              <h4 style={{ fontSize: 18, margin: '0 0 10px', fontWeight: 700 }}>{s.title}</h4>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.72)', lineHeight: 1.7, margin: 0 }}>{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function A_Stats({ t }) {
  return (
    <div style={{ padding: '120px 48px', background: A.bg }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: `1px solid ${A.line}`, borderRadius: 16, overflow: 'hidden' }}>
        {t.stats.items.map((s, i) =>
        <div key={i} style={{
          padding: 48, textAlign: 'center',
          borderLeft: i ? `1px solid ${A.line}` : 0,
          background: '#fff'
        }}>
            <div style={{ fontSize: 80, fontWeight: 800, color: A.navyDeep, lineHeight: 1, letterSpacing: '-0.04em' }}>
              {s.num}<span style={{ fontSize: 32, color: A.blue, marginLeft: 4 }}>{s.unit}</span>
            </div>
            <div style={{ marginTop: 18, fontSize: 15, color: A.navyDeep, fontWeight: 700 }}>{s.label}</div>
            <div style={{ marginTop: 6, fontSize: 12, color: A.inkMuted }}>{s.note}</div>
          </div>
        )}
      </div>
    </div>);

}

function A_FAQ({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ padding: '120px 48px', background: A.bg2 }}>
      <div style={{ maxWidth: 920, margin: '0 auto' }}>
        <div style={{ marginBottom: 48, textAlign: 'center' }}>
          <div style={{ fontSize: 12, color: A.blue, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>
            {t.faq.eyebrow}
          </div>
          <h2 style={{ fontSize: 40, fontWeight: 800, margin: 0, color: A.navyDeep, letterSpacing: '-0.02em' }}>
            {t.faq.h2}
          </h2>
        </div>
        <div style={{ background: '#fff', borderRadius: 12, border: `1px solid ${A.line}`, overflow: 'hidden' }}>
          {t.faq.items.map((f, i) =>
          <div key={i} style={{ borderTop: i ? `1px solid ${A.lineSoft}` : 0 }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', textAlign: 'left', padding: '22px 28px',
              background: 'transparent', border: 0, cursor: 'pointer',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
              fontSize: 16, fontWeight: 700, color: A.navyDeep, fontFamily: 'inherit'
            }}>
                <span>{f.q}</span>
                <span style={{ color: A.blue, fontSize: 22, fontWeight: 400, flexShrink: 0, transition: 'transform 0.2s', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</span>
              </button>
              {open === i &&
            <div style={{ padding: '0 28px 22px', fontSize: 15, color: A.inkSoft, lineHeight: 1.75 }}>{f.a}</div>
            }
            </div>
          )}
        </div>
      </div>
    </div>);

}

function A_CTA({ t }) {
  const [form, setForm] = React.useState({ company: '', name: '', email: '', issue: '' });
  const [sent, setSent] = React.useState(false);
  const c = t.contact;

  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const valid = form.company.trim() && form.name.trim() && form.email.trim();

  const onSubmit = (e) => {
    e.preventDefault();
    if (!valid) return;
    // TODO: connect submission endpoint (e.g. Tally, Formspree, /api/contact)
    console.log('contact form submission', form);
    setSent(true);
  };

  const labelStyle = { fontSize: 13, fontWeight: 600, color: A.navyDeep, display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 };
  const reqBadge = (
    <span style={{ fontSize: 10, fontWeight: 700, color: '#b91c1c', background: '#fee2e2', padding: '2px 6px', borderRadius: 3, letterSpacing: '0.04em' }}>
      {c.required}
    </span>);

  const inputStyle = {
    width: '100%', padding: '12px 14px', fontSize: 14, fontFamily: 'inherit',
    color: A.ink, background: '#fff',
    border: `1px solid ${A.line}`, borderRadius: 8, outline: 'none',
    boxSizing: 'border-box', lineHeight: 1.5
  };

  return (
    <div id="contact" style={{ padding: '0 48px 120px', background: A.bg2 }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', background: A.navyDeep, color: '#fff', padding: '64px 56px', borderRadius: 16, position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -120, right: -120, width: 380, height: 380,
          background: `radial-gradient(circle, ${A.blue}55 0%, transparent 60%)`,
          pointerEvents: 'none'
        }} />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 56, alignItems: 'start' }}>
          <div>
            <div style={{ fontSize: 12, color: '#93c5fd', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>
              {c.eyebrow}
            </div>
            <h2 style={{ fontSize: 40, fontWeight: 800, margin: '0 0 16px', lineHeight: 1.2, letterSpacing: '-0.02em' }}>
              {c.h2a}<br />
              <span style={{ color: '#93c5fd' }}>{c.h2b}</span>
            </h2>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.78)', margin: 0, maxWidth: 460, lineHeight: 1.8 }}>{c.sub}</p>
          </div>

          <div style={{ background: '#fff', color: A.ink, borderRadius: 12, padding: 28, boxShadow: '0 24px 48px -16px rgba(6,24,58,0.5)' }}>
            {sent ?
            <div style={{ padding: '32px 8px', textAlign: 'center' }}>
                <div style={{
                width: 56, height: 56, borderRadius: 999, background: A.blueSoft,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 auto 18px', color: A.blue, fontSize: 26, fontWeight: 800
              }}>✓</div>
                <div style={{ fontSize: 18, fontWeight: 700, color: A.navyDeep, marginBottom: 8 }}>{c.successTitle}</div>
                <div style={{ fontSize: 14, color: A.inkSoft, lineHeight: 1.7, maxWidth: 360, margin: '0 auto' }}>{c.successBody}</div>
              </div> :

            <form onSubmit={onSubmit} noValidate>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
                  <div>
                    <label htmlFor="f-company" style={labelStyle}>{c.company} {reqBadge}</label>
                    <input id="f-company" type="text" required value={form.company} onChange={onChange('company')} placeholder={c.companyPh} style={inputStyle} />
                  </div>
                  <div>
                    <label htmlFor="f-name" style={labelStyle}>{c.name} {reqBadge}</label>
                    <input id="f-name" type="text" required value={form.name} onChange={onChange('name')} placeholder={c.namePh} style={inputStyle} />
                  </div>
                </div>
                <div style={{ marginBottom: 16 }}>
                  <label htmlFor="f-email" style={labelStyle}>{c.email} {reqBadge}</label>
                  <input id="f-email" type="email" required value={form.email} onChange={onChange('email')} placeholder={c.emailPh} style={inputStyle} />
                </div>
                <div style={{ marginBottom: 18 }}>
                  <label htmlFor="f-issue" style={labelStyle}>{c.issue}</label>
                  <textarea id="f-issue" value={form.issue} onChange={onChange('issue')} placeholder={c.issuePh}
                  rows={4} style={{ ...inputStyle, resize: 'vertical', minHeight: 110, fontFamily: 'inherit' }} />
                </div>
                <button type="submit" disabled={!valid} style={{
                width: '100%', background: valid ? A.navy : A.bg3, color: valid ? '#fff' : A.inkMuted,
                border: 0, padding: '14px 24px', fontSize: 15, fontWeight: 700,
                fontFamily: 'inherit', cursor: valid ? 'pointer' : 'not-allowed', borderRadius: 8,
                transition: 'background 0.15s'
              }}>
                  {c.submit}
                </button>
                <div style={{ marginTop: 14, fontSize: 11, color: A.inkMuted, lineHeight: 1.6, textAlign: 'center' }}>
                  {c.note}
                </div>
              </form>
            }
          </div>
        </div>
      </div>
    </div>);

}

function A_Footer({ t }) {
  return (
    <div style={{ background: '#fff', color: A.inkMuted, padding: '40px 48px', borderTop: `1px solid ${A.line}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 700, color: A.navyDeep, fontSize: 15 }}>
          <div style={{ width: 24, height: 24, background: A.navy, borderRadius: 5, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 800, fontSize: 11 }}>RA</div>
          {t.brand}
        </div>
        <div>{t.footer.copy}</div>
      </div>
    </div>);

}

const a_ja = {
  brand: 'RepAgent',
  nav: { features: '機能', flow: '導入フロー', cases: '事例', faq: 'FAQ', cta: '問い合わせる' },
  hero: {
    badge: '人材紹介・派遣エージェント様向け',
    h1a: '法人開拓のインサイドセールスを、',
    h1b: 'AIで自動化',
    h1c: '。',
    sub: 'クライアント企業の新規開拓を、AIエージェントが代行。求人ニーズを推定し、企業ごとにパーソナライズされたメッセージを自動作成・配信。返信率は最大8倍に。',
    ctaPrimary: '問い合わせる',
    ctaSecondary: '',
    b1: '初期費用ゼロ',
    b2: '最短2週間で稼働',
    b3: '人材業界専用設計',
    cardA: 'AIターゲット選定',
    live: 'Live',
    cardB: 'AIメッセージ生成',
    msg: {
      greet: '田中様',
      body1: '貴社が今期、ITエンジニア中途採用を50名規模で計画されていると伺いました。',
      body2: '弊社では同業界で',
      var1: '採用充足率180%',
      body3: 'の実績がございます。30分ほどお時間いただけませんでしょうか。',
      from: 'From: 〇〇人材紹介',
      tone: 'Tone: 丁寧 / B2B'
    }
  },
  logos: { label: 'Trusted by HR teams' },
  contact: {
    eyebrow: 'Contact',
    h2a: '人材業界向けに設計された、',
    h2b: 'ただひとつのAI。',
    sub: 'サービスや導入に関するご質問、デモのご依頼など、お気軽にお問い合わせください。2営業日以内にご返信いたします。',
    company: '会社名',
    companyPh: '株式会社サンプル',
    name: 'お名前',
    namePh: '山田 太郎',
    email: 'メールアドレス',
    emailPh: 'name@company.co.jp',
    issue: '現在の課題・ご相談内容',
    issuePh: '例）新規開拓の返信率が低迷している / コンサルタントの工数が足りない など',
    required: '必須',
    submit: '送信する',
    note: 'ご入力いただいた内容は、お問い合わせ対応の目的にのみ使用します。',
    successTitle: '送信しました',
    successBody: 'お問い合わせを受け付けました。2営業日以内に担当者よりご連絡いたします。'
  },
  problem: {
    eyebrow: 'Before & After',
    h2a: '工数の8割を使って、',
    h2b: '返信率1%未満。',
    before: '従来',
    beforeTitle: '人手によるアウトバウンド',
    beforeItems: [
    'リスト作成・調査に1社あたり15分',
    'パーソナライズ文面作成に追加で20分',
    'マルチチャネル配信が属人化',
    '返信が来ても初動が遅れる',
    '担当者離職で立ち上げ直し'],

    beforeMetric: '平均返信率',
    after: 'これから',
    afterTag: 'With AI',
    afterTitle: 'AIエージェント運用',
    afterItems: [
    '企業情報・求人ニーズをAIが自動収集',
    '1社1通の高精度パーソナライズ',
    '企業情報・求人ニーズをAIが自動収集',
    '返信は即SlackとCRMへ通知',
    '人が変わってもナレッジ蓄積'],

    afterMetric: '平均返信率'
  },
  features: {
    eyebrow: 'Features',
    h2a: '人材業界に',
    h2b: '最適化された設計。',
    lede: '一般的なセールスツールではなく、人材紹介・派遣会社のクライアント開拓に特化。求人ニーズの推定、業界用語の理解、配信タイミングの最適化までを一気通貫で。',
    items: [
    { title: '採用ニーズ推定エンジン', body: '求人媒体・プレスリリース・採用サイトを横断分析し、企業ごとの採用課題と充足度を推定。アプローチ優先順位を自動算出します。' },
    { title: 'パーソナライズ文面生成', body: '企業文化・採用背景・自社の得意領域をかけ合わせ、テンプレ感ゼロの一通を自動作成。トーンも貴社の文体に学習させます。' },
    { title: 'マルチチャネル配信', body: '求人媒体・プレスリリース・採用サイトを横断分析し、企業ごとの採用課題と充足度を推定。アプローチ優先順位を自動算出します。' },
    { title: '返信検知 & 即時通知', body: '返信内容を解析し、温度感をスコア化。Slack / Teams に即時通知され、貴社のコンサルタントが本来の業務に集中できます。' },
    { title: '採用ニーズ推定エンジン', body: '求人媒体・プレスリリース・採用サイトを横断分析し、企業ごとの採用課題と充足度を推定。アプローチ優先順位を自動算出します。' },
    { title: 'ガバナンス & ログ', body: '全送信文面の監査ログ、配信停止管理、特定電子メール法・GDPR準拠。エンタープライズ導入を前提に設計されています。' }]

  },
  flow: {
    eyebrow: 'How it works',
    h2: '4ステップで、本日から運用開始。',
    steps: [
    { tag: 'Day 1', title: 'ICP定義', body: '理想の取引先像をヒアリング。業種・規模・採用フェーズを定義し、ターゲットDBから候補を抽出します。' },
    { tag: 'Day 2-3', title: 'トーン学習', body: '貴社の過去メールや営業資料をAIに学習させ、文体・温度感・自社強みを把握します。' },
    { tag: 'Day 4-7', title: 'スモール配信', body: '50社限定でパイロット配信。返信率を計測し、ICPと文面をチューニングします。' },
    { tag: 'Week 2〜', title: 'スケール運用', body: '月間1,000〜10,000社規模の運用へ拡大。返信は貴社CRMに自動連携。' }]

  },
  stats: {
    items: [
    { num: '8', unit: '×', label: '返信率の最大向上', note: 'パイロット12社平均 / 従来比' },
    { num: '80', unit: '%', label: 'インサイドセールス工数削減', note: 'リスト〜配信〜返信検知' },
    { num: '14', unit: 'days', label: '稼働開始までの最短日数', note: 'ICP定義から本配信まで' }]

  },
  faq: {
    eyebrow: 'FAQ',
    h2: 'よくあるご質問',
    items: [
    { q: '既存の配信ツールやCRMと併用できますか？', a: 'はい。Salesforce、HubSpot、kintone、porters など主要CRMおよびSendGrid・Outreach.io等の配信基盤と双方向連携可能です。既存ワークフローを止めることなく、AIによる前段階の自動化のみを差し込む形で導入いただけます。' },
    { q: '迷惑メール扱いされない仕組みはありますか？', a: 'ドメイン認証（SPF/DKIM/DMARC）の設定支援、ウォームアップ運用、配信頻度の自動調整、ハードバウンス除外を標準搭載。さらに各企業ごとの文面パーソナライズにより、機械的送信と判定されにくい設計です。' },
    { q: '導入企業の規模感を教えてください。', a: '従業員10名規模のブティック型エージェントから、上場人材会社まで導入実績がございます。月間配信数は最小300社〜最大3万社まで対応可能です。' },
    { q: 'セキュリティ・コンプライアンスは？', a: 'ISO 27001、SOC 2 Type II相当の運用、特定電子メール法・個人情報保護法・GDPR準拠。全送信ログの監査機能、配信停止リクエストの自動処理、データ保持期間の設定をご提供します。' },
    { q: '料金プランは？', a: '月額固定型（配信数に応じた3プラン）と従量課金型をご用意。初期費用は無料、最低契約期間は3ヶ月です。詳細は資料請求またはお問い合わせください。' }]

  },
  cta: {
    h2a: '人材業界向けに設計された、',
    h2b: 'ただひとつのAI。',
    sub: '15分の打ち合わせで、貴社の現状アウトリーチを診断。導入後の想定返信率と工数削減幅を、無料でお見積もりします。',
    primary: '問い合わせる',
    secondary: ''
  },
  footer: { copy: '© 2026 RepAgent. All rights reserved.' }
};

const a_en = {
  brand: '[Service Name · TBD]',
  nav: { features: 'Features', flow: 'How it works', cases: 'Cases', faq: 'FAQ', cta: 'Contact us' },
  hero: {
    badge: 'For HR Agencies & Staffing',
    h1a: 'Inside sales for staffing & talent, ',
    h1b: 'automated by AI',
    h1c: '.',
    sub: 'Automate new client acquisition. AI infers each company\'s hiring needs, drafts a personalized message, and sends across email, LinkedIn, and phone — lifting reply rates up to 8×.',
    ctaPrimary: 'Contact us',
    ctaSecondary: '',
    b1: 'No setup fee',
    b2: 'Live in 2 weeks',
    b3: 'Built for HR firms',
    cardA: 'AI Targeting',
    live: 'Live',
    cardB: 'AI Drafting',
    msg: {
      greet: 'Hi Tanaka-san,',
      body1: 'I noticed your team is planning to hire 50 mid-career engineers this quarter.',
      body2: 'We\'ve helped peers in the same vertical reach ',
      var1: '180% fill rate',
      body3: '. Would 30 minutes to compare notes be useful?',
      from: 'From: HR Partners Inc.',
      tone: 'Tone: Polite · B2B'
    }
  },
  logos: { label: 'Trusted by HR teams' },
  contact: {
    eyebrow: 'Contact',
    h2a: 'The only AI',
    h2b: 'built for talent firms.',
    sub: 'Questions about the product, deployment, or want a quick demo? Drop us a note. We\u2019ll get back within 2 business days.',
    company: 'Company',
    companyPh: 'Acme Inc.',
    name: 'Your name',
    namePh: 'Jane Doe',
    email: 'Email',
    emailPh: 'name@company.com',
    issue: 'What can we help with?',
    issuePh: 'e.g. Outbound reply rates have plateaued / consultants are overstretched...',
    required: 'required',
    submit: 'Send message',
    note: 'We only use what you submit to follow up on this inquiry.',
    successTitle: 'Message sent',
    successBody: 'Thanks \u2014 we\u2019ve received your inquiry and will reply within 2 business days.'
  },
  problem: {
    eyebrow: 'Before & After',
    h2a: '80% of the work,',
    h2b: 'under 1% reply rate.',
    before: 'Before',
    beforeTitle: 'Manual outbound',
    beforeItems: [
    '15 min per company to research',
    'Another 20 min to draft personalized copy',
    'Multi-channel sending lives in heads',
    'Slow first response when replies arrive',
    'Hard reset every time someone leaves'],

    beforeMetric: 'Avg. reply rate',
    after: 'After',
    afterTag: 'With AI',
    afterTitle: 'AI agent workflow',
    afterItems: [
    'Hiring needs scraped & inferred automatically',
    'A high-fidelity message per company',
    'Unified email / LinkedIn / phone delivery',
    'Replies pushed to Slack & CRM instantly',
    'Knowledge stays — even when reps don\'t'],

    afterMetric: 'Avg. reply rate'
  },
  features: {
    eyebrow: 'Features',
    h2a: 'Engineered for',
    h2b: 'staffing & recruiting.',
    lede: 'Not a generic sales tool. Purpose-built for HR agencies and staffing firms — from inferring hiring needs to industry vocabulary to delivery timing.',
    items: [
    { title: 'Hiring-need inference engine', body: 'Cross-references job boards, press releases, and career pages to estimate each account\'s hiring pressure and fill rate.' },
    { title: 'Personalized drafting', body: 'Combines company culture, hiring context, and your firm\'s strengths to produce template-free copy that learns your house tone.' },
    { title: 'Multi-channel delivery', body: 'Email, LinkedIn, web forms, and phone — orchestrated. AI learns the windows when each account replies.' },
    { title: 'Reply detection & alerts', body: 'Parses incoming replies, scores intent, and pings Slack/Teams immediately so consultants stay focused on closing.' },
    { title: 'Native CRM integration', body: 'Two-way sync with Salesforce, HubSpot, kintone, porters and most ATS. Drop in beside your existing workflow.' },
    { title: 'Governance & audit', body: 'Full sending audit log, opt-out management, GDPR & APPI ready. Designed for enterprise procurement.' }]

  },
  flow: {
    eyebrow: 'How it works',
    h2: 'Live in four steps.',
    steps: [
    { tag: 'Day 1', title: 'Define ICP', body: 'Workshop your ideal client profile. Industry, size, hiring stage. We pull a candidate set from our database.' },
    { tag: 'Day 2–3', title: 'Tone training', body: 'AI learns from your past emails and decks to capture your firm\'s voice and differentiators.' },
    { tag: 'Day 4–7', title: 'Pilot send', body: '50-account pilot. Measure reply rates, tune ICP and copy.' },
    { tag: 'Week 2+', title: 'Scale', body: '1,000–10,000 accounts/month. Replies routed to your CRM, consultants focus on meetings.' }]

  },
  stats: {
    items: [
    { num: '8', unit: '×', label: 'Reply rate uplift', note: 'Across 12 pilot agencies vs. baseline' },
    { num: '80', unit: '%', label: 'Inside sales hours saved', note: 'List → send → reply detection' },
    { num: '14', unit: 'days', label: 'Time to live', note: 'From ICP workshop to first send' }]

  },
  faq: {
    eyebrow: 'FAQ',
    h2: 'Frequently asked',
    items: [
    { q: 'Does it work alongside our existing CRM and email tool?', a: 'Yes. Two-way sync with Salesforce, HubSpot, kintone, porters and most ATSs. Compatible with SendGrid, Outreach.io and similar delivery platforms — we slot in upstream of your current workflow.' },
    { q: 'How do you avoid spam classification?', a: 'Domain auth setup (SPF/DKIM/DMARC), warm-up automation, send frequency throttling, and hard-bounce filtering are standard. Per-account personalization keeps messages from looking machine-generated.' },
    { q: 'What size of firms run this?', a: 'From 10-person boutique agencies to listed staffing companies. Volumes range from 300/mo to 30,000/mo.' },
    { q: 'Security & compliance?', a: 'ISO 27001 / SOC 2 Type II equivalent practices, APPI, JP anti-spam law, and GDPR compliant. Full audit logs, automated opt-out, configurable retention.' },
    { q: 'Pricing?', a: 'Tiered monthly subscription based on volume, plus a usage-based plan. No setup fee. 3-month minimum. Reach out for a quote.' }]

  },
  cta: {
    h2a: 'The only AI',
    h2b: 'built for talent firms.',
    sub: 'A 15-minute call. We\'ll diagnose your current outbound and quote your projected reply lift and hours saved — at no cost.',
    primary: 'Contact us',
    secondary: ''
  },
  footer: { copy: '© 2026 Outreach Alternator. All rights reserved.' }
};

window.VariantA = VariantA;