// Executive contact + footer — wired to Formspree endpoint
const FORMSPREE_ENDPOINT = 'https://formspree.io/f/xkoywyqb';

// Force English validation messages regardless of browser locale
const validationProps = {
  onInvalid: (e) => {
    const el = e.target;
    if (el.validity.valueMissing) {
      el.setCustomValidity('Please fill out this field.');
    } else if (el.validity.typeMismatch && el.type === 'email') {
      el.setCustomValidity('Please enter a valid email address.');
    } else {
      el.setCustomValidity('');
    }
  },
  onInput: (e) => e.target.setCustomValidity(''),
};

const ContactFooter = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    const formEl = e.target;
    const data = new FormData(formEl);
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' },
      });
      if (res.ok) {
        setSubmitted(true);
      } else {
        const j = await res.json().catch(() => ({}));
        setError(j.error || 'Submission failed. Please try again or email commercial@goodbrandgroup.com.au directly.');
      }
    } catch (err) {
      setError('Network error. Please try again or email commercial@goodbrandgroup.com.au directly.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <>
      <section className="gb-section gb-section--dark" id="contact">
        <div className="gb-container">
          <div className="gb-section__head">
            <span className="t-overline gb-overline-light">— VI. CONTACT</span>
            <div>
              <h2 className="gb-section__title gb-section__title--light">
                Commercial desk &amp; corporate relations.
              </h2>
              <p style={{maxWidth:680, marginTop:18, color:'rgba(245,243,238,0.92)', fontSize:18, lineHeight:1.6, fontStyle:'normal'}}>
                Goodbrand Group operates exclusively through vetted B2B trade networks.
                For high-volume global procurement, strategic brand distribution, and
                cross-border supply chain partnerships, please direct your correspondence
                to our commercial desk. All communications are managed under strict
                confidentiality and market-protection protocols.
              </p>
            </div>
          </div>

          <div className="gb-contact">
            <div className="gb-contact__meta">
              <div className="gb-contact__row">
                <div className="t-overline gb-overline-light">Commercial Desk</div>
                <a href="mailto:commercial@goodbrandgroup.com.au?subject=Commercial%20Inquiry" className="gb-contact__val t-mono" style={{textDecoration:'none', color:'var(--gb-alabaster)', borderBottom:'1px solid rgba(245,243,238,0.3)', paddingBottom:'2px', display:'inline-block'}}>commercial@goodbrandgroup.com.au</a>
              </div>
              <div className="gb-contact__row">
                <div className="t-overline gb-overline-light">Offices</div>
                <div className="gb-contact__val">Sydney, Australia<br/>Hong Kong SAR</div>
              </div>
              <div className="gb-contact__row">
                <div className="t-overline gb-overline-light">Operational Hours</div>
                <div className="gb-contact__val">Monday – Friday · 09:00–18:00 AEST</div>
              </div>
            </div>

            <form className="gb-form" id="contact-form" style={{scrollMarginTop: 200}} onSubmit={onSubmit}>
              {/* Hidden fields control how Formspree sends the email */}
              <input type="hidden" name="_subject" value="Goodbrand Group · New Commercial Inquiry" />
              <input type="text" name="_gotcha" style={{display:'none'}} tabIndex="-1" autoComplete="off" />
              {submitted ? (
                <div className="gb-form__ack" style={{borderTop:'none', padding:'80px 0', display:'flex', flexDirection:'column', alignItems:'flex-start', justifyContent:'center', minHeight:380}}>
                  <span style={{display:'inline-block', width:36, height:1.5, background:'#C9A86B', marginBottom:24}}></span>
                  <div className="t-overline gb-overline-light" style={{marginBottom:18}}>Acknowledged</div>
                  <p className="t-body-l" style={{color:'var(--gb-alabaster)', maxWidth:520, lineHeight:1.6, margin:0}}>
                    Your inquiry has been logged with our commercial desk and
                    assigned for review. Expect a personal response from{' '}
                    <span className="t-mono" style={{color:'var(--gb-alabaster)'}}>commercial@goodbrandgroup.com.au</span>{' '}
                    within two business days.
                  </p>
                </div>
              ) : (
                <>
                  <div className="gb-form__row">
                    <label className="gb-field">
                      <span className="t-overline gb-overline-light"><span style={{color:'#C9A86B', marginRight:4}}>*</span>Full Name</span>
                      <input type="text" name="name" required autoComplete="name" {...validationProps} />
                    </label>
                    <label className="gb-field">
                      <span className="t-overline gb-overline-light"><span style={{color:'#C9A86B', marginRight:4}}>*</span>Company</span>
                      <input type="text" name="company" required autoComplete="organization" {...validationProps} />
                    </label>
                  </div>
                  <div className="gb-form__row">
                    <label className="gb-field">
                      <span className="t-overline gb-overline-light"><span style={{color:'#C9A86B', marginRight:4}}>*</span>Inquiry Type</span>
                      <select name="inquiry_type" defaultValue="High-Volume Procurement" required {...validationProps} onChange={(e) => e.target.setCustomValidity('')}>
                        <option>High-Volume Procurement</option>
                        <option>Strategic Brand Distribution</option>
                        <option>Cross-Border Supply Chain</option>
                        <option>General Corporate Inquiry</option>
                      </select>
                    </label>
                    <label className="gb-field">
                      <span className="t-overline gb-overline-light"><span style={{color:'#C9A86B', marginRight:4}}>*</span>Email</span>
                      <input type="email" name="email" required autoComplete="email" {...validationProps} />
                    </label>
                  </div>
                  <label className="gb-field gb-field--full">
                    <span className="t-overline gb-overline-light"><span style={{color:'#C9A86B', marginRight:4}}>*</span>Message</span>
                    <textarea name="message" rows="3" required {...validationProps}></textarea>
                  </label>
                  {error && (
                    <div style={{color:'rgba(255,180,140,0.95)', fontSize:13, marginBottom:16, padding:'12px 16px', border:'1px solid rgba(255,180,140,0.4)', background:'rgba(140,60,40,0.15)'}}>
                      {error}
                    </div>
                  )}
                  <button type="submit" className="gb-btn gb-btn--primary-inverse" disabled={submitting} style={{opacity: submitting ? 0.6 : 1, cursor: submitting ? 'wait' : 'pointer'}}>
                    {submitting ? 'Submitting…' : <>Submit Inquiry <span className="gb-arrow">→</span></>}
                  </button>
                </>
              )}
            </form>
          </div>
        </div>
      </section>

      <footer className="gb-footer">
        <div className="gb-container gb-footer__inner">
          <div className="gb-footer__brand">
            <img src="assets/logo-wordmark.png?v=2" alt="Goodbrand Group" style={{height:36,width:'auto',display:'block',filter:'invert(1)',marginBottom:'22px'}}/>
            <div className="gb-footer__legal-name" style={{fontFamily:'var(--font-display)', fontSize:14, fontWeight:500, color:'var(--gb-alabaster)', letterSpacing:'-0.005em', marginBottom:4}}>
              Goodbrand Group Pty Ltd
            </div>
            <div className="t-mono" style={{fontSize:11, letterSpacing:'0.08em', color:'rgba(245,243,238,0.7)', marginBottom:14}}>
              ABN&nbsp;&nbsp;45&nbsp;132&nbsp;269&nbsp;786
            </div>
            <p className="t-body-s gb-footer__tag" style={{marginTop:0}}>
              An Australian institutional<br/>
              B2B supply chain partner.
            </p>
          </div>
          <div className="gb-footer__cols">
            <div>
              <div className="t-overline gb-overline-light">Operations</div>
              <a href="#capabilities">Capabilities</a>
              <a href="#network">Network</a>
              <a href="#partners">Partners</a>
            </div>
            <div>
              <div className="t-overline gb-overline-light">Group</div>
              <a href="#heritage">Heritage</a>
              <a href="#compliance">Compliance</a>
              <a href="#contact">Contact</a>
            </div>
            <div>
              <div className="t-overline gb-overline-light">Legal</div>
              <a href="terms.html">Terms of Use</a>
              <a href="privacy.html">Privacy Policy</a>
            </div>
          </div>
          <div className="gb-footer__base" style={{color:'rgba(245,243,238,0.55)'}}>
            <span className="t-mono" style={{color:'rgba(245,243,238,0.55)'}}>© Copyright 2026 Goodbrand Group Pty Ltd · All rights reserved.</span>
          </div>
        </div>
      </footer>
    </>
  );
};
window.ContactFooter = ContactFooter;