/* eslint-disable */
// Advertise screen — full ad-package comparison + media platforms + audience stats + contact CTA.

const AdvertiseScreen = ({ setRoute }) => {
  const [selected, setSelected] = React.useState(null);
  return (
    <div data-screen-label="Advertise">
      <section className="cbm-section cbm-section--dark" style={{paddingBottom: 32}}>
        <div className="cbm-section__inner" style={{textAlign:'center'}}>
          <span className="cbm-eyebrow">Partner With Us</span>
          <div className="cbm-section-rule" style={{margin: '12px auto 14px'}} />
          <h1 className="cbm-section__title" style={{textAlign:'center'}}>Your Story. Our Platform. <span style={{color: 'var(--cbm-gold)'}}>Greater Impact.</span></h1>
          <p className="cbm-section__lede" style={{margin: '18px auto 0'}}>
            Put your brand in front of the right audience, in the right place, at the right time.
          </p>
        </div>
      </section>

      <AdTiers heading={true} onSelect={setSelected} />

      {selected && (
        <div style={{
          maxWidth: 720, margin: '0 auto', padding: '14px 22px',
          background: 'var(--cbm-gold)', color: 'var(--cbm-blue)',
          borderRadius: 2, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, textAlign: 'center'
        }}>
          Great choice — the <strong>{selected.toUpperCase()}</strong> package is queued. Our partnerships team will reach out within one business day.
        </div>
      )}

      <MediaPlatforms tone="light" />
      <AudienceStats tone="light" />

      <section className="cbm-section cbm-section--dark">
        <div className="cbm-section__inner" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 56, alignItems: 'center'}}>
          <div>
            <span className="cbm-eyebrow">Let's Grow Together</span>
            <div className="cbm-section-rule" />
            <h2 className="cbm-section__title">Talk to our partnerships team.</h2>
            <p className="cbm-section__lede" style={{marginTop: 14}}>
              Tell us about your brand, audience and goals — we'll come back with a custom plan within one business day.
            </p>
          </div>
          <form onSubmit={async e => {
            e.preventDefault();
            const ok = await window.submitFormspree(window.FORMSPREE.advertiseEnquiry, e.currentTarget, {
              _subject: 'Advertising enquiry',
              selected_tier: selected || '(none yet)',
            });
            if (ok) e.currentTarget.reset();
          }} style={{background: 'rgba(255,255,255,0.06)', padding: 28, borderRadius: 4, border: '1px solid rgba(255,255,255,0.12)'}}>
            <label className="cbm-label" style={{color: '#fff'}}>Company</label>
            <input className="cbm-field" name="company" placeholder="Your company" style={{background:'rgba(255,255,255,0.08)', color:'#fff', borderColor: 'rgba(255,255,255,0.18)'}}/>
            <label className="cbm-label" style={{color: '#fff', marginTop: 14}}>Email</label>
            <input className="cbm-field" type="email" name="email" required placeholder="you@company.cw" style={{background:'rgba(255,255,255,0.08)', color:'#fff', borderColor: 'rgba(255,255,255,0.18)'}}/>
            <label className="cbm-label" style={{color: '#fff', marginTop: 14}}>Goals</label>
            <textarea className="cbm-field" name="goals" rows="3" placeholder="What would you like to achieve?" style={{background:'rgba(255,255,255,0.08)', color:'#fff', borderColor: 'rgba(255,255,255,0.18)'}}/>
            <button type="submit" className="cbm-btn cbm-btn--gold" style={{marginTop: 18, width: '100%'}}>Request a media kit</button>
          </form>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { AdvertiseScreen });