/* Pegue aquí el endpoint de Formspree (https://formspree.io/f/XXXXXXXX).
   Mientras esté vacío, el formulario abre el correo del usuario como respaldo. */
const FORM_ENDPOINT = 'https://formspree.io/f/xwlkebpk';

function Contact({ Button, Input, Select, Icon, NavBar, Footer, onNav, t }) {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState('');
  const [fallback, setFallback] = React.useState('');
  const c = t.contact;
  const empty = { name: '', email: '', service: '', message: '' };
  const [form, setForm] = React.useState(empty);
  const set = (k) => (e) => { setForm((f) => Object.assign({}, f, { [k]: e.target.value })); setError(''); setFallback(''); };
  const submit = async () => {
    const name = form.name.trim(), email = form.email.trim(), message = form.message.trim();
    if (!name || !email || !message) { setError(c.errRequired); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) { setError(c.errEmail); return; }
    const service = form.service || c.serviceOptions[0];
    if (!FORM_ENDPOINT) {
      const body = encodeURIComponent(name + ' <' + email + '>\n' + c.service + ': ' + service + '\n\n' + message);
      location.href = 'mailto:sales@canaangroupsolutions.com?subject=' + encodeURIComponent('Web — ' + name) + '&body=' + body;
      setSent(true); setForm(empty);
      return;
    }
    setSending(true); setError(''); setFallback('');
    const fd = new FormData();
    fd.append('name', name);
    fd.append('email', email);
    fd.append('_replyto', email);
    fd.append('service', service);
    fd.append('message', message);
    fd.append('_subject', 'Web — ' + name);
    try {
      const res = await fetch(FORM_ENDPOINT, { method: 'POST', headers: { Accept: 'application/json' }, body: fd });
      let data = null;
      try { data = await res.json(); } catch (e) {}
      if (!res.ok || (data && data.ok === false)) {
        const detail = (data && (data.error || (data.errors && data.errors.map((x) => x.message).join(', ')))) || ('HTTP ' + res.status);
        console.error('[contacto] Formspree rechazó el envío:', res.status, data);
        throw new Error(detail);
      }
      setSent(true); setForm(empty);
    } catch (err) {
      console.error('[contacto] error de envío:', err);
      setError((c.errSend || 'No se pudo enviar.') + ' (' + (err && err.message ? err.message : 'red') + ')');
      setFallback('mailto:sales@canaangroupsolutions.com?subject=' + encodeURIComponent('Web — ' + name) + '&body=' + encodeURIComponent(name + ' <' + email + '>\n' + c.service + ': ' + service + '\n\n' + message));
    } finally {
      setSending(false);
    }
  };
  const tileMeta = [
    { icon: 'phone', lines: ['+1 (786) 709-7143', '+1 (754) 297-9520'], bg: 'tile-bg-phone.png' },
    { icon: 'mail', lines: ['sales@canaangroupsolutions.com'], bg: 'tile-bg-mail.png' },
    { icon: 'pin', lines: ['13925 SW 140th St', 'Miami, FL 33186'], bg: 'tile-bg-office.png' },
  ];
  const socials = [
    { icon: 'instagram', handle: 'canaan.innovations' },
    { icon: 'facebook', handle: 'Canaan Innovations' },
  ];
  return (
    <div style={{ fontFamily: 'var(--font-body)', background: '#fff' }}>
      <NavBar
        logo={<img src="./assets/logo-primary.jpg" style={{ height: 46, borderRadius: 8, display: 'block' }} />}
        links={t.nav}
        active={t.nav[3]}
        onNavigate={(l) => onNav && onNav(t.navMap[l])}
        cta={<Button size="sm" onClick={() => onNav && onNav('contact')}>{t.cta}</Button>}
        topBar={<React.Fragment><span>+1 (786) 709-7143</span><span>+1 (754) 297-9520</span><span>sales@canaangroupsolutions.com</span></React.Fragment>}
      />

      <section style={{ position: 'relative', background: 'var(--gradient-deep)', overflow: 'hidden' }}>
        <div data-anim="net" style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/bg-tech-network.png)', backgroundSize: 'cover', backgroundPosition: 'center', opacity: .5, mixBlendMode: 'screen', pointerEvents: 'none', willChange: 'transform' }} />
        <div data-anim="net-pulse" style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/bg-tech-network.png)', backgroundSize: 'cover', backgroundPosition: 'center', transform: 'scaleX(-1)', mixBlendMode: 'screen', pointerEvents: 'none', willChange: 'transform, opacity' }} />
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
          <div data-anim="sweep" style={{ position: 'absolute', top: 0, bottom: 0, width: '28%', background: 'linear-gradient(90deg, transparent, rgba(120,190,240,.10), transparent)', willChange: 'transform' }} />
        </div>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/pattern-circuit-lines.png)', backgroundSize: '65% auto', backgroundPosition: 'left top', backgroundRepeat: 'no-repeat', opacity: .9 }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(33px, 4.9vw, 64px) var(--container-pad) clamp(44px, 6.5vw, 84px)', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 420px', gap: 56, alignItems: 'center' }} data-grid="hero">
          <div style={{ color: '#fff', paddingTop: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <span style={{ width: 34, height: 2, background: 'var(--brand-accent-light)' }} />
              <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--brand-accent-light)' }}>{t.kickerContact}</span>
            </div>
            <h1 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 800, lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-tight)', margin: '0 0 16px', maxWidth: 460 }}>{c.h1}</h1>
            <p style={{ fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.82)', lineHeight: 'var(--lh-normal)', margin: '0 0 28px', maxWidth: 420 }}>{c.sub}</p>
            <img src="./assets/photo-contact-us.jpeg" alt={c.photoAlt} style={{ width: '70%', display: 'block', aspectRatio: '1 / 1', objectFit: 'cover', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)' }} />
          </div>
          <div style={{ background: '#fff', borderRadius: 'var(--radius-lg)', padding: 'clamp(20px, 5vw, 36px)', boxShadow: 'var(--shadow-lg)' }}>
            <h2 style={{ fontSize: 'var(--fs-display-sm)', fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 6px', letterSpacing: 'var(--ls-tight)' }}>{c.formTitle}</h2>
            <p style={{ color: 'var(--text-secondary)', fontSize: 14.5, margin: '0 0 24px' }}>{c.formSub}</p>
            {sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--brand-primary)', color: '#fff', display: 'grid', placeItems: 'center' }}>
                  <Icon name="check" size={26} strokeWidth={2.2} />
                </div>
                <p style={{ color: 'var(--text-primary)', fontWeight: 600, margin: 0 }}>{c.thanks}</p>
                <p style={{ color: 'var(--text-secondary)', fontSize: 14, margin: 0 }}>{c.thanksSub}</p>
                <Button variant="ghost" size="sm" onClick={() => setSent(false)}>{c.again}</Button>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <Input label={c.name} placeholder={c.namePh} value={form.name} onChange={set('name')} />
                <Input label={c.email} placeholder={c.emailPh} type="email" value={form.email} onChange={set('email')} />
                <Select label={c.service} options={c.serviceOptions} value={form.service || c.serviceOptions[0]} onChange={set('service')} />
                <Input label={c.message} placeholder={c.messagePh} multiline value={form.message} onChange={set('message')} />
                {error && <p role="alert" style={{ margin: 0, fontSize: 13.5, fontWeight: 600, color: '#B4232A', background: '#FDECEC', border: '1px solid #F3C7C7', borderRadius: 'var(--radius-sm)', padding: '10px 12px' }}>{error}</p>}
                {fallback && <a href={fallback} style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--brand-primary)' }}>Enviar por correo directamente →</a>}
                <Button onClick={submit}>{sending ? c.sending : c.send}</Button>
                <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>{c.consent}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section style={{ padding: 'clamp(33px, 4.9vw, 64px) var(--container-pad)', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 20 }} data-grid="tiles">
          {c.tiles.map((tile, i) => (
            <div key={tile.label} style={{ position: 'relative', overflow: 'hidden', minHeight: 210, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'clamp(14px, 2.0vw, 26px) clamp(12px, 1.8vw, 24px)', display: 'flex', flexDirection: 'column', gap: 12, boxShadow: 'var(--shadow-sm)', background: '#fff' }}>
              <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '66%', backgroundImage: 'url(./assets/' + tileMeta[i].bg + ')', backgroundSize: 'cover', backgroundPosition: 'right center', maskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 42%, #000 100%)', WebkitMaskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 42%, #000 100%)', pointerEvents: 'none' }} />
              <div style={{ position: 'relative', width: 48, height: 48, borderRadius: 12, background: 'var(--surface-alt)', color: 'var(--brand-primary)', display: 'grid', placeItems: 'center' }}>
                <Icon name={tileMeta[i].icon} size={24} />
              </div>
              <span style={{ position: 'relative', fontSize: 11.5, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{tile.label}</span>
              <div style={{ position: 'relative', maxWidth: '78%' }}>
                {tileMeta[i].lines.map((l, j) => <div key={j} style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.6, overflowWrap: 'anywhere' }}>{l}</div>)}
              </div>
            </div>
          ))}
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: 210, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'clamp(14px, 2.0vw, 26px) clamp(12px, 1.8vw, 24px)', display: 'flex', flexDirection: 'column', gap: 12, boxShadow: 'var(--shadow-sm)', background: '#fff' }}>
            <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '66%', backgroundImage: 'url(./assets/tile-bg-social.png)', backgroundSize: 'cover', backgroundPosition: 'right center', maskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 42%, #000 100%)', WebkitMaskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.4) 42%, #000 100%)', pointerEvents: 'none' }} />
            <div style={{ position: 'relative', width: 48, height: 48, borderRadius: 12, background: 'var(--surface-alt)', color: 'var(--brand-primary)', display: 'grid', placeItems: 'center' }}>
              <Icon name="instagram" size={24} />
            </div>
            <span style={{ position: 'relative', fontSize: 11.5, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{c.socialLabel}</span>
            <div style={{ position: 'relative', maxWidth: '80%', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {socials.map((s) => (
                <a key={s.icon} href="#" style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14.5, fontWeight: 600, color: 'var(--text-primary)', textDecoration: 'none', overflowWrap: 'anywhere' }}>
                  <span style={{ color: 'var(--brand-primary)', display: 'flex' }}><Icon name={s.icon} size={19} /></span>{s.handle}
                </a>
              ))}
            </div>
          </div>
        </div>
        <div style={{ maxWidth: 'var(--container-max)', margin: '20px auto 0', display: 'grid', gridTemplateColumns: '1fr', gap: 20 }}>
          <figure style={{ margin: 0, position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
            <img src="./assets/photo-office-facade.jpeg" alt={c.facadeAlt} style={{ display: 'block', width: '100%', height: 'clamp(200px, 46vw, 340px)', objectFit: 'cover', objectPosition: 'center 42%' }} />
            <figcaption style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '32px 26px 20px', background: 'linear-gradient(to top, rgba(0,42,80,.9), rgba(0,42,80,0))', color: '#fff', fontSize: 14.5, fontWeight: 600, letterSpacing: '.02em' }}>13925 SW 140th St, Miami, FL 33186</figcaption>
          </figure>
        </div>
      </section>

      <Footer
        links={t.nav}
        navLabel={t.footer.nav}
        contactLabel={t.footer.contact}
        blurb={t.footer.blurb}
        phone="+1 (786) 709-7143 / +1 (754) 297-9520"
        email="sales@canaangroupsolutions.com"
        address="13925 SW 140th St, Miami, FL 33186"
        instagram="@canaan.innovations"
      />
    </div>
  );
}
window.Contact = Contact;