/* Page 5 — Section 08: Contact (#contact, black) + Footer. Bilingual.
   Form mechanics unchanged (mailto + analytics); copy/labels come from the dict. */

const fieldStyle = { background:'transparent', border:'none', borderBottom:'1px solid rgba(245,241,232,.3)', padding:'14px 2px', fontFamily:'var(--f-body)', fontSize:16, color:'var(--cream)', outline:'none', width:'100%' };

function handleContactFormSubmit(event) {
  event.preventDefault();
  const form = event.currentTarget;
  const data = new FormData(form);
  const name = String(data.get('name') || '').trim();
  const email = String(data.get('email') || '').trim();
  const company = String(data.get('company') || '').trim();
  const message = String(data.get('message') || '').trim();
  const leadId = window.avaGetLeadId?.() || '';

  window.avaTrack?.('contact_form_submit', {
    lead_id: leadId,
    has_company: Boolean(company),
    message_length: message.length,
  });

  const fields = [
    `Name: ${name}`,
    `Email: ${email}`,
    company ? `Company / role: ${company}` : '',
    '',
    'Project request:',
    message,
  ].filter(Boolean).join('\n');

  const mailto = window.avaBuildMailto
    ? window.avaBuildMailto('AVASOLUTIONS project request', 'Hello AVASOLUTIONS team,', fields)
    : `mailto:hello@avasolutions.studio?subject=${encodeURIComponent('AVASOLUTIONS project request')}&body=${encodeURIComponent(fields)}`;

  let alertMsg = "Thanks — your email app should open with the project request and attribution context.";
  try { const lang = localStorage.getItem('ava_lang') || 'en'; alertMsg = (window.T?.[lang] || window.T?.en)?.form?.alert || alertMsg; } catch {}

  window.location.href = mailto;
  setTimeout(() => alert(alertMsg), 250);
}

function Page5() {
  const { L } = useLang();
  const t = L.contact;
  const fr = L.form;
  return (
    <>
      <section id="contact" className="cream-on-black" style={{ padding:'140px 0 100px' }}>
        <div className="wrap">
          <div className="page-chapter" style={{ borderColor:'var(--line-cream)' }}><span>{t.chapter.left}</span><span>{t.chapter.right}</span></div>

          <Reveal>
            <h2 className="display display-xl" style={{ marginTop:64 }}>
              <span style={{ display:'block' }}>{t.title.line1}</span>
              <span className="ital" style={{ display:'block', textTransform:'none', fontSize:'1.2em', margin:'-.18em 0 -.05em' }}>{t.title.ital}</span>
              <span style={{ display:'inline-block', background:'var(--yellow)', color:'var(--black)', padding:'0 18px 6px' }}>{t.title.accent}</span>
            </h2>
          </Reveal>
          <div style={{ marginTop:36, display:'grid', gap:18, maxWidth:600 }}>
            {t.body.map((p,i)=>(
              <Reveal key={i} delay={120+i*80} className="body-lg text-wrap-pretty" style={{ color:'var(--muted-cream)' }}>{p}</Reveal>
            ))}
          </div>

          <Reveal delay={170} className="p5-reassure">
            <span className="mono">{t.reassure}</span>
          </Reveal>

          <Reveal delay={200} className="p5-actions">
            <a href="mailto:hello@avasolutions.studio" className="btn btn--yellow"><span>hello@avasolutions.studio</span></a>
            <a href="https://t.me/Toros_AvaSol_bot" onClick={(e)=>{ e.preventDefault(); window.avaOpenTelegram?.('contact_cta'); }} className="btn" style={{ border:'1px solid var(--cream)', color:'var(--cream)' }}><span>Toros · Telegram</span></a>
          </Reveal>

          <Reveal delay={230} className="p5-risk">
            {t.risk.map((r,i)=>(<span key={i} className="p5-risk__item mono">{r}</span>))}
          </Reveal>

          <div className="p5-contact">
            <div>
              <div className="h-label" style={{ color:'var(--muted-cream)' }}>{t.orDrop}</div>
              <div className="display display-md" style={{ marginTop:12, fontSize:'clamp(22px,2.4vw,36px)', color:'var(--cream)' }}>{t.prompt}</div>
              <div className="mono" style={{ marginTop:24, opacity:.55, color:'var(--cream)' }}>{t.promise}</div>
            </div>
            <form onSubmit={handleContactFormSubmit} style={{ display:'flex', flexDirection:'column', gap:18 }}>
              <div className="p5-form-row">
                <input required name="name" autoComplete="name" aria-label={fr.name} placeholder={fr.name} style={fieldStyle} />
                <input required name="email" type="email" autoComplete="email" aria-label={fr.email} placeholder={fr.email} style={fieldStyle} />
              </div>
              <input name="company" autoComplete="organization-title" aria-label={fr.company} placeholder={fr.company} style={fieldStyle} />
              <textarea required name="message" aria-label={fr.message} placeholder={fr.message} rows={4} style={{...fieldStyle, resize:'vertical', paddingTop:16}} />
              <button type="submit" className="btn btn--yellow" style={{ alignSelf:'flex-start', marginTop:8 }}>
                <span>{fr.submit}</span>
              </button>
            </form>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

window.Page5 = Page5;