// App — composes the full page, owns the Discovery Call modal state.
function App() {
  const [modal, setModal] = React.useState(false);
  const open = () => setModal(true);
  const close = () => setModal(false);
  return (
    <div className="td-app">
      <TopNav onLogoClick={close} onScheduleClick={open} />
      <main className="td-main">
        <Hero onScheduleClick={open} />
        <ServiceGrid />
        <WhyTrillion />
        <CTABanner onScheduleClick={open} />
      </main>
      <Footer />
      {modal && <DiscoveryModal onClose={close} />}
    </div>
  );
}

function DiscoveryModal({ onClose }) {
  const [sent, setSent] = React.useState(false);
  return (
    <div className="td-scrim" onClick={onClose}>
      <div className="td-modal td-callout td-callout--danger" onClick={e=>e.stopPropagation()}>
        <button className="td-modal__close" onClick={onClose} aria-label="Close">✕</button>
        {!sent ? (
          <>
            <div className="td-callout__head">🚀 Join the Family</div>
            <h3 className="td-modal__h">Tell us about your business.</h3>
            <p className="td-modal__sub"><em>We'll come back in 24 hours with a real plan, not a sales pitch.</em></p>
            <div className="td-modal__form">
              <label>Name<input defaultValue="Travis Talamo" /></label>
              <label>Email<input defaultValue="" placeholder="you@yourcompany.com" /></label>
              <label>Monthly ad budget
                <select defaultValue="">
                  <option value="">Select a range…</option>
                  <option>$5K – $15K</option>
                  <option>$15K – $50K</option>
                  <option>$50K – $250K</option>
                  <option>$250K+</option>
                </select>
              </label>
              <label>Which channels matter most?
                <div className="td-modal__chips">
                  {['🤖 AI','📺 CTV','🤳 Production','🖥️ Display','📢 SEM','🔍 SEO','📸 Social','🎬 Video','🌐 Web'].map(c => (
                    <Chip key={c} label={c} />
                  ))}
                </div>
              </label>
            </div>
            <button className="td-btn td-btn--primary td-btn--lg" onClick={()=>setSent(true)}>
              Schedule the Call →
            </button>
          </>
        ) : (
          <>
            <div className="td-callout__head" style={{color:'var(--cb-success)'}}>✅ Success</div>
            <h3 className="td-modal__h">Welcome to the family.</h3>
            <p className="td-modal__sub"><em>We'll be in your inbox within 24 hours. No vanity metrics. No padded numbers.</em></p>
            <button className="td-btn td-btn--primary td-btn--lg" onClick={onClose}>Close</button>
          </>
        )}
      </div>
    </div>
  );
}

function Chip({ label }) {
  const [on, setOn] = React.useState(false);
  return (
    <button type="button" className={'td-chip' + (on ? ' td-chip--on' : '')} onClick={()=>setOn(!on)}>
      {label}
    </button>
  );
}

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