/* global React */
// Comparison block + booking modal + closing CTA + footer + chrome

const { useState: useStateC, useEffect: useEffectC } = React;

// ─── Comparison block (tabbed) ─────────────────────────────────────────
function Comparison() {
  const [tab, setTab] = useStateC('hiring');

  const hiringRows = [
    { dim: "Time to productive", a: "3 to 6 month ramp", b: "Productive on day one" },
    { dim: "Annual cost", a: "$80K to $200K OTE plus benefits", b: "$18K to $60K per year" },
    { dim: "Risk of bad fit", a: "High. ~50% of reps don't make quota in year one", b: "None. Cancel if it doesn't work" },
    { dim: "Capacity", a: "Linear: one rep, finite hours", b: "Scales with pipeline" },
    { dim: "What it handles", a: "The conversations and the admin", b: "The admin. So reps focus on conversations." },
  ];
  const sdrRows = [
    { dim: "Works on", a: "Cold lists", b: "Your existing pipeline" },
    { dim: "Produces", a: "An email", b: "Email, proposal, quote, contract, rep task" },
    { dim: "Delivered as", a: "A tool you configure", b: "An agent we build for your motion" },
    { dim: "Sits in the funnel", a: "Pre-meeting", b: "Post-meeting through close" },
  ];
  const rows = tab === 'hiring' ? hiringRows : sdrRows;
  const aLabel = tab === 'hiring' ? 'A new rep' : 'AI SDRs';

  return (
    <section className="section" id="compare">
      <div className="container">
        <div style={{maxWidth:'48rem', marginBottom:'2rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>Compared to the alternative</div>
          <h2 className="h-large">{tab === 'hiring' ? "It's a hiring decision, not a software purchase." : "It's not an AI SDR. Different funnel, different output."}</h2>
        </div>
        <div className="compare-tabs" role="tablist">
          <button role="tab" className={tab==='hiring'?'is-active':''} onClick={()=>setTab('hiring')}>Compared to hiring</button>
          <button role="tab" className={tab==='sdr'?'is-active':''} onClick={()=>setTab('sdr')}>Compared to AI SDRs</button>
        </div>

        <div className="compare-grid">
          <div className="compare-cell compare-cell--header">&nbsp;</div>
          <div className="compare-cell compare-cell--header">{aLabel}</div>
          <div className="compare-cell compare-cell--header is-portant">Portant.ai</div>
          {rows.map(r => (
            <React.Fragment key={r.dim}>
              <div className="compare-cell compare-cell--label">{r.dim}</div>
              <div className="compare-cell">{r.a}</div>
              <div className="compare-cell compare-cell--portant">{r.b}</div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Booking modal ─────────────────────────────────────────────────────
function BookingModal({ open, onClose }) {
  const [step, setStep] = useStateC(0);
  const [day, setDay] = useStateC(null);
  const [time, setTime] = useStateC(null);
  const [name, setName] = useStateC("");
  const [email, setEmail] = useStateC("");
  const [company, setCompany] = useStateC("");
  const [size, setSize] = useStateC("");

  useEffectC(() => {
    if (!open) {
      setTimeout(() => { setStep(0); setDay(null); setTime(null); setName(""); setEmail(""); setCompany(""); setSize(""); }, 300);
    }
  }, [open]);

  if (!open) return null;

  const days = [
    {n: "Mon", d: 6, dis: false},
    {n: "Tue", d: 7, dis: false},
    {n: "Wed", d: 8, dis: false},
    {n: "Thu", d: 9, dis: false},
    {n: "Fri", d: 10, dis: false},
    {n: "Sat", d: 11, dis: true},
    {n: "Sun", d: 12, dis: true},
  ];
  const slots = ["9:00am", "10:00am", "11:00am", "1:00pm", "2:30pm", "4:00pm"];

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e)=>e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">✕</button>
        <div className="eyebrow" style={{marginBottom:'0.875rem'}}>Step {step+1} of 3 · Book a scoping call</div>
        {step === 0 && (
          <>
            <h3 className="h-large" style={{fontSize:'1.75rem'}}>Pick a day in May.</h3>
            <p className="body-muted" style={{marginTop:'0.5rem', fontSize:'0.9375rem'}}>30 minutes. We'll scope the implementation and send pricing on the call.</p>
            <div className="calendar-grid" style={{marginTop:'1.25rem'}}>
              {days.map(d => (
                <button key={d.d} className={`calendar-day ${d.dis?'is-disabled':''} ${day===d.d?'is-selected':''}`}
                        disabled={d.dis}
                        onClick={()=>setDay(d.d)}>
                  <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:'2px'}}>
                    <span style={{fontFamily:'var(--font-mono)', fontSize:'0.625rem', opacity:0.7}}>{d.n}</span>
                    <span>{d.d}</span>
                  </div>
                </button>
              ))}
            </div>
            <div style={{display:'flex', justifyContent:'flex-end', marginTop:'1.5rem'}}>
              <button className="btn btn--primary" disabled={!day} style={{opacity: day?1:0.4, cursor: day?'pointer':'not-allowed'}} onClick={()=>setStep(1)}>Continue →</button>
            </div>
          </>
        )}
        {step === 1 && (
          <>
            <h3 className="h-large" style={{fontSize:'1.75rem'}}>Pick a time.</h3>
            <p className="body-muted" style={{marginTop:'0.5rem', fontSize:'0.9375rem'}}>All times Eastern · May {day}</p>
            <div className="time-slots">
              {slots.map(s => (
                <button key={s} className={`time-slot ${time===s?'is-selected':''}`} onClick={()=>setTime(s)}>{s}</button>
              ))}
            </div>
            <div style={{display:'flex', justifyContent:'space-between', marginTop:'1.5rem'}}>
              <button className="btn btn--ghost" onClick={()=>setStep(0)}>← Back</button>
              <button className="btn btn--primary" disabled={!time} style={{opacity: time?1:0.4, cursor: time?'pointer':'not-allowed'}} onClick={()=>setStep(2)}>Continue →</button>
            </div>
          </>
        )}
        {step === 2 && (
          <>
            <h3 className="h-large" style={{fontSize:'1.75rem'}}>Quick context.</h3>
            <p className="body-muted" style={{marginTop:'0.5rem', fontSize:'0.9375rem'}}>So we don't waste your time on the call.</p>
            <div className="field">
              <label>Name</label>
              <input value={name} onChange={e=>setName(e.target.value)} placeholder="Mark Reilly" />
            </div>
            <div className="field">
              <label>Work email</label>
              <input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="mark@company.com" />
            </div>
            <div className="field">
              <label>Company</label>
              <input value={company} onChange={e=>setCompany(e.target.value)} placeholder="Acme Corp" />
            </div>
            <div className="field">
              <label>Sales team size</label>
              <select value={size} onChange={e=>setSize(e.target.value)}>
                <option value="">Pick one</option>
                <option>1–10 reps</option>
                <option>10–50 reps</option>
                <option>50–200 reps</option>
                <option>200+ reps</option>
              </select>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', marginTop:'1.5rem'}}>
              <button className="btn btn--ghost" onClick={()=>setStep(1)}>← Back</button>
              <button className="btn btn--primary" disabled={!name||!email||!company||!size} style={{opacity:(name&&email&&company&&size)?1:0.4}} onClick={()=>setStep(3)}>Confirm booking</button>
            </div>
          </>
        )}
        {step === 3 && (
          <div style={{textAlign:'center', padding:'1rem 0'}}>
            <div style={{
              width:'56px', height:'56px',
              borderRadius:'999px',
              background:'color-mix(in srgb, var(--accent) 18%, transparent)',
              color:'var(--accent)',
              display:'grid', placeItems:'center',
              margin:'0 auto 1.25rem',
              fontSize:'1.75rem'
            }}>✓</div>
            <h3 className="h-large" style={{fontSize:'1.75rem'}}>Booked.</h3>
            <p className="body-muted" style={{marginTop:'0.625rem', fontSize:'0.9375rem'}}>
              We've sent a calendar hold to <strong style={{color:'var(--page-fg)', fontWeight:500}}>{email}</strong> for May {day} at {time}.
            </p>
            <p className="body-muted" style={{marginTop:'0.5rem', fontSize:'0.875rem'}}>
              You'll get a prep doc 24 hours beforehand.
            </p>
            <button className="btn btn--ghost" style={{marginTop:'1.5rem'}} onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Closing CTA ───────────────────────────────────────────────────────
function ClosingCTA({ onBook }) {
  return (
    <section className="section">
      <div className="container">
        <div className="closing">
          <div className="eyebrow" style={{marginBottom:'1.5rem', color:'color-mix(in srgb, var(--inverse-fg) 60%, transparent)'}}>11 · Closing</div>
          <h2 className="h-mega" style={{fontSize:'clamp(2.5rem, 5.5vw, 4.5rem)', maxWidth:'24ch', margin:'0 auto'}}>
            Book a scoping call.<br/>
            <em style={{color:'var(--accent)'}}>See what your next rep would cost.</em>
          </h2>
          <p className="lead" style={{marginTop:'1.5rem', fontSize:'1.125rem'}}>30 minutes. We'll scope the implementation, share pricing, and you'll leave with a number to put next to the headcount line.</p>
          <div style={{marginTop:'2.5rem', display:'flex', gap:'0.75rem', justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn--primary btn--lg" onClick={onBook}>Book a scoping call →</button>
            <a href="#how-it-works" className="btn btn--ghost btn--lg" style={{borderColor:'color-mix(in srgb, var(--inverse-fg) 25%, transparent)', color:'var(--inverse-fg)'}}>See how it works</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="site-footer">
      <div className="container site-footer-inner">
        <div className="row" style={{gap:'0.625rem'}}>
          <div className="brand-mark"><img src="assets/portant-mark.png" alt="" /></div>
          <div>
            <div style={{fontSize:'0.875rem', fontWeight:500, letterSpacing:'-0.01em'}}>Portant<span className="brand-tld">.ai</span></div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:'0.6875rem', letterSpacing:'0.08em', color:'var(--page-fg-subtle)'}}>By the team at portant.co</div>
          </div>
        </div>
        <div className="footer-links">
          <a href="https://portant.co">portant.co</a>
          <a href="#pricing">Pricing</a>
          <a href="#how-it-works">How it works</a>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
        </div>
        <div style={{fontFamily:'var(--font-mono)', fontSize:'0.6875rem', letterSpacing:'0.08em', color:'var(--page-fg-subtle)'}}>
          © 2026 Portant
        </div>
      </div>
    </footer>
  );
}

// ─── Header ────────────────────────────────────────────────────────────
function Header({ onBook }) {
  return (
    <header className="site-header">
      <div className="site-header-inner">
        <a href="#top" className="brand">
          <div className="brand-mark"><img src="assets/portant-mark.png" alt="" /></div>
          <span>Portant<span className="brand-tld">.ai</span></span>
        </a>
        <nav className="nav-links">
          <a href="#how-it-works">How it works</a>
          <a href="#compare">Compared to</a>
          <a href="#pricing">Pricing</a>
        </nav>
        <button className="btn btn--primary" onClick={onBook}>Book a scoping call</button>
      </div>
    </header>
  );
}

// ─── Logo strip ────────────────────────────────────────────────────────
function TrustStrip() {
  return (
    <div className="container" style={{paddingTop:'1rem', paddingBottom:'1rem'}}>
      <div style={{
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        gap:'2.5rem',
        flexWrap:'wrap',
        fontFamily:'var(--font-mono)',
        fontSize:'0.6875rem',
        letterSpacing:'0.12em',
        textTransform:'uppercase',
        color:'var(--page-fg-subtle)'
      }}>
        <span>Built by the Portant team</span>
        <span style={{opacity:0.4}}>·</span>
        <span>HubSpot Leading Tier Partner</span>
        <span style={{opacity:0.4}}>·</span>
        <span>4.9 on G2</span>
        <span style={{opacity:0.4}}>·</span>
        <span>3,000+ HubSpot installs</span>
      </div>
    </div>
  );
}

Object.assign(window, { Comparison, BookingModal, ClosingCTA, Footer, Header, TrustStrip });