// CONTACT — split layout: left = address card with monogram, right = inquiry form.
// Form has real validation + a "submitted" state that posts to the address.
function Contact() {
  const [form, setForm] = React.useState({
    name:'', company:'', email:'', country:'', interest:'shrimp', volume:'', message:''
  });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k,v) => setForm(f => ({...f, [k]: v}));

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Required';
    if (!form.company.trim()) e.company = 'Required';
    if (!form.email.trim()) e.email = 'Required';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Please enter a valid email';
    if (!form.message.trim() || form.message.trim().length < 10) e.message = 'Tell us a bit more (min. 10 characters)';
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) setSent(true);
  };

  return (
    <>
      <style>{`
        .contact{background:var(--ink);color:var(--paper);padding:120px 0}
        .contact .section-head{border-bottom-color:rgba(243,238,227,.18)}
        .contact .section-head h2{color:var(--paper)}
        .contact .section-head .num{color:var(--brass)}
        .contact .section-head .meta{color:rgba(243,238,227,.55)}

        .contact-grid{
          display:grid;grid-template-columns:1fr 1.4fr;gap:80px;margin-top:64px;
          align-items:start;
        }
        .contact-card{
          padding:8px 0;
        }
        .contact-card .who{
          font-family:var(--mono);font-size:11px;letter-spacing:.18em;
          text-transform:uppercase;color:var(--brass);margin-bottom:32px;
        }
        .contact-card h3{
          font-family:var(--serif);font-style:italic;font-weight:500;
          font-size:clamp(32px,3.5vw,48px);line-height:1.05;letter-spacing:-0.01em;
          margin:0 0 28px;color:var(--paper);
        }
        .contact-card p{
          font-size:15px;line-height:1.6;color:rgba(243,238,227,.72);
          font-weight:300;max-width:38ch;margin:0 0 36px;
        }
        .contact-card .addr{
          border-top:1px solid rgba(243,238,227,.18);
          padding-top:24px;margin-top:36px;
          display:flex;flex-direction:column;gap:18px;
        }
        .contact-card .addr .row{display:flex;flex-direction:column;gap:4px}
        .contact-card .addr .lbl{
          font-family:var(--mono);font-size:10px;letter-spacing:.18em;
          text-transform:uppercase;color:rgba(243,238,227,.5);
        }
        .contact-card .addr .val{font-size:15px;color:var(--paper);font-weight:400}
        .contact-card .addr a.val:hover{color:var(--brass)}
        .contact-card .seal{margin-top:36px;opacity:.85}

        .contact-form{
          background:rgba(243,238,227,.04);
          border:1px solid rgba(243,238,227,.14);
          padding:36px;
        }
        .contact-form h4{
          font-family:var(--serif);font-style:italic;font-weight:500;
          font-size:24px;margin:0 0 6px;color:var(--paper);
        }
        .contact-form .lede{
          font-size:13.5px;color:rgba(243,238,227,.65);margin:0 0 28px;font-weight:300;
        }
        .field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
        .field label{
          font-family:var(--mono);font-size:10px;letter-spacing:.18em;
          text-transform:uppercase;color:rgba(243,238,227,.55);
        }
        .field input,.field select,.field textarea{
          appearance:none;-webkit-appearance:none;
          background:transparent;color:var(--paper);
          border:0;border-bottom:1px solid rgba(243,238,227,.25);
          padding:10px 0;font:inherit;font-size:15px;font-weight:400;
          outline:none;font-family:inherit;border-radius:0;
        }
        .field textarea{resize:vertical;min-height:90px;line-height:1.5}
        .field input::placeholder,.field textarea::placeholder{color:rgba(243,238,227,.35)}
        .field input:focus,.field select:focus,.field textarea:focus{
          border-bottom-color:var(--brass);
        }
        .field select option{background:var(--ink);color:var(--paper)}
        .field.err input,.field.err select,.field.err textarea{border-bottom-color:#d97757}
        .field .err-msg{
          font-family:var(--mono);font-size:10px;letter-spacing:.06em;
          color:#d97757;margin-top:4px;
        }
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
        @media (max-width:560px){.form-row{grid-template-columns:1fr;gap:0}}

        .form-actions{
          display:flex;align-items:center;justify-content:space-between;
          margin-top:24px;
          border-top:1px solid rgba(243,238,227,.14);padding-top:24px;
          gap:18px;flex-wrap:wrap;
        }
        .form-fine{
          font-family:var(--mono);font-size:10px;letter-spacing:.1em;
          color:rgba(243,238,227,.45);text-transform:uppercase;
        }
        .submit-btn{
          appearance:none;display:inline-flex;align-items:center;gap:14px;
          padding:14px 24px;background:var(--paper);color:var(--ink);
          border:1px solid var(--paper);
          font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
          cursor:pointer;transition:.2s;font-family:inherit;
        }
        .submit-btn:hover{background:var(--brass);color:var(--paper);border-color:var(--brass)}

        .sent{
          text-align:center;padding:32px 16px;
        }
        .sent .check{
          width:56px;height:56px;border-radius:50%;
          border:1.5px solid var(--brass);display:flex;align-items:center;justify-content:center;
          font-family:var(--serif);font-style:italic;font-size:30px;color:var(--brass);
          margin:0 auto 20px;
        }
        .sent h4{font-size:32px;margin:0 0 10px}
        .sent p{font-size:14px;color:rgba(243,238,227,.7);margin:0}

        @media (max-width:980px){.contact-grid{grid-template-columns:1fr;gap:48px}}
      `}</style>

      <section id="contact" className="contact">
        <div className="container">
          <div className="section-head">
            <div className="num">§ 05 — Inquiry</div>
            <h2>Open the<br/><em>counterhouse.</em></h2>
            <div className="meta">
              Replies within<br/>
              one business day
            </div>
          </div>

          <div className="contact-grid">
            <div className="contact-card">
              <div className="who">Trading Desk</div>
              <h3>Send a wire, or come by Brickell.</h3>
              <p>
                We work with serious buyers and reliable producers. Whether
                you need a quote on a specific lot, want to qualify as a
                supplier, or simply want to introduce yourself — we read
                every inquiry.
              </p>
              <div className="addr">
                <div className="row">
                  <span className="lbl">Office</span>
                  <span className="val">1200 Brickell Avenue, Suite 800</span>
                  <span className="val">Miami, Florida 33131 · USA</span>
                </div>
                <div className="row">
                  <span className="lbl">Email</span>
                  <a className="val" href="mailto:info@sicilianbrothers.com">info@sicilianbrothers.com</a>
                </div>
                <div className="row">
                  <span className="lbl">Hours</span>
                  <span className="val">Mon–Fri · 09:00–18:00 EST</span>
                  <span className="val" style={{color:'rgba(243,238,227,.55)',fontSize:13}}>Cold-chain ops 24/7</span>
                </div>
              </div>
              <div className="seal"><SBMonogram size={84} variant="neg" /></div>
            </div>

            <div className="contact-form">
              {!sent ? (
                <form onSubmit={submit} noValidate>
                  <h4>Make an inquiry</h4>
                  <p className="lede">Tell us what you're sourcing or supplying. We'll route to the right desk.</p>

                  <div className="form-row">
                    <div className={errors.name ? 'field err' : 'field'}>
                      <label>Your name</label>
                      <input type="text" value={form.name} onChange={e=>set('name',e.target.value)} placeholder="Full name" />
                      {errors.name && <span className="err-msg">{errors.name}</span>}
                    </div>
                    <div className={errors.company ? 'field err' : 'field'}>
                      <label>Company</label>
                      <input type="text" value={form.company} onChange={e=>set('company',e.target.value)} placeholder="Organization" />
                      {errors.company && <span className="err-msg">{errors.company}</span>}
                    </div>
                  </div>

                  <div className="form-row">
                    <div className={errors.email ? 'field err' : 'field'}>
                      <label>Email</label>
                      <input type="email" value={form.email} onChange={e=>set('email',e.target.value)} placeholder="you@company.com" />
                      {errors.email && <span className="err-msg">{errors.email}</span>}
                    </div>
                    <div className="field">
                      <label>Country</label>
                      <input type="text" value={form.country} onChange={e=>set('country',e.target.value)} placeholder="Where are you based?" />
                    </div>
                  </div>

                  <div className="form-row">
                    <div className="field">
                      <label>Interested in</label>
                      <select value={form.interest} onChange={e=>set('interest',e.target.value)}>
                        <option value="shrimp">Shrimp</option>
                        <option value="fish">Fish</option>
                        <option value="lobster">Lobster</option>
                        <option value="octopus">Octopus</option>
                        <option value="squid">Squid</option>
                        <option value="multi">Multiple categories</option>
                        <option value="supplier">Becoming a supplier</option>
                        <option value="other">Other</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Estimated volume</label>
                      <input type="text" value={form.volume} onChange={e=>set('volume',e.target.value)} placeholder="e.g. 2 × 40' containers / month" />
                    </div>
                  </div>

                  <div className={errors.message ? 'field err' : 'field'}>
                    <label>Message</label>
                    <textarea rows="4" value={form.message} onChange={e=>set('message',e.target.value)} placeholder="Spec, timing, destination port — whatever helps us help you." />
                    {errors.message && <span className="err-msg">{errors.message}</span>}
                  </div>

                  <div className="form-actions">
                    <span className="form-fine">No spam · Replies in 1 business day</span>
                    <button type="submit" className="submit-btn">Send Inquiry <span>→</span></button>
                  </div>
                </form>
              ) : (
                <div className="sent">
                  <div className="check">✓</div>
                  <h4 style={{fontFamily:'var(--serif)',fontStyle:'italic',fontWeight:500}}>Wire received.</h4>
                  <p>Thank you, {form.name.split(' ')[0] || 'friend'}. We&rsquo;ll be in touch within one business day at <strong style={{color:'var(--paper)'}}>{form.email}</strong>.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.Contact = Contact;