// Contact — calling card + native enquiry form (mailto, honeypot). No backend.
const { useState: useStateCt } = React;

const INTEREST_OPTIONS = ['Online Will', 'Home Visit Will', 'Trusts', 'Lasting Power of Attorney', 'Probate', 'Not sure yet'];
const EMAIL = 'info@futuraplanning.co.uk';

function ContactRow({ icon, label, value, href, external }) {
  return (
    <a
      href={href}
      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
      className="group flex items-center gap-4"
    >
      <span className="inline-flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full text-blue" style={{ background: '#EAF1FA', transition: 'background-color 250ms ' + EASE }}>
        <Icon name={icon} size={20} strokeWidth={1.8} />
      </span>
      <span>
        <span className="block font-sans text-stone" style={{ fontSize: 12.5 }}>{label}</span>
        <span className="block font-sans font-semibold text-navy group-hover:text-blue" style={{ fontSize: 15.5, transition: 'color 200ms ' + EASE }}>{value}</span>
      </span>
    </a>
  );
}

function ContactForm() {
  const [f, setF] = useStateCt({ name: '', email: '', phone: '', interest: '', message: '', company: '' });
  const [sent, setSent] = useStateCt(false);
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));

  const onSubmit = (e) => {
    e.preventDefault();
    if (f.company) return; // honeypot — silently drop bots
    // TODO: replace with a real form endpoint (e.g. Formspree) before launch.
    const subject = 'Website enquiry from ' + (f.name || 'a visitor');
    const body = [
      'Name: ' + f.name,
      'Email: ' + f.email,
      'Phone: ' + f.phone,
      'Interested in: ' + (f.interest || 'Not specified'),
      '',
      f.message,
    ].join('\n');
    window.location.href = 'mailto:' + EMAIL + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
    setSent(true);
  };

  const labelCls = 'block font-sans font-medium text-navy mb-1.5';
  const fieldStyle = { fontSize: 15.5, border: '1.5px solid rgba(26,48,102,0.18)', borderRadius: 12, background: '#fff' };

  return (
    <form onSubmit={onSubmit} className="rounded-[28px] bg-white p-7 sm:p-8" style={{ boxShadow: '0 40px 90px -44px rgba(26,48,102,0.45)' }} noValidate>
      <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 12, letterSpacing: '0.16em' }}>Send us a message</p>
      <h2 className="mt-2 font-display font-normal text-navy" style={{ fontSize: 'clamp(26px,3.5vw,38px)', lineHeight: 1.12, letterSpacing: '-0.01em' }}>Request your free quote</h2>

      <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="cf-name" className={labelCls} style={{ fontSize: 13.5 }}>Name</label>
          <input id="cf-name" className="fp-field w-full px-4 py-3" style={fieldStyle} type="text" value={f.name} onChange={set('name')} required autoComplete="name" />
        </div>
        <div>
          <label htmlFor="cf-email" className={labelCls} style={{ fontSize: 13.5 }}>Email</label>
          <input id="cf-email" className="fp-field w-full px-4 py-3" style={fieldStyle} type="email" value={f.email} onChange={set('email')} required autoComplete="email" />
        </div>
        <div>
          <label htmlFor="cf-phone" className={labelCls} style={{ fontSize: 13.5 }}>Phone</label>
          <input id="cf-phone" className="fp-field w-full px-4 py-3" style={fieldStyle} type="tel" value={f.phone} onChange={set('phone')} autoComplete="tel" />
        </div>
        <div>
          <label htmlFor="cf-interest" className={labelCls} style={{ fontSize: 13.5 }}>What are you interested in?</label>
          <select id="cf-interest" className="fp-field w-full px-4 py-3" style={{ ...fieldStyle, appearance: 'none', backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%231A3066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 8 10 13 15 8'/></svg>\")", backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center' }} value={f.interest} onChange={set('interest')}>
            <option value="">Please choose</option>
            {INTEREST_OPTIONS.map((o) => <option key={o} value={o}>{o}</option>)}
          </select>
        </div>
      </div>

      <div className="mt-4">
        <label htmlFor="cf-message" className={labelCls} style={{ fontSize: 13.5 }}>Message</label>
        <textarea id="cf-message" className="fp-field w-full px-4 py-3" style={{ ...fieldStyle, minHeight: 120, resize: 'vertical' }} value={f.message} onChange={set('message')} rows={4}></textarea>
      </div>

      {/* Honeypot — hidden from people, catches bots */}
      <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }}>
        <label htmlFor="cf-company">Company</label>
        <input id="cf-company" tabIndex={-1} autoComplete="off" value={f.company} onChange={set('company')} />
      </div>

      <button type="submit" className="mt-6 flex w-full items-center justify-center rounded-full bg-gold px-7 py-4 font-sans font-semibold text-[17px] text-navy hover:bg-gold-deep" style={{ boxShadow: '0 14px 30px -12px rgba(240,184,60,0.85)', transition: 'background-color 250ms ' + EASE }}>
        {sent ? 'Opening your email...' : 'Send my enquiry'}
      </button>

      <p className="mt-4 font-sans text-stone" style={{ fontSize: 12, lineHeight: 1.5 }}>
        We use your details only to respond to your enquiry. We never share them with third parties. See our privacy policy for how we handle your data.
      </p>
      <p className="mt-3 font-sans text-stone" style={{ fontSize: 13, lineHeight: 1.5 }}>
        Prefer to talk now? Call <a href={PHONE_TEL} className="font-semibold text-navy underline-offset-2 hover:underline">01934 442030</a> or <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" className="font-semibold text-navy underline-offset-2 hover:underline">message us on WhatsApp</a>.
      </p>
    </form>
  );
}

function Contact() {
  return (
    <section id="contact" className="relative overflow-hidden bg-cream" style={{ paddingTop: 'clamp(72px,10vw,116px)', paddingBottom: 'clamp(72px,10vw,116px)' }}>
      <Grain opacity={0.045} />
      <Blob color="#FFCC57" size={320} opacity={0.18} blur={10} speed={28} rotate={6} style={{ top: '-80px', left: '-80px' }} />
      <Blob color="#F4685F" size={280} opacity={0.12} blur={11} speed={-22} rotate={-5} style={{ bottom: '20px', right: '-90px' }} />

      <div className="relative mx-auto grid max-w-[1180px] grid-cols-1 items-start gap-8 px-5 sm:px-7 lg:grid-cols-12 lg:gap-10">
        {/* Calling card */}
        <Reveal className="lg:col-span-5">
          <div className="relative overflow-hidden rounded-[28px] bg-white p-8" style={{ boxShadow: '0 40px 90px -44px rgba(26,48,102,0.45)' }}>
            <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 6, background: 'linear-gradient(90deg,#FFCC57,#F0B83C)' }} />
            <p className="font-sans font-semibold uppercase text-gold-deep" style={{ fontSize: 12, letterSpacing: '0.16em' }}>Get in touch</p>
            <h3 className="mt-2 font-display font-normal text-navy" style={{ fontSize: 26, lineHeight: 1.2, letterSpacing: '-0.01em' }}>Let's have a friendly, no-obligation chat</h3>

            <div className="mt-7 flex flex-col gap-5">
              <ContactRow icon="phone" label="Call us" value="01934 442030" href={PHONE_TEL} />
              <ContactRow icon="mail" label="Email us" value="info@futuraplanning.co.uk" href={'mailto:' + EMAIL} />
              <ContactRow icon="mapPin" label="Visit or write to us" value="6 Tollhouse Road, Churchill, Winscombe, BS25 5AN" href="https://www.google.com/maps?q=6+Tollhouse+Road,+Churchill,+Winscombe,+BS25+5AN" external />
              <ContactRow icon="messageCircle" label="Message us" value="Chat on WhatsApp" href={WHATSAPP_URL} external />
            </div>

            <p className="mt-7 font-sans text-stone" style={{ fontSize: 13.5, lineHeight: 1.55 }}>
              Free initial consultation. Home visits across Somerset, or online anywhere in England and Wales.
            </p>
          </div>
        </Reveal>

        {/* Form */}
        <Reveal delay={100} className="lg:col-span-7">
          <ContactForm />
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Contact });