function Contact() {
  const [sent, setSent] = useState(false);
  return (
    <>
      <Nav current="contact" />
      <section className="section">
        <div className="hero-eyebrow"><span className="accent">·</span> Contact</div>
        <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', margin: '0 0 20px', letterSpacing: '-0.02em' }}>
          Questions, Bug Reports, Feature Requests.
        </h1>
        <p style={{ color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.7, maxWidth: 640, marginBottom: 40 }}>
          GHOST is maintained by a single author. The fastest way to reach me is
          through the channels below. Please read the Guide first — most
          questions are answered there.
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 14, marginBottom: 48 }}>
          <a className="feature" href="https://www.tradingview.com/script/cpnTMAyd-Ghost/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', color: 'inherit' }}>
            <div className="ico">TV</div>
            <h4>TradingView Comments</h4>
            <p>Open the script page and post a comment. Best for usage questions and feature ideas.</p>
          </a>
          <a className="feature" href="mailto:exploitlogic.exe@gmail.com" style={{ textDecoration: 'none', color: 'inherit' }}>
            <div className="ico">@</div>
            <h4>Email</h4>
            <p>For bug reports, licensing, or anything not appropriate for a public comment thread.</p>
          </a>
          <a className="feature" href="guide.html" style={{ textDecoration: 'none', color: 'inherit' }}>
            <div className="ico">?</div>
            <h4>Troubleshooting</h4>
            <p>Section 07 of the Guide covers the common confusions — disclaimer gate, missing markers, flickering signals, and more.</p>
          </a>
        </div>

        <h2 className="section-title">Or Send a Note Directly.</h2>
        <p className="section-deck">No Tracking. No Newsletter Signup. Just a Form.</p>

        {sent ? (
          <div className="callout">
            <span className="callout-tag">Message Ready</span>
            <p>Thanks — your message is on its way. I'll reply as soon as I can.</p>
          </div>
        ) : (
          <form className="contact-form" action="https://formspree.io/f/mykopqrj" method="POST" onSubmit={async (e) => {
              e.preventDefault();
              const f = e.target;
              const data = new FormData(f);
              try {
                const res = await fetch('https://formspree.io/f/mykopqrj', {
                  method: 'POST',
                  body: data,
                  headers: { Accept: 'application/json' },
                });
                if (res.ok) { setSent(true); f.reset(); }
                else { alert('Sorry, something went wrong. Please try again.'); }
              } catch (err) {
                alert('Sorry, something went wrong. Please try again.');
              }
            }}>
            <label>
              <span>Name</span>
              <input required type="text" name="name" placeholder="Your name" />
            </label>
            <label>
              <span>Email</span>
              <input required type="email" name="email" placeholder="you@example.com" />
            </label>
            <label>
              <span>Topic</span>
              <select name="topic">
                <option>Usage Question</option>
                <option>Bug Report</option>
                <option>Feature Request</option>
                <option>Licensing / Commercial</option>
                <option>Other</option>
              </select>
            </label>
            <label>
              <span>Message</span>
              <textarea required rows={6} name="message" placeholder="What can I help with?" />
            </label>
            <div>
              <button type="submit" className="btn btn-primary">Send Message →</button>
            </div>
          </form>
        )}
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Contact />);