/* eslint-disable */
/* =========================================================================
   Helix — Services page
   Expanded pyramid with sticky pyramid graphic + per-layer detail panels.
   Includes "How we work" three-step section.
   ========================================================================= */

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

const LAYER_DELIVERABLES = {
  capture: [
    "Source inventory across systems",
    "Data profiling and quality scoring",
    "Architecture decisions",
    "Historical baselines",
  ],
  infrastructure: [
    "Centralized environment (Snowflake / Databricks)",
    "Role-based access control",
    "Source integrations and pipelines",
    "Orchestration and monitoring",
  ],
  governance: [
    "Data catalog and lineage",
    "Sensitive field handling and PII policy",
    "Audit-ready logs",
    "Ownership and stewardship model",
  ],
  intelligence: [
    "BI tooling rollout (Power BI / Tableau)",
    "Semantic layer for shared definitions",
    "Role-based dashboards",
    "Self-serve analytics enablement",
  ],
  ai: [
    "AI readiness assessment",
    "Use case identification and prioritization",
    "Model development and deployment",
    "Continuous improvement loop",
  ],
};

const LAYER_CASES = {
  capture: {
    quote: "Eleven stores, three POS systems, two loyalty programs, and a spreadsheet someone's nephew built in 2019. Step one was knowing it all existed.",
    detail: "An inventory of every system feeding decisions — including the ones leadership had forgotten about.",
  },
  infrastructure: {
    quote: "All eleven locations now feed into a single environment. Sales, inventory, labor, and supplier data live in one place, refreshed nightly.",
    detail: "Snowflake instance, orchestrated nightly loads, role-based access for ops, finance, and leadership.",
  },
  governance: {
    quote: "When the CFO asks why two reports disagree, we can show her the lineage from raw transaction to the number on the slide.",
    detail: "A data catalog with documented owners, a tagged PII policy, and lineage from source to dashboard.",
  },
  intelligence: {
    quote: "Store managers stopped emailing the analytics team for one-off reports. They open a dashboard, filter to their store, and see the answer.",
    detail: "Role-based dashboards for store managers, district managers, and the C-suite — with a shared semantic layer so the numbers always tie.",
  },
  ai: {
    quote: "Demand forecasts now run weekly per SKU per store. Spoilage dropped 18% in the first quarter — because the foundation was solid.",
    detail: "Forecasting models for demand and labor, retrained weekly, with monitoring and rollback baked in from day one.",
  },
};

function ServicesPage({ onNavigate, focusLayer }) {
  const [activeLayer, setActiveLayer] = useStateS(focusLayer || LAYERS[0].id);

  // Scroll to focused layer when entering from a link
  useEffectS(() => {
    if (focusLayer) {
      // small delay to allow page render
      setTimeout(() => {
        const el = document.getElementById(`layer-${focusLayer}`);
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 100);
    }
  }, [focusLayer]);

  // Detect active layer based on scroll position
  useEffectS(() => {
    const onScroll = () => {
      const offset = window.innerHeight * 0.35;
      let current = LAYERS[0].id;
      for (const L of LAYERS) {
        const el = document.getElementById(`layer-${L.id}`);
        if (!el) continue;
        const rect = el.getBoundingClientRect();
        if (rect.top - offset <= 0) current = L.id;
      }
      setActiveLayer(current);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const goToLayer = (id) => {
    const el = document.getElementById(`layer-${id}`);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <main className="page-fade">
      {/* Hero */}
      <section className="services-hero container">
        <span className="eyebrow eyebrow-dot hero-animate" style={{ animationDelay: "0.05s" }}>Services</span>
        <h1 className="hero-animate" style={{ animationDelay: "0.15s" }}>The Helix Data Readiness Framework.</h1>
        <p className="hero-animate" style={{ animationDelay: "0.28s" }}>Every layer is a prerequisite. Skip one and the system above it fails. Below: what we deliver at each level, and what it looks like in the field.</p>
      </section>

      {/* Pyramid + per-layer detail panels */}
      <section className="container" style={{ paddingBottom: "clamp(60px, 8vw, 120px)" }}>
        <div className="services-layout">
          {/* Sticky pyramid column */}
          <div className="services-pyramid-col">
            <div>
              <span className="mono" style={{ color: "var(--ink-faint)", letterSpacing: ".12em", textTransform: "uppercase" }}>05 layers</span>
              <div style={{ marginTop: 18 }}>
                <HelixPyramid
                  mode="facet"
                  orientation="up"
                  revealed={5}
                  active={activeLayer}
                  onLayerClick={goToLayer}
                  labelsInside={true}
                  showLabels={false}
                />
              </div>
            </div>
          </div>

          {/* Layer detail blocks */}
          <div>
            {LAYERS.slice().reverse().map((layer, i) => {
              const num = LAYERS.length - i;
              const deliverables = LAYER_DELIVERABLES[layer.id];
              const cs = LAYER_CASES[layer.id];
              return (
                <article id={`layer-${layer.id}`} key={layer.id} className="services-layer-block reveal">
                  <div className="services-layer-num">Layer 0{num} · {layer.id}</div>
                  <h2 className="services-layer-title">{layer.label}</h2>
                  <p className="services-layer-lede">{layer.short}</p>

                  <ul className="services-layer-deliverables">
                    {deliverables.map(d => <li key={d}>{d}</li>)}
                  </ul>

                  <div className="case-card">
                    <div className="case-card-mark">{num}</div>
                    <div>
                      <div className="case-card-meta">Regional Grocery Chain · 11 Locations</div>
                      <p className="case-card-quote">"{cs.quote}"</p>
                      <p className="case-card-attr">{cs.detail}</p>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* How we work */}
      <section className="container section-pad">
        <div className="section-header">
          <div>
            <span className="eyebrow eyebrow-dot">How we work</span>
          </div>
          <div>
            <h2>Three steps. One framework. Whatever scope you need.</h2>
            <p>Engagements range from a single audit through a fully embedded AI department. The starting points are the same.</p>
          </div>
        </div>

        <div className="steps-grid">
          <div className="step-card reveal" style={{ transitionDelay: "0s" }}>
            <MeetIcon />
            <span className="step-card-num">01 · Meet</span>
            <h3 className="step-card-title">Meet</h3>
            <p className="step-card-body">We learn your business, your data sources, and where you actually want to go — not the polished version for the board deck.</p>
          </div>
          <div className="step-card reveal" style={{ transitionDelay: "0.12s" }}>
            <AuditIcon />
            <span className="step-card-num">02 · Audit</span>
            <h3 className="step-card-title">Audit</h3>
            <p className="step-card-body">We map everything you have, score it against the five layers, and identify the gaps before recommending a single tool.</p>
          </div>
          <div className="step-card reveal" style={{ transitionDelay: "0.24s" }}>
            <BuildIcon />
            <span className="step-card-num">03 · Build</span>
            <h3 className="step-card-title">Build</h3>
            <p className="step-card-body">One-off projects through a fully embedded AI department. Whatever your team can absorb — we shape the engagement around that.</p>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ServicesPage });