// / (new aidasdr.com homepage) — built from docs spec "AiDA SDR Homepage v2".
// One buyer: B2B companies, $1M–$50M+, with a sales motion.
// One action: Apply for a Sales Infrastructure Call (the existing Typeform).
//
// Copy comes VERBATIM from the spec. Hard rules honored here:
//   · no em dashes / double hyphens in rendered copy
//   · no dollar pricing except the SDR cost figures in the spec
//   · no agency / reseller / white-label mentions
//   · elements carrying an unresolved [CONFIRM] are held back:
//       - hero microcopy under the CTA (omitted; no live equivalent)
//       - guarantee box qualified-meeting definition (live copy kept instead)
//       - FAQ check-in cadence + "first meetings land in [X]" (claims omitted)
//   · testimonials are the real Senja entries (same quotes), reordered per
//     spec with Meador leading; the Holdsworth video states no on-camera
//     number, so no result caption is added.
//
// Reuses the shared theme (styles.css), icons.jsx, and valueblocks.jsx —
// from the other pages the owner wants ONLY the formatting and the
// CustomerMarquee tickertape; everything else comes from the doc (the
// integrations marquee, hero widget, and channel chips were removed on
// owner feedback 2026-07-11).
// One action: every CTA sends to the /signals funnel page (video + booking).
const APPLY_URL = '/signals';
const CTA_LABEL = 'Get My Signals Report';


function ApplyBtn({ className, label, style }) {
  return (
    <a href={APPLY_URL} className={className || 'btn btn-indigo'} style={style}>
      {label || CTA_LABEL} <span className="arrow">→</span>
    </a>
  );
}

/* Fixed top bar — fully transparent over the dark hero so the transparent
   chrome logo sits directly on it; once the page scrolls it fades to a light
   blurred backdrop (the navy logo reads natively on light). */
function HomeNav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div style={{
      position:'fixed', top:0, left:0, right:0, zIndex:60,
      background: scrolled ? 'rgba(250,250,247,0.9)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(20,20,30,0.08)' : '1px solid transparent',
      boxShadow: scrolled ? '0 1px 2px rgba(20,20,30,0.04), 0 8px 24px -12px rgba(20,20,30,0.10)' : 'none',
      transition:'background 220ms ease, border-color 220ms ease, box-shadow 220ms ease',
    }}>
      <div className="wrap" style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, height:68}}>
        <a href="#top" style={{display:'flex', alignItems:'center'}}>
          <img src="/aida-sdr-logo-transparent.png" alt="AiDA SDR" style={{
            height:46, width:'auto', display:'block',
            filter: scrolled ? 'none' : 'drop-shadow(0 0 1px rgba(255,255,255,0.35)) drop-shadow(0 6px 18px rgba(129,140,248,0.45))',
            transition:'filter 220ms ease',
          }} />
        </a>
        <a href={APPLY_URL} className="btn btn-indigo" style={{height:40, padding:'0 20px', fontSize:13}}>Get My Signals Report <span className="arrow">→</span></a>
      </div>
    </div>
  );
}

/* ── 1 · HERO ─────────────────────────────────────────────────────────── */
// Single centered column, exactly the elements the spec lists: eyebrow, H1,
// kicker, subhead, CTA, proof strip. (No hero widget — owner wants the page
// built strictly from the doc.)
function Hero() {
  return (
    <section className="hero" style={{paddingTop:110, paddingBottom:90}}>
      <div className="hero-bg" aria-hidden></div>
      <div className="hero-grid" aria-hidden></div>
      <div className="wrap hero-inner" style={{display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center'}}>
        <div className="hero-eyebrow"><span className="dot"></span> Signal-based outbound. Built for you. Managed by us.</div>
        <h1 style={{maxWidth:'20ch'}}>We Fill Your Reps’ Calendars With <span className="accent">Qualified Meetings.</span></h1>
        <div className="serif-it" style={{marginTop:14, fontSize:22, color:'rgba(226,232,255,0.85)'}}>Let your closers just close.</div>
        <p className="hero-sub" style={{maxWidth:'62ch'}}>
          AiDA SDR is a done-for-you outbound system trained on your data. It identifies the
          buyers already on your website, listens across social, news, and competitor audiences
          for buying signals, and reaches the right people at the right moment across cold email
          and LinkedIn. Meetings land on your reps’ calendars. LinkedIn outbound is live in 7
          business days.
        </p>
        <div className="hero-ctas" style={{justifyContent:'center'}}>
          <ApplyBtn />
        </div>
        <div className="hero-meta" style={{justifyContent:'center'}}>
          {['Signal-based targeting', '7,000+ meetings booked', 'LinkedIn live in 7 business days'].map((x) => (
            <span key={x} style={{display:'inline-flex', alignItems:'center', gap:8}}>
              <span style={{color:'var(--emerald)'}}><ICheck size={14}/></span><b>{x}</b>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── 2 · THE PROBLEM ──────────────────────────────────────────────────── */
function Problem() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>Hiring SDRs Doesn’t Scale Results.<br/>It Scales Payroll.</h2>
          </div>
          <p className="lede">
            Most companies try to buy pipeline with headcount. The math is brutal. $110k to $155k+
            fully loaded per SDR. Three to six months of ramp before they produce anything. Then
            40%+ of them quit inside a year and your pipeline resets to zero.
          </p>
        </div>
        <div style={{textAlign:'center', padding:'26px 24px', borderRadius:18, background:'var(--ink)', color:'#fff'}}>
          <div style={{fontSize:'clamp(24px,3.2vw,36px)', fontWeight:500, letterSpacing:'-0.025em', lineHeight:1.2}}>
            You don’t have a headcount problem. <span className="serif-it" style={{color:'#c7d2fe'}}>You have an infrastructure problem.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── 3 · THE AI TRAP ──────────────────────────────────────────────────── */
function AiTrap() {
  const cards = [
    ['Stitching tools together isn’t a system.', 'Connecting a chatbot to your CRM creates a fragile workflow that breaks the first time anything changes.'],
    ['Months of trial and error.', 'Teams burn six to twelve months experimenting before admitting they need a purpose-built system, not a patchwork.'],
    ['Generic AI, generic results.', 'Off-the-shelf tools aren’t trained on your ICP, your messaging, or your sales process. They produce volume, not pipeline.'],
    ['No feedback loop.', 'If replies aren’t classified against your qualification criteria, nothing improves. AI without learning is just automation.'],
  ];
  return (
    <section className="section outreach">
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>Why Most Teams Fail<br/>at AI Outbound</h2>
          </div>
          <p className="lede">
            Everyone is “using AI.” Almost nobody is building infrastructure. Here’s where teams
            get stuck.
          </p>
        </div>
        <div className="grid-2">
          {cards.map(([title, body], i) => (
            <div key={title} className="card">
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.08em', color:'var(--rose)', marginBottom:10}}>0{i+1}</div>
              <h3>{title}</h3>
              <p>{body}</p>
            </div>
          ))}
        </div>
        <div style={{marginTop:26, padding:'34px 36px', borderRadius:18, background:'var(--bg-dark)', color:'rgba(255,255,255,0.85)', position:'relative', overflow:'hidden'}}>
          <div className="hero-bg" aria-hidden style={{position:'absolute', inset:0, opacity:0.6}}></div>
          <div style={{position:'relative', maxWidth:820, fontSize:17.5, lineHeight:1.65}}>
            Here’s the part nobody says out loud: the tools aren’t even the real problem. Timing is.
            Generic AI blasts your entire list at once and hopes. It doesn’t know who changed jobs
            last week, who just posted three sales hires, or who visited your pricing page last
            night. Volume without timing is spam with better grammar. AiDA is built the other way
            around. <b style={{color:'#fff'}}>Signals first. Outreach second.</b>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── 4 · THE SOLUTION (intro + 4a signal stack + 4b multi-channel) ────── */
function Solution() {
  const signals = [
    [IViewer, 'Anonymous website visitors', 'Pipeline you already paid for.', 'Most of your traffic leaves without a name. We identify the companies and buyers on your site and open the conversation while you’re still on their screen. You paid for that traffic once. Now it converts.', 'sig-1'],
    [IEngagement, 'Social listening on target accounts', 'Show up the moment it matters.', 'When a target account posts about the problem you solve, announces a change, or asks for recommendations, your message lands that day, with context. A warm reply beats a cold open every time.', 'sig-2'],
    [ICompetitor, 'Competitor monitoring', 'Intercept deals already in motion.', 'Buyers engaging with your competitors are actively shopping your category. We watch competitor audiences, mentions, and conversations, and reach those buyers while they’re still comparing.', 'sig-3'],
    [IBolt, 'Keyword and topic listening', 'Buyers raising their hand in public.', 'Your prospects post about their problems every day. When the words match the pain you solve, they enter your pipeline automatically, with the post as your opener.', 'sig-4'],
    [IFunding, 'News, funding, and company events', 'A real reason to reach out.', 'Funding rounds, expansions, leadership changes. Company news creates budget and urgency, and outreach that references what just happened reads like attention, not automation.', 'sig-5'],
    [INewRole, 'Job changes', 'New decision-makers with a mandate.', 'New leaders make changes and spend budget in their first months. We catch the seat change and put you in front of them before your competitors know the org chart moved.', 'sig-6'],
    [IHiring, 'Hiring activity', 'Budget, printed in public.', 'A company posting roles in your category is investing in the exact problem you solve. Hiring plans are spending plans.', 'sig-7'],
  ];
  return (
    <section className="section" id="solution">
      <div className="wrap">
        <div style={{textAlign:'center', maxWidth:760, margin:'0 auto 70px'}}>
          <h2>Introducing AiDA SDR</h2>
          <p className="lede" style={{margin:'18px auto 0', color:'var(--ink-mute)'}}>
            A complete outbound engine trained on your data, triggered by buying signals, and run
            by our team inside your company.
          </p>
        </div>

        <div className="section-head">
          <div>
            <div className="eyebrow eyebrow-indigo">The Signal Stack</div>
            <h2>Your Buyers Announce Themselves. Most Companies Miss It.</h2>
          </div>
          <p className="lede">
            AiDA monitors seven signal streams around the clock. Each one answers the same two
            questions: who is in-market, and why now.
          </p>
        </div>

        <div className="signals-grid">
          {signals.map(([Ico, label, headline, body, cls], i) => (
            <div key={label} className={`sig ${cls}`} style={{cursor:'default'}}>
              <div className="num">0{i+1}</div>
              <div className="ico"><Ico size={20}/></div>
              <div className="eyebrow" style={{marginBottom:8}}>{label}</div>
              <h3>{headline}</h3>
              <p className="one">{body}</p>
            </div>
          ))}
        </div>

        <div style={{marginTop:70, textAlign:'center', maxWidth:820, margin:'70px auto 0'}}>
          <div className="eyebrow eyebrow-indigo" style={{marginBottom:20}}>One Conversation, Every Channel</div>
          <p style={{fontSize:18, lineHeight:1.65, color:'var(--ink-soft)', margin:0}}>
            Signals decide who and when. Channels decide where. Cold email and LinkedIn run as one
            coordinated motion: same prospect, same story, sequenced across inboxes so you show up
            where they actually respond. Not two tools running competing sequences. One system, one
            thread, one outcome: <b style={{color:'var(--ink)'}}>a meeting on your calendar.</b>
          </p>
        </div>
      </div>
    </section>
  );
}

/* ── 5 · HOW IT WORKS ─────────────────────────────────────────────────── */
function HowItWorks() {
  const steps = [
    ['Your Data and Signals', 'We ingest your CRM, customer data, and live market signals to build a living map of your ideal buyers.'],
    ['Custom AI Scoring', 'Models trained on your sales history score every prospect by fit, timing, and likelihood to convert.'],
    ['Your Messaging Engine', 'Outreach built from your value props, your tone, and your case studies, across email and LinkedIn.'],
    ['Conversation Intelligence', 'Every reply classified with your qualification criteria. Objections handled with your playbook. Meetings booked on your calendar.'],
    ['Your Sales Team', 'Reps only see conversations that match your pipeline criteria. No noise. Just qualified pipeline.'],
  ];
  return (
    <section className="section outreach" id="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>How It Works</h2>
          </div>
          <p className="lede">A single pipeline from signal to signed deal.</p>
        </div>
        <div className="num-list" style={{maxWidth:860, margin:'0 auto'}}>
          {steps.map(([title, body], i) => (
            <div key={title} className="item">
              <div className="n">0{i+1}</div>
              <div>
                <h4>{title}</h4>
                <p>{body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── 6 · FOUNDER ──────────────────────────────────────────────────────── */
function FounderPhoto() {
  // Renders /bryan-higgins.jpg when present; falls back to a monogram card.
  const [ok, setOk] = React.useState(true);
  if (!ok) {
    return (
      <div style={{width:'100%', maxWidth:340, aspectRatio:'4/5', borderRadius:18, background:'linear-gradient(160deg,#1b1b2e,#101020)', border:'1px solid rgba(255,255,255,0.12)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:14}}>
        <div style={{width:96, height:96, borderRadius:'50%', background:'linear-gradient(135deg,#818cf8,#4338ca)', display:'grid', placeItems:'center', color:'#fff', fontSize:34, fontWeight:600}}>BH</div>
        <div style={{color:'rgba(255,255,255,0.85)', fontWeight:500}}>Bryan Higgins</div>
        <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(255,255,255,0.5)'}}>Founder</div>
      </div>
    );
  }
  return (
    <figure style={{margin:0, width:'100%', maxWidth:280}}>
      <img src="/bryan-higgins.jpg" alt="Bryan Higgins, founder of AiDA SDR" loading="lazy" onError={() => setOk(false)}
        style={{width:'100%', aspectRatio:'4/4.5', objectFit:'cover', objectPosition:'50% 22%', borderRadius:18, border:'1px solid rgba(255,255,255,0.14)', boxShadow:'0 30px 70px -30px rgba(8,10,32,0.8)'}} />
      <figcaption style={{marginTop:12, fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)', textAlign:'center'}}>
        Bryan Higgins · Founder
      </figcaption>
    </figure>
  );
}

function Founder() {
  return (
    <section className="section section-dark">
      <div className="hero-bg" aria-hidden style={{position:'absolute', inset:0}}></div>
      <div className="wrap" style={{position:'relative'}}>
        <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:56, alignItems:'center'}} className="founder-grid">
          <FounderPhoto />
          <div>
            <h2 style={{color:'#fff'}}>Built by an Operator,<br/>Not a Software Company.</h2>
            <p style={{marginTop:22, fontSize:18, lineHeight:1.7, color:'rgba(255,255,255,0.78)', maxWidth:'60ch'}}>
              I’m Bryan Higgins. I co-founded a marketing agency in 2020, built around automation
              and scale from day one. In 2022 we doubled down on AI sales systems. Since then we’ve
              run over 5 million outbound messages and booked thousands of appointments for
              everyone from one-man operations to multinational sales teams like Panasonic and
              Ericsson. Your team sits somewhere between those two, and that’s exactly the range
              this system was built on. Outbound stopped rewarding effort and started rewarding
              timing, and nothing on the market was built to manage the front end of the sales
              process while ensuring leads didn’t slip through the cracks.
              <span className="serif-it" style={{color:'#c7d2fe', fontSize:20}}> So I built AiDA.</span>
            </p>
          </div>
        </div>
        <style>{`@media(max-width:860px){.founder-grid{grid-template-columns:1fr !important}.founder-grid figure,.founder-grid>div:first-child{margin:0 auto}}`}</style>
      </div>
    </section>
  );
}

/* ── 7 · PROOF ────────────────────────────────────────────────────────── */
function Proof() {
  const stats = [
    ['5M+', 'Outbound Messages'],
    ['7,500+', 'Sales Conversations'],
    ['100+', 'B2B Teams Supported'],
  ];
  const before = ['Manual prospecting', 'Guesswork outreach', 'Low reply rates', 'Unpredictable pipeline'];
  const after = ['Signal-prioritized leads', 'Qualified conversations', 'Automated outreach', 'Consistent pipeline'];
  return (
    <section className="section" id="proof">
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>Built From Real Execution</h2>
          </div>
          <style>{`@media(max-width:700px){.proof-stats{grid-template-columns:1fr !important}}`}</style>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}} className="proof-stats">
            {stats.map(([n, l]) => (
              <div key={l} style={{border:'1px solid var(--line)', borderRadius:14, background:'var(--bg-card)', padding:'18px 16px', textAlign:'center'}}>
                <div style={{fontSize:30, fontWeight:500, letterSpacing:'-0.03em'}}>{n}</div>
                <div style={{marginTop:4, fontSize:12.5, color:'var(--ink-mute)'}}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Full review wall (Senja) — every review, nothing cherry-picked. */}
        <div className="senja-embed" data-id="59659e80-89de-488c-9971-258c07330c56" data-mode="shadow" data-lazyload="false" style={{display:'block', width:'100%'}}></div>

        {/* Slim before/after strip. */}
        <div style={{marginTop:26, border:'1px solid var(--line)', borderRadius:14, overflow:'hidden'}}>
          <div style={{display:'grid', gridTemplateColumns:'96px 1fr', gap:16, alignItems:'center', padding:'14px 20px', background:'var(--bg-soft)'}}>
            <span style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', color:'#b91c1c'}}>BEFORE</span>
            <div style={{display:'flex', flexWrap:'wrap', gap:'6px 18px', fontSize:14, color:'var(--ink-mute)'}}>
              {before.map((x) => <span key={x}>{x}</span>)}
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'96px 1fr', gap:16, alignItems:'center', padding:'14px 20px', borderTop:'1px solid var(--line)', background:'linear-gradient(180deg,#fff,#f5f6ff)'}}>
            <span style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', color:'#15803d'}}>AFTER</span>
            <div style={{display:'flex', flexWrap:'wrap', gap:'6px 18px', fontSize:14, color:'var(--ink)', fontWeight:500}}>
              {after.map((x) => <span key={x}>{x}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── 8 · ROLLOUT ──────────────────────────────────────────────────────── */
function Rollout() {
  const phases = [
    ['Phase 1', 'Build', 'LinkedIn: live in 7 business days. Email: about 30 days of warmup to protect deliverability.',
      ['ICP modeling and validation', 'Channel selection', 'LinkedIn profile optimization', 'Domain and mailbox warming (email track)', 'CRM and data integration', 'Signal source configuration', 'Messaging framework design'],
      'ICP validated, infrastructure ready.'],
    ['Phase 2', 'Launch', null,
      ['Outbound sequences activated on your channels', 'AI lead scoring live', 'AI inbox and DM management running', 'Real-time conversation routing', 'Initial response analysis'],
      'campaigns live and generating responses.'],
    ['Phase 3', 'Optimize', 'Ongoing from about day 30.',
      ['Message A/B testing and refinement', 'Lead routing optimization', 'Pipeline velocity tracking', 'Handoff process tuning', 'Full system stabilization'],
      'pipeline predictable.'],
  ];
  return (
    <section className="section outreach" id="rollout">
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>Build, Launch, Optimize</h2>
          </div>
          <p className="lede">
            A structured rollout with clear milestones, so you always know where things stand.
          </p>
        </div>
        <div className="grid-3">
          {phases.map(([tag, name, note, items, checkpoint]) => (
            <div key={name} className="card" style={{display:'flex', flexDirection:'column'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--indigo)'}}>{tag}</div>
              <h3 style={{marginTop:6}}>{name}</h3>
              {note ? <p style={{marginTop:8, fontWeight:500, color:'var(--ink-soft)'}}>{note}</p> : null}
              <ul style={{listStyle:'none', padding:0, margin:'16px 0 0', display:'grid', gap:9}}>
                {items.map((x) => (
                  <li key={x} style={{display:'flex', gap:9, alignItems:'flex-start', fontSize:14, color:'var(--ink-mute)', lineHeight:1.45}}>
                    <span style={{color:'var(--indigo)', flexShrink:0, marginTop:2}}><ICheck size={14}/></span>{x}
                  </li>
                ))}
              </ul>
              <div style={{marginTop:'auto', paddingTop:18}}>
                <div style={{display:'inline-flex', alignItems:'flex-start', gap:8, padding:'10px 14px', borderRadius:10, background:'var(--emerald-soft)', color:'#065f46', fontSize:13.5, fontWeight:500, lineHeight:1.4}}>
                  <span style={{flexShrink:0, marginTop:2}}><IShield size={14}/></span>
                  <span>Checkpoint: {checkpoint}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── 9 · PLANS (Engagement Levels) ────────────────────────────────────── */
// Feature lists are UNCHANGED from the current live site (per spec), with the
// excluded features now visibly greyed + struck through (spec build note 1).
function Plans() {
  const tiers = [
    {
      name: 'Launch',
      channels: 'Email or LinkedIn, your choice.',
      meetings: '5–12+ qualified meetings/mo.',
      features: [
        ['Signal-based ICP targeting', true],
        ['AI-personalized outbound sequences (email or LinkedIn)', true],
        ['Done-for-you LinkedIn profile optimization + outreach (if LinkedIn chosen)', true],
        ['Sending domain / LinkedIn infrastructure setup', true],
        ['AI inbox / DM manager', true],
        ['Detailed Reporting (Daily / Weekly / Monthly)', true],
        ['Multi-channel (email + LinkedIn combined)', false],
        ['Anonymous website traffic identification', false],
        ['Long-term Nurture Sequences', false],
        ['Multi-signal targeting & stacking', false],
        ['Custom sending infrastructure build', false],
        ['Advanced trigger orchestration', false],
        ['Strategy calls', false],
        ['Sales funnel consulting & implementation', false],
      ],
    },
    {
      name: 'Scale',
      popular: true,
      channels: 'Email + LinkedIn.',
      meetings: '15–60+ qualified meetings/mo.',
      features: [
        ['Signal-based ICP targeting', true],
        ['AI-personalized email + LinkedIn sequences', true],
        ['Done-for-you LinkedIn profile optimization + outreach', true],
        ['Sending domain / LinkedIn infrastructure setup', true],
        ['AI inbox / DM manager with auto-nurture', true],
        ['Detailed Reporting (Daily / Weekly / Monthly)', true],
        ['Multi-channel (email + LinkedIn combined)', true],
        ['Anonymous website traffic identification', true],
        ['Long-term Nurture Sequences', true],
        ['Multi-signal targeting & stacking', true],
        ['Custom sending infrastructure build (dedicated domains, IP warmup, deliverability engineering)', true],
        ['Advanced trigger orchestration', true],
        ['Monthly strategy calls', true],
        ['Sales funnel consulting & implementation', false],
      ],
    },
    {
      name: 'Dominate',
      channels: 'Email + LinkedIn.',
      meetings: '60–100+ qualified meetings/mo.',
      features: [
        ['Signal-based ICP targeting', true],
        ['AI-personalized email + LinkedIn sequences', true],
        ['Done-for-you LinkedIn profile optimization + outreach', true],
        ['Sending domain / LinkedIn infrastructure setup', true],
        ['AI inbox / DM manager with advanced nurture', true],
        ['Detailed Reporting (Daily / Weekly / Monthly)', true],
        ['Multi-channel (email + LinkedIn combined)', true],
        ['Anonymous website traffic identification', true],
        ['Long-term Nurture Sequences', true],
        ['Multi-signal targeting & stacking', true],
        ['Custom sending infrastructure build (dedicated domains, IP warmup, deliverability engineering)', true],
        ['Advanced trigger orchestration', true],
        ['Priority weekly strategy calls', true],
        ['Optional sales funnel consulting & implementation', true],
      ],
    },
  ];
  return (
    <section className="section" id="plans">
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>Engagement Levels</h2>
          </div>
          <p className="lede">
            Your outbound team, fully built and managed. No hiring. No ramp time. Every engagement
            is scoped and quoted on your Sales Infrastructure Call. Three-month minimum,
            month-to-month after.
          </p>
        </div>
        <div className="grid-3" style={{alignItems:'stretch'}}>
          {tiers.map((t) => (
            <div key={t.name} className="card" style={{display:'flex', flexDirection:'column', position:'relative', ...(t.popular ? {borderColor:'var(--indigo)', borderWidth:2, background:'linear-gradient(180deg,#fff,#f5f6ff)'} : {})}}>
              {t.popular ? (
                <span style={{position:'absolute', top:-12, left:'50%', transform:'translateX(-50%)', background:'var(--indigo)', color:'#fff', fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.08em', padding:'4px 12px', borderRadius:999, whiteSpace:'nowrap'}}>MOST POPULAR</span>
              ) : null}
              <h3 style={t.popular ? {color:'var(--indigo-deep)'} : null}>{t.name}</h3>
              <p style={{marginTop:4}}>{t.channels}</p>
              <div style={{marginTop:14, fontSize:16.5, fontWeight:600, letterSpacing:'-0.01em'}}>{t.meetings}</div>
              <div style={{margin:'18px 0 0', paddingTop:16, borderTop:'1px solid var(--line-soft)'}}>
                <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:9}}>
                  {t.features.map(([label, included]) => (
                    <li key={label} style={{display:'flex', gap:9, alignItems:'flex-start', fontSize:13.5, lineHeight:1.45, color: included ? 'var(--ink-soft)' : 'var(--ink-faint)'}}>
                      <span style={{flexShrink:0, marginTop:2, color: included ? '#15803d' : 'var(--ink-faint)'}}>
                        {included ? <ICheck size={14}/> : <span style={{display:'inline-block', width:14, textAlign:'center'}}>·</span>}
                      </span>
                      <span style={included ? null : {textDecoration:'line-through', textDecorationColor:'rgba(154,154,166,0.6)'}}>{label}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div style={{marginTop:'auto', paddingTop:22}}>
                <a href={APPLY_URL} className={t.popular ? 'btn btn-indigo' : 'btn btn-ghost-dark'} style={{width:'100%', justifyContent:'center'}}>Get My Signals Report <span className="arrow">→</span></a>
              </div>
            </div>
          ))}
        </div>

        {/* Guarantee box — current live copy kept (the spec's expanded
            qualified-meeting definition is held for sign-off). */}
        <div style={{marginTop:34, maxWidth:760, margin:'34px auto 0', textAlign:'center', border:'2px solid var(--indigo)', borderRadius:16, background:'linear-gradient(180deg,#fff,#f5f6ff)', padding:'28px 30px'}}>
          <div style={{fontSize:19, fontWeight:600, letterSpacing:'-0.01em', color:'var(--indigo-deep)'}}>Our Meeting Guarantee</div>
          <p style={{margin:'10px 0 0', fontSize:15.5, color:'var(--ink-soft)', lineHeight:1.6}}>
            Your monthly meeting minimum is set in writing before launch. If we don’t hit your
            monthly meeting minimum, we credit the difference toward your next month. No questions
            asked.
          </p>
        </div>
        <p style={{marginTop:18, textAlign:'center', fontSize:13, color:'var(--ink-mute)'}}>
          All plans include the client dashboard, A/B testing, copy iteration, and dedicated
          campaign management.
        </p>
      </div>
    </section>
  );
}

/* ── 10 · COMPARISON ──────────────────────────────────────────────────── */
function Comparison() {
  const rows = [
    ['Cost', '$110k–$155k+/year per rep', 'A fraction of one full-time rep'],
    ['Ramp time', '3–6 months', 'LinkedIn live in 7 business days, full system inside 30'],
    ['Impact', 'One rep, one pipeline', '5 to 100+ qualified meetings a month, feeding every rep'],
    ['Turnover', '40%+ annual', 'Scales instantly, zero attrition'],
  ];
  return (
    <section className="section outreach" id="compare">
      <div className="wrap">
        <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 44px'}}>
          <h2>AiDA SDR vs Hiring SDRs</h2>
        </div>
        <div style={{overflowX:'auto'}}>
          <div style={{minWidth:640, maxWidth:900, margin:'0 auto', border:'1px solid var(--line)', borderRadius:16, overflow:'hidden', background:'var(--bg-card)'}}>
            <div style={{display:'grid', gridTemplateColumns:'140px 1fr 1fr', background:'var(--ink)', color:'#fff'}}>
              <div style={{padding:'16px 20px'}}></div>
              <div style={{padding:'16px 20px', fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,0.65)'}}>Hiring an SDR</div>
              <div style={{padding:'16px 20px', fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'#c7d2fe', background:'rgba(99,102,241,0.25)'}}>AiDA SDR</div>
            </div>
            {rows.map(([label, sdr, aida], i) => (
              <div key={label} style={{display:'grid', gridTemplateColumns:'140px 1fr 1fr', borderTop:'1px solid var(--line-soft)'}}>
                <div style={{padding:'18px 20px', fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--ink-mute)'}}>{label}</div>
                <div style={{padding:'18px 20px', fontSize:14.5, color:'var(--ink-mute)'}}>{sdr}</div>
                <div style={{padding:'18px 20px', fontSize:14.5, fontWeight:500, color:'var(--ink)', background:'rgba(99,102,241,0.05)'}}>{aida}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{marginTop:36, display:'flex', justifyContent:'center'}}>
          <ApplyBtn />
        </div>
      </div>
    </section>
  );
}

/* ── 11 · WHO IT'S FOR ────────────────────────────────────────────────── */
function WhoItsFor() {
  const good = [
    'B2B companies with a sales team or a founder-led sales motion',
    '$1M–$50M+ in revenue',
    'Deal sizes that justify outbound',
    'Need predictable pipeline, not another experiment',
  ];
  const bad = [
    'B2C',
    'Early-stage startups still finding product-market fit',
    'No one available to take the meetings',
    'Expecting miracles in week one',
  ];
  return (
    <section className="section" id="fit">
      <div className="wrap">
        <div style={{textAlign:'center', marginBottom:44}}>
          <div className="eyebrow eyebrow-indigo" style={{marginBottom:10}}>Who It’s For</div>
        </div>
        <div className="grid-2" style={{maxWidth:960, margin:'0 auto'}}>
          <div className="card" style={{borderColor:'rgba(16,185,129,0.4)'}}>
            <div style={{fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.1em', textTransform:'uppercase', color:'#15803d', marginBottom:16}}>Good Fit</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:12}}>
              {good.map((x) => (
                <li key={x} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:15, lineHeight:1.5}}>
                  <span style={{color:'var(--emerald)', flexShrink:0, marginTop:3}}><ICheck size={15}/></span>{x}
                </li>
              ))}
            </ul>
          </div>
          <div className="card">
            <div style={{fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.1em', textTransform:'uppercase', color:'#b91c1c', marginBottom:16}}>Not a Fit</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:12}}>
              {bad.map((x) => (
                <li key={x} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:15, lineHeight:1.5, color:'var(--ink-mute)'}}>
                  <span style={{flexShrink:0, width:15, textAlign:'center', color:'#e11d48', fontWeight:700, marginTop:1}}>×</span>{x}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── 12 · FAQ ─────────────────────────────────────────────────────────── */
function Faq() {
  const qa = [
    ['Will this get my LinkedIn account restricted?',
      'No, and protecting your accounts is why we don’t chase volume. Outreach runs at human pace, inside strict daily caps, on optimized and warmed profiles. Same reason email takes about 30 days before ramping: we build deliverability before we build volume.'],
    ['How fast until meetings?',
      'LinkedIn outreach is live in 7 business days. Email ramps after about 30 days of warmup. First meetings typically land in the first 5 days of launch.'],
    ['What signals do you actually track?',
      'Anonymous visitors on your website, social posts from your target accounts, competitor audiences and mentions, keyword and topic conversations across social and news, funding and company events, job changes, and hiring activity. Every signal exists to answer two questions: who is in-market, and why now.'],
    ['Who writes the messages?',
      'We do, trained on your value props, your tone, and your case studies. You approve the messaging framework before anything sends.'],
    ['What do you need from me?',
      'A kickoff deep-dive, access to your CRM and customer data, and a short recurring check-in. Your reps’ only job is taking the meetings.'],
    ['What counts as a qualified meeting?',
      'The prospect showed up, matches the ICP we defined together, and owns the problem we target. We set this definition in writing before launch, and the guarantee is measured against it.'],
    ['Why a three-month minimum?',
      'Infrastructure compounds. Email warmup alone is about 30 days, and the AI improves with every classified conversation. Three months gives the system enough data to optimize against. After that, month-to-month.'],
    ['We already have SDRs. Does this replace them?',
      'It can, but most clients run it alongside. AiDA feeds qualified conversations. Your people close them.'],
    ['Is this another AI tool I have to log into and run?',
      'No. It’s built infrastructure plus a team managing it daily. Your dashboard is for visibility, not homework.'],
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section outreach" id="faq">
      <div className="wrap-narrow">
        <div style={{textAlign:'center', marginBottom:44}}>
          <h2>FAQ</h2>
        </div>
        <style>{`.faq-item.open .faq-a{max-height:420px}`}</style>
        <div className="faq-list">
          {qa.map(([q, a], i) => (
            <div key={q} className={open === i ? 'faq-item open' : 'faq-item'}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {q}
                <span className="plus">+</span>
              </button>
              <div className="faq-a">{a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── 13 · FINAL CTA ───────────────────────────────────────────────────── */
function FinalCta() {
  return (
    <div className="wrap">
      <div className="cta-band">
        <div className="grid" aria-hidden></div>
        <div className="inner">
          <h2>Get My Signals Report</h2>
          <p>
            Thirty minutes. We map your ICP, find the gaps in your pipeline, and design the
            outbound system we’d build for you. If it’s a fit, we scope your engagement on the
            spot. If it’s not, you keep the map.
          </p>
          <p style={{marginTop:12, fontFamily:'var(--mono)', fontSize:13, color:'rgba(255,255,255,0.6)'}}>
            Every engagement is backed by our meeting guarantee.
          </p>
          <div className="ctas">
            <ApplyBtn />
          </div>
        </div>
      </div>
    </div>
  );
}

function HomePage() {
  // Load the Senja review wall after mount (its script scans for .senja-embed;
  // loading it post-render survives React replacing the prerendered markup).
  React.useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://widget.senja.io/widget/59659e80-89de-488c-9971-258c07330c56/platform.js';
    s.async = true;
    document.body.appendChild(s);
    return () => { try { document.body.removeChild(s); } catch (e) {} };
  }, []);
  return (
    <React.Fragment>
      <span id="top" />
      <HomeNav />
      <Hero />
      <CustomerMarquee label="Companies That Trust Us With Their Growth" />
      <Problem />
      <AiTrap />
      <Solution />
      <HowItWorks />
      <Founder />
      <Proof />
      <Rollout />
      <Plans />
      <Comparison />
      <WhoItsFor />
      <Faq />
      <FinalCta />
      <footer style={{padding:'28px 0 36px', borderTop:'1px solid var(--line, #e5e7eb)'}}>
        <div className="wrap" style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap', fontSize:12.5, color:'var(--ink-mute)'}}>
          <span>© 2026 AiDA SDR · aidasdr.com</span>
          <span style={{fontFamily:'var(--mono)'}}>signal-based outbound. built for you. managed by us.</span>
        </div>
      </footer>
    </React.Fragment>
  );
}

function init() {
  const els = document.querySelectorAll('.section, .cta-band');
  els.forEach(el => el.classList.add('reveal'));
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  }, { rootMargin: '0px 0px -80px 0px', threshold: 0.05 });
  els.forEach(el => io.observe(el));
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomePage />);
requestAnimationFrame(init);