/* The Snowberry website — Visit / tour-request section (interactive) */
function TourSection() {
  const { SectionHeading, Input, Textarea, Button, Eyebrow } = window.TheSnowberryDesignSystem_ed783b;
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  // ───────────────────────────────────────────────────────────────
  // Tour-request delivery. Submissions are emailed to care@thesnowberry.com.
  // SETUP (one time, ~2 min): create a free form at https://formspree.io,
  // set the recipient to care@thesnowberry.com, then paste its form ID below.
  // It looks like  https://formspree.io/f/abcdwxyz
  const FORM_ENDPOINT = 'https://formspree.io/f/mrewezbr';
  // ───────────────────────────────────────────────────────────────

  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    setStatus('sending');
    try {
      const res = await fetch(FORM_ENDPOINT, {
        method: 'POST',
        headers: { Accept: 'application/json' },
        body: new FormData(form),
      });
      if (res.ok) { setStatus('sent'); form.reset(); }
      else { setStatus('error'); }
    } catch (err) { setStatus('error'); }
  };

  return (
    <section id="visit" style={{ position: 'relative', background: 'var(--green-700)', padding: '112px 40px', overflow: 'hidden' }}>
      <img src="assets/logos/sprig-cream.png" alt="" style={{ position: 'absolute', left: -70, top: -60, width: 320, opacity: 0.18, pointerEvents: 'none' }} />
      <div className="sb-visit-grid" style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72 }}>
        <div>
          <SectionHeading tone="green" eyebrow="Visit" title="Open for quiet tours." lead="Walk through, take a cup of coffee, stay an hour. Refer in a single call. Decisions inside 48 hours." />
          <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[['Call', 'Finley Morris-Chunn · Executive Director', '903.337.1003'],
              ['Email', 'We reply within a business day', 'care@thesnowberry.com'],
              ['Here', 'Denison and Sherman corridor', '4318 W Crawford St · Denison, TX 75020']].map(([k, sub, val]) => (
              <div key={k} style={{ display: 'flex', gap: 18, alignItems: 'baseline', borderTop: '1px solid var(--border-on-green)', paddingTop: 16 }}>
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--text-on-green-muted)', width: 60, flex: 'none' }}>{k}</span>
                <span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 21, color: 'var(--cream)' }}>{val}</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-on-green-muted)' }}>{sub}</span>
                </span>
              </div>
            ))}
          </div>
        </div>
        <div className="sb-visit-card" style={{ background: 'var(--cream)', borderRadius: 'var(--radius-xl)', padding: 36, boxShadow: 'var(--shadow-green)' }}>
          {status === 'sent' ? (
            <div style={{ textAlign: 'center', padding: '40px 12px' }}>
              <img src="assets/logos/sprig-deep.png" alt="" style={{ height: 90 }} />
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 30, color: 'var(--green-700)', margin: '12px 0 8px' }}>Thank you.</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.6, maxWidth: 320, margin: '0 auto' }}>
                Finley will call you within one business day to arrange your visit.
              </p>
              <div style={{ marginTop: 24 }}><Button variant="secondary" onClick={() => setStatus('idle')}>Send another</Button></div>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <Eyebrow>Request a tour</Eyebrow>
              <input type="hidden" name="_subject" value="New tour request from thesnowberry.com" />
              <Input label="Your name" name="name" placeholder="Jane Doe" required />
              <Input label="Phone" name="phone" type="tel" placeholder="903.337.1003" required />
              <Input label="Email" name="email" type="email" placeholder="jane@example.com" required />
              <Textarea label="Tell us about your parent" name="message" rows={3} placeholder="A little about your situation…" />
              {status === 'error' && (
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: '#b04a3a', margin: 0, lineHeight: 1.5 }}>
                  Something went wrong sending your request. Please call us at 903.337.1003 or email care@thesnowberry.com.
                </p>
              )}
              <Button variant="primary" size="lg" fullWidth type="submit" disabled={status === 'sending'}>
                {status === 'sending' ? 'Sending…' : 'Request a quiet tour'}
              </Button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.TourSection = TourSection;