/* CX Defense — Contact page (working faked form) */
const { Nav, Rule, PageHero, Banner, CTA, Footer } = window;
const { useState } = React;

const TOPICS = [
  'Network security architecture', 'Traffic analysis & monitoring', 'Web & data protection',
  'Virtualization & infrastructure', 'GDPR / compliance', 'Threat intelligence / investigation',
  'Ongoing retained defense', 'Something else',
];

function ContactForm() {
  const [sent, setSent] = useState(false);
  const [name, setName] = useState('');
  if (sent) {
    return (
      <div className="form-card">
        <div className="form-sent">
          <div className="mark">✓</div>
          <h3>Message received</h3>
          <p>{name ? name.split(' ')[0] + ', y' : 'Y'}ou'll hear back from an engineer within one business day — not an autoresponder. Everything you sent is confidential from this moment.</p>
          <button className="submit" style={{ width: 'auto', padding: '12px 24px' }} onClick={() => setSent(false)}>Send another</button>
        </div>
      </div>
    );
  }
  return (
    <div className="form-card">
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
        <div className="field">
          <label htmlFor="name">Your Name</label>
          <input id="name" type="text" required autoComplete="name" value={name} onChange={(e) => setName(e.target.value)} />
        </div>
        <div className="field">
          <label htmlFor="email">Email</label>
          <input id="email" type="email" required autoComplete="email" placeholder="you@company.com" />
        </div>
        <div className="field">
          <label htmlFor="org">Organisation <span style={{ textTransform: 'none', letterSpacing: 0, color: 'var(--text-faint)' }}>(optional)</span></label>
          <input id="org" type="text" autoComplete="organization" />
        </div>
        <div className="field">
          <label htmlFor="topic">What does this concern?</label>
          <select id="topic">{TOPICS.map(t => <option key={t}>{t}</option>)}</select>
        </div>
        <div className="field">
          <label htmlFor="message">Tell us about your situation</label>
          <textarea id="message" required placeholder="What you run, what concerns you, and what a good outcome looks like."></textarea>
        </div>
        <button type="submit" className="submit">Send Confidential Enquiry</button>
      </form>
      <div className="form-note">Your message is treated as confidential from receipt. We never share enquiry details with third parties. See our <a href="privacy.html">Privacy Policy</a>.</div>
    </div>
  );
}

function App() {
  return (
    <div className="site">
      <Nav active="contact.html" />
      <PageHero label="Contact" title="Start the <em>conversation</em>">
        Tell us what you run and what concerns you. We read every message personally, and everything you send is confidential from the moment it arrives.
      </PageHero>
      <Banner img="assets/img/boardroom.png" caption="Confidential by default · from the very first message" />
      <div style={{ marginTop: 64 }}><Rule /></div>
      <section className="section">
        <div className="contact-grid">
          <div className="contact-info">
            <h2>What to <em>expect</em></h2>
            <p>Within one business day, you'll hear back from an engineer — not an autoresponder, not a sales sequence. If your enquiry is in our depth, we'll propose a short scoping conversation. If it isn't, we'll tell you straight away and point you somewhere better.</p>
            <p>You don't need to prepare documentation or know the right terminology. Describe the situation in your own words; precision is our job.</p>
            <div className="contact-channel">
              <h4>General &amp; New Engagements</h4>
              <p><a href="mailto:contact@cxdefense.com">contact@cxdefense.com</a></p>
            </div>
            <div className="contact-channel">
              <h4>Security Disclosures</h4>
              <p><a href="mailto:security@cxdefense.com">security@cxdefense.com</a></p>
              <p style={{ marginTop: 6 }}>Found a vulnerability relating to our infrastructure? We respond to good-faith disclosures with respect and urgency.</p>
            </div>
            <div className="contact-channel">
              <h4>Response Time</h4>
              <p>Within one business day. Urgent incident enquiries are prioritised — mark your subject line <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent)' }}>[URGENT]</span>.</p>
            </div>
          </div>
          <ContactForm />
        </div>
      </section>
      <Rule />
      <CTA title="Prefer to read <em>first?</em>"
        actions={<>
          <a href="services.html" className="btn btn-ghost">Services</a>
          <a href="technology.html" className="btn btn-ghost">Technology</a>
        </>}>
        Browse our services and technology to see where we go deep — then write when you're ready.
      </CTA>
      <Footer />
    </div>
  );
}

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