const contactBarLink = { display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0, whiteSpace: 'nowrap', color: 'inherit', textDecoration: 'none' };
const WA_NUMBER = '17867097143';
const MAIL = 'sales@canaangroupsolutions.com';

function Contact({ Button, Input, Select, Icon, NavBar, Footer, onNav, t }) {
  const c = t.contact;
  const [form, setForm] = React.useState({ name: '', email: '', service: '', message: '' });
  const [error, setError] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm((f) => Object.assign({}, f, { [k]: e.target.value }));
  const waLink = (text) => 'https://wa.me/' + WA_NUMBER + '?text=' + encodeURIComponent(text);
  const body = () => {
    const f = c.waFields;
    return [c.waIntro, '', f.name + ': ' + form.name.trim(), f.email + ': ' + (form.email.trim() || '—'), f.service + ': ' + (form.service || '—'), f.message + ': ' + form.message.trim()].join('\n');
  };
  const formLink = () => waLink(body());
  const mailLink = () => 'mailto:' + MAIL + '?subject=' + encodeURIComponent(c.mailSubject + (form.service ? ' — ' + form.service : '')) + '&body=' + encodeURIComponent(body());
  const submit = (via) => {
    if (!form.name.trim() || !form.message.trim()) { setError(c.required); return; }
    setError('');
    setSent(via);
    if (via === 'mail') location.href = mailLink();
    else window.open(formLink(), '_blank', 'noopener,noreferrer');
  };
  const tileMeta = [
    { icon: 'phone', lines: [
      { text: '+1 (786) 709-7143', href: 'https://wa.me/17867097143?text=' + encodeURIComponent(c.waDirect), icon: 'whatsapp', external: true },
      { text: '+1 (754) 297-9520', href: 'https://wa.me/17542979520?text=' + encodeURIComponent(c.waDirect), icon: 'whatsapp', external: true },
    ], bg: 'tile-bg-phone.png' },
    { icon: 'mail', lines: [{ text: 'sales@canaangroupsolutions.com', href: 'mailto:sales@canaangroupsolutions.com', icon: 'mail' }], bg: 'tile-bg-mail.png' },
    { icon: 'pin', lines: [{ text: '13925 SW 140th St' }, { text: 'Miami, FL 33186' }], bg: 'tile-bg-office.png' },
  ];
  const socials = [
    { icon: 'instagram', handle: 'canaan.innovations', href: 'https://www.instagram.com/canaan.innovations/' },
    { icon: 'facebook', handle: 'Canaan Innovations', href: 'https://www.facebook.com/profile.php?id=61576779925649' },
  ];
  return (
    <div data-page="contact" data-page-auto="1" 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>
          <a href="https://wa.me/17867097143" target="_blank" rel="noopener noreferrer" style={contactBarLink}><Icon name="whatsapp" size={14} />+1 (786) 709-7143</a>
          <a href="https://wa.me/17542979520" target="_blank" rel="noopener noreferrer" style={contactBarLink}><Icon name="whatsapp" size={14} />+1 (754) 297-9520</a>
          <a href="mailto:sales@canaangroupsolutions.com" style={contactBarLink}><Icon name="mail" size={14} />sales@canaangroupsolutions.com</a>
          <a href="https://www.instagram.com/canaan.innovations/" target="_blank" rel="noopener noreferrer" style={contactBarLink}><Icon name="instagram" size={14} />canaan.innovations</a>
        </React.Fragment>}
      />

      <section data-sticky="hero" style={{ position: 'sticky', top: 0, zIndex: 0, 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: '64px var(--container-pad) 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-banner.jpeg" alt={c.photoAlt} style={{ width: '100%', maxWidth: 560, display: 'block', aspectRatio: '1376 / 768', objectFit: 'contain', background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)' }} />
          </div>
          <div style={{ background: '#fff', borderRadius: 'var(--radius-lg)', padding: 36, 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: sent === 'mail' ? 'var(--brand-primary)' : '#25D366', color: '#fff', display: 'grid', placeItems: 'center' }}>
                  <Icon name={sent === 'mail' ? 'mail' : 'whatsapp'} size={28} strokeWidth={1.9} />
                </div>
                <p style={{ color: 'var(--text-primary)', fontWeight: 600, margin: 0 }}>{sent === 'mail' ? c.thanksMail : c.thanks}</p>
                <p style={{ color: 'var(--text-secondary)', fontSize: 14, margin: 0 }}>{sent === 'mail' ? c.thanksMailSub : c.thanksSub}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  <a href={formLink()} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '11px 22px', borderRadius: 999, background: '#25D366', color: '#06341c', fontSize: 14, fontWeight: 700, textDecoration: 'none' }}>
                    <Icon name="whatsapp" size={18} />{c.again}
                  </a>
                  <a href={mailLink()} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '11px 22px', borderRadius: 999, border: '1px solid var(--border-subtle)', background: '#fff', color: 'var(--brand-primary)', fontSize: 14, fontWeight: 700, textDecoration: 'none' }}>
                    <Icon name="mail" size={18} />{c.againMail}
                  </a>
                </div>
                <Button variant="ghost" size="sm" onClick={() => setSent(false)}>{c.editMsg}</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.servicePh].concat(c.serviceOptions)} value={form.service || c.servicePh} onChange={(e) => setForm((f) => Object.assign({}, f, { service: e.target.value === c.servicePh ? '' : e.target.value }))} />
                <Input label={c.message} placeholder={c.messagePh} multiline value={form.message} onChange={set('message')} />
                {error && <p role="alert" style={{ margin: 0, fontSize: 13, fontWeight: 600, color: '#C0392B' }}>{error}</p>}
                <div style={{ display: 'grid', gap: 10 }}>
                  <button type="button" onClick={() => submit('wa')} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, width: '100%', padding: '14px 24px', border: 'none', borderRadius: 999, background: '#25D366', color: '#06341c', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>
                    <Icon name="whatsapp" size={20} />{c.send}
                  </button>
                  <button type="button" onClick={() => submit('mail')} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10, width: '100%', padding: '13px 24px', borderRadius: 999, border: '1px solid var(--brand-primary)', background: '#fff', color: 'var(--brand-primary)', fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 700, cursor: 'pointer' }}>
                    <Icon name="mail" size={19} />{c.sendMail}
                  </button>
                </div>
                <p style={{ fontSize: 12, color: 'var(--text-muted)', margin: 0 }}>{c.consent}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      <section style={{ padding: '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="4">
          {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: '26px 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) => l.href ? (
                  <a key={j} href={l.href} target={l.external ? '_blank' : undefined} rel={l.external ? 'noopener noreferrer' : undefined} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14.5, fontWeight: 600, color: 'var(--text-primary)', textDecoration: 'none', lineHeight: 1.6, overflowWrap: 'anywhere' }}>
                    {l.icon && <span style={{ color: l.icon === 'whatsapp' ? '#25D366' : 'var(--brand-primary)', display: 'flex' }}><Icon name={l.icon} size={17} /></span>}{l.text}
                  </a>
                ) : (
                  <div key={j} style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.6, overflowWrap: 'anywhere' }}>{l.text}</div>
                ))}
              </div>
            </div>
          ))}
          <div style={{ position: 'relative', overflow: 'hidden', minHeight: 210, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '26px 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={s.href} target="_blank" rel="noopener noreferrer" 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: 340, 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
        langCode={t.code}
        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;