/* Systemiz one-pager — shared content + small building blocks.
   Copy speaks to Layer 2 ICP: profitable, scaled Shopify e-commerce founders.
   Voice: calm, founder-to-founder, sentence case, ampersands, periods. */

const SZ = {
  nav: ["Community", "YouTube", "Newsletter", "Life OS"],
  stats: [
    { num: "50K+", lbl: "Subscribers" },
    { num: "4K+", lbl: "Community" },
    { num: "100+", lbl: "Consultations" },
  ],
  // The e-commerce-specific pains, in the founder's own language
  problems: [
    {
      ico: "bar-chart-3",
      h: "Your numbers live in five tools.",
      p: "Shopify, Meta, Klaviyo, Triple Whale, QuickBooks. You stitch the real picture together by hand every week.",
      tag: "Reporting fragmentation",
    },
    {
      ico: "messages-square",
      h: "Support scales faster than headcount.",
      p: "Tickets pile up, response time slips, and you end up answering them yourself at 11 PM.",
      tag: "Operational overload",
    },
    {
      ico: "repeat",
      h: "Every process gets reinvented.",
      p: "Returns, inventory, ad creative, email flows — nothing is documented, so the team rebuilds it each time.",
      tag: "No systems",
    },
    {
      ico: "user-round-cog",
      h: "Nothing moves without you.",
      p: "Every decision routes through you. A day off means something breaks. You own a job, not an asset.",
      tag: "Founder bottleneck",
    },
  ],
  // The mechanism + the four phases
  steps: [
    {
      ico: "database",
      k: "Phase 1",
      h: "Company Brain",
      p: "Centralize everything into one source of truth. Revenue, pipeline, team activity, and today's priorities — visible at a glance, no surprises.",
    },
    {
      ico: "file-text",
      k: "Phase 2",
      h: "SOPs & systems",
      p: "Get the process out of your head and into documented systems your team runs without asking you first.",
    },
    {
      ico: "cpu",
      k: "Phase 3",
      h: "AI integration",
      p: "Once it's organized, we automate what's left with AI that actually understands your business — not another scattered tool.",
    },
    {
      ico: "trending-up",
      k: "Phase 4",
      h: "Optimization",
      p: "Train the team, tighten the loop, and improve the system continuously. 1% better every day.",
    },
  ],
  forYou: [
    "You're a profitable e-commerce brand doing $50K–$500K+/month",
    "You sell your own branded products on Shopify — not drop-shipping",
    "You're spending ~$1K+/day on paid ads",
    "You have a team of 5+ and no real systems behind them yet",
    "You want out of day-to-day operations, not deeper in",
  ],
  notYou: [
    "You're pre-revenue or still finding product-market fit",
    "You're a solo operator without a team to systemize",
    "You drop-ship, white-label, or run cash-grab stores",
    "You're happy being the bottleneck and just want more output",
  ],
  // before / after day-in-the-life (condensed for Variation B)
  ba: [
    { t: "Morning", before: "Phone in bed. Three fires before you're out of it. Already behind.", after: "Open one dashboard. Revenue, pipeline, team, priorities. No surprises." },
    { t: "Mid-day", before: "Context-switch every 15 minutes. Busy, but nothing actually moves.", after: "Two hours of deep work. The team runs 90% from documented playbooks." },
    { t: "Evening", before: "Back on the laptop. The strategic work that never happened today.", after: "Laptop closed. The business runs on systems, not on your willpower." },
  ],
};

// ---- shared small components ----
const Ico = ({ name, ...p }) => <i data-lucide={name} {...p}></i>;

const Nav = ({ links = SZ.nav }) => (
  <>
    <nav className="sz-nav">
      <div className="left">
        <img src="assets/logo-mark-red.png" alt="Systemiz" />
        <span className="wm">SYSTE<span className="t">M</span>IZ</span>
      </div>
      <div className="links">
        {links.map((l) => <a key={l}>{l}</a>)}
      </div>
      <button className="sz-cta" onClick={() => gtag('event', 'cta_click', { cta_location: 'nav' })}>Book a Systems Audit</button>
    </nav>
    <div className="sz-hairline"></div>
  </>
);

const StatsInline = () => (
  <div className="sz-stats">
    {SZ.stats.map((s) => (
      <div className="stat" key={s.lbl}>
        <span className="num">{s.num}</span>
        <span className="lbl">{s.lbl}</span>
      </div>
    ))}
  </div>
);

const Footer = () => (
  <footer className="sz-footer">
    <span>SYSTEMIZ · systemiz.com</span>
    <span className="pp">Not a sales call. No credit card — just a conversation about your business.</span>
    <span>© 2026</span>
  </footer>
);

Object.assign(window, { SZ, Ico, Nav, StatsInline, Footer });