// Azlani — Contact / Book demo page

const ContactHero = () => (
  <section style={{ paddingTop: 140, paddingBottom: 80, borderBottom: '1px solid var(--line)' }}>
    <div className="container">
      <FadeUp><div className="eyebrow"><span className="dot"></span> Book a 10-minute demo</div></FadeUp>
      <h1 className="serif" style={{ fontSize: 'clamp(56px, 9vw, 144px)', lineHeight: 0.92, letterSpacing: '-0.035em', margin: '24px 0 0', fontWeight: 400 }}>
        <RevealLines lines={['Tell us about']} />
        <RevealLines lines={[<span key="l">your <span className="ital" style={{ color: 'var(--ember)' }}>intake.</span></span>]} baseDelay={0.08} />
      </h1>
      <FadeUp delay={0.3} style={{ marginTop: 32, maxWidth: 640 }}>
        <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)' }}>
          A few quick questions so the demo is tailored to your shop. We'll follow up within a business day to schedule.
        </p>
      </FadeUp>
    </div>
  </section>
);

const Field = ({ label, children, full, required }) => (
  <label style={{ display: 'flex', flexDirection: 'column', gap: 8, gridColumn: full ? '1 / -1' : 'auto' }}>
    <span className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>
      {label}{required && <span style={{ color: 'var(--ember)', marginLeft: 6 }}>*</span>}
    </span>
    {children}
  </label>
);

const inputStyle = {
  background: 'transparent',
  border: 'none',
  borderBottom: '1px solid var(--line)',
  padding: '14px 0',
  fontSize: 18,
  fontFamily: 'inherit',
  color: 'var(--ink)',
  outline: 'none',
  fontFamily: 'Geist, sans-serif',
};

const ContactForm = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [helpWith, setHelpWith] = React.useState([]);
  const helpOptions = [
    'missed calls', 'after-hours calls', 'website forms',
    'appointment booking', 'photo collection', 'follow-up', 'estimator summaries',
  ];
  const toggle = (o) => setHelpWith(s => s.includes(o) ? s.filter(x => x !== o) : [...s, o]);

  if (submitted) {
    return (
      <section className="section-pad" style={{ borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow"><span className="dot"></span> Received</div>
          <h2 className="serif" style={{ fontSize: 'clamp(48px, 7vw, 112px)', lineHeight: 0.95, letterSpacing: '-0.03em', margin: '24px 0 0', fontWeight: 400 }}>
            Thanks. We'll be in touch <span className="ital" style={{ color: 'var(--ember)' }}>shortly.</span>
          </h2>
          <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 32, maxWidth: 600 }}>
            We'll review your intake and email you within a business day to schedule the demo.
          </p>
        </div>
      </section>
    );
  }

  return (
    <section className="section-pad" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ maxWidth: 1000 }}>
        <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '40px 48px' }}>
            <Field label="Your name" required><input required style={inputStyle} placeholder="John Smith" /></Field>
            <Field label="Company name" required><input required style={inputStyle} placeholder="Smith Commercial Roofing" /></Field>
            <Field label="Website"><input style={inputStyle} placeholder="smithroofing.com" /></Field>
            <Field label="Email" required><input required type="email" style={inputStyle} placeholder="john@smithroofing.com" /></Field>
            <Field label="Phone" required><input required style={inputStyle} placeholder="(555) 123 4567" /></Field>
            <Field label="City / state"><input style={inputStyle} placeholder="Dallas, TX" /></Field>
            <Field label="Do you do commercial roofing?" full>
              <div style={{ display: 'flex', gap: 12, marginTop: 4 }}>
                {['Yes, primarily', 'Both commercial & residential', 'Mostly residential', 'Other service business'].map(o => (
                  <label key={o} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 16px', border: '1px solid var(--line)', borderRadius: 100, fontSize: 14, cursor: 'pointer' }}>
                    <input type="radio" name="commercial" style={{ accentColor: 'var(--ember)' }} /> {o}
                  </label>
                ))}
              </div>
            </Field>
            <Field label="Approximate inbound leads / week">
              <select style={inputStyle}>
                <option>Under 10</option><option>10–25</option><option>25–50</option>
                <option>50–100</option><option>100+</option>
              </select>
            </Field>
            <Field label="Current CRM or tools"><input style={inputStyle} placeholder="JobNimbus, AccuLynx, spreadsheet, none…" /></Field>
            <Field label="What do you want help with?" full>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
                {helpOptions.map(o => (
                  <button key={o} type="button" onClick={() => toggle(o)}
                    style={{
                      padding: '10px 18px', borderRadius: 100,
                      border: '1px solid var(--line)',
                      background: helpWith.includes(o) ? 'var(--ink)' : 'transparent',
                      color: helpWith.includes(o) ? 'var(--bg)' : 'var(--ink)',
                      fontSize: 14, fontFamily: 'Geist, sans-serif', fontStyle: 'italic', fontSize: 18,
                      transition: 'all .2s',
                    }}>
                    {o}
                  </button>
                ))}
              </div>
            </Field>
            <Field label="Anything else we should know?" full>
              <textarea rows={3} style={{ ...inputStyle, borderBottom: '1px solid var(--line)', resize: 'vertical' }} placeholder="Volume patterns, after-hours pain, specific workflows…" />
            </Field>
          </div>
          <div style={{ marginTop: 56, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <button type="submit" className="btn btn-primary">Book my demo <span className="arrow">↗</span></button>
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.04em' }}>
              We respond within one business day.
            </span>
          </div>
        </form>
      </div>
    </section>
  );
};

const AuditCTA = () => null;

function App() {
  return (
    <div className="page-fade">
      <Nav current="contact" />
      <ContactHero />
      <ContactForm />
      <AuditCTA />
      <Footer />
    </div>
  );
}

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