/* Systemiz site — Stuck section + What we build */

function StuckSection() {
  const symptoms = [
  { ic: "brain", title: "Knowledge lives in people's heads", desc: "Processes and context aren't captured in systems. They walk out the door every time someone leaves." },
  { ic: "notebook-tabs", title: "No single source of truth", desc: "Information is scattered across 10–15 different tools. Your team wastes their and your time trying to find information." },
  { ic: "layout-dashboard", title: "No CEO dashboard", desc: "Zero visibility into the business or what your team is actually working on day to day." },
  { ic: "line-chart", title: "Numbers aren't tracked", desc: "Data tracking isn't automated, so you don't know your numbers and can't make informed decisions." },
  { ic: "alarm-clock-off", title: "Fulfilment can't scale", desc: "Your team can't run the business without you so everything still requires your time. Growth is capped by your calendar." }];

  return (
    <section className="section" id="why-stuck" data-screen-label="02 Why You Feel Stuck">
      <div className="shell">
        <div className="section-head reveal">
          <span className="eyebrow">The Problem</span>
          <h2>Founders carry their <span className="accent">entire business</span> in their heads.</h2>
          <p className="lede" style={{ fontWeight: "400" }}><strong style={{ color: "#fff", fontWeight: 700 }}>If your business still requires you</strong> for every decision, product launch, client delivery or team onboarding, then <strong style={{ color: "#fff", fontWeight: 700 }}>you're the bottleneck.</strong>

          </p>
        </div>
        <div className="stuck reveal">
          <div className="stuck-copy">
            <h3>The <strong style={{ color: "rgb(255, 255, 255)" }}>result</strong>: <strong>you <b style={{ fontWeight: 500 }}>are</b> the system.</strong></h3>
            <p>Your team can't run the business without you. You're still chatting with AI instead of using it to automate tasks in the background. And your operations live in your head, your inbox, and a dozen disconnected tools.</p>
            <p>And you know that another AI tool won't solve your problem. What you need is an <strong style={{ color: 'var(--fg-1)', fontWeight: "600" }}>operating system that organizes the context and automates the data for AI</strong> to run your business.</p>
            <div className="signature">That's what we'll help you build or build for you in 30 days.</div>
          </div>
          <div className="symptom-stack">
            <div className="symptom-stack-label">
              <span className="ssl-rule"></span>
              <span className="ssl-text">The 5 symptoms of being the system</span>
              <span className="ssl-rule"></span>
            </div>
            {symptoms.map((s, i) =>
            <div className="symptom" key={i}>
                <span className="num">0{i + 1}</span>
                <span className="ico"><i data-lucide={s.ic}></i></span>
                <div className="body">
                  <div className="title">{s.title}</div>
                  <div className="desc">{s.desc}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ================= WHAT WE BUILD =================
function WhatWeBuild() {
  const cards = [
  { ic: "layout-dashboard", title: "CEO Dashboard", desc: "One dashboard showing a birdseye view of what's happening in the business: active projects, team KPI's, CRM pipeline, weekly scorecards, top priorities, etc.", ai: "AI weekly summary", span: "span-2" },
  { ic: "brain-circuit", title: "Business Brain", desc: "Organize your business context for your team & Claude: Business Vision, ICP, values, offers, decision principles, team structure, SOPs & processes, etc.", ai: "Claude context engineering", span: "span-2" },
  { ic: "smartphone", title: "Voice → Task", desc: "Send a voice note from your phone. Claude transcribes, structures it, and creates a task in Notion with project, priority, assignee, and due date.", ai: "Custom Claude Skills", span: "span-2" },
  { ic: "trending-up", title: "Automated CRM", desc: "Your contacts, leads, follow-ups, invoices, clients and pipeline automated and integrated with tools like Stripe, Calendly and AI meeting note takers.", ai: "AI lead triage", span: "span-2" },
  { ic: "bar-chart-3", title: "Weekly Scorecards", desc: "A weekly Claude brief on all your numbers to get visibility on the data. The KPI's from your and your team, and the data from all the tools and platforms you're using such as Shopify, Stripe, Skool, YouTube, etc.", ai: "Live data sync", span: "span-2" },
  { ic: "inbox", title: "Inbox / Capture", desc: "Voice note → idea or task logged. Quick capture from your phone or desktop so nothing falls through the cracks.", ai: "Claude routes it", span: "span-2" },
  { ic: "calendar-clock", title: "AI Meeting Automation", desc: "Automate scheduled meetings and AI meeting notes into Notion to organize the context and information for Claude, so it can extracts action items and creates the tasks for you and your team automatically.", ai: "Auto-extraction", span: "span-2" },
  { ic: "workflow", title: "MCP Connections", desc: "Notion, Google Drive, Gmail, Slack, Stripe, and all the other tools you're using in  your business, connected to your Notion workspace & Claude. All your context, tools, and data in one system.", ai: "Claude connections", span: "span-2" },
  { ic: "book-open-text", title: "SOPs & Processes", desc: "Capture & create SOPs with Claude and organize them in the Notion system for you, your team, and AI.", ai: "Define your processes", span: "span-2" },
  { ic: "users-round", title: "Team Dashboards", desc: "Each team member gets their own view with their tasks, projects, KPIs, and SOPs. Department-level permissions baked in so you have full control over who sees what.", ai: "Role-based dashboards", span: "span-2" },
  { ic: "user-plus", title: "Onboarding Engine", desc: "Onboard new hires within 48h through the onboarding system. Every new hire used to mean a week of repeating yourself. The system delivers their training, SOPs, and access automatically so they're producing within 48 hours, not seven days.", ai: "Self-serve training", span: "span-2" },
  { ic: "database", title: "One Source of Truth", desc: "Your business is scattered across Sheets, WhatsApp, your inbox, and apps you forgot you paid for. Projects, clients, finances, and SOPs all live in one Notion workspace your team can actually find.", ai: "Replaces 10–15 tools", span: "span-2" }];

  return (
    <section className="section" id="what-we-build" data-screen-label="03 What We Build">
      <div className="shell">
        <div className="section-head reveal">
          <span className="eyebrow">Phase 1 · The Build</span>
          <h2>A <span className="accent">structured backend</span> that makes Claude intelligent.</h2>
          <p className="lede">Notion is the structured memory and context Claude operates from. We design both the Notion workspace and the AI layer around your business and how your team actually works.

          </p>
        </div>
        <div className="system-grid reveal">
          {cards.map((c, i) =>
          <div className={`sys-card ${c.span} ${c.tall ? 'tall' : ''}`} key={i}
          onMouseMove={(e) => {
            const r = e.currentTarget.getBoundingClientRect();
            e.currentTarget.style.setProperty('--mx', e.clientX - r.left + 'px');
            e.currentTarget.style.setProperty('--my', e.clientY - r.top + 'px');
          }}>
              <span className="ico"><i data-lucide={c.ic}></i></span>
              <h4>{c.title}</h4>
              <p>{c.desc}</p>
              <div className="ai-tag"><span className="ai-dot"></span>{c.ai}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { StuckSection, WhatWeBuild });