// Inner pages — hi-fi (Work, Services, About, Contact) — i18n

function Work({ setPage }) {
  const t = useT();
  const apps = [
    { color: 'var(--gold)', tag: 'FLAGSHIP', tagClass: 'tag tag-flag', title: t('work.app1.title'), sub: t('work.app1.sub'), body: t('work.app1.body'), screen: <IncaverseScreen/>, metrics: [['170k', t('home.flagshipMetric1')], ['15k', t('home.flagshipMetric2')], ['1.5k', t('home.flagshipMetric3')]], href: 'https://t.me/incaverse_bot', web: 'https://incaverse.io', extra: [['S1 Tap2Earn', 'https://t.me/incaverse2d_bot'], ['S2 Chinchaysuyu', 'https://t.me/incaverse_bot']] },
    { color: 'var(--green)', tag: 'LIVE', tagClass: 'tag tag-live', title: t('work.app2.title'), sub: t('work.app2.sub'), body: t('work.app2.body'), screen: <ChipsyScreen/>, metrics: [['Low', 'CAC'], ['High', 'CONVERSION'], ['Strong', 'RETENTION']], href: 'https://t.me/chipsycasino_bot/play' },
    { color: 'var(--pink)', tag: 'LIVE', tagClass: 'tag tag-live', title: t('work.app3.title'), sub: t('work.app3.sub'), body: t('work.app3.body'), screen: <PlumpScreen/>, metrics: [['Live', 'STATUS'], ['LatAm', 'REGION'], ['Operator', 'CLIENT']], href: 'https://t.me/plumpcasino_bot/play' },
    { color: 'var(--violet)', tag: 'IN DEV', tagClass: 'tag tag-dev', title: t('work.app4.title'), sub: t('work.app4.sub'), body: t('work.app4.body'), screen: <SpinScreen/>, metrics: [['Q2 2026', 'LAUNCH'], ['Funnel', 'TYPE'], ['White-label', 'MODEL']], href: '#' },
  ];

  return (
    <div className="page">
      <Breadcrumbs setPage={setPage} current={t('crumb.work')}/>
      <section className="sec sec-after-crumbs">
        <div className="wrap">
          <Reveal>
            <div className="eyebrow">{t('work.eyebrow')}</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 130px)', marginTop: 20, maxWidth: 1000 }}>
              {t('work.title1')}<span className="u-accent">{t('work.title2')}</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-2)', maxWidth: 620, marginTop: 24 }}>
              {t('work.sub')}
            </p>
          </Reveal>
        </div>
      </section>

      <section className="sec-sm">
        <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
          {apps.map((a, i) => (
            <Reveal key={a.title} delay={i * 60}>
              <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
                <div className="grid" style={{ gridTemplateColumns: '260px 1fr', alignItems: 'stretch', gap: 0 }}>
                  <div style={{ padding: 32, background: 'linear-gradient(180deg, var(--ink-2), var(--ink-0))', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRight: '1px solid var(--line)' }}>
                    <div style={{ maxWidth: 180 }}>{a.screen}</div>
                  </div>
                  <div style={{ padding: 36 }}>
                    <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
                      <span className={a.tagClass}>{a.tag}</span>
                      <span className="tag">0{i+1} / 0{apps.length}</span>
                    </div>
                    <h3 className="display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', letterSpacing: '-0.03em' }}>{a.title}</h3>
                    <div className="mono" style={{ fontSize: 12, color: 'var(--text-3)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 }}>{a.sub}</div>
                    <p style={{ fontSize: 16, color: 'var(--text-2)', marginTop: 18, maxWidth: 560 }}>{a.body}</p>

                    <div className="grid g-3" style={{ gap: 24, marginTop: 28, padding: '20px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                      {a.metrics.map(([n, l]) => (
                        <div key={l}>
                          <div className="display" style={{ fontSize: 26, color: a.color, letterSpacing: '-0.02em' }}>{n}</div>
                          <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
                        </div>
                      ))}
                    </div>

                    <div style={{ display: 'flex', gap: 10, marginTop: 22, flexWrap: 'wrap' }}>
                      {a.web && <a className="btn btn-primary" href={a.web} target="_blank" rel="noopener">{t('work.visitSite')} <span className="chev">→</span></a>}
                      <a className="btn btn-ghost" href={a.href} target="_blank" rel="noopener">{a.tag === 'IN DEV' ? t('work.getNotified') : t('cta.openTelegram')}</a>
                      {a.extra && a.extra.map(([label, url]) => (
                        <a key={label} className="btn btn-ghost" href={url} target="_blank" rel="noopener" style={{ fontSize: 13 }}>{label}</a>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div className="card" style={{ padding: 48, textAlign: 'center', background: 'radial-gradient(ellipse at 50% 50%, rgba(255,201,60,0.1), var(--ink-3))' }}>
            <h3 className="display" style={{ fontSize: 'clamp(32px, 5vw, 56px)' }}>{t('work.ctaTitle')}</h3>
            <a className="btn btn-primary btn-lg" href="https://calendly.com/evveland" target="_blank" rel="noopener" style={{ marginTop: 28, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>{t('cta.discoveryCall')} <span className="chev">→</span></a>
          </div>
        </div>
      </section>
    </div>
  );
}

function Services({ setPage }) {
  const t = useT();
  const svs = [
    [t('services.s1.name'), t('services.s1.desc'), ['Product design', 'Engineering', 'Telegram SDK', 'Infra']],
    [t('services.s2.name'), t('services.s2.desc'), ['Core loop', 'Economy', 'Retention hooks', 'Playtesting']],
    [t('services.s3.name'), t('services.s3.desc'), ['Wallet UX', 'Token design', 'Contracts', 'On-chain infra']],
    [t('services.s4.name'), t('services.s4.desc'), ['Paid media', 'Influencer / KOL', 'Viral loops', 'Attribution']],
    [t('services.s5.name'), t('services.s5.desc'), ['Community ops', 'Events', 'Moderation', 'Support']],
    [t('services.s6.name'), t('services.s6.desc'), ['Audits', 'Positioning', 'Roadmaps', 'Workshops']],
    [t('services.s7.name'), t('services.s7.desc'), ['Roadmap', 'A/B testing', 'Analytics', 'Release cycles']],
  ];
  return (
    <div className="page">
      <Breadcrumbs setPage={setPage} current={t('crumb.services')}/>
      <section className="sec sec-after-crumbs">
        <div className="wrap">
          <Reveal>
            <div className="eyebrow">{t('services.eyebrow')}</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 130px)', marginTop: 20, maxWidth: 1100 }}>
              {t('services.title1')}<span className="u-accent">{t('services.title2')}</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-2)', maxWidth: 640, marginTop: 24 }}>
              {t('services.sub')}
            </p>
          </Reveal>
        </div>
      </section>

      <section className="sec-sm">
        <div className="wrap">
          {svs.map(([name, desc, tags], i) => (
            <Reveal key={name} delay={i * 40}>
              <div className="card card-hover" style={{ padding: '36px 32px', marginBottom: 14 }}>
                <div className="grid" style={{ gridTemplateColumns: '80px 1fr 1.5fr 1fr', gap: 32, alignItems: 'center' }}>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', letterSpacing: '0.14em' }}>0{i+1}</div>
                  <h3 className="display" style={{ fontSize: 'clamp(22px, 3vw, 32px)', letterSpacing: '-0.02em' }}>{name}</h3>
                  <p style={{ fontSize: 15, color: 'var(--text-2)', margin: 0 }}>{desc}</p>
                  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                    {tags.map((tg) => <span key={tg} className="tag">{tg}</span>)}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div className="card" style={{ padding: 48, background: 'linear-gradient(135deg, var(--ink-3), var(--ink-2))' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
              <div>
                <div className="eyebrow">{t('services.notSureEyebrow')}</div>
                <h3 className="display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', marginTop: 12 }}>{t('services.notSureTitle')}</h3>
              </div>
              <button className="btn btn-primary btn-lg" onClick={() => setPage('contact')}>{t('cta.bookACall')} <span className="chev">→</span></button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function About({ setPage }) {
  const t = useT();
  return (
    <div className="page">
      <Breadcrumbs setPage={setPage} current={t('crumb.about')}/>
      <section className="sec sec-after-crumbs">
        <div className="wrap">
          <Reveal>
            <div className="eyebrow">{t('about.eyebrow')}</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 130px)', marginTop: 20, maxWidth: 1100 }}>
              {t('about.title1')}<span className="u-accent">{t('about.title2')}</span><br/>{t('about.title3')}
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-2)', maxWidth: 680, marginTop: 28 }}>
              {t('about.sub')}
            </p>
          </Reveal>
        </div>
      </section>

      <section className="sec-sm">
        <div className="wrap">
          <div className="grid g-3">
            {[
              [t('about.pillar1.title'), t('about.pillar1.body')],
              [t('about.pillar2.title'), t('about.pillar2.body')],
              [t('about.pillar3.title'), t('about.pillar3.body')],
            ].map(([tt, b], i) => (
              <Reveal key={tt} delay={i * 80}>
                <div className="card" style={{ padding: 32, minHeight: 220 }}>
                  <h4 className="display" style={{ fontSize: 22, letterSpacing: '-0.02em' }}>{tt}</h4>
                  <p style={{ color: 'var(--text-2)', fontSize: 15, marginTop: 12 }}>{b}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 32 }}>{t('about.team')}</div>
          <div className="grid g-4">
            {[['Founder', 'CEO', 'RAFAEL BONNELLY', 'assets/rafael-bonnelly.png?v=3'], ['Head of Growth', 'Growth', 'IVO CADENAS', 'assets/ivo.png?v=3'], ['CTO', 'Eng', 'JUAN SANCHEZ', 'assets/juan.png?v=3'], ['Game Dev Lead', 'Eng', 'DANIEL MORENO', 'assets/daniel.png?v=2'], ['Community Lead', 'Community', 'ROHIT DUBEY', 'assets/rohit.png?v=2'], ['Front-end', 'UI/UX', 'AMELIA VERGARAY', 'assets/amelia.png?v=3'], ['Senior AI Lead', 'Web3', 'SUNDAY MGBOGU', 'assets/sunday.png']].map(([r, dept, name, photo], i) => (
              <Reveal key={i} delay={i * 40}>
                <div className="card card-hover" style={{ padding: 0, overflow: 'hidden' }}>
                  <div style={{ aspectRatio: '3/4', background: photo ? '#0c0e15' : `linear-gradient(135deg, hsl(${i*45}, 20%, 18%), hsl(${i*45+20}, 25%, 10%))`, display: 'flex', alignItems: 'flex-end', padding: 16, position: 'relative', overflow: 'hidden' }}>
                    {photo && <img src={`${photo}?v=3`} alt={name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}/>}
                  </div>
                  <div style={{ padding: 16 }}>
                    <div className="display" style={{ fontSize: 16, letterSpacing: '-0.01em' }}>{name}</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{r} · {dept}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="sec-sm">
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 32 }}>{t('about.partners')}</div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {[
              { name: 'Chipsy', src: 'assets/chipsy-logo.jpeg', bg: 'white' },
              { name: 'Plump', src: 'assets/plump-logo.jpg', bg: 'white' },
              { name: 'Addressable LTD', src: 'assets/addressable.png', bg: 'white' },
              { name: 'Ingenia LatAm', src: 'assets/ingenia.jpeg', bg: 'white' },
              { name: 'Mundial Group', src: 'assets/mundial.jpeg', bg: 'white' }
            ].map((p) => (
              <div key={p.name} className="card" style={{ padding: '24px 14px', textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 120 }}>
                <div style={{ background: p.bg === 'dark' ? '#0a0a0a' : '#fff', padding: '10px 14px', borderRadius: 10, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: 64, width: '100%', border: p.bg === 'dark' ? '1px solid rgba(255,255,255,0.08)' : 'none' }}>
                  <img src={p.src} alt={p.name} style={{ maxHeight: 44, maxWidth: '100%', objectFit: 'contain', display: 'block' }}/>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28, flexWrap: 'wrap' }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{t('about.backedBy')}</span>
            <div style={{ background: '#fff', padding: '8px 14px', borderRadius: 8, display: 'inline-flex', alignItems: 'center', height: 48 }}>
              <img src="assets/ministerio-cultura.png" alt="Ministerio de Cultura — Gobierno de España" style={{ height: 30, display: 'block' }}/>
            </div>
            <div style={{ background: '#0a0a0a', padding: '10px 18px', borderRadius: 8, display: 'inline-flex', alignItems: 'center', height: 72, border: '1px solid rgba(255,255,255,0.08)' }}>
              <img src="assets/madrid-in-game.jpg" alt="Madrid in Game" style={{ height: 52, display: 'block' }}/>
            </div>
          </div>
        </div>
      </section>

      <section className="sec">
        <div className="wrap">
          <div className="card" style={{ padding: 48, textAlign: 'center', background: 'radial-gradient(ellipse at 50% 50%, rgba(124,92,255,0.12), var(--ink-3))' }}>
            <h3 className="display" style={{ fontSize: 'clamp(32px, 5vw, 56px)' }}>{t('about.ctaTitle')}</h3>
            <button className="btn btn-primary btn-lg" onClick={() => setPage('contact')} style={{ marginTop: 28 }}>{t('cta.getInTouch')} <span className="chev">→</span></button>
          </div>
        </div>
      </section>
    </div>
  );
}

function Contact({ setPage }) {
  const t = useT();
  return (
    <div className="page">
      <Breadcrumbs setPage={setPage} current={t('crumb.contact')}/>
      <section className="sec sec-after-crumbs">
        <div className="wrap">
          <Reveal>
            <div className="eyebrow">{t('contact.eyebrow')}</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 130px)', marginTop: 20, maxWidth: 1100 }}>
              {t('contact.title1')}<span className="u-accent">{t('contact.title2')}</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-2)', maxWidth: 620, marginTop: 24 }}>
              {t('contact.sub')}
            </p>
          </Reveal>
        </div>
      </section>

      <section className="sec-sm">
        <div className="wrap">
          <div className="grid g-2" style={{ gap: 32 }}>
            <Reveal>
              <div className="card" style={{ padding: 36, background: 'linear-gradient(135deg, rgba(255,201,60,0.08), var(--ink-3))', borderColor: 'rgba(255,201,60,0.3)' }}>
                <span className="tag tag-flag">{t('contact.tagPrimary')}</span>
                <h3 className="display" style={{ fontSize: 32, marginTop: 14, letterSpacing: '-0.02em' }}>{t('contact.bookTitle')}</h3>
                <p style={{ color: 'var(--text-2)', fontSize: 15, marginTop: 10 }}>{t('contact.bookSub')}</p>
                <div style={{ marginTop: 24, aspectRatio: '4/3', background: 'var(--ink-2)', borderRadius: 12, border: '1px solid var(--line-2)', overflow: 'hidden' }}>
                  <iframe src="https://calendly.com/evveland?background_color=0c0e15&text_color=e8eaf0&primary_color=FFC93C" style={{ width: '100%', height: '100%', border: 'none', display: 'block', colorScheme: 'normal' }} title="Book a call with Evveland" loading="lazy"/>
                </div>
              </div>
            </Reveal>

            <Reveal delay={80}>
              <BriefForm/>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="sec-sm">
        <div className="wrap">
          <div className="grid g-3">
            {[
              [t('contact.colEmail'), 'info@evveland.com', 'mailto:info@evveland.com'],
              [t('contact.colTelegram'), 't.me/evveland', 'https://t.me/evveland'],
              [t('contact.colSocial'), '@evveland_web3', '#'],
            ].map(([l, v, h]) => (
              <a key={l} href={h} className="card card-hover" style={{ padding: 28, textDecoration: 'none' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{l}</div>
                <div className="display" style={{ fontSize: 22, marginTop: 10, color: 'var(--text)' }}>{v} →</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ----- Send a brief — mailto-based form (no backend required) -----
function BriefForm() {
  const t = useT();
  const TARGET = 'info@evveland.com';
  const BUDGETS = ['—', '< $10k', '$10k – $25k', '$25k – $50k', '$50k – $100k', '$100k+', "Not sure yet"];

  const [data, setData] = React.useState({
    name: '', company: '', email: '', audience: '', budget: '', pitch: '',
  });
  const [touched, setTouched] = React.useState({});
  const [status, setStatus] = React.useState('idle');

  const set = (k) => (e) => setData({ ...data, [k]: e.target.value });
  const blur = (k) => () => setTouched({ ...touched, [k]: true });

  const errors = {
    name: !data.name.trim() ? t('brief.errRequired') : null,
    email: !data.email.trim() ? t('brief.errRequired') : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email) ? t('brief.errEmail') : null,
    pitch: !data.pitch.trim() ? t('brief.errPitch') : null,
  };
  const valid = !errors.name && !errors.email && !errors.pitch;

  const submit = (e) => {
    e.preventDefault();
    setTouched({ name: true, email: true, pitch: true });
    if (!valid) return;

    const subject = `${t('brief.subjectPrefix')} ${data.name}${data.company ? ` (${data.company})` : ''}`;
    const lines = [
      `${t('brief.name')}: ${data.name}`,
      `${t('brief.company')}: ${data.company || '—'}`,
      `${t('brief.email')}: ${data.email}`,
      `${t('brief.audience')}: ${data.audience || '—'}`,
      `${t('brief.budget')}: ${data.budget || '—'}`,
      '',
      t('brief.bodyHeaderPitch'),
      data.pitch,
      '',
      t('brief.bodyFooter'),
    ];
    const body = lines.join('\n');
    const url = `mailto:${TARGET}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;

    try {
      window.location.href = url;
      setStatus('sent');
    } catch (err) {
      setStatus('error');
    }
  };

  const inputBase = {
    display: 'block', width: '100%', marginTop: 6, padding: '10px 0',
    background: 'transparent', border: 'none', borderBottom: '1px solid var(--line-2)',
    color: 'var(--text)', fontFamily: 'Inter', fontSize: 15, outline: 'none',
  };
  const labelStyle = { fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.14em', textTransform: 'uppercase' };
  const errStyle = { fontSize: 11, color: '#FF5C7A', marginTop: 4, fontFamily: 'JetBrains Mono' };

  const Field = ({ id, label, type = 'text', required, value, onChange, onBlur, error, placeholder = '—' }) => (
    <div>
      <label className="mono" htmlFor={id} style={labelStyle}>
        {label}{required && <span style={{ color: 'var(--accent)', marginLeft: 4 }}>*</span>}
      </label>
      <input id={id} type={type} value={value} onChange={onChange} onBlur={onBlur} placeholder={placeholder}
        style={{ ...inputBase, borderBottomColor: error ? '#FF5C7A' : 'var(--line-2)' }}/>
      {error && <div style={errStyle}>{error}</div>}
    </div>
  );

  if (status === 'sent') {
    return (
      <div className="card" style={{ padding: 36, borderColor: 'rgba(36,225,164,0.3)', background: 'linear-gradient(180deg, rgba(36,225,164,0.05), var(--ink-3))' }}>
        <span className="tag" style={{ background: 'rgba(36,225,164,0.14)', color: 'var(--green)', borderColor: 'rgba(36,225,164,0.4)' }}>{t('brief.sentTag')}</span>
        <h3 className="display" style={{ fontSize: 28, marginTop: 14, letterSpacing: '-0.02em' }}>{t('brief.sentTitle')}</h3>
        <p style={{ color: 'var(--text-2)', fontSize: 15, marginTop: 12, maxWidth: 460 }}>
          {t('brief.sentBody1')}<strong style={{ color: 'var(--text)' }}>{TARGET}</strong>{t('brief.sentBody2')}
        </p>
        <p style={{ color: 'var(--text-3)', fontSize: 13, marginTop: 16 }}>
          {t('brief.sentFallback')}
          <a href={`mailto:${TARGET}`} style={{ color: 'var(--accent)' }}>{t('brief.sentFallbackLink')}</a>
        </p>
        <button className="btn btn-ghost" style={{ marginTop: 20 }} onClick={() => { setStatus('idle'); setData({ name: '', company: '', email: '', audience: '', budget: '', pitch: '' }); setTouched({}); }}>
          {t('brief.sendAnother')}
        </button>
      </div>
    );
  }

  return (
    <form className="card" style={{ padding: 36 }} onSubmit={submit} noValidate>
      <span className="tag">{t('brief.tag')}</span>
      <h3 className="display" style={{ fontSize: 32, marginTop: 14, letterSpacing: '-0.02em' }}>{t('brief.title')}</h3>
      <p style={{ color: 'var(--text-3)', fontSize: 13, marginTop: 8 }}>
        {t('brief.desc')}<span className="mono" style={{ color: 'var(--text-2)' }}>{TARGET}</span>{t('brief.descTail')}
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 24 }}>
        <Field id="bf-name" label={t('brief.name')} required value={data.name} onChange={set('name')} onBlur={blur('name')} error={touched.name && errors.name}/>
        <Field id="bf-company" label={t('brief.company')} value={data.company} onChange={set('company')} onBlur={blur('company')}/>
        <Field id="bf-email" label={t('brief.email')} type="email" required value={data.email} onChange={set('email')} onBlur={blur('email')} error={touched.email && errors.email} placeholder={t('brief.emailPlaceholder')}/>
        <Field id="bf-audience" label={t('brief.audience')} value={data.audience} onChange={set('audience')} onBlur={blur('audience')} placeholder={t('brief.audiencePlaceholder')}/>

        <div>
          <label className="mono" htmlFor="bf-budget" style={labelStyle}>{t('brief.budget')}</label>
          <select id="bf-budget" value={data.budget} onChange={set('budget')}
            style={{ ...inputBase, appearance: 'none', cursor: 'pointer', backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237B819A' stroke-width='1.5' fill='none'/></svg>\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 4px center', paddingRight: 24 }}>
            {BUDGETS.map(b => <option key={b} value={b === '—' ? '' : b} style={{ background: 'var(--ink-2)' }}>{b}</option>)}
          </select>
        </div>

        <div>
          <label className="mono" htmlFor="bf-pitch" style={labelStyle}>
            {t('brief.pitch')}<span style={{ color: 'var(--accent)', marginLeft: 4 }}>*</span>
          </label>
          <textarea id="bf-pitch" rows="4" value={data.pitch} onChange={set('pitch')} onBlur={blur('pitch')}
            placeholder={t('brief.pitchPlaceholder')}
            style={{ display: 'block', width: '100%', marginTop: 6, padding: 12, background: 'var(--ink-2)', border: `1px solid ${touched.pitch && errors.pitch ? '#FF5C7A' : 'var(--line)'}`, borderRadius: 8, color: 'var(--text)', fontFamily: 'Inter', fontSize: 15, outline: 'none', resize: 'vertical' }}/>
          {touched.pitch && errors.pitch && <div style={errStyle}>{errors.pitch}</div>}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 4, flexWrap: 'wrap' }}>
          <button type="submit" className="btn btn-primary">{t('brief.send')} <span className="chev">→</span></button>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.12em' }}>
            {t('brief.required')}
          </span>
        </div>
      </div>
    </form>
  );
}

Object.assign(window, { Work, Services, About, Contact, BriefForm });