/* CallToAction — quiet conversation invite */
const { useState: useStateC } = React;

function CallToAction() {
  const [email, setEmail] = useStateC('');
  const [submitted, setSubmitted] = useStateC(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (email.trim()) setSubmitted(true);
  };

  return (
    <section id="contact" className="section" style={{ background: 'var(--paper)', borderTop: '1px solid var(--hairline)' }}>
      <div className="container-narrow text-center">

        <p className="section-label mb-6 eyebrow-dot">Begin a conversation</p>

        <h2 className="serif tracking-[-0.025em] leading-[0.96] mb-7"
          style={{ fontSize: 'clamp(3rem, 7vw, 5.8rem)', color: 'var(--ink)' }}>
          Tell us where<br/>
          <span className="serif-it" style={{ color: 'var(--sky-deep)' }}>you've been dreaming</span>.
        </h2>

        <p className="text-[16px] max-w-md mx-auto leading-relaxed mb-12" style={{ color: 'var(--ink-soft)' }}>
          Leave us an email and a few words about the kind of trip you're imagining.
          A planner — a real one — will write back within a working day.
        </p>

        {submitted ? (
          <div className="flex flex-col items-center gap-3 max-w-sm mx-auto p-8 rounded-3xl"
            style={{ background: 'var(--white)', border: '1px solid var(--hairline)' }}>
            <div className="w-11 h-11 rounded-full flex items-center justify-center" style={{ background: 'var(--cream)' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--sky-deep)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            </div>
            <p className="serif text-[20px]" style={{ color: 'var(--ink)' }}>We've got it.</p>
            <p className="text-[13px]" style={{ color: 'var(--muted)' }}>
              A planner will write back within one working day.
            </p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="max-w-md mx-auto">
            <div className="flex flex-col sm:flex-row gap-2 p-1.5 rounded-full"
              style={{ background: 'var(--white)', border: '1px solid var(--hairline-2)' }}>
              <input
                type="email" value={email} onChange={e => setEmail(e.target.value)}
                placeholder="your@email.com" required
                className="flex-1 px-5 py-2.5 rounded-full text-[14px] outline-none bg-transparent"
                style={{ color: 'var(--ink)' }}
              />
              <button type="submit" className="btn-dark justify-center">
                Start planning
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M12 5l7 7-7 7"/>
                </svg>
              </button>
            </div>
            <p className="text-[12px] mt-5" style={{ color: 'var(--muted)' }}>
              Or — <a href="tel:+1234567890" className="underline underline-offset-4 decoration-[var(--hairline-2)] hover:decoration-[var(--ink)] text-[var(--ink)]">speak to a planner directly</a> · No spam, ever.
            </p>
          </form>
        )}

        {/* Editorial sign-off */}
        <div className="mt-20 pt-12 border-t border-[var(--hairline)] flex flex-col md:flex-row items-center justify-between gap-4 text-[12px]" style={{ color: 'var(--muted)' }}>
          <p>Studio · Lisbon · Cape Town · Tokyo</p>
          <p className="serif-it text-[15px]" style={{ color: 'var(--ink-soft)' }}>Quietly extraordinary, since 2009.</p>
          <p>Open Mon–Sat · 9am–7pm GMT</p>
        </div>
      </div>
    </section>
  );
}

window.CallToAction = CallToAction;