/* global React, Icon, Icons */
const { useState } = React;

/* ---------- Quote band with real form fields ---------- */
function QuoteBand() {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const [form, setForm] = useState({
    name:     '',
    email:    '',
    phone:    '',
    address:  '',
    type:     '',
    notes:    '',
    consent:  false,
    company:  '', // honeypot — must stay empty
  });
  const onChange = (k) => (e) => {
    const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm({ ...form, [k]: v });
  };

  async function handleSubmit(e) {
    e.preventDefault();
    if (!form.consent || sending) return;
    setSending(true);
    setError(null);
    try {
      const res = await fetch('/api/quote', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('Request failed');
      setSubmitted(true);
    } catch (err) {
      setError("We couldn't send that. Please call the shop at 720·925·1172 or email Michael@YourSignGuyCO.com.");
    } finally {
      setSending(false);
    }
  }

  return (
    <section className="section dark quote-section" id="quote">
      <div className="container">
        <div className="quote-band">
          <div className="quote-side">
            <span className="section-eyebrow">Get a free quote</span>
            <h3>
              Ready to start your<br/>next project?<br/>
              Let's build something great.
            </h3>
            <p style={{ color: 'rgba(255,255,255,.78)', maxWidth: 480, lineHeight: 1.55, marginTop: 18 }}>
              Tell us about the job and we'll come back with a real number — usually within
              the same week. No high-pressure follow-up. If the timing isn't right, we'll
              keep your file and check back.
            </p>
            <ul>
              <li>
                <span className="num">01</span>
                <span><strong>Tell us about the job.</strong> Address, sign type, photos if you have them.</span>
              </li>
              <li>
                <span className="num">02</span>
                <span><strong>We come look.</strong> Measure, talk through options, check what the city allows.</span>
              </li>
              <li>
                <span className="num">03</span>
                <span><strong>You get a real quote.</strong> One number, line-itemed. No surprises at install.</span>
              </li>
            </ul>

            <div className="contact-card" id="contact">
              <span className="label">Direct line to the shop</span>
              <div className="row">
                <Icon d={Icons.Pin} size={18}/>
                <span><strong>Erie</strong> Colorado · Serving the Front Range</span>
              </div>
              <div className="row">
                <Icon d={Icons.Phone} size={18}/>
                <span><strong>Call</strong>
                  <a href="tel:7209251172" style={{ color: 'inherit', borderBottom: '1px solid rgba(255,255,255,.3)', textDecoration: 'none' }}>720·925·1172</a>
                </span>
              </div>
              <div className="row">
                <Icon d={Icons.Mail} size={18}/>
                <span><strong>Email</strong>
                  <a href="mailto:Michael@YourSignGuyCO.com" style={{ color: 'inherit', borderBottom: '1px solid rgba(255,255,255,.3)', textDecoration: 'none' }}>Michael@YourSignGuyCO.com</a>
                </span>
              </div>
            </div>
          </div>

          <div className="quote-card">
            {submitted ? (
              <div className="submitted">
                <div className="check"><Icon d={Icons.Check} size={28}/></div>
                <h4>Thank you! Your submission has been received.</h4>
                <p>We'll be in touch within two business days. If it's urgent, call the shop: 720·925·1172.</p>
                <button className="btn btn-outline btn-sm" style={{ marginTop: 18 }} onClick={() => setSubmitted(false)}>Send another</button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} noValidate>
                <h4 className="form-title">Get a Free Quote</h4>
                <p className="form-sub">Required fields are marked *. We reply within two business days.</p>

                {/* Honeypot — bots fill it, humans don't see it. Server drops any submission with this set. */}
                <div aria-hidden="true" style={{ position: 'absolute', left: '-10000px', top: 'auto', width: 1, height: 1, overflow: 'hidden' }}>
                  <label>
                    Company website (leave blank)
                    <input type="text" name="company" tabIndex={-1} autoComplete="off"
                      value={form.company} onChange={onChange('company')} />
                  </label>
                </div>

                <div className="row">
                  <div className="field">
                    <span className="flabel">Name *</span>
                    <input required value={form.name} onChange={onChange('name')} placeholder="Jane Doe"/>
                  </div>
                  <div className="field">
                    <span className="flabel">Email *</span>
                    <input required type="email" value={form.email} onChange={onChange('email')} placeholder="jane@yourbusiness.com"/>
                  </div>
                </div>
                <div className="row">
                  <div className="field">
                    <span className="flabel">Contact Number *</span>
                    <input required value={form.phone} onChange={onChange('phone')} placeholder="(303) 555-0142"/>
                  </div>
                  <div className="field">
                    <span className="flabel">Business Address</span>
                    <input value={form.address} onChange={onChange('address')} placeholder="123 Main St, Erie CO"/>
                  </div>
                </div>
                <div className="field" style={{ marginBottom: 14 }}>
                  <span className="flabel">Product Type</span>
                  <select value={form.type} onChange={onChange('type')}>
                    <option value="">Choose one (e.g. Window Signs)…</option>
                    <option>Storefront — illuminated</option>
                    <option>Storefront — printed face</option>
                    <option>Monument Sign</option>
                    <option>Vehicle Wrap / Fleet Graphics</option>
                    <option>Dimensional Letters</option>
                    <option>ADA / Wayfinding</option>
                    <option>LED Neon / Lobby Sign</option>
                    <option>Window Vinyl / Frosting</option>
                    <option>Banner / Event Signage</option>
                    <option>A-Frame / Yard Sign</option>
                    <option>Not sure yet — talk to me</option>
                  </select>
                </div>
                <div className="field" style={{ marginBottom: 18 }}>
                  <span className="flabel">Project Notes</span>
                  <textarea rows={4}
                    value={form.notes}
                    onChange={onChange('notes')}
                    placeholder="Please use this area to provide any other information about your requirements — dimensions, mounting wall, deadline, brand assets you have, etc."/>
                </div>
                <div className="checkbox-row">
                  <input id="consent" type="checkbox" required checked={form.consent} onChange={onChange('consent')}/>
                  <label htmlFor="consent">I agree to be contacted by Your Sign Guy LLC about my project.</label>
                </div>
                {error && (
                  <p role="alert" style={{ color: '#e31e25', marginBottom: 12, fontSize: 14 }}>{error}</p>
                )}
                <button className="btn btn-primary" type="submit" disabled={sending} style={{ width: '100%', justifyContent: 'center', opacity: sending ? 0.7 : 1 }}>
                  {sending ? 'Sending…' : <>Send it to the shop <span className="arrow">→</span></>}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

window.QuoteBand = QuoteBand;