// Contact CTA block + Footer + WhatsApp FAB

const Contact = ({ lang }) => {
  const [form, setForm] = useState({ name: '', email: '', phone: '', message: '', service: 'company-formation' });
  const [sent, setSent] = useState(false);
  return (
    <section id="contact" style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80 }} className="contact-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: 'rgba(243,238,229,0.55)' }}><span className="dot" />Talk to us</div>
            <h2 className="h2" style={{ color: 'var(--paper)', maxWidth: '14ch' }}>
              Book a free<br/><span style={{ fontStyle: 'italic', fontFamily: 'Newsreader, serif', fontWeight: 400, color: 'var(--accent)' }}>30-minute consultation.</span>
            </h2>
            <p style={{ color: 'rgba(243,238,229,0.72)', fontSize: 17, lineHeight: 1.6, marginTop: 22, maxWidth: '46ch' }}>
              A specialist walks you through jurisdiction, indicative cost, timelines and the next step — in plain English. No commitment, no sales script.
            </p>

            <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="contact-meta">
              <Meta icon="pin" label="Visit us" value="Office 105–108, Building 3,&#10;Bay Square, Business Bay, Dubai" />
              <Meta icon="phone" label="Call" value="+971 4 438 3838" href="tel:+97144383838" />
              <Meta icon="mail" label="Email" value="hello@decisivezone.ae" href="mailto:hello@decisivezone.ae" />
              <Meta icon="whatsapp" label="WhatsApp" value="Chat with the team" href="https://wa.me/message/SGPJ53LMHEFEL1" />
            </div>

            <div style={{ marginTop: 44, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', gap: 0 }}>
                {[
                  { src: 'media/team-neha.webp' },
                  { src: 'media/team-richard.webp' },
                  { src: 'media/leader-dyuti.webp' },
                  { src: 'media/team-dipesh.webp' }
                ].map((p, i) => (
                  <div key={i} style={{
                    width: 36, height: 36, borderRadius: 50, overflow: 'hidden',
                    border: '2px solid var(--ink)', marginInlineStart: i === 0 ? 0 : -10,
                    background: 'var(--ink-2)'
                  }}>
                    <img src={p.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  </div>
                ))}
              </div>
              <div style={{ fontSize: 13.5, color: 'rgba(243,238,229,0.7)', lineHeight: 1.4 }}>
                A real specialist replies — usually within 1 working day.
              </div>
            </div>
          </div>

          {/* Form card */}
          <div style={{
            background: 'var(--surface)', color: 'var(--ink)',
            borderRadius: 18, padding: 32, alignSelf: 'start'
          }}>
            {!sent ? (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <h3 className="h3" style={{ fontSize: 22, marginBottom: 8 }}>Book a consultation</h3>
                <p style={{ color: 'var(--muted)', fontSize: 14, marginTop: 0, marginBottom: 24 }}>
                  All fields required. Reply within 1 working day.
                </p>
                <div style={{ display: 'grid', gap: 14 }}>
                  <Field label="Full name" value={form.name} onChange={v => setForm({ ...form, name: v })} />
                  <Field label="Work email" type="email" value={form.email} onChange={v => setForm({ ...form, email: v })} />
                  <Field label="Phone / WhatsApp" type="tel" value={form.phone} onChange={v => setForm({ ...form, phone: v })} />
                  <label>
                    <span style={{ display: 'block', fontSize: 13, color: 'var(--muted)', marginBottom: 6, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.05em' }}>I'm interested in</span>
                    <select value={form.service} onChange={e => setForm({ ...form, service: e.target.value })} style={{
                      width: '100%', padding: '12px 14px', background: 'var(--paper)',
                      border: '1px solid var(--line)', borderRadius: 8,
                      fontFamily: 'DM Sans', fontSize: 15, color: 'var(--ink)'
                    }}>
                      <option value="company-formation">Company formation</option>
                      <option value="visas">Visas & Golden Visa</option>
                      <option value="licence">Trade licence renewal/modification</option>
                      <option value="bank">Corporate bank account</option>
                      <option value="tax">VAT & corporate tax</option>
                      <option value="office">Office / flexi-desk</option>
                    </select>
                  </label>
                  <label>
                    <span style={{ display: 'block', fontSize: 13, color: 'var(--muted)', marginBottom: 6, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.05em' }}>What are you trying to do?</span>
                    <textarea value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} rows={3} placeholder="e.g. set up an IFZA holding co, 2 visas, open a bank account" style={{
                      width: '100%', padding: '12px 14px', background: 'var(--paper)',
                      border: '1px solid var(--line)', borderRadius: 8,
                      fontFamily: 'DM Sans', fontSize: 15, color: 'var(--ink)', resize: 'vertical'
                    }} />
                  </label>
                  <button type="submit" className="btn btn-primary" style={{ marginTop: 6 }}>
                    Send & book consultation <Icon name="arrow" size={16} className="arrow" />
                  </button>
                  <div style={{ fontSize: 12, color: 'var(--muted)', textAlign: 'center', marginTop: 2 }}>
                    Or message us on <a href="https://wa.me/message/SGPJ53LMHEFEL1" style={{ color: 'var(--accent-2)', fontWeight: 500 }}>WhatsApp</a> — also fine.
                  </div>
                </div>
              </form>
            ) : (
              <div style={{ padding: '40px 8px' }}>
                <div style={{ width: 56, height: 56, borderRadius: 50, background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                  <Icon name="check" size={28} color="var(--accent-2)" stroke={2.2} />
                </div>
                <h3 className="h3" style={{ fontSize: 22, marginBottom: 8 }}>Sent. We'll be in touch.</h3>
                <p style={{ color: 'var(--muted)', fontSize: 15 }}>A specialist will reply to <strong style={{ color: 'var(--ink)' }}>{form.email}</strong> within 1 working day with next steps.</p>
                <a href="https://wa.me/message/SGPJ53LMHEFEL1" className="btn btn-accent" style={{ marginTop: 14 }}>
                  <Icon name="whatsapp" size={18} /> Continue on WhatsApp
                </a>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .contact-meta { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const Meta = ({ icon, label, value, href }) => {
  const Inner = (
    <>
      <div style={{ width: 38, height: 38, borderRadius: 8, background: 'rgba(243,238,229,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={18} color="var(--accent)" />
      </div>
      <div>
        <div className="eyebrow" style={{ color: 'rgba(243,238,229,0.55)', marginBottom: 4 }}>{label}</div>
        <div style={{ color: 'var(--paper)', fontSize: 15, lineHeight: 1.45, whiteSpace: 'pre-line' }}>{value}</div>
      </div>
    </>
  );
  return href ? (
    <a href={href} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', textDecoration: 'none', color: 'inherit' }}>{Inner}</a>
  ) : (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>{Inner}</div>
  );
};

const Footer = () => (
  <footer style={{ background: 'var(--ink)', color: 'rgba(243,238,229,0.7)', padding: '40px 0 60px', borderTop: '1px solid var(--line-dark)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }} className="foot-grid">
        <div>
          <Logo tone="dark" size={22} />
          <p style={{ marginTop: 18, fontSize: 14, lineHeight: 1.5, maxWidth: '32ch' }}>
            Business setup consultants in Dubai, Bay Square. Mainland, Free Zone & Offshore.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            {['IG', 'in', 'FB', 'TT', 'X'].map(s => (
              <a key={s} href="#" style={{
                width: 36, height: 36, borderRadius: 50,
                background: 'rgba(243,238,229,0.06)', color: 'var(--paper)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                textDecoration: 'none', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fontWeight: 500
              }}>{s}</a>
            ))}
          </div>
        </div>
        <FCol title="Services" links={['Company formation', 'Visas & Golden Visa', 'Trade licence', 'Bank account opening', 'VAT & corporate tax', 'Office / flexi-desk']} />
        <FCol title="Jurisdictions" links={['Mainland', 'IFZA', 'DMCC', 'Meydan', 'RAKEZ', 'Offshore (JAFZA)']} />
        <FCol title="Company" links={['About', 'Leadership', 'Guide hub', 'Careers', 'Contact']} />
      </div>

      <div style={{ borderTop: '1px solid var(--line-dark)', paddingTop: 24, display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 18, alignItems: 'center', fontSize: 12.5 }}>
        <div>© 2026 Decisive Zone — Business Setup Consultants. Bay Square, Dubai.</div>
        <div style={{ display: 'flex', gap: 22 }}>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
          <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Cookies</a>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .foot-grid { grid-template-columns: 1fr 1fr !important; }
      }
    `}</style>
  </footer>
);

const FCol = ({ title, links }) => (
  <div>
    <div className="eyebrow" style={{ color: 'rgba(243,238,229,0.55)', marginBottom: 16 }}>{title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {links.map(l => (
        <li key={l}><a href="#" style={{ color: 'var(--paper)', textDecoration: 'none', fontSize: 14 }}>{l}</a></li>
      ))}
    </ul>
  </div>
);

const WhatsAppFab = () => (
  <a href="https://wa.me/message/SGPJ53LMHEFEL1" aria-label="WhatsApp" style={{
    position: 'fixed', insetInlineEnd: 24, bottom: 24, zIndex: 40,
    width: 56, height: 56, borderRadius: 50,
    background: '#25D366', color: 'white',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 12px 28px -10px rgba(37,211,102,0.6), 0 4px 12px rgba(0,0,0,0.15)',
    textDecoration: 'none'
  }}>
    <Icon name="whatsapp" size={26} stroke={1.5} />
  </a>
);

Object.assign(window, { Contact, Footer, WhatsAppFab });