/* global React */
// Section components for portant.ai

const { useState: useStateS, useEffect: useEffectS } = React;

// ─── Section 2: The hiring problem ─────────────────────────────────────
function HiringProblem() {
  const stats = [
    { kpi: "$120k+", label: "Fully loaded AE cost", note: "OTE + benefits + tooling, year one." },
    { kpi: "3–6 mo", label: "Time to ramp", note: "Median for SaaS AEs to first quota attainment." },
    { kpi: "~50%", label: "Don't make quota", note: "Fail rate for net-new reps in year one." },
    { kpi: "0", label: "Deals worked while ramping", note: "Pipeline goes stale while a hire learns the motion." },
  ];
  return (
    <section className="section section--bg-grid" id="hiring-problem">
      <div className="container">
        <div style={{maxWidth:'42rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>02 · The hiring problem</div>
          <h2 className="h-large">The next rep is the riskiest line item on your plan.</h2>
          <p className="lead" style={{marginTop:'1.25rem', maxWidth:'42rem'}}>
            Every quarter, the same trade. Pipeline you can't keep up with. A hire that takes a quarter to ramp, another to break, and a coin-flip on whether they hit quota. Meanwhile every deal that doesn't get a follow-up tonight goes cold by Tuesday.
          </p>
        </div>
        <div style={{
          marginTop:'3rem',
          display:'grid',
          gridTemplateColumns:'repeat(4, 1fr)',
          gap:'1px',
          background:'var(--hairline)',
          border:'1px solid var(--hairline)',
          borderRadius:'1rem',
          overflow:'hidden'
        }} className="hiring-stats">
          {stats.map(s => (
            <div key={s.label} style={{
              background:'var(--page-bg)',
              padding:'2rem 1.5rem'
            }}>
              <div style={{fontFamily:'var(--font-sans)', fontSize:'clamp(2rem, 3vw, 2.75rem)', fontWeight:500, letterSpacing:'-0.04em', lineHeight:1, color:'var(--page-fg)'}}>{s.kpi}</div>
              <div style={{marginTop:'0.875rem', fontFamily:'var(--font-mono)', fontSize:'0.6875rem', letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--accent)', fontWeight:500}}>{s.label}</div>
              <div style={{marginTop:'0.625rem', fontSize:'0.8125rem', lineHeight:1.5, color:'var(--page-fg-muted)'}}>{s.note}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:720px){.hiring-stats{grid-template-columns:1fr 1fr !important;}}`}</style>
    </section>
  );
}

// ─── Section 3: Multiply your best reps ────────────────────────────────
function MultiplyReps() {
  return (
    <section className="section">
      <div className="container">
        <div className="multiply">
          <div>
            <div className="eyebrow" style={{marginBottom:'1rem'}}>03 · Leverage, not replacement</div>
            <h2 className="h-large">Multiply your best reps. Don't dilute them.</h2>
            <p className="lead" style={{marginTop:'1.25rem'}}>
              Your top performers don't need help on the call. They need the 6 hours of admin between calls handed back. Portant.ai handles the follow-up, the proposal, the quote, the contract, and the next-step task — so the reps you already trust have more deals to close, not fewer.
            </p>
            <div style={{marginTop:'2rem', display:'flex', flexDirection:'column', gap:'0.75rem'}}>
              <PointRow text="Reps run 2-3x more deals without losing the conversations that close them." />
              <PointRow text="The agent gets sharper as your motion gets sharper. Reps don't have to retrain." />
              <PointRow text="No replacement narrative. The team you have, doing more of what they're good at." />
            </div>
          </div>
          <div>
            <div style={{fontFamily:'var(--font-mono)', fontSize:'0.6875rem', letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--page-fg-subtle)', marginBottom:'0.75rem'}}>
              Sales team · 20 reps
            </div>
            <div className="rep-grid">
              {Array.from({length: 20}).map((_, i) => {
                const isTop = [2, 6, 11, 13].includes(i);
                return (
                  <div key={i} className={`rep-tile ${isTop ? 'is-top' : ''}`}>
                    {isTop ? '★' : ''}
                  </div>
                );
              })}
            </div>
            <div style={{marginTop:'0.875rem', fontSize:'0.8125rem', color:'var(--page-fg-muted)', lineHeight:1.5}}>
              <span style={{color:'var(--accent)', fontWeight:500}}>4 top reps</span> with the agent close more than <span style={{color:'var(--page-fg)'}}>10 average reps</span> running solo. The leverage is in the people who already work.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PointRow({ text }) {
  return (
    <div style={{display:'grid', gridTemplateColumns:'24px 1fr', gap:'0.75rem', alignItems:'baseline'}}>
      <div style={{paddingTop:'8px'}}>
        <span style={{display:'inline-block', width:'8px', height:'8px', borderRadius:'999px', background:'var(--accent)'}} />
      </div>
      <div style={{fontSize:'0.9375rem', color:'var(--page-fg-muted)', lineHeight:1.55}}>{text}</div>
    </div>
  );
}

// ─── Section 4: End-to-end pipeline view ───────────────────────────────
function EndToEndFlow() {
  const steps = [
    { num: "01", title: "Meeting booked", body: "Trigger fires the moment a meeting completes in HubSpot or Salesforce.", tag: "Trigger" },
    { num: "02", title: "Follow-up drafted", body: "Personalized email referencing what was discussed, sized to the deal stage.", tag: "Email" },
    { num: "03", title: "Proposal & quote built", body: "Real branded documents merged from your templates and CRM data.", tag: "Documents" },
    { num: "04", title: "Contract sent", body: "MSA, order form, eSignatures routed to the right counterparties.", tag: "Contract" },
    { num: "05", title: "Rep task created", body: "Calendar holds, call reminders, prep briefs surfaced where reps work.", tag: "Tasks" },
  ];
  return (
    <section className="section" id="how-it-works">
      <div className="container">
        <div style={{maxWidth:'48rem', marginBottom:'3rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>04 · End to end</div>
          <h2 className="h-large">From meeting booked to signed contract. The agent runs the deal.</h2>
          <p className="lead" style={{marginTop:'1.25rem'}}>
            Most agents stop at a draft email. Portant.ai keeps going — through the proposal, the quote, the contract, and the rep task that comes with each.
          </p>
        </div>
        <div className="card" style={{padding:0, overflow:'hidden'}}>
          <div className="flow-track">
            {steps.map(s => (
              <div key={s.num} className="flow-step">
                <div className="flow-step-num">{s.num}</div>
                <h4>{s.title}</h4>
                <p>{s.body}</p>
                <div className="flow-step-tag">{s.tag}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Artifact proof */}
        <div style={{marginTop:'3rem', display:'grid', gridTemplateColumns:'1fr 1fr', gap:'1.5rem'}} className="artifact-proof-grid">
          <ArtifactFollowup />
          <div style={{display:'flex', flexDirection:'column', gap:'1rem'}}>
            <ArtifactProposal />
            <TaskCardArtifact />
          </div>
        </div>
        <style>{`@media (max-width:960px){.artifact-proof-grid{grid-template-columns:1fr !important;}}`}</style>
      </div>
    </section>
  );
}

// ─── Section 5: Three things this isn't ────────────────────────────────
function NotAnSDR() {
  const items = [
    { title: "Not cold outbound.", body: "Portant.ai only ever works deals that are already in motion. Nothing it sends is to a stranger." },
    { title: "Not a tool you configure.", body: "We sit with you, learn your motion, ingest your templates. The agent ships ready to run, not ready to set up." },
    { title: "Not a content library.", body: "Every artifact is generated for the specific deal in front of you. No re-using last quarter's templated PDF." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{maxWidth:'48rem', marginBottom:'2.5rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>05 · For the avoidance of doubt</div>
          <h2 className="h-large">Three things this isn't.</h2>
        </div>
        <div className="tri">
          {items.map(it => (
            <div key={it.title} className="tri-card">
              <div className="tri-cross">✕</div>
              <h4>{it.title}</h4>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section 6: The document moat ──────────────────────────────────────
function DocumentMoat() {
  return (
    <section className="section">
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'4rem', alignItems:'center'}} className="moat-grid">
          <div>
            <div className="eyebrow" style={{marginBottom:'1rem'}}>06 · The moat</div>
            <h2 className="h-large">The follow-up email is easy. The proposal that goes with it isn't.</h2>
            <p className="lead" style={{marginTop:'1.25rem'}}>
              Anyone can draft a follow-up. The hard part is the 14-page proposal, branded to your style, with the right pricing for that deal, the right legal terms, and the contract right behind it.
            </p>
            <p className="lead" style={{marginTop:'0.875rem'}}>
              We've spent four years building the document engine. <span style={{color:'var(--page-fg)'}}>40,000 teams already use Portant for sales docs through HubSpot.</span> The agent inherits all of it.
            </p>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:'0.875rem'}}>
            <ArtifactProposal />
            <div className="card" style={{padding:'1.125rem 1.25rem'}}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:'0.75rem'}}>
                <div style={{fontSize:'0.9375rem', fontWeight:500}}>Master Services Agreement</div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:'0.625rem', letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--portant-yellow)'}}>Awaiting signature</div>
              </div>
              <div style={{display:'flex', gap:'0.5rem'}}>
                <SignatureBlock name="Sarah Chen" company="Acme Corp" status="signed" />
                <SignatureBlock name="Mark Reilly" company="Your team" status="pending" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:960px){.moat-grid{grid-template-columns:1fr !important;}}`}</style>
    </section>
  );
}

function SignatureBlock({ name, company, status }) {
  const isSigned = status === 'signed';
  return (
    <div style={{
      flex:1,
      padding:'0.75rem 0.875rem',
      background:'var(--surface-2)',
      border:'1px solid var(--hairline)',
      borderRadius:'0.5rem'
    }}>
      <div style={{
        height:'30px',
        borderBottom:'1px dashed var(--hairline-strong)',
        marginBottom:'0.5rem',
        display:'flex',
        alignItems:'flex-end',
        paddingBottom:'2px',
        fontFamily:'cursive',
        fontStyle:'italic',
        fontSize:'1.125rem',
        color: isSigned ? 'var(--accent)' : 'transparent',
        opacity: isSigned ? 1 : 0
      }}>{isSigned ? name.split(' ')[0] : ''}</div>
      <div style={{fontSize:'0.75rem', color:'var(--page-fg)', fontWeight:500}}>{name}</div>
      <div style={{fontSize:'0.6875rem', color:'var(--page-fg-subtle)'}}>{company}</div>
    </div>
  );
}

// ─── Section 7: What we build for you ──────────────────────────────────
function WhatWeBuild() {
  const items = [
    { title: "Your decks and templates ingested", body: "We bring in your existing decks, proposal templates, quote sheets, and contracts. The agent learns your style, not a generic one." },
    { title: "Trained on your motion", body: "We sit with your reps for a week, learn the cycle, the objections, the pricing logic. The agent ships shaped to your team." },
    { title: "HubSpot or Salesforce, native", body: "Lives inside the deal. No new place for your reps to log in. Triggers fire on the stages you already use." },
    { title: "Custom rep workflows", body: "Approval routing, internal sign-offs, deal reviews. Whatever the agent needs to escalate, it escalates the way you already work." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{maxWidth:'48rem', marginBottom:'2.5rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>07 · What we build for you</div>
          <h2 className="h-large">Forward-deployed, not self-serve.</h2>
          <p className="lead" style={{marginTop:'1.25rem'}}>
            This isn't a tool with a free trial. It's an implementation. The bulk of the value is in the week we spend learning your motion before the agent runs a single deal.
          </p>
        </div>
        <div className="deliverables">
          {items.map((it, i) => (
            <div key={it.title} className="deliv-card">
              <div className="deliv-icon">
                <span style={{fontFamily:'var(--font-mono)', fontSize:'0.75rem', fontWeight:500}}>0{i+1}</span>
              </div>
              <div>
                <h4>{it.title}</h4>
                <p>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section 8: Pricing ────────────────────────────────────────────────
function Pricing({ onBook }) {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div style={{maxWidth:'48rem', marginBottom:'2.5rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>08 · Pricing, framed honestly</div>
          <h2 className="h-large">1% to 4% of the cost of one new rep.</h2>
          <p className="lead" style={{marginTop:'1.25rem'}}>
            Implementations start at <span style={{color:'var(--page-fg)'}}>$1,500/mo</span> and scale with scope. Most land between $1,500 and $5,000/mo, depending on how much of your motion the agent owns.
          </p>
        </div>

        <div className="card" style={{padding:'2.5rem 2.5rem 2rem'}}>
          <div className="pricing-bars">
            <div className="bar-col">
              <div className="bar-label">
                <div className="label-name">A new AE, fully loaded</div>
                <div className="label-cost">$120,000<span style={{fontSize:'0.875rem', color:'var(--page-fg-muted)', marginLeft:'4px'}}>/yr</span></div>
              </div>
              <div className="bar-track">
                <div className="bar-fill bar-fill--rep">$10,000/mo · 6-month ramp</div>
              </div>
              <div className="bar-note">OTE + benefits + tooling. ~50% miss quota in year one. Pipeline stays cold while they ramp.</div>
            </div>
            <div className="bar-col">
              <div className="bar-label">
                <div className="label-name" style={{color:'var(--accent)'}}>Portant.ai, scoped</div>
                <div className="label-cost" style={{color:'var(--accent)'}}>$36,000<span style={{fontSize:'0.875rem', color:'var(--page-fg-muted)', marginLeft:'4px'}}>/yr</span></div>
              </div>
              <div className="bar-track">
                <div className="bar-fill bar-fill--portant">$3,000/mo · live in 4 weeks</div>
              </div>
              <div className="bar-note">Productive on day one. Cancel any time. We'll scope yours on the call.</div>
            </div>
          </div>
          <div style={{
            marginTop:'2rem',
            paddingTop:'1.5rem',
            borderTop:'1px solid var(--hairline)',
            display:'flex',
            justifyContent:'space-between',
            alignItems:'center',
            flexWrap:'wrap',
            gap:'1rem'
          }}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:'0.75rem', letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--page-fg-subtle)'}}>
              Starting at $1,500/mo · Most $1,500 – $5,000/mo
            </div>
            <button className="btn btn--primary" onClick={onBook}>Book a scoping call →</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 9: Who this is for ────────────────────────────────────────
function WhoFor() {
  const fits = [
    "10–200 reps. Mid-market motion.",
    "Already on HubSpot or Salesforce.",
    "Quotes, proposals, or contracts in your cycle.",
    "Just lost a hire, scoping the next, or under freeze.",
  ];
  const doesnt = [
    "Pure transactional / ecommerce.",
    "Cold outbound with no meeting step.",
    "Looking for a $99/mo self-serve tool.",
    "Less than 5 reps and no doc complexity.",
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{maxWidth:'48rem', marginBottom:'2.5rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>09 · Self-qualify</div>
          <h2 className="h-large">Who this is for.</h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'1rem'}} className="who-grid">
          <div className="card" style={{padding:'2rem'}}>
            <div className="eyebrow" style={{marginBottom:'1rem'}}>Likely fit</div>
            <ul style={{margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:'0.875rem'}}>
              {fits.map(f => (
                <li key={f} style={{display:'grid', gridTemplateColumns:'18px 1fr', gap:'0.625rem', fontSize:'0.9375rem', alignItems:'baseline'}}>
                  <span style={{color:'var(--accent)'}}>✓</span>
                  <span style={{color:'var(--page-fg)'}}>{f}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="card" style={{padding:'2rem', background:'var(--surface-2)'}}>
            <div className="eyebrow eyebrow-muted" style={{marginBottom:'1rem'}}>Not yet</div>
            <ul style={{margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:'0.875rem'}}>
              {doesnt.map(f => (
                <li key={f} style={{display:'grid', gridTemplateColumns:'18px 1fr', gap:'0.625rem', fontSize:'0.9375rem', alignItems:'baseline', color:'var(--page-fg-muted)'}}>
                  <span style={{color:'var(--page-fg-subtle)'}}>—</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        <style>{`@media (max-width:720px){.who-grid{grid-template-columns:1fr !important;}}`}</style>
      </div>
    </section>
  );
}

// ─── Section 10: About Portant ─────────────────────────────────────────
function AboutPortant() {
  return (
    <section className="section">
      <div className="container">
        <div style={{maxWidth:'52rem'}}>
          <div className="eyebrow" style={{marginBottom:'1rem'}}>10 · About</div>
          <p style={{fontSize:'1.5rem', lineHeight:1.4, fontWeight:400, color:'var(--page-fg)', letterSpacing:'-0.015em', textWrap:'balance'}}>
            Portant.ai is built by the team behind <a href="https://portant.co" style={{color:'var(--accent)', textDecoration:'underline', textDecorationColor:'color-mix(in srgb, var(--accent) 35%, transparent)', textUnderlineOffset:'4px'}}>portant.co</a> — the #1 HubSpot app for sales docs, used by 40,000+ teams to generate quotes, proposals and contracts. The marketplace product is self-serve. This one isn't. Same engine, different shape: a scoped, white-glove implementation for sales leaders who want the full deal handled, not a tool to set up.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HiringProblem, MultiplyReps, EndToEndFlow, NotAnSDR, DocumentMoat, WhatWeBuild, Pricing, WhoFor, AboutPortant });