// sections.jsx — page sections after hero

const SectionLabel = ({ num, label }) => (
  <div className="sec-label">
    <span className="sec-num">{num}</span>
    <span className="sec-line"></span>
    <span className="sec-name">{label}</span>
  </div>
);

// ─────────────────────────────────────────────────────────────────────────────
const ProblemSection = () => {
  const pains = [
    { t: 'Leads go cold', d: 'Follow-ups happen hours — sometimes days — after a hand-raise.', icon: '↘' },
    { t: 'CRM is half-true', d: 'Records age out the moment a deal moves. Nobody updates them in time.', icon: '⊟' },
    { t: 'Onboarding is bespoke', d: 'Every new client kicks off the same hand-built setup ritual.', icon: '◰' },
    { t: 'Reports eat Mondays', d: 'Someone copies numbers across four tools to build the same deck.', icon: '▤' },
    { t: 'Inbox is the queue', d: 'Customer messages live wherever they last landed. Nothing gets routed.', icon: '✉' },
    { t: 'Tools don’t talk', d: 'Data is copied between CRM, sheets, billing, and email by hand.', icon: '⇋' },
    { t: 'Tasks slip', d: 'Reminders are remembered by humans. Some humans forget.', icon: '◷' },
    { t: 'You’re the bottleneck', d: 'The owner is doing admin instead of running the business.', icon: '◉' },
  ];
  return (
    <section className="section problem">
      <Reveal><SectionLabel num="01" label="The problem" /></Reveal>
      <Reveal delay={80}><h2 className="sec-h">Too much of your business still runs on someone <em>remembering</em> to do it.</h2></Reveal>
      <Reveal delay={140}><p className="sec-sub">Eight quiet ways manual work taxes a growing business — and what it costs.</p></Reveal>
      <div className="pain-grid">
        {pains.map((p, i) => (
          <Reveal key={i} delay={i * 60} y={20}>
            <div className="pain-card">
              <div className="pain-icon">{p.icon}</div>
              <div className="pain-t">{p.t}</div>
              <div className="pain-d">{p.d}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
const BeforeAfter = () => {
  const before = ['Someone checks the form', 'Someone copies the data', 'Someone sends the email', 'Someone updates the CRM', 'Someone creates a task', 'Someone tells the team'];
  const after = ['Form lands in the system', 'Lead saved + deduped', 'AI qualifies + scores', 'Personalized reply sent', 'CRM stage advanced', 'Team notified instantly'];
  return (
    <section className="section solution">
      <Reveal><SectionLabel num="02" label="The shift" /></Reveal>
      <Reveal delay={80}><h2 className="sec-h">From <em>"someone needs to…"</em> to <em>"the system already did."</em></h2></Reveal>
      <div className="ba-wrap">
        <Reveal delay={120} x={-20} className="ba-col ba-before">
          <div className="ba-head">
            <span className="ba-dot" style={{ background: 'var(--danger)' }}></span>
            <span>Before</span>
            <span className="ba-meta">manual · serial · slow</span>
          </div>
          {before.map((s, i) => (
            <div className="ba-step" key={i}>
              <span className="ba-i">{String(i + 1).padStart(2, '0')}</span>
              <span>{s}</span>
              <span className="ba-time">~{(i + 1) * 7}m</span>
            </div>
          ))}
          <div className="ba-total ba-total-before">Total: ~3.5 hours · per lead batch</div>
        </Reveal>
        <Reveal delay={220} scale={0.6} y={0} className="ba-arrow">→</Reveal>
        <Reveal delay={320} x={20} className="ba-col ba-after">
          <div className="ba-head">
            <span className="ba-dot" style={{ background: 'var(--success)' }}></span>
            <span>After</span>
            <span className="ba-meta">automatic · parallel · instant</span>
          </div>
          {after.map((s, i) => (
            <div className="ba-step" key={i}>
              <span className="ba-i">{String(i + 1).padStart(2, '0')}</span>
              <span>{s}</span>
              <span className="ba-time">{[1, 2, 4, 6, 1, 1][i]}s</span>
            </div>
          ))}
          <div className="ba-total ba-total-after">Total: 15 seconds · fully unattended</div>
        </Reveal>
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
const ServicesExplorer = () => {
  const cats = ['All', 'Sales', 'Operations', 'AI', 'Reporting', 'Data'];
  const [cat, setCat] = React.useState('All');
  const [activeId, setActiveId] = React.useState(SERVICES[0].id);
  const filtered = cat === 'All' ? SERVICES : SERVICES.filter(s => s.cat === cat);
  React.useEffect(() => {
    if (!filtered.find(s => s.id === activeId)) setActiveId(filtered[0]?.id);
  }, [cat]);
  const active = SERVICES.find(s => s.id === activeId) || SERVICES[0];

  return (
    <section className="section services">
      <Reveal><SectionLabel num="03" label="Ready-to-use systems" /></Reveal>
      <Reveal delay={80}><h2 className="sec-h">Ten systems I can build for your business — <em>off the shelf or customized.</em></h2></Reveal>
      <Reveal delay={140}><p className="sec-sub">Filter by category. Click a system to see what's inside, the flow, and the result.</p></Reveal>

      <Reveal delay={180} className="svc-tabs-wrap"><div className="svc-tabs">
        {cats.map(c => (
          <button key={c} className={`svc-tab ${cat === c ? 'on' : ''}`} onClick={() => setCat(c)}>
            {c}
            <span className="svc-tab-count">
              {c === 'All' ? SERVICES.length : SERVICES.filter(s => s.cat === c).length}
            </span>
          </button>
        ))}
      </div></Reveal>

      <Reveal delay={220} y={32}><div className="svc-explorer">
        <div className="svc-list">
          {filtered.map(s => (
            <button
              key={s.id}
              className={`svc-item ${s.id === activeId ? 'on' : ''}`}
              onClick={() => setActiveId(s.id)}
            >
              <span className="svc-item-icon">{s.icon}</span>
              <span className="svc-item-body">
                <span className="svc-item-t">{s.title}</span>
                <span className="svc-item-tag">{s.tagline}</span>
              </span>
              <span className="svc-item-cat">{s.cat}</span>
            </button>
          ))}
        </div>

        <div className="svc-detail" key={active.id}>
          <div className="svc-detail-head">
            <div className="svc-detail-icon">{active.icon}</div>
            <div className="svc-detail-titles">
              <div className="svc-detail-cat">{active.cat} system</div>
              <h3>{active.title}</h3>
              <p>{active.tagline}</p>
            </div>
          </div>

          <div className="svc-best">
            <span className="svc-k">Best for</span>
            <span className="svc-v">{active.best}</span>
          </div>

          <div className="svc-does">{active.does}</div>

          <div className="svc-flow">
            <div className="svc-k">The flow</div>
            <div className="svc-flow-row">
              {active.flow.map((step, i) => (
                <React.Fragment key={i}>
                  <div className="svc-flow-node">
                    <div className="svc-flow-i">{String(i + 1).padStart(2, '0')}</div>
                    <div className="svc-flow-l">{step}</div>
                  </div>
                  {i < active.flow.length - 1 && <div className="svc-flow-arr">→</div>}
                </React.Fragment>
              ))}
            </div>
          </div>

          <div className="svc-incl">
            <div className="svc-k">What's included</div>
            <div className="svc-chips">
              {active.includes.map((c, i) => <span key={i} className="svc-chip">{c}</span>)}
            </div>
          </div>

          <div className="svc-metric">
            <div className="svc-m-col">
              <div className="svc-m-l">Before</div>
              <div className="svc-m-v before">{active.metric.before}</div>
            </div>
            <div className="svc-m-arr">→</div>
            <div className="svc-m-col">
              <div className="svc-m-l">After</div>
              <div className="svc-m-v after">{active.metric.after}</div>
            </div>
            <div className="svc-m-delta">{active.metric.delta}</div>
          </div>
        </div>
      </div></Reveal>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
const Packages = () => {
  const pkgs = [
    {
      name: 'Starter Automation',
      tag: 'One workflow that pays for itself in week one.',
      price: 'From $750',
      eta: '5–7 days',
      best: 'A single repeating task you’d like off your plate.',
      includes: ['1 automation workflow', 'Tool connection + auth', 'Testing & error handling', 'Documentation', 'Handover walkthrough'],
      cta: 'Start with one automation',
      featured: false,
    },
    {
      name: 'Business Workflow',
      tag: 'Map a full process and put it on rails.',
      price: 'From $2,400',
      eta: '2–3 weeks',
      best: 'A multi-step workflow that touches several tools.',
      includes: ['Workflow audit + mapping', 'Multi-step automation', 'AI step where it earns its place', 'CRM / email / sheet integration', 'Monitoring + error handling', 'Documentation + training'],
      cta: 'Automate a process',
      featured: true,
    },
    {
      name: 'Custom System',
      tag: 'Backend, dashboards, and APIs — built to fit.',
      price: 'From $6,000',
      eta: '4–8 weeks',
      best: 'Advanced logic, custom data models, internal tools.',
      includes: ['Custom workflow design', 'API integrations + webhooks', 'Backend logic / database', 'Dashboard or internal tool', 'AI-powered processing', 'Deployment + monitoring', 'Documentation + handover'],
      cta: 'Build a custom system',
      featured: false,
    },
  ];
  return (
    <section className="section packages">
      <Reveal><SectionLabel num="04" label="Engagement" /></Reveal>
      <Reveal delay={80}><h2 className="sec-h">Three ways to work together.</h2></Reveal>
      <Reveal delay={140}><p className="sec-sub">Pick the size of the bite — every engagement ends with a working system you own.</p></Reveal>
      <div className="pkg-grid">
        {pkgs.map((p, i) => (
          <Reveal key={i} delay={i * 100} y={32}><div className={`pkg-card ${p.featured ? 'featured' : ''}`}>
            {p.featured && <div className="pkg-badge">Most picked</div>}
            <div className="pkg-name">{p.name}</div>
            <div className="pkg-tag">{p.tag}</div>
            <div className="pkg-meta">
              <div><span className="pkg-k">Investment</span><span className="pkg-v">{p.price}</span></div>
              <div><span className="pkg-k">Timeline</span><span className="pkg-v">{p.eta}</span></div>
            </div>
            <div className="pkg-best"><span className="pkg-k">Best for</span> {p.best}</div>
            <div className="pkg-incl">
              {p.includes.map((s, j) => (
                <div className="pkg-line" key={j}><span className="pkg-tick">✓</span>{s}</div>
              ))}
            </div>
            <a className="pkg-cta" href="#contact" onClick={(e) => {
              e.preventDefault();
              const sizeMap = { 'Single Automation': 'starter', 'Business Workflow': 'workflow', 'Custom System': 'custom' };
              const size = sizeMap[p.name];
              const el = document.getElementById('contact');
              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
              if (size) {
                setTimeout(() => {
                  const radio = document.querySelector(`input[name="size"][value="${size}"]`);
                  if (radio && !radio.checked) radio.click();
                }, 600);
              }
            }}>{p.cta} →</a>
          </div></Reveal>
        ))}
      </div>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────────────────────
const Process = () => {
  const steps = [
    { t: 'Discover', d: 'I learn how your current workflow runs and where the time leaks.', icon: '◌' },
    { t: 'Map', d: 'I diagram the manual steps and call out what should be automated.', icon: '◇' },
    { t: 'Choose', d: 'I pick the right build — no-code, AI, APIs, or custom code.', icon: '◈' },
    { t: 'Build', d: 'I assemble the system and wire it into your existing tools.', icon: '◉' },
    { t: 'Test', d: 'I run real cases through, including the messy ones.', icon: '✓' },
    { t: 'Launch', d: 'I hand it over with documentation you can actually read.', icon: '↗' },
    { t: 'Improve', d: 'I evolve it as your business grows.', icon: '∞' },
  ];
  return (
    <section className="section process">
      <Reveal><SectionLabel num="05" label="Process" /></Reveal>
      <Reveal delay={80}><h2 className="sec-h">From manual habit to working system in seven steps.</h2></Reveal>
      <Reveal delay={140} y={32}><div className="proc-track">
        {steps.map((s, i) => (
          <div className="proc-step" key={i}>
            <div className="proc-rail">
              <div className="proc-dot">{s.icon}</div>
              {i < steps.length - 1 && <div className="proc-line" />}
            </div>
            <div className="proc-body">
              <div className="proc-i">{String(i + 1).padStart(2, '0')}</div>
              <div className="proc-t">{s.t}</div>
              <div className="proc-d">{s.d}</div>
            </div>
          </div>
        ))}
      </div></Reveal>
    </section>
  );
};

window.ProblemSection = ProblemSection;
window.BeforeAfter = BeforeAfter;
window.ServicesExplorer = ServicesExplorer;
window.Packages = Packages;
window.Process = Process;