/* global React, Reveal, Icon */
const { useState: useStateSB, useEffect: useEffectSB } = React;

// ============================================================
// SWITCHBOARD MARKETING SITE
// AI Business Manager — product by Sinux Consulting
// ============================================================

function SwitchboardPage() {
  return (
    <div className="page-enter sb-page" data-screen-label="Switchboard">
      <SBNav />
      <SBHero />
      <SBProblem />
      <SBSolution />
      <SBFeatures />
      <SBHowItWorks />
      <SBAddOns />
      <SBTrust />
      <SBCTA />
      <SBFooter />
    </div>
  );
}

// ============================================================
// NAV
// ============================================================
function SBNav() {
  const [scrolled, setScrolled] = useStateSB(false);
  useEffectSB(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={`sb-header ${scrolled ? "scrolled" : ""}`}>
      <div className="sb-nav-inner">
        <a href="/switchboard" className="sb-brand">
          <SBLogo size={28} />
          <span className="sb-brand-text">
            <span style={{ color: "#3D82FF" }}>Switch</span>board
          </span>
        </a>
        <nav className="sb-nav-links">
          <a href="#features">Features</a>
          <a href="#addons">Add-Ons</a>
          <a href="#how">How It Works</a>
        </nav>
        <a href="/consulting/contact" className="sb-btn sb-btn-primary">Book a Demo</a>
      </div>
    </header>
  );
}

function SBLogo({ size = 32 }) {
  const id = "sb-" + Math.floor(Math.random() * 1e6);
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#0057FF" />
          <stop offset="100%" stopColor="#3D82FF" />
        </linearGradient>
      </defs>
      <rect x="3" y="3" width="34" height="34" rx="8" fill={`url(#${id})`} />
      {/* switchboard / nodes */}
      <g fill="white" opacity="0.95">
        <circle cx="13" cy="13" r="2.4" />
        <circle cx="27" cy="13" r="2.4" />
        <circle cx="13" cy="27" r="2.4" />
        <circle cx="27" cy="27" r="2.4" />
        <line x1="13" y1="13" x2="27" y2="27" stroke="white" strokeWidth="1.5" />
        <line x1="27" y1="13" x2="13" y2="27" stroke="white" strokeWidth="1.5" opacity="0.6" />
      </g>
    </svg>
  );
}

// ============================================================
// HERO
// ============================================================
function SBHero() {
  return (
    <section className="sb-hero">
      <div className="sb-hero-bg" />
      <div className="sb-container">
        <div className="sb-hero-grid">
          <div className="sb-hero-text">
            <Reveal>
              <span className="sb-pill">By Sinux Consulting</span>
            </Reveal>
            <Reveal delay={120}>
              <h1 className="sb-h1">
                Your AI Business Manager.<br />
                <span className="sb-h1-accent">Always On.</span>
              </h1>
            </Reveal>
            <Reveal delay={220}>
              <p className="sb-lede">
                Switchboard captures every lead, responds across every channel, books appointments
                automatically, and remembers every customer — so you can focus on the work, not the admin.
              </p>
            </Reveal>
            <Reveal delay={320}>
              <div className="sb-cta-row">
                <a href="/consulting/contact" className="sb-btn sb-btn-primary sb-btn-lg">Book a Demo</a>
                <a href="#how" className="sb-btn sb-btn-ghost sb-btn-lg">See How It Works →</a>
              </div>
            </Reveal>
            <Reveal delay={420}>
              <div className="sb-social-proof">
                Built for <strong>landscapers</strong> · <strong>cleaners</strong> · <strong>trades</strong> · <strong>home services</strong>
              </div>
            </Reveal>
          </div>

          <Reveal delay={280} className="sb-hero-visual">
            <SBCommandDash />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// Operational Command Center mockup
function SBCommandDash() {
  return (
    <div className="sb-dash-card">
      <div className="sb-dash-header">
        <div className="sb-dash-title">Operational Command Center</div>
        <div className="sb-dash-time">Today · 9:14 AM</div>
      </div>
      <div className="sb-dash-stats">
        <div className="sb-dash-stat">
          <div className="sb-dash-stat-num">12</div>
          <div className="sb-dash-stat-label">New Leads Today</div>
        </div>
        <div className="sb-dash-stat sb-dash-stat-warn">
          <div className="sb-dash-stat-num">4</div>
          <div className="sb-dash-stat-label">Needs Reply</div>
        </div>
        <div className="sb-dash-stat sb-dash-stat-good">
          <div className="sb-dash-stat-num">3</div>
          <div className="sb-dash-stat-label">Estimates Booked</div>
        </div>
      </div>

      <div className="sb-dash-section-label">Activity feed</div>
      <div className="sb-dash-feed">
        {[
          { icon: "💬", txt: <>AI replied to <strong>Oliver James</strong></>, when: "2 min ago", ok: true },
          { icon: "📅", txt: <>Estimate booked — Thu 10:00am</>, when: "14 min ago", ok: true },
          { icon: "📲", txt: <>SMS sent to <strong>Maria Chen</strong> — qualifying</>, when: "22 min ago" },
          { icon: "📞", txt: <>Outbound call queued for <strong>Daniel Cruz</strong></>, when: "31 min ago" },
        ].map((r, i) => (
          <div key={i} className="sb-dash-row">
            <span className="sb-dash-row-icon">{r.icon}</span>
            <span className="sb-dash-row-text">{r.txt}</span>
            <span className="sb-dash-row-time">{r.when}</span>
          </div>
        ))}
      </div>

      <div className="sb-dash-section-label">Pipeline</div>
      <div className="sb-dash-pipeline">
        {[
          ["NEW", 8],
          ["CONTACTED", 5],
          ["QUALIFIED", 3],
          ["BOOKED", 3],
        ].map(([l, n], i) => (
          <React.Fragment key={i}>
            <div className="sb-pipe-step">
              <div className="sb-pipe-num">{n}</div>
              <div className="sb-pipe-label">{l}</div>
            </div>
            {i < 3 && <span className="sb-pipe-arrow">›</span>}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// PROBLEM
// ============================================================
function SBProblem() {
  const pains = [
    { i: "📵", t: "Missed calls go unreturned", d: "A lead calls outside business hours. Nobody knows. The job goes to a competitor." },
    { i: "⏳", t: "Emails sit for hours", d: "Speed-to-lead is everything. Slow replies cost bookings." },
    { i: "🌑", t: "Follow-ups are forgotten", d: "After the first enquiry, there's no system. Leads go cold and die." },
    { i: "📅", t: "Scheduling is a back-and-forth", d: "Manual availability checks, double-bookings, no buffer rules. Chaos every week." },
  ];
  return (
    <section className="sb-section">
      <div className="sb-container">
        <Reveal>
          <div className="sb-eyebrow">The Reality</div>
          <h2 className="sb-h2">Most service businesses run on <em>chaos.</em></h2>
        </Reveal>
        <div className="sb-grid-2" style={{ marginTop: 56 }}>
          {pains.map((p, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="sb-pain-card">
                <div className="sb-pain-icon">{p.i}</div>
                <h3 className="sb-pain-title">{p.t}</h3>
                <p className="sb-pain-desc">{p.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={300}>
          <p className="sb-transition-line">
            You already have the skills. You're losing work because of operations.<br />
            <span style={{ color: "#3D82FF" }}>Switchboard fixes that.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// SOLUTION OVERVIEW — 7 modules
// ============================================================
function SBSolution() {
  const modules = [
    { i: "command", t: "Command Center", d: "Real-time overview of leads, replies, bookings, and what needs attention right now." },
    { i: "contacts", t: "Contacts & History", d: "A lightweight CRM where every lead and customer accumulates a full operational memory." },
    { i: "engine", t: "Lead Response Engine", d: "Multi-channel AI that engages new leads by email, SMS, and call in a coordinated sequence within minutes." },
    { i: "voice", t: "AI Receptionist", d: "An AI voice agent that answers inbound calls, qualifies leads, and books appointments around the clock." },
    { i: "calendar", t: "Scheduling & Compliance", d: "Calendar-aware booking that respects your working hours, appointment types, and buffer rules — always." },
    { i: "reengage", t: "Re-engagement Engine", d: "Automated outreach that recovers cold leads and retains past customers before they go elsewhere." },
    { i: "settings", t: "Settings & Control", d: "Configure every AI behaviour, team role, compliance rule, and integration. No code needed." },
  ];
  return (
    <section className="sb-section sb-section-alt">
      <div className="sb-container">
        <Reveal>
          <div className="sb-eyebrow">The Platform</div>
          <h2 className="sb-h2">One dashboard. Every operation. <em>Nothing missed.</em></h2>
        </Reveal>
        <div className="sb-grid-3" style={{ marginTop: 56 }}>
          {modules.map((m, i) => (
            <Reveal key={i} delay={i * 50}>
              <div className="sb-module-card">
                <div className="sb-module-icon"><SBIcon name={m.i} /></div>
                <h3 className="sb-module-title">{m.t}</h3>
                <p className="sb-module-desc">{m.d}</p>
                <span className="sb-module-arrow">→</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SBIcon({ name }) {
  const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "command": return <svg {...p}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
    case "contacts": return <svg {...p}><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><path d="M16 11h5M16 15h5M16 19h5"/></svg>;
    case "engine": return <svg {...p}><path d="M3 12h4l3-7 4 14 3-7h4"/></svg>;
    case "voice": return <svg {...p}><path d="M22 16c0 3-3 5-7 5s-7-2-7-5"/><path d="M16 6a6 6 0 0112 0v4a6 6 0 01-12 0V6z" transform="translate(-8,0)"/><path d="M12 19v3"/></svg>;
    case "calendar": return <svg {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M9 3v4M15 3v4"/></svg>;
    case "reengage": return <svg {...p}><path d="M21 12a9 9 0 11-3.5-7.1L21 8M21 3v5h-5"/></svg>;
    case "settings": return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 01-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 01-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 010-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 012.8-2.8l.1.1a1.7 1.7 0 001.8.3h0a1.7 1.7 0 001-1.5V3a2 2 0 014 0v.1a1.7 1.7 0 001 1.5h0a1.7 1.7 0 001.8-.3l.1-.1a2 2 0 012.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v0a1.7 1.7 0 001.5 1H21a2 2 0 010 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg>;
    case "phone": return <svg {...p}><path d="M22 16.9v3a2 2 0 01-2.2 2 19 19 0 01-8.6-3 19 19 0 01-6-6 19 19 0 01-3-8.6A2 2 0 014.1 2h3a2 2 0 012 1.7 13 13 0 00.7 2.8 2 2 0 01-.4 2.1L8.1 9.9a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.4 13 13 0 002.8.7 2 2 0 011.7 2"/></svg>;
    case "review": return <svg {...p}><path d="M12 2l3 7 7 .5-5.5 4.5 2 7L12 17l-6.5 4 2-7L2 9.5l7-.5z"/></svg>;
    case "quote": return <svg {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>;
    default: return null;
  }
}

// ============================================================
// FEATURE DEEP DIVES (7 modules, alternating)
// ============================================================
function SBFeatures() {
  const feats = [
    {
      icon: "command",
      eyebrow: "Command Center",
      head: "Every morning, you know exactly what to do.",
      body: "Your operational dashboard tells you what came in overnight, what needs a reply right now, and what's at risk. No digging through emails. No missed opportunities hiding in a tab.",
      bullets: [
        "5-minute response SLA tracker",
        "Pipeline view — see where every lead is stuck",
        "Unreplied threads and missed calls surfaced automatically",
        "Upcoming estimates for the next 7 days",
        "Weather risk flags on outdoor jobs",
        "One-click quick actions",
      ],
      visual: <SBCommandVisual />,
    },
    {
      icon: "contacts",
      eyebrow: "Contacts & History",
      head: "Customer memory that actually works.",
      body: "Every lead is one record. Every conversation, job, and follow-up lives in one place. When your AI drafts a message, it knows what you've done for that customer before — because that history is right there.",
      bullets: [
        "Full contact record: name, email, phone, address, stage",
        "Job entries — service type, date, amount, follow-up",
        "Communication timeline: email, SMS, call",
        "Lead stages: New → Contacted → Qualified → Booked → Won",
        "AI uses job history to personalise outreach automatically",
        "Tasks and reminders tied to each contact",
      ],
      visual: <SBContactVisual />,
    },
    {
      icon: "engine",
      eyebrow: "Lead Response Engine",
      head: "First contact in under 2 minutes. Every time.",
      body: "The moment a lead submits your website form or sends an email, Switchboard fires an acknowledgement, follows up with a qualifying SMS, and — if they don't respond — places an outbound call. Coordinated. Paced. Never spammy.",
      bullets: [
        "Instant acknowledgement email — templated or AI-personalised",
        "SMS qualification at T+2 minutes",
        "Outbound call attempt at T+5–10 minutes if no reply",
        "Stops the moment the lead responds on any channel",
        "Tier bundles: Acknowledge / Engage / Convert",
        "Lead intelligence — detects real lead vs marketer vs spam",
        "Every action requires approval (or auto)",
      ],
      visual: <SBEngineVisual />,
    },
    {
      icon: "voice",
      eyebrow: "AI Receptionist",
      head: "Answers every call. Books the job. You're not even there.",
      body: "An AI voice agent answers your inbound calls using a natural, configurable voice. It collects the caller's details, understands what they need, checks your calendar, and books the appointment — all without you picking up.",
      bullets: [
        "24/7 inbound call handling",
        "Natural AI voice — generic or custom via ElevenLabs",
        "Collects intake: name, email, service, address, availability",
        "Books directly into Google Calendar in real time",
        "Makes outbound calls to leads who haven't replied",
        "Escalation rules — alerts owner immediately",
        "Full transcript synced to CRM",
      ],
      visual: <SBVoiceVisual />,
    },
    {
      icon: "calendar",
      eyebrow: "Scheduling & Compliance",
      head: "Booking that respects your real calendar. Always.",
      body: "Switchboard checks your live Google Calendar before every booking. Your working hours, appointment durations, and buffer rules are configured once and enforced everywhere — across email, SMS, call, and manual booking.",
      bullets: [
        "Live Google Calendar sync — real availability",
        "Working hours configuration",
        "Appointment types: Phone Quote, On-Site, Follow-Up",
        "Buffer rules between jobs",
        "Advance booking limits",
        "Quiet hours, contact limits, opt-out handling",
        "Re-verify before final confirmation",
      ],
      visual: <SBCalendarVisual />,
    },
    {
      icon: "reengage",
      eyebrow: "Re-engagement Engine",
      head: "Cold leads aren't gone. They're just waiting.",
      body: "Switchboard tracks every lead and past customer. When someone's been quiet too long, it flags them, drafts the outreach, and sends — on a schedule you control. Bring back the leads that slipped through.",
      bullets: [
        "Automatic segments: 7 / 15 / 30+ days inactive",
        "AI-personalised re-engagement messages",
        "Campaign assist — paste an offer link",
        "Automated flows with frequency caps",
        "Stops immediately if the lead replies",
        "Past customer follow-ups based on next-follow-up dates",
      ],
      visual: <SBReengageVisual />,
    },
    {
      icon: "settings",
      eyebrow: "Settings & Control",
      head: "You set the rules. The AI follows them perfectly.",
      body: "Every AI behaviour, every compliance rule, every team permission is configured from one place. And if you want to change how an AI agent talks? Just tell it — in plain English. It updates itself.",
      bullets: [
        "AI agent editor — context, behaviour, guardrails",
        "Conversational prompt editing in plain English",
        "Branding control — business name, logo, colour",
        "Team management — Admin, User, Viewer roles",
        "Google Workspace one-click integration",
        "Response and outreach templates",
      ],
      visual: <SBSettingsVisual />,
    },
  ];

  return (
    <section id="features" className="sb-section">
      <div className="sb-container">
        <Reveal>
          <div className="sb-eyebrow">Feature Deep Dives</div>
          <h2 className="sb-h2">Every module, <em>fully unpacked.</em></h2>
        </Reveal>
        <div className="sb-features-list">
          {feats.map((f, i) => (
            <Reveal key={i}>
              <div className={`sb-feature-row ${i % 2 === 1 ? "reverse" : ""}`}>
                <div>
                  <div className="sb-feat-icon-wrap">
                    <SBIcon name={f.icon} />
                  </div>
                  <div className="sb-eyebrow">{f.eyebrow}</div>
                  <h3 className="sb-h3">{f.head}</h3>
                  <p className="sb-feat-body">{f.body}</p>
                  <ul className="sb-feat-list">
                    {f.bullets.map((b, j) => (
                      <li key={j}>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1ADB8A" strokeWidth="2.5"><path d="M5 12l4 4L19 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                        <span>{b}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="sb-feat-visual">
                  {f.visual}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== Feature visuals (abstract UI cards) =====
function SBCommandVisual() {
  return (
    <div className="sb-vcard">
      <div className="sb-vcard-stats">
        {[
          ["12", "Leads"],
          ["4", "Reply"],
          ["3", "Booked"],
        ].map(([n, l], i) => (
          <div key={i} className="sb-vstat"><div>{n}</div><span>{l}</span></div>
        ))}
      </div>
      <div className="sb-vcard-bars">
        {[20, 35, 25, 45, 30, 50, 40].map((h, i) => (
          <div key={i} className="sb-vbar" style={{ height: `${h}%` }} />
        ))}
      </div>
    </div>
  );
}

function SBContactVisual() {
  return (
    <div className="sb-vcard">
      <div className="sb-vcontact-head">
        <div className="sb-vavatar">OJ</div>
        <div>
          <div style={{ fontWeight: 600, color: "#F0F4FF" }}>Oliver James</div>
          <div style={{ fontSize: 11, color: "#8A9BBF" }}>Lawn care · Qualified</div>
        </div>
      </div>
      <div className="sb-vtimeline">
        {[
          ["📧", "Email: enquiry received", "T+0"],
          ["💬", "SMS sent — qualifying", "T+2m"],
          ["📞", "Call accepted — 4 min", "T+7m"],
          ["📅", "On-site quote booked Thu", "T+8m"],
        ].map(([i, t, w], idx) => (
          <div key={idx} className="sb-vtline-row">
            <span className="sb-vtline-icon">{i}</span>
            <span style={{ fontSize: 12, color: "#dbe1f0" }}>{t}</span>
            <span style={{ marginLeft: "auto", fontSize: 10, color: "#8A9BBF", fontFamily: "DM Mono, monospace" }}>{w}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SBEngineVisual() {
  return (
    <div className="sb-vcard">
      <div style={{ fontSize: 11, letterSpacing: "0.14em", color: "#8A9BBF", textTransform: "uppercase", marginBottom: 16 }}>Lead engagement timeline</div>
      <div className="sb-engine-timeline">
        {[
          ["📧", "Email", "T+0", true],
          ["💬", "SMS", "T+2m", true],
          ["📞", "Call", "T+8m", true],
          ["✅", "Replied. Stopped.", "T+9m", false],
        ].map(([i, l, t, ok], idx) => (
          <React.Fragment key={idx}>
            <div className={`sb-engine-step ${ok ? "ok" : "done"}`}>
              <div className="sb-engine-icon">{i}</div>
              <div className="sb-engine-label">{l}</div>
              <div className="sb-engine-time">{t}</div>
            </div>
            {idx < 3 && <div className="sb-engine-line" />}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function SBVoiceVisual() {
  return (
    <div className="sb-vcard">
      <div className="sb-voice-call">
        <div className="sb-voice-status">
          <span className="sb-voice-pulse" />
          Call in progress · 1:24
        </div>
        <div className="sb-voice-caller">+1 (415) 555-0188</div>
        <div className="sb-voice-intent">Detected intent: <strong>On-site lawn estimate</strong></div>
        <div className="sb-voice-wave">
          {Array.from({ length: 32 }).map((_, i) => (
            <span key={i} className="sb-voice-bar" style={{ animationDelay: `${i * 0.06}s` }} />
          ))}
        </div>
        <div className="sb-voice-status-line">
          <span className="sb-voice-dot" /> Booking estimate… <strong style={{ marginLeft: "auto", color: "#1ADB8A" }}>Thu 10:00 ✓</strong>
        </div>
      </div>
    </div>
  );
}

function SBCalendarVisual() {
  const days = ["M", "T", "W", "T", "F"];
  return (
    <div className="sb-vcard">
      <div className="sb-cal-grid">
        {days.map((d, i) => (
          <div key={i} className="sb-cal-day">
            <div className="sb-cal-dayname">{d}</div>
            <div className="sb-cal-slots">
              {[1, 2, 3, 4].map((s) => {
                const booked = (i === 0 && s === 2) || (i === 2 && s === 1) || (i === 4 && s === 3);
                const buffer = (i === 2 && s === 2) || (i === 4 && s === 4);
                const newBook = i === 1 && s === 3;
                return (
                  <div
                    key={s}
                    className={`sb-cal-slot ${booked ? "booked" : ""} ${buffer ? "buffer" : ""} ${newBook ? "new" : ""}`}
                  >
                    {newBook && <span style={{ fontSize: 9 }}>NEW</span>}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
      <div className="sb-cal-legend">
        <span><i className="sb-cal-leg sb-cal-leg-booked"/>Booked</span>
        <span><i className="sb-cal-leg sb-cal-leg-buffer"/>Buffer</span>
        <span><i className="sb-cal-leg sb-cal-leg-new"/>New booking</span>
      </div>
    </div>
  );
}

function SBReengageVisual() {
  const segments = [
    { d: "7 days inactive", n: 12, pct: 30, color: "#3D82FF" },
    { d: "15 days inactive", n: 8, pct: 60, color: "#F59E0B" },
    { d: "30+ days inactive", n: 23, pct: 90, color: "#0057FF" },
  ];
  return (
    <div className="sb-vcard">
      <div style={{ fontSize: 11, letterSpacing: "0.14em", color: "#8A9BBF", textTransform: "uppercase", marginBottom: 16 }}>Segments</div>
      {segments.map((s, i) => (
        <div key={i} style={{ marginBottom: 14 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6, fontSize: 12, color: "#dbe1f0" }}>
            <span>{s.d}</span>
            <strong style={{ color: s.color }}>{s.n}</strong>
          </div>
          <div style={{ height: 6, background: "rgba(255,255,255,0.06)", borderRadius: 4, overflow: "hidden" }}>
            <div style={{ width: `${s.pct}%`, height: "100%", background: s.color, borderRadius: 4 }} />
          </div>
        </div>
      ))}
    </div>
  );
}

function SBSettingsVisual() {
  return (
    <div className="sb-vcard">
      <div style={{ fontSize: 11, letterSpacing: "0.14em", color: "#8A9BBF", textTransform: "uppercase", marginBottom: 16 }}>AI agent editor</div>
      <div className="sb-settings-row">
        <span style={{ fontSize: 12, color: "#dbe1f0" }}>Agent</span>
        <strong style={{ color: "#3D82FF" }}>Reception_v3</strong>
      </div>
      <div className="sb-settings-row">
        <span style={{ fontSize: 12, color: "#dbe1f0" }}>Voice</span>
        <strong>Custom (ElevenLabs)</strong>
      </div>
      <div className="sb-settings-prompt">
        <div className="sb-settings-prompt-label">Tell me the change in plain English…</div>
        <div className="sb-settings-prompt-text">
          "Sound a little warmer. Always confirm the address back to the customer."
        </div>
      </div>
      <button className="sb-btn sb-btn-primary sb-btn-sm" style={{ marginTop: 14 }}>
        Update agent →
      </button>
    </div>
  );
}

// ============================================================
// HOW IT WORKS
// ============================================================
function SBHowItWorks() {
  return (
    <section id="how" className="sb-section sb-section-alt">
      <div className="sb-container">
        <Reveal>
          <div className="sb-eyebrow">How It Works</div>
          <h2 className="sb-h2">From enquiry to booked estimate — <em>without you.</em></h2>
        </Reveal>
        <div className="sb-flow">
          {[
            { n: "01", t: "Lead Comes In", d: "A potential customer submits your website form, sends an email, or calls your number. Switchboard receives it instantly and creates a contact record." },
            { n: "02", t: "AI Engages", d: "Within minutes, Switchboard sends an acknowledgement email, a qualifying SMS, and — if needed — places an outbound call. All coordinated. All within your compliance rules." },
            { n: "03", t: "Estimate Booked", d: "The lead is qualified, availability is checked against your real calendar, and the estimate is booked — with a confirmation sent to both the lead and you." },
          ].map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="sb-flow-step">
                <div className="sb-flow-num">{s.n}</div>
                <h3 className="sb-flow-title">{s.t}</h3>
                <p className="sb-flow-desc">{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={400}>
          <p style={{ textAlign: "center", color: "#8A9BBF", fontSize: 13, marginTop: 36, fontStyle: "italic" }}>
            Every step is logged. Every message is yours to review. AI drafts; you approve.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// ADD-ONS
// ============================================================
function SBAddOns() {
  const addons = [
    {
      icon: "quote",
      title: "Intelligent Estimate Generation",
      tag: "Quote jobs on-site in minutes. No clipboard needed.",
      body: "The business owner walks the job site and records a voice note or video walkthrough. Switchboard's AI analyses the content, identifies the scope, and generates a professional estimate ready to review and send.",
      bullets: [
        "Voice recording → transcription → estimate draft",
        "Video walkthrough → computer vision → visual scope",
        "Rayban Meta Glasses support for hands-free capture",
        "Human approval before sending — always",
        "Estimate templates per service type",
      ],
    },
    {
      icon: "review",
      title: "Intelligent Review Collection",
      tag: "Turn completed jobs into 5-star Google reviews.",
      body: "Every time a job is marked complete, Switchboard sends a personalised review request at exactly the right moment — while the customer is still happy.",
      bullets: [
        "Auto-triggered on job completion",
        "Personalised using job history",
        "Google Business Profile integration",
        "Review tracking dashboard",
        "Negative sentiment detection",
      ],
    },
    {
      icon: "reengage",
      title: "Lead Re-engagement Engine",
      tag: "Recover cold leads. Retain past customers.",
      body: "Available as a standalone upgrade for businesses on the base plan who want the full outreach automation suite.",
      bullets: [
        "Smart segmentation by inactivity",
        "Automated multi-message cadences",
        "Past customer reactivation flow",
        "Full frequency and compliance controls",
      ],
    },
  ];
  return (
    <section id="addons" className="sb-section">
      <div className="sb-container">
        <Reveal>
          <div className="sb-eyebrow">Add-On Modules</div>
          <h2 className="sb-h2">Unlock more when you're <em>ready.</em></h2>
          <p className="sb-lede" style={{ marginTop: 20 }}>
            Core Switchboard comes with everything in the Main Flow. Add-On modules unlock advanced
            capabilities for businesses ready to scale further.
          </p>
        </Reveal>

        <div className="sb-grid-3" style={{ marginTop: 56 }}>
          {addons.map((a, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="sb-addon-card">
                <div className="sb-addon-badge">UNLOCKABLE</div>
                <div className="sb-addon-icon"><SBIcon name={a.icon} /></div>
                <h3 className="sb-addon-title">{a.title}</h3>
                <p className="sb-addon-tag">{a.tag}</p>
                <p className="sb-addon-body">{a.body}</p>
                <ul className="sb-addon-list">
                  {a.bullets.map((b, j) => (
                    <li key={j}>
                      <span className="sb-addon-dot" /> {b}
                    </li>
                  ))}
                </ul>
                <a href="/consulting/contact" className="sb-btn sb-btn-outline sb-btn-block" style={{ marginTop: "auto" }}>
                  Get This Add-On
                </a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TRUST SIGNALS
// ============================================================
function SBTrust() {
  const trust = [
    { i: "📜", t: "Full Audit Trail", d: "Every action — AI-drafted, human-sent, or auto-fired — is logged with a timestamp and actor. You can always see exactly what happened and why." },
    { i: "🧑‍💼", t: "Human-in-the-Loop by Default", d: "Switchboard proposes. You approve. Automation is opt-in, not opt-out. You stay in control of every outbound action." },
    { i: "🔗", t: "Google-Native", d: "Your existing Gmail and Google Calendar are the source of truth. No duplicate systems. No new passwords. Everything syncs where you already work." },
    { i: "🛡️", t: "Role-Based Access", d: "Admins, staff, and viewers each see what they need and nothing they shouldn't. Managed and deployed by Sinux Consulting." },
  ];
  return (
    <section className="sb-section sb-section-alt">
      <div className="sb-container">
        <Reveal>
          <div className="sb-eyebrow">Built to Be Trusted</div>
          <h2 className="sb-h2">Powerful AI with a human <em>always in control.</em></h2>
        </Reveal>
        <div className="sb-grid-2" style={{ marginTop: 56 }}>
          {trust.map((t, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="sb-trust-card">
                <div className="sb-trust-icon">{t.i}</div>
                <h3 className="sb-trust-title">{t.t}</h3>
                <p className="sb-trust-desc">{t.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA
// ============================================================
function SBCTA() {
  return (
    <section className="sb-section">
      <div className="sb-container">
        <Reveal>
          <div className="sb-cta-card">
            <div className="sb-eyebrow" style={{ color: "rgba(255,255,255,0.85)" }}>Get Started</div>
            <h2 className="sb-h2" style={{ color: "white", maxWidth: "20ch", marginInline: "auto", textAlign: "center" }}>
              Ready to stop losing leads to <em>slow operations?</em>
            </h2>
            <p style={{ color: "rgba(255,255,255,0.85)", textAlign: "center", maxWidth: 640, marginInline: "auto", marginTop: 20, fontSize: 17, lineHeight: 1.65 }}>
              Switchboard is deployed and managed by Sinux Consulting. Pricing is tailored to your
              business size and the modules you need. Book a call and we'll scope it together.
            </p>
            <div className="sb-cta-row" style={{ justifyContent: "center", marginTop: 32 }}>
              <a href="/consulting/contact" className="sb-btn sb-btn-light sb-btn-lg">Book a Discovery Call</a>
            </div>
            <div style={{ textAlign: "center", marginTop: 24, fontSize: 12, color: "rgba(255,255,255,0.6)", fontStyle: "italic" }}>
              Pricing is custom-quoted per business. No self-serve sign-up — we onboard every client personally.
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function SBFooter() {
  return (
    <footer className="sb-footer">
      <div className="sb-container">
        <div className="sb-footer-row">
          <div>
            <a href="/switchboard" className="sb-brand">
              <SBLogo size={26} />
              <span className="sb-brand-text">
                <span style={{ color: "#3D82FF" }}>Switch</span>board
              </span>
            </a>
            <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 13, lineHeight: 1.65, marginTop: 14, maxWidth: 280 }}>
              The AI business manager for service operators.
            </p>
          </div>
          <div className="sb-footer-links">
            <a href="#features">Features</a>
            <a href="#addons">Add-Ons</a>
            <a href="#how">How It Works</a>
            <a href="/consulting/contact">Contact</a>
          </div>
          <div style={{ textAlign: "right" }}>
            <a href="/consulting" style={{ color: "#3D82FF", fontSize: 13, textDecoration: "none" }}>
              A product by Sinux Consulting →
            </a>
          </div>
        </div>
        <div className="sb-footer-bottom">
          <span>© 2026 Sinux Consulting. All rights reserved.</span>
          <span>Registered in Malaysia · SSM: 202503207573</span>
        </div>
      </div>
    </footer>
  );
}

window.SwitchboardPage = SwitchboardPage;