// Leonard's Farm Contact section
const LFContactHeading = SectionHeading;
const LFInput = Input;
const LFTextarea = Textarea;
const LFContactBtn = Button;

const LF_PHONE = '254714206754';
const LF_WHATSAPP_MSG = "Hello Leonard's Farm, I saw your website and I'd like to know more about your produce.";
const LF_MAP_URL = 'https://maps.app.goo.gl/ejkRxFWeeYRLqtTv6';
const LF_EMAIL = 'muleileonard@gmail.com';

function Contact() {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };

  const iconWrap = { width: 44, height: 44, borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' };
  const svgProps = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'currentColor', 'aria-hidden': true };

  return (
    <section id="contact" style={{ padding: 'var(--section-y) 0', background: 'var(--surface-sunk)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'var(--space-8)', alignItems: 'start' }}>
        <div>
          <LFContactHeading eyebrow="Contact" title="Come and see it grow" lead="Order a box, book a farm visit, or ask us anything about getting started on your own land." />
          <div style={{ marginTop: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <a href={`https://wa.me/${LF_PHONE}?text=${encodeURIComponent(LF_WHATSAPP_MSG)}`} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', textDecoration: 'none' }}>
              <span style={{ ...iconWrap, background: '#25D366', color: '#fff' }}>
                <svg {...svgProps}><path d="M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.66.15-.2.3-.76.96-.93 1.15-.17.2-.34.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.34.44-.51.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.66-1.6-.9-2.19-.24-.57-.48-.5-.66-.5h-.56c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.47 0 1.46 1.06 2.87 1.21 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.23 1.36.19 1.87.12.57-.09 1.75-.72 2-1.41.25-.69.25-1.28.17-1.41-.07-.13-.27-.2-.57-.35z"/><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.23 8.23 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23z"/></svg>
              </span>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--text-strong)' }}>WhatsApp us</span>
                <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>+254 714 206 754 &middot; fastest reply</span>
              </span>
            </a>
            <a href={`tel:+${LF_PHONE}`} style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', textDecoration: 'none' }}>
              <span style={{ ...iconWrap, background: 'var(--water-100)', color: 'var(--water-700)' }}>
                <svg {...svgProps}><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z"/></svg>
              </span>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--text-strong)' }}>Call the farm</span>
                <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>+254 714 206 754 &middot; Mon&ndash;Sat, daytime</span>
              </span>
            </a>
            <a href={`mailto:${LF_EMAIL}`} style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', textDecoration: 'none' }}>
              <span style={{ ...iconWrap, background: 'var(--lime-100)', color: 'var(--lime-600)' }}>
                <svg {...svgProps}><path d="M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm8 7.35L19.5 7H4.5L12 12.35zM3 8.24V18h18V8.24l-8.43 5.98a1 1 0 0 1-1.14 0L3 8.24z"/></svg>
              </span>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--text-strong)' }}>Email us</span>
                <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>We reply within a day</span>
              </span>
            </a>
            <a href={LF_MAP_URL} target="_blank" rel="noopener noreferrer" style={{ display: 'flex', gap: 'var(--space-4)', alignItems: 'center', textDecoration: 'none' }}>
              <span style={{ ...iconWrap, background: 'var(--sand-200)', color: 'var(--ink-700)' }}>
                <svg {...svgProps}><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
              </span>
              <span>
                <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--text-strong)' }}>Find us</span>
                <span style={{ fontSize: 'var(--fs-sm)', color: 'var(--text-muted)' }}>Makueni County, Kenya</span>
              </span>
            </a>
          </div>
        </div>

        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-md)', padding: 'var(--space-6)' }}>
          {sent ? (
            <div style={{ textAlign: 'center', padding: 'var(--space-6) 0' }}>
              <div style={{ width: 56, height: 56, margin: '0 auto var(--space-4)', borderRadius: '50%', background: 'var(--green-100)', color: 'var(--green-600)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.6rem' }}>&#10003;</div>
              <h3 style={{ fontSize: 'var(--fs-h3)' }}>Message sent</h3>
              <p style={{ marginTop: 'var(--space-2)', color: 'var(--text-muted)' }}>Thank you, we&rsquo;ll reply within a day.</p>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <LFInput label="Your name" placeholder="e.g. Mary Mwikali" required />
              <LFInput label="Email" type="email" placeholder="you@example.com" required />
              <LFTextarea label="Message" rows={4} placeholder="Tell us what you'd like to grow or order..." />
              <LFContactBtn type="submit" variant="primary" size="lg" fullWidth>Send message</LFContactBtn>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;