// Contact page in the Wall language. Wired to the Cloudflare Pages function POST /api/contact.
function ContactPage() {
  // Preselect the service when arriving from a capability card link
  // (e.g. Contact Page.html?service=painting)
  const preset = new URLSearchParams(window.location.search).get('service') || '';
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [err, setErr] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    setErr('');
    const form = e.currentTarget;
    const fd = new FormData(form);
    const payload = {
      name: (fd.get('name') || '').toString(),
      email: (fd.get('email') || '').toString(),
      service: (fd.get('service') || '').toString(),
      message: (fd.get('message') || '').toString(),
      website: (fd.get('website') || '').toString(), // honeypot: bots fill this, humans don't
    };
    setStatus('sending');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      let out = {};
      try { out = await res.json(); } catch (_) { /* ignore */ }
      if (res.ok) {
        setStatus('sent');
        form.reset();
      } else {
        setStatus('error');
        setErr(out.detail || 'Something went wrong. Please try again.');
      }
    } catch (_) {
      setStatus('error');
      setErr('Could not reach the server. Please try again, or email justin@s3hobbies.com.');
    }
  }

  return (
    <div className="wall-root wall-bg-plain">
      <WallTopbar active="CONTACT" />

      <section className="wall-page-hero" data-screen-label="Contact hero">
        <div className="wall-door-shift">TELL US WHAT YOU'RE BUILDING</div>
        <h1 className="wall-page-title tone-a">Get in touch</h1>
        <p className="wall-page-pitch">
          Commissions, MVP sign-ups, event bookings, league inquiries, or
          anything in between. Drop a line and we'll get back to you.
        </p>
      </section>

      <div className="wall-contact" data-screen-label="Contact body">
        <div>
          <div className="wall-chips-col">
            <a className="wall-contact-chip" href="mailto:justin@s3hobbies.com"><span className="tag">email</span>justin@s3hobbies.com</a>
            <a className="wall-contact-chip" href="tel:+19032312215"><span className="tag">call</span>(903) 231-2215</a>
            <a className="wall-contact-chip" href="https://www.facebook.com/S3Hobbies/" target="_blank" rel="noopener"><span className="tag">fb</span>Facebook</a>
            <a className="wall-contact-chip" href="https://discord.gg/z5vRXfuuSH" target="_blank" rel="noopener"><span className="tag">chat</span>Discord</a>
          </div>
          <div className="wall-addr-card">
            <div className="wall-addr-label">STOREFRONT · IN RENOVATION</div>
            <div className="wall-addr-line">Elkhart, TX<br />opening to guests by August</div>
            <div className="wall-addr-hours">
              Not open to walk-ins yet. Reach out and we'll arrange pickup, or catch us at a local event.<br />
              <span className="a">STUDIO</span> by appointment<br />
              <span className="b">HOBBIES</span> opening by August
            </div>
          </div>
        </div>

        {status === 'sent' ? (
          <div className="wall-form" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', minHeight: 320 }}>
            <div className="wall-form-title" style={{ color: 'var(--green)' }}>Message sent.</div>
            <p style={{ fontFamily: '"Grindy Brush", sans-serif', fontSize: 20, lineHeight: 1.6, color: 'var(--grey)', marginTop: 14 }}>
              Thanks, we got it and we'll get back to you soon. Need something fast? Email
              justin@s3hobbies.com or hit us on Discord.
            </p>
          </div>
        ) : (
          <form className="wall-form" id="contactForm" onSubmit={handleSubmit}>
            <div className="wall-form-title">Send a brief</div>
            <div className="wall-form-sub">The more detail you give, the better the quote, the faster the turn.</div>
            <div className="wall-field">
              <label htmlFor="name">YOUR NAME</label>
              <input type="text" id="name" name="name" placeholder="Tag name or real name" required="required" />
            </div>
            <div className="wall-field">
              <label htmlFor="email">EMAIL ADDRESS</label>
              <input type="email" id="email" name="email" placeholder="you@email.com" required="required" />
            </div>
            <div className="wall-field">
              <label htmlFor="service">WHAT DO YOU NEED?</label>
              <select id="service" name="service" defaultValue={preset}>
                <option value="" disabled="disabled">Select a service...</option>
                <option value="3d-printing">3D Printing &amp; Fabrication</option>
                <option value="painting">Painting &amp; Sculpture</option>
                <option value="design">Design (CAD / Product)</option>
                <option value="software">Software Development</option>
                <option value="arbiter">Arbiter / Discord</option>
                <option value="hobby-membership">Hobby Side &amp; MVP Membership</option>
                <option value="event-booking">Event / Table Booking</option>
                <option value="other">Other / Multiple Services</option>
              </select>
            </div>
            <div className="wall-field">
              <label htmlFor="message">TELL US ABOUT YOUR PROJECT</label>
              <textarea id="message" name="message" placeholder="What are you trying to make? More detail = better quote."></textarea>
            </div>
            <input type="text" name="website" tabIndex="-1" autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 0, height: 0, opacity: 0 }} />
            {status === 'error' && (
              <div className="wall-form-sub" style={{ color: '#ff5a5a' }}>{err}</div>
            )}
            <div className="wall-form-submit">
              <button type="submit" className="wall-cta-btn tone-a" style={{ border: 'none', cursor: 'pointer', opacity: status === 'sending' ? 0.6 : 1 }} disabled={status === 'sending'}>
                {status === 'sending' ? 'SENDING...' : 'SEND IT →'}
              </button>
            </div>
          </form>
        )}
      </div>

      <WallFooter />
    </div>
  );
}
window.ContactPage = ContactPage;