/* global React */
const { useState } = React;
// Shared on window: Link, FadeIn, SectionHead, ClosingCTA

function PageContact() {
  return (
    <>
      <ContactIntro />
      <ContactBody />
    </>
  );
}

function ContactIntro() {
  return (
    <section className="section" style={{ paddingTop: 'clamp(120px, 22vw, 200px)', paddingBottom: 50 }} data-screen-label="01 Contact Intro">
      <div className="wrap">
        <div style={{ maxWidth: 820 }}>
          <div className="eyebrow">Get In Touch</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(44px,6vw,84px)' }}>
            Start a serious<br/>conversation.
          </h1>
          <p className="body body-lg" style={{ marginTop: 28, maxWidth: 680 }}>
            HFI engages with government agencies, allied procurement
            authorities, and defence prime contractors. If you have a real
            requirement, we'd like to hear about it.
          </p>
        </div>
      </div>
    </section>
  );
}

function ContactBody() {
  return (
    <section className="section" style={{ paddingTop: 30, paddingBottom: 120 }} data-screen-label="02 Contact Form">
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 80,
        }} className="contact-grid">
          <ContactForm />
          <ContactDetails />
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 50px !important; }
        }
      `}</style>
    </section>
  );
}

function ContactForm() {
  const requestedProduct = (typeof window !== 'undefined' && window.__leadProduct) || '';
  const [form, setForm] = useState({
    firstName: '', lastName: '', org: '', title: '',
    email: '', country: '',
    enquiry: requestedProduct ? 'Product Information' : '',
    message: requestedProduct ? `I'd like to request more details on: ${requestedProduct}.` : '',
  });
  if (typeof window !== 'undefined') { window.__leadProduct = ''; }
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  const submit = (e) => { e.preventDefault(); setSent(true); };

  if (sent) {
    return (
      <div style={{
        padding: '60px 50px',
        border: '1px solid var(--rule)',
        borderLeft: '3px solid var(--red)',
        background: 'var(--bg-2)',
      }}>
        <div className="label" style={{ color: 'var(--red)', marginBottom: 20 }}>Enquiry Received</div>
        <h2 className="h-2" style={{ marginBottom: 22 }}>Thank you, {form.firstName || 'and acknowledged'}.</h2>
        <p className="body" style={{ margin: 0, maxWidth: 480 }}>
          Your enquiry has been routed to HFI. A member of the team will be in
          contact within five business days. All enquiries are treated as
          confidential.
        </p>
        <button
          onClick={() => { setSent(false); setForm({ firstName:'',lastName:'',org:'',title:'',email:'',country:'',enquiry:'',message:'' }); }}
          className="link-arrow"
          style={{ background: 'transparent', border: 0, borderBottom: '1px solid var(--red)', padding: '6px 0', marginTop: 30, cursor: 'pointer' }}
        >
          Send another enquiry <span>→</span>
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ border: '1px solid var(--rule)', padding: '40px 44px', background: 'var(--bg)' }}>
      <div className="label" style={{ marginBottom: 30, color: 'var(--red)' }}>Enquiry Form</div>

      <div className="form-row">
        <Field label="First Name" required value={form.firstName} onChange={set('firstName')} />
        <Field label="Last Name"  required value={form.lastName}  onChange={set('lastName')} />
      </div>
      <div className="form-row">
        <Field label="Organization" required value={form.org}   onChange={set('org')} />
        <Field label="Title / Role" required value={form.title} onChange={set('title')} />
      </div>
      <div className="form-row">
        <Field label="Email Address" required type="email" value={form.email} onChange={set('email')} />
        <Field label="Country"       required value={form.country} onChange={set('country')} />
      </div>

      <div style={{ marginTop: 20 }}>
        <label className="label" style={{ display: 'block', marginBottom: 10 }}>Nature of Enquiry *</label>
        <select
          required
          value={form.enquiry}
          onChange={set('enquiry')}
          style={inputStyle}
        >
          <option value="">Select…</option>
          <option>Government Program</option>
          <option>Allied Military Procurement</option>
          <option>Prime Contractor</option>
          <option>Product Information</option>
          <option>Media</option>
          <option>Other</option>
        </select>
      </div>

      <div style={{ marginTop: 20 }}>
        <label className="label" style={{ display: 'block', marginBottom: 10 }}>Message *</label>
        <textarea
          required
          rows={5}
          value={form.message}
          onChange={set('message')}
          style={{ ...inputStyle, resize: 'vertical', minHeight: 130, lineHeight: 1.55 }}
        />
      </div>

      <button type="submit" className="btn btn--primary" style={{ marginTop: 36 }}>
        Send Enquiry <span className="arr">→</span>
      </button>

      <p style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 28, lineHeight: 1.6 }}>
        All enquiries are treated as confidential. HFI does not respond to
        unsolicited commercial outreach, civilian product requests, or entertainment
        applications.
      </p>

      <style>{`
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
        @media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
      `}</style>
    </form>
  );
}

const inputStyle = {
  width: '100%',
  background: 'var(--bg-2)',
  border: '1px solid var(--rule)',
  color: 'var(--white)',
  padding: '14px 16px',
  fontFamily: 'inherit',
  fontSize: 15,
  letterSpacing: '0.005em',
  outline: 'none',
  transition: 'border-color 200ms',
};

function Field({ label, required, type = 'text', value, onChange }) {
  return (
    <div>
      <label className="label" style={{ display: 'block', marginBottom: 10 }}>
        {label}{required && ' *'}
      </label>
      <input
        type={type} required={required} value={value} onChange={onChange}
        onFocus={(e) => e.target.style.borderColor = 'var(--red)'}
        onBlur={(e) => e.target.style.borderColor = 'var(--rule)'}
        style={inputStyle}
      />
    </div>
  );
}

function ContactDetails() {
  return (
    <aside>
      <div className="label" style={{ marginBottom: 24, color: 'var(--red)' }}>Direct Channels</div>

      <div style={{ paddingBottom: 28, borderBottom: '1px solid var(--rule)' }}>
        <div className="label" style={{ marginBottom: 14 }}>HFI Pyrotechnics Inc.</div>
        <div style={{ fontSize: 16, color: 'var(--white)', lineHeight: 1.7 }}>
          3322 Hands Road<br/>
          Prescott, Ontario  K0E 1T0<br/>
          Canada
        </div>
      </div>

      <div style={{ padding: '28px 0', borderBottom: '1px solid var(--rule)' }}>
        <div className="label" style={{ marginBottom: 14 }}>Telephone</div>
        <a href="tel:+16139252832" style={{
          fontSize: 18, color: 'var(--white)', fontWeight: 500, letterSpacing: '0.01em',
        }}>+1 613 925-2832</a>
      </div>

      <div style={{ padding: '28px 0', borderBottom: '1px solid var(--rule)' }}>
        <div className="label" style={{ marginBottom: 14 }}>Email</div>
        <a href="mailto:sales@hfipyrotechnics.com" style={{
          fontSize: 16, color: 'var(--red)', fontWeight: 500, wordBreak: 'break-word',
        }}>sales@hfipyrotechnics.com</a>
      </div>

      <div style={{ paddingTop: 28 }}>
        <div className="label" style={{ marginBottom: 14 }}>Public Channels</div>
        <a href="https://www.linkedin.com/company/hfi-pyrotechnics/posts/?feedView=all" target="_blank" rel="noreferrer"
          style={{ fontSize: 15, color: 'var(--white)' }} className="link-arrow">
          LinkedIn <span>↗</span>
        </a>
      </div>

      <div style={{
        marginTop: 50,
        padding: '24px 26px',
        background: 'var(--bg-2)',
        border: '1px solid var(--rule)',
        borderLeft: '2px solid var(--red)',
      }}>
        <div className="label" style={{ marginBottom: 10, color: 'var(--red)' }}>Note</div>
        <p style={{ fontSize: 13.5, color: 'var(--text-2)', margin: 0, lineHeight: 1.6 }}>
          HFI engages exclusively with government, allied procurement
          authorities, and qualified defence primes. We do not serve civilian,
          commercial, or entertainment markets.
        </p>
      </div>
    </aside>
  );
}

window.PageContact = PageContact;