/* global React, SvcIcon, IndMarker, ProcessFlow, TrustMark, CTABg, ArrowEast, ArrowNE, SITE_CONFIG */
const { useState: useStateSec } = React;
const CFG_SEC = window.SITE_CONFIG;

/* =============================================================
   SHARED — services data (big-picture wording)
============================================================= */
const SERVICES = [
  {
    key: "training",
    title: "AI Training & Enablement",
    short: "Help your team actually use the tools you already pay for.",
    desc:
      "Role-based workshops, working sessions, and playbooks for Copilot, Claude, ChatGPT, and the day-to-day workflows where AI compounds. We meet teams where they are.",
  },
  {
    key: "custom",
    title: "Custom AI Software",
    short: "Build the AI your company would design — if it had the team.",
    desc:
      "Internal tools, automations, and integrations engineered on your stack. Designed to be owned, audited, and extended — not a black-box SaaS you rent forever.",
  },
  {
    key: "doc",
    title: "Secure Document Intelligence",
    short: "Turn your documents into a system your team can ask.",
    desc:
      "Private search and analysis over contracts, policies, case files, and institutional knowledge — designed for confidentiality, auditability, and clear citations.",
  },
  {
    key: "strategy",
    title: "AI Strategy & Implementation",
    short: "From scattered pilots to an AI program that actually ships.",
    desc:
      "Use-case discovery, phased roadmaps, governance, and the deployment muscle to actually land it. Strategy that ends in production — not a deck.",
  },
];

const INDUSTRIES = [
  {
    key: "legal",
    name: "Legal",
    body:
      "Confidentiality is the product. We help firms deploy AI without exfiltrating privileged data — under matter isolation, with audit trails the partnership can defend.",
    useCases: [
      "Contract review & clause extraction",
      "Privileged document search with citations",
      "Discovery triage & matter summarization",
    ],
  },
  {
    key: "retail",
    name: "Retail",
    body:
      "AI that respects customer data and brand voice. We work with merchandising, marketing, and store-ops teams to deploy systems that lift conversion and cut friction — without crossing lines on privacy or trust.",
    useCases: [
      "Personalized product recommendations",
      "Demand forecasting & inventory signals",
      "On-brand marketing copy at scale",
    ],
  },
  {
    key: "enterprise",
    name: "Enterprise IT",
    body:
      "Helpdesk copilots, internal agents, and automations that ride on your existing identity, devices, and perimeter. Phased rollouts, with the IT muscle to support them.",
    useCases: [
      "Helpdesk copilot for ticket triage",
      "Knowledge-base search across SaaS sprawl",
      "Onboarding & access-provisioning automation",
    ],
  },
  {
    key: "gov",
    name: "Public Sector",
    body:
      "Sensitive analysis and resident-services automation aligned to public-sector procurement, security expectations, and review cadences.",
    useCases: [
      "Resident-services chatbot with audit trail",
      "FOIA & public-records intake assistance",
      "Policy & procurement document review",
    ],
  },
];

/* =============================================================
   SECTION HEAD (centered, no eyebrow label)
============================================================= */
function SecHead({ title, intro }) {
  return (
    <div className="sec-head">
      <h2>{title}</h2>
      {intro && <p className="sec-intro">{intro}</p>}
    </div>
  );
}

/* =============================================================
   SERVICES SECTION (full)
============================================================= */
function ServicesSection({ hideHead = false }) {
  return (
    <div className="shell">
      {!hideHead && (
        <SecHead
          title={<>Four practices.<br />One operating model.</>}
          intro="Every engagement is scoped to a measurable outcome — and ends with a system your team owns. We move quickly, document what we leave behind, and train the people who have to live with it."
        />
      )}

      <div className="services" style={hideHead ? { marginTop: 48 } : undefined}>
        {SERVICES.map((s) => (
          <div className="svc" key={s.key}>
            <div className="svc-icon-row">
              <SvcIcon kind={s.key} />
            </div>
            <h3 className="svc-title">{s.title}</h3>
            <p className="svc-desc">{s.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =============================================================
   SERVICES PREVIEW (used on home page — compact)
============================================================= */
function ServicesPreview({ onMore }) {
  return (
    <div className="shell">
      <SecHead
        title={<>Four ways we help.</>}
        intro="Training. Custom software. Document intelligence. Strategy and implementation. One operating model: from idea to production, with the team that has to live with it."
      />

      <div className="home-services">
        {SERVICES.map((s) => (
          <div className="home-svc" key={s.key} onClick={onMore} role="button">
            <div className="home-svc-top">
              <span className="home-svc-arr"><ArrowNE size={18} /></span>
            </div>
            <h3>{s.title}</h3>
            <p>{s.short}</p>
          </div>
        ))}
      </div>

      <div style={{ padding: "32px 0 96px", textAlign: "center" }}>
        <button className="btn btn-ghost-dark btn-lg" onClick={onMore}>
          See all four practices <span className="arr"><ArrowEast size={14} /></span>
        </button>
      </div>
    </div>
  );
}

/* =============================================================
   INDUSTRIES SECTION (full or preview)
============================================================= */
function IndustriesSection({ compact = false, onMore, hideHead = false }) {
  return (
    <div className="shell">
      {!hideHead && (
        <SecHead
          title={<>Built for environments where the wrong AI hurts.</>}
          intro="We work where confidentiality, brand trust, and operational risk are real constraints — not marketing lines. The result is AI that legal, security, and operations teams can actually green-light."
        />
      )}

      <div className="industries" style={hideHead ? { marginTop: 48 } : undefined}>
        {INDUSTRIES.map((i) => (
          <div className="ind" key={i.key}>
            <IndMarker kind={i.key} />
            <h3>{i.name}</h3>
            <p>{i.body}</p>
            {!compact && i.useCases && (
              <ul className="ind-uses" aria-label={`${i.name} use cases`}>
                {i.useCases.map((u) => <li key={u}>{u}</li>)}
              </ul>
            )}
          </div>
        ))}
      </div>

      {compact && (
        <div style={{ padding: "40px 0 96px", textAlign: "center" }}>
          <button className="btn btn-ghost-dark btn-lg" onClick={onMore}>
            Industries in depth <span className="arr"><ArrowEast size={14} /></span>
          </button>
        </div>
      )}
    </div>
  );
}

/* =============================================================
   WHY SECTION (About page)
============================================================= */
function WhySection({ hideHead = false }) {
  const items = [
    "Built by experienced IT & technology professionals",
    "Deep technical background, with certifications",
    "Meets teams where they are — Copilot to custom builds",
    "Phased rollout — not a six-month waterfall",
    "Focused on practical, measurable outcomes",
    "Training plus implementation, not strategy slides",
  ];
  return (
    <div className="shell">
      {!hideHead && (
        <SecHead
          title={<>Less hype.<br />More <em style={{ fontStyle: "normal", color: "var(--accent)" }}>production</em>.</>}
          intro="VectorSwift was founded by senior IT and technology operators who have been on the hook for uptime, security, and outcomes — not just opinions."
        />
      )}

      <div className="why-grid" style={hideHead ? { paddingTop: 64 } : { paddingTop: 8 }}>
        <div>
          <p className="why-quote">
            Most teams do not need more AI hype. They need <em>trained people</em>, the right tools, and a clear path from pilot to production.
            VectorSwift combines hands-on IT experience, certified technical expertise, and practical consulting to help organizations actually use AI — securely when it matters.
          </p>
        </div>

        <div className="why-list">
          {items.map((t, i) => (
            <div className="why-item" key={i}>
              <span className="why-t">{t}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* =============================================================
   PROCESS SECTION
============================================================= */
function ProcessSection() {
  return (
    <div className="shell process-wrap">
      <SecHead
        title={<>From signal<br />to system.</>}
        intro="A short, opinionated path. Each step ends in a tangible artifact: a documented opportunity map, a working pilot, or a deployed system your team owns."
      />

      <ProcessFlow />

      <div className="process">
        <div className="proc">
          <h3>Discover</h3>
          <p>We map workflows, identify the highest-leverage AI opportunities, and surface the risks worth flagging — security, data, adoption.</p>
        </div>
        <div className="proc">
          <h3>Build</h3>
          <p>We design the training, workflow, software, or system — on your stack, on your identity, inside your data perimeter.</p>
        </div>
        <div className="proc">
          <h3>Deploy</h3>
          <p>We roll it out securely, measure adoption and impact, and improve in tight cycles. Then we hand you the keys.</p>
        </div>
      </div>
    </div>
  );
}

/* =============================================================
   TRUST SECTION (About)
============================================================= */
function TrustSection() {
  const blocks = [
    { t: "Experienced IT & technology professionals" },
    { t: "Certified technical team" },
    { t: "From training to production" },
    { t: "Enterprise & regulated-industry experience" },
    { t: "Built for adoption, not just demos" },
  ];
  return (
    <div className="shell">
      <SecHead
        title={<>What we bring<br />to the table.</>}
        intro="No fabricated client wall. Just the operating posture and experience we’re willing to be measured against — by your security, legal, and IT leaders."
      />

      <div className="trust-grid">
        {blocks.map((b, i) => (
          <div className="trust" key={i}>
            <TrustMark n={i} />
            <div className="title">{b.t}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =============================================================
   FINAL CTA (used on multiple pages)
============================================================= */
const CTA_DEFAULTS = {
  title: <>Ready to move <em>faster</em> with AI?</>,
  body: "Whether you’re rolling out Copilot, building a custom tool, or trying to get more from the AI you already pay for — a 30-minute call is enough to figure out if we’re the right partner.",
  primaryLabel: "Book a Meeting",
  secondaryLabel: "Email Us",
};

function FinalCTA({ onContact, title, body, primaryLabel, secondaryLabel, mailSubject }) {
  const t = title ?? CTA_DEFAULTS.title;
  const b = body ?? CTA_DEFAULTS.body;
  const pl = primaryLabel ?? CTA_DEFAULTS.primaryLabel;
  const sl = secondaryLabel ?? CTA_DEFAULTS.secondaryLabel;
  const subject = mailSubject || "Question for VectorSwift";
  const mailto = `mailto:${CFG_SEC.contactEmail}?subject=${encodeURIComponent(subject)}`;
  return (
    <section className="sec-dark cta-section">
      <div className="shell">
        <div className="cta-inner">
          <CTABg />
          <h2>{t}</h2>
          <p>{b}</p>
          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={onContact}>{pl} <span className="arr"><ArrowEast size={14} /></span></button>
            <a className="btn btn-ghost-dark btn-lg" href={mailto}>{sl}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   SOLUTIONS — big-picture use cases
============================================================= */
const SOLUTIONS = [
  {
    title: "Knowledge work, faster",
    body:
      "Equip your people to use Copilot, Claude, and ChatGPT for the work they actually do — drafting, research, analysis, summarization — with prompts and patterns tuned to your role mix and brand voice.",
    tags: ["Enablement", "Workshops", "Playbooks"]
  },
  {
    title: "Internal copilots that ship",
    body:
      "Custom AI tools and integrations purpose-built for your workflows — built securely on your stack and designed to be owned, audited, and extended in-house.",
    tags: ["Custom Software", "Integrations", "Automation"]
  },
  {
    title: "Secure document intelligence",
    body:
      "Private search and analysis over the documents your business runs on — contracts, policies, case files, institutional knowledge. Confidential by default, with citations and audit.",
    tags: ["Document AI", "Private Search", "Audit"]
  },
  {
    title: "AI rollout, governed",
    body:
      "Discovery, prioritization, governance, and the deployment plan to land it. We help leadership steer the program — and the IT team support it.",
    tags: ["Strategy", "Governance", "Deployment"]
  },
  {
    title: "Workflow automation",
    body:
      "Long-running, decision-aware automations across the tools your team already uses. Less ticket-shuffling, more shipped work.",
    tags: ["Automation", "Integrations", "Ops"]
  },
];

function SolutionsList() {
  return (
    <div className="shell">
      <div className="solutions-list" style={{ marginTop: 24 }}>
        {SOLUTIONS.map((s) => (
          <div className="sol-item" key={s.title}>
            <h3 className="sol-title">{s.title}</h3>
            <div className="sol-body">
              <p>{s.body}</p>
              <div className="sol-meta">
                {s.tags.map(t => <span key={t}>{t}</span>)}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =============================================================
   ABOUT MANIFESTO BLOCK
============================================================= */
function AboutManifesto() {
  return (
    <div className="shell">
      <div className="about-manifesto">
        <h2>
          We started VectorSwift because the gap we kept seeing wasn’t about <em>models</em> — it was about <em>operators</em>.
          Teams need partners who can build the system, secure it, train the people, and stay around long enough to make it work.
        </h2>
      </div>
    </div>
  );
}

Object.assign(window, {
  SERVICES, INDUSTRIES, SOLUTIONS,
  ServicesSection, ServicesPreview, IndustriesSection,
  WhySection, ProcessSection, TrustSection, FinalCTA,
  SolutionsList, AboutManifesto
});