/* Danex Roofing — quote request section with success state. */

// Web3Forms access key (danexroofing@gmail.com inbox).
const WEB3FORMS_ACCESS_KEY = 'dad25841-7a4b-450e-9b4c-7804070c7e95';

function QuoteForm({ formRef }) {
  const { Input, Select, Button, Eyebrow } = DS;
  const [sent, setSent] = React.useState(false);
  const [status, setStatus] = React.useState('idle'); // idle | sending | error

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    const formData = new FormData(e.target);
    formData.append('access_key', WEB3FORMS_ACCESS_KEY);
    formData.append('subject', 'New quote request - Danex Roofing');
    formData.append('from_name', 'Danex Roofing Website');
    try {
      const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: formData });
      const data = await res.json();
      if (data.success) {
        e.target.reset();
        setSent(true);
        setStatus('idle');
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  }

  const contact = [
    { icon: 'phone', label: 'Call or text Danny', value: '604-690-8427' },
    { icon: 'mail', label: 'Email', value: 'danexroofing@gmail.com' },
    { icon: 'map-pin', label: 'Based in', value: '6288 Cassey Ave, Burnaby BC' },
    { icon: 'clock', label: 'Hours', value: 'Mon–Sat · 7am–6pm' },
  ];

  return (
    <section id="quote" ref={formRef} style={{ background: 'var(--slate-950)', position: 'relative', overflow: 'hidden' }}>
      <div className="dx-shingle" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}></div>
      <div className="dx-container" style={{ position: 'relative', zIndex: 1, paddingTop: 'calc(var(--section-y) - 24px)', paddingBottom: 'var(--section-y)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1fr', gap: 56, alignItems: 'start' }} className="dx-quote-grid">
          <div>
            <Eyebrow tone="inverse">Free Quote</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.25rem,4vw,3.25rem)', lineHeight: 0.98, margin: '14px 0 0', fontWeight: 800, color: 'var(--paper-100)' }}>
              Get Your Roof<br />Quoted, Free
            </h2>
            <p style={{ color: 'var(--slate-300)', fontSize: 18, lineHeight: 1.6, margin: '18px 0 36px', maxWidth: 420 }}>
              Tell Danny about your roof and he'll get back to you, usually same day, with a no-pressure written estimate.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {contact.map((c) => (
                <div key={c.label} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'rgba(229,84,22,0.16)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ember-400)', flexShrink: 0 }}>
                    <i data-lucide={c.icon} style={{ width: 20, height: 20 }}></i>
                  </span>
                  <div style={{ lineHeight: 1.3 }}>
                    <div style={{ fontSize: 12.5, color: 'var(--slate-400)', fontWeight: 600, letterSpacing: '0.04em' }}>{c.label}</div>
                    <div style={{ fontSize: 16, color: 'var(--paper-100)', fontWeight: 700 }}>{c.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ background: 'var(--surface-raised)', borderRadius: 'var(--radius-xl)', padding: 36, boxShadow: 'var(--shadow-xl)' }}>
            {sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', padding: '40px 12px' }}>
                <span style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--success-soft)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--success)', marginBottom: 22 }}>
                  <i data-lucide="check" style={{ width: 36, height: 36 }}></i>
                </span>
                <h3 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 30, fontWeight: 800 }}>Request Sent!</h3>
                <p style={{ color: 'var(--text-muted)', fontSize: 16, lineHeight: 1.55, margin: '12px 0 26px', maxWidth: 360 }}>
                  Thanks! Danny's got your details and will reach out shortly. For anything urgent, call 604-690-8427.
                </p>
                <Button variant="outline" onClick={() => setSent(false)}>Send another request</Button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <h3 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 24, fontWeight: 700, marginBottom: 2 }}>Request a Free Quote</h3>
                {/* Honeypot — hidden from users, catches bots */}
                <input type="checkbox" name="botcheck" tabIndex={-1} autoComplete="off" style={{ display: 'none' }} />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <Input name="name" label="Full name" placeholder="Your name" required icon={<i data-lucide="user" style={{ width: 16, height: 16 }}></i>} />
                  <Input name="phone" label="Phone" type="tel" placeholder="(604) 000-0000" required icon={<i data-lucide="phone" style={{ width: 16, height: 16 }}></i>} />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <Input name="email" label="Email" type="email" placeholder="you@email.com" icon={<i data-lucide="mail" style={{ width: 16, height: 16 }}></i>} />
                  <Select name="service" label="Service needed" defaultValue="" required>
                    <option value="" disabled>Choose one…</option>
                    <option>Flat roofing (torch-on)</option>
                    <option>Sloped shingles</option>
                    <option>Cedar roofing</option>
                    <option>Roof repair</option>
                    <option>Full replacement</option>
                    <option>Commercial project</option>
                  </Select>
                </div>
                <Input name="message" as="textarea" label="Tell us about your roof" rows={4} placeholder="Age, square footage, leaks, what you're noticing…" />
                <Button type="submit" variant="primary" size="lg" fullWidth disabled={status === 'sending'}
                  iconRight={<i data-lucide="arrow-right" style={{ width: 19, height: 19 }}></i>}>
                  {status === 'sending' ? 'Sending…' : 'Send My Request'}
                </Button>
                {status === 'error' && (
                  <p style={{ fontSize: 13.5, color: 'var(--danger)', textAlign: 'center', margin: 0 }}>
                    Couldn't send. Please call 604-690-8427 or try again.
                  </p>
                )}
                <p style={{ fontSize: 12.5, color: 'var(--text-subtle)', textAlign: 'center', margin: 0 }}>
                  No obligation · We never share your details
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

window.QuoteForm = QuoteForm;