// Viyu Partners — Home sections. Editorial navy, copper accent.
// Restyle (July 2026): larger editorial scale and air, one italic accent word
// per headline, and a centered statement band. Content and data unchanged.

// ---- Shared data ---------------------------------------------------------
const SERVICES = [
  { key: "workflow-automation", n: "01", title: "Workflow Automation", tile: "We rebuild the workflows that hold your business together so they run themselves." },
  { key: "ai-agent-build", n: "02", title: "AI and Agent Build", tile: "Production AI agents built on a data foundation that can actually support them." },
  { key: "crm-implementation", n: "03", title: "CRM Implementation", tile: "CRM systems built around how your team actually sells, not how the vendor demos it." },
  { key: "cybersecurity-api", n: "04", title: "Cybersecurity and API", tile: "Resilient infrastructure and clean integrations that scale without breaking." },
  { key: "managed-services-provider", n: "05", title: "Managed Services Provider", tile: "An outsourced IT function that runs the systems we built, every day." },
  { key: "development-partner", n: "06", title: "Development Partner", tile: "Embedded engineering and product talent that ships against your roadmap on a defined sprint cadence." },
  { key: "value-management-partnership", n: "07", title: "Value Management Partnership", tile: "An ongoing executive partnership that keeps Revenue, Cost, and Risk improving every quarter." },
];

const PILLARS = [
  { n: "01", title: "Revenue", frame: "The growth side of the business.", body: "Where opportunities are surfaced, qualified, won, and renewed.", caps: ["Marketing", "Web development", "CRM and sales operations"] },
  { n: "02", title: "Cost", frame: "The operating side.", body: "Where work runs, data flows, and friction either compounds or disappears.", caps: ["Workflow automation", "API development", "Project management", "AI and agentic systems"] },
  { n: "03", title: "Risk", frame: "The protection layer.", body: "Where the business is exposed, governed, and made resilient.", caps: ["Cybersecurity", "Data and compliance"] },
];

const PHASES = [
  { n: "01", title: "Diagnose", head: "Discovery and system audit.", body: "We map the business, the data, the workflows, and the gaps. Where revenue leaks, where cost compounds, where risk hides.", output: "Diagnostic report with opportunities tied to Revenue, Cost, and Risk." },
  { n: "02", title: "Design", head: "Process and data architecture.", body: "We rebuild the workflows that matter, define the canonical data model, and lock the integration blueprint across systems.", output: "Process architecture and a sequenced roadmap to deployment." },
  { n: "03", title: "Deploy", head: "Automation and AI rollout.", body: "We ship in stages. Shadow mode first, then supervised, then live. Each stage is measured against the design before we move forward.", output: "Working systems in production, with documented SOPs." },
  { n: "04", title: "Drive", head: "Ongoing operation and optimization.", body: "We stay in. We monitor performance, refine the model, and keep the operating system improving against revenue, cost, and risk metrics. This is the phase most firms skip. It is the phase where compounding actually happens.", output: "A measurably better operating system, every month." },
];

const SECTORS = [
  { key: "tech", title: "Technology and SaaS", body: "Where pipeline visibility is high but renewal economics are fragile. We help leaders close the gap between reported metrics and the operational reality of customer health, expansion motion, and gross margin." },
  { key: "healthcare", title: "Healthcare and Life Sciences", body: "Where the data is most regulated and the operating margin is thinnest. We help operators tighten the workflows around intake, billing, compliance, and patient communication without putting the practice or the practitioner at risk." },
  { key: "financial", title: "Financial Services", body: "Where every workflow has a regulatory shadow and the cost of getting it wrong is binary. We design operating systems that survive audit, scale across products, and free up advisory capacity for what actually generates revenue." },
  { key: "professional", title: "Professional Services", body: "Where the product is the team and the operating model is the margin. We rebuild how engagements get scoped, staffed, run, and renewed, so the firm grows without grinding the people who built it." },
  { key: "retail", title: "Consumer and Retail", body: "Where customer acquisition cost keeps climbing and the operating model has not caught up. We tighten the loop from acquisition to fulfillment to repeat purchase, so the cost of growth stops compounding faster than the growth itself." },
  { key: "realestate", title: "Real Estate", body: "Where the deals are episodic but the operating overhead is not. We design the systems that hold an operator together between transactions, deal pipeline, vendor management, compliance, and the data that supports the next acquisition." },
  { key: "energy", title: "Energy and Infrastructure", body: "Where the capital cycles are long, the regulatory environment is heavy, and the operating data is often stuck in spreadsheets and inboxes. We bring the data into a model that supports both quarterly decisions and the multi year ones." },
];

const DIFFERENTIATORS = [
  { n: "01", title: "One firm, not five vendors.", body: "Strategy, build, security, and daily operation under one roof, and one line of accountability." },
  { n: "02", title: "Cross industry by design.", body: "Revenue drag, cost leakage, and unmanaged risk repeat across sectors, so our rigor travels." },
  { n: "03", title: "Operator forward.", body: "Run by an operator who carried a number, not a consultant who studied one." },
  { n: "04", title: "We own the Drive phase.", body: "Most AI and automation projects die in production because no one owns operate. We do." },
  { n: "05", title: "Lean enterprise bench.", body: "Senior capability across automation, AI, development, security, IT, and marketing, hands on by design." },
];

const CASES = [
  { tag: "Personal care · New Jersey", status: "Live deployment", title: "From disconnected tools to a live operating command center.", body: "Moda Salon ran booking, payments, client communication, and reporting in separate places. Viyu deployed a live command center, integrated Phorest and Square on a structured data layer, stood up an AI receptionist and SMS, and rebuilt the website.", outcome: "A connected operating system with cleaner communication, real daily visibility, and a managed layer that keeps improving." },
  { tag: "Engineering · New Jersey", status: "Representative engagement", title: "Finding the revenue leakage before building the fix.", body: "A firm generating real inbound demand was losing leads and could not explain why. Viyu ran an outside-in diagnostic of the full lead flow, where leads entered, how fast they were answered, how handoffs happened, and the condition of the CRM.", outcome: "A clear view of exactly where leads were being lost, and a prioritized, practical path to recover them." },
  { tag: "Accounting · Connecticut", status: "Active implementation", title: "Turning AI uncertainty into a defensible decision.", body: "The firm wanted to modernize with AI but could not tell which tools worked and which were marketing. Viyu evaluated the stack, researched and tested leading tools, and assessed fit against workflows, data, and risk tolerance.", outcome: "An evidence-based technology decision instead of a guess, with a phased rollout now underway." },
];

// ---- Editorial primitives -------------------------------------------------
const MAXW = "var(--container-max)";
// Generous, viewport-aware section rhythm.
const SECPAD = "clamp(88px, 10.5vw, 164px) 0";
const H2 = { fontSize: "clamp(32px,4.8vw,62px)", fontWeight: 700, letterSpacing: "var(--tracking-tighter)", lineHeight: 1.03, color: "#fff", textWrap: "pretty" };

// One italic accent phrase per headline.
const Accent = ({ children }) => <em style={{ fontStyle: "italic", fontWeight: 400, color: "var(--copper-text)" }}>{children}</em>;

const Eyebrow = ({ children, style }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: "12px", fontFamily: "var(--font-mono)", fontSize: "var(--eyebrow-size)", fontWeight: 500, letterSpacing: "var(--eyebrow-tracking)", textTransform: "uppercase", color: "var(--copper-text)", ...style }}>
    <span style={{ width: "24px", height: "1px", background: "var(--copper)" }}></span>{children}
  </span>
);
const Arrow = (sz = 14) => <span style={{ display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: lucide.createElement(lucide.ArrowRight, { width: sz, height: sz }).outerHTML }} />;

// Section header: eyebrow over an oversized headline.
const SectionHead = ({ eyebrow, children, width = "820px" }) => (
  <div className="v-reveal" style={{ marginBottom: "clamp(48px, 6vw, 88px)", maxWidth: width }}>
    <Eyebrow style={{ marginBottom: "28px" }}>{eyebrow}</Eyebrow>
    <h2 style={H2}>{children}</h2>
  </div>
);

// ---- 2. Three pillars ----------------------------------------------------
function PillarsSection() {
  return (
    <section style={{ padding: SECPAD, background: "var(--navy-900)", borderTop: "1px solid var(--border-faint)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto", padding: "0 24px" }}>
        <SectionHead eyebrow="Three pillars">Revenue, Cost, and Risk. The whole business, <Accent>organized.</Accent></SectionHead>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "1px", background: "var(--border-subtle)" }}>
          {PILLARS.map((p, i) => (
            <div key={p.n} className="v-reveal" style={{ background: "var(--navy-900)", padding: "clamp(32px,3.4vw,52px) clamp(28px,2.8vw,44px)", transitionDelay: (i*90)+"ms" }}>
              <div style={{ display: "flex", alignItems: "center", gap: "14px", marginBottom: "30px" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "14px", fontWeight: 600, letterSpacing: "0.1em", color: "var(--copper-text)" }}>{p.n}</span>
                <span style={{ flex: 1, height: "1px", background: "linear-gradient(to right, var(--border-strong), transparent)" }}></span>
              </div>
              <h3 style={{ fontSize: "clamp(26px,2.6vw,34px)", fontWeight: 700, color: "#fff", marginBottom: "12px", letterSpacing: "var(--tracking-tight)" }}>{p.title}</h3>
              <p style={{ color: "#fff", fontWeight: 400, fontSize: "16px", marginBottom: "10px" }}>{p.frame}</p>
              <p style={{ color: "var(--gray-400)", fontWeight: 300, lineHeight: 1.65, fontSize: "16px", marginBottom: "30px" }}>{p.body}</p>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gray-500)", marginBottom: "14px" }}>Capabilities</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "10px" }}>
                {p.caps.map((c) => (
                  <li key={c} style={{ display: "flex", gap: "12px", alignItems: "baseline", color: "var(--gray-300)", fontSize: "15px", fontWeight: 300 }}>
                    <span style={{ width: "5px", height: "5px", flexShrink: 0, background: "var(--copper)", transform: "translateY(-2px)" }}></span>{c}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- 3. Applied Research: centered statement band -------------------------
function AppliedResearchBand({ navigate }) {
  return (
    <section style={{ padding: SECPAD, background: "var(--navy-950)" }}>
      <div style={{ maxWidth: "1100px", margin: "0 auto", padding: "0 24px", textAlign: "center" }}>
        <div className="v-reveal" style={{ display: "flex", justifyContent: "center", marginBottom: "44px" }}>
          <Eyebrow>Applied research</Eyebrow>
        </div>
        <div className="v-reveal" style={{ borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", padding: "clamp(44px,5vw,72px) 0" }}>
          <p style={{ fontSize: "clamp(24px,3.4vw,46px)", fontWeight: 300, color: "#fff", lineHeight: 1.24, letterSpacing: "var(--tracking-tight)", textWrap: "pretty" }}>
            The layer underneath every service we <Accent>offer.</Accent>
          </p>
        </div>
        <p className="v-reveal" style={{ margin: "44px auto 0", maxWidth: "780px", color: "var(--gray-300)", fontSize: "clamp(17px,1.5vw,19px)", fontWeight: 300, lineHeight: 1.75 }}>
          Before we automate, integrate, or deploy anything, we map your data, your systems, and your operating cadence. That same research practice runs across every industry we serve, which is how one firm can credibly operate across sectors. It is also how we frame every AI conversation, crawl before walk, walk before run.
        </p>
        <button className="v-reveal" onClick={() => navigate("about")} style={{ marginTop: "36px", display: "inline-flex", alignItems: "center", gap: "8px", background: "transparent", border: "none", cursor: "pointer", fontFamily: "var(--font-mono)", fontSize: "13px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--copper-text)", padding: 0 }}>
          Read how we think {Arrow(14)}
        </button>
      </div>
    </section>
  );
}

// ---- 4. Service tile grid -------------------------------------------------
function ServiceTile({ s, navigate }) {
  const [h, setH] = React.useState(false);
  return (
    <button onClick={() => navigate("service", s.key)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ textAlign: "left", cursor: "pointer", fontFamily: "var(--font-sans)", background: h ? "var(--surface-glass)" : "var(--navy-900)", border: "none", padding: "clamp(28px,2.6vw,40px) clamp(24px,2.2vw,34px)", display: "flex", flexDirection: "column", minHeight: "270px", transition: "background var(--dur-base)" }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", fontWeight: 500, letterSpacing: "0.14em", color: "var(--copper-text)", marginBottom: "24px" }}>{s.n}</span>
      <h3 style={{ fontSize: "22px", fontWeight: 600, color: "#fff", marginBottom: "14px", letterSpacing: "var(--tracking-tight)", lineHeight: 1.2 }}>{s.title}</h3>
      <p style={{ color: "var(--gray-400)", fontWeight: 300, fontSize: "15px", lineHeight: 1.65, flexGrow: 1 }}>{s.tile}</p>
      <span style={{ marginTop: "24px", display: "inline-flex", alignItems: "center", gap: "8px", fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.1em", textTransform: "uppercase", color: h ? "var(--copper-text)" : "var(--gray-500)", transition: "color var(--dur-base)" }}>View service {Arrow(13)}</span>
    </button>
  );
}

function ServiceGridSection({ navigate }) {
  return (
    <section id="services" style={{ padding: SECPAD, background: "var(--navy-900)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto", padding: "0 24px" }}>
        <SectionHead eyebrow="What we do" width="760px">Seven service lines, one <Accent>operating model.</Accent></SectionHead>
        <div className="viyu-tilegrid" style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: "1px", background: "var(--border-subtle)" }}>
          {SERVICES.map((s) => <ServiceTile key={s.key} s={s} navigate={navigate} />)}
        </div>
        {/* Industries, absorbed into What We Do (addendum S11) */}
        <div className="v-reveal" style={{ marginTop: "56px", display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: "16px" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gray-500)" }}>One firm. Every sector.</span>
          <button onClick={() => navigate("industries")} style={{ background: "transparent", border: "none", cursor: "pointer", fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--copper-text)", display: "inline-flex", alignItems: "center", gap: "8px", padding: 0 }}>All industries {Arrow(13)}</button>
        </div>
        <div className="v-reveal" style={{ marginTop: "20px", display: "flex", flexWrap: "wrap", gap: "12px" }}>
          {SECTORS.map((s) => (
            <button key={s.key} onClick={() => navigate("industries")}
              style={{ cursor: "pointer", fontFamily: "var(--font-sans)", background: "transparent", border: "1px solid var(--border-strong)", borderRadius: "999px", padding: "11px 20px", fontSize: "14px", color: "var(--gray-200)", transition: "border-color var(--dur-base), color var(--dur-base)" }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--copper)"; e.currentTarget.style.color = "#fff"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.color = "var(--gray-200)"; }}>
              {s.title}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- 5. The Viyu Approach preview ----------------------------------------
function ApproachPreview({ navigate, full = false }) {
  return (
    <section id="how-it-works" style={{ padding: SECPAD, background: "var(--navy-850)", borderTop: "1px solid var(--border-faint)", borderBottom: "1px solid var(--border-faint)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto", padding: "0 24px" }}>
        <SectionHead eyebrow="The Viyu approach" width="800px">Four phases. Diagnose, Design, Deploy, <Accent>Drive.</Accent></SectionHead>
        <div className="viyu-opergrid" style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))" }}>
          {PHASES.map((p, i) => (
            <div key={p.n} className={"v-reveal " + (i === 0 ? "viyu-opercol-first" : "viyu-opercol")} style={{ transitionDelay: (i*80)+"ms" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "13px", fontWeight: 600, letterSpacing: "0.12em", color: "var(--copper-text)", marginBottom: "24px" }}>{p.n}</div>
              <h3 style={{ fontSize: "clamp(24px,2.4vw,30px)", fontWeight: 700, color: "#fff", marginBottom: "8px", letterSpacing: "var(--tracking-tight)" }}>{p.title}</h3>
              <p style={{ color: "#fff", fontWeight: 500, fontSize: "15px", marginBottom: "14px" }}>{p.head}</p>
              <p style={{ color: "var(--gray-400)", fontWeight: 300, fontSize: "15px", lineHeight: 1.7, marginBottom: full ? "18px" : 0 }}>{p.body}</p>
              {full && (
                <div style={{ paddingTop: "18px", borderTop: "1px solid var(--border-faint)" }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: "10px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gray-500)", marginBottom: "8px" }}>Output</div>
                  <p style={{ color: "var(--gray-300)", fontWeight: 300, fontSize: "14px", lineHeight: 1.6 }}>{p.output}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- 6. Industries band ---------------------------------------------------
function IndustriesBand({ navigate }) {
  return (
    <section style={{ padding: SECPAD, background: "var(--navy-900)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto", padding: "0 24px" }}>
        <div className="v-reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: "24px", marginBottom: "clamp(40px,4.5vw,64px)" }}>
          <h2 style={{ ...H2, maxWidth: "760px" }}>One firm. Every <Accent>sector.</Accent></h2>
          <button onClick={() => navigate("industries")} style={{ background: "transparent", border: "none", cursor: "pointer", fontFamily: "var(--font-mono)", fontSize: "13px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--copper-text)", display: "inline-flex", alignItems: "center", gap: "8px", padding: 0 }}>All industries {Arrow(14)}</button>
        </div>
        <div className="v-reveal" style={{ display: "flex", flexWrap: "wrap", gap: "14px" }}>
          {SECTORS.map((s) => (
            <button key={s.key} onClick={() => navigate("industries")}
              style={{ cursor: "pointer", fontFamily: "var(--font-sans)", background: "transparent", border: "1px solid var(--border-strong)", borderRadius: "999px", padding: "14px 26px", fontSize: "16px", color: "var(--gray-200)", transition: "border-color var(--dur-base), color var(--dur-base)" }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--copper)"; e.currentTarget.style.color = "#fff"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-strong)"; e.currentTarget.style.color = "var(--gray-200)"; }}>
              {s.title}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- 7. Closing CTA -------------------------------------------------------
function ClosingCTASection({ navigate, headline, body = "Most engagements begin with a Diagnose phase. A focused, scoped audit that tells you exactly where revenue, cost, and risk are sitting in your business today.", cta = "Book a Diagnose call" }) {
  const { Button } = window.ViyuPartnersDesignSystem_8838e3;
  return (
    <section style={{ padding: "clamp(104px, 12vw, 190px) 0", background: "var(--navy-950)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent, rgba(216,121,63,0.05))", pointerEvents: "none" }}></div>
      <div className="v-reveal" style={{ maxWidth: "860px", margin: "0 auto", padding: "0 24px", position: "relative", textAlign: "center" }}>
        <h2 style={{ fontSize: "clamp(34px,5.6vw,72px)", fontWeight: 700, letterSpacing: "var(--tracking-tighter)", color: "#fff", marginBottom: "28px", lineHeight: 1.02, textWrap: "pretty" }}>
          {headline || <React.Fragment>Where would you like to <Accent>start.</Accent></React.Fragment>}
        </h2>
        <p style={{ color: "var(--gray-300)", fontSize: "clamp(18px,1.7vw,21px)", fontWeight: 300, lineHeight: 1.7, marginBottom: "48px" }}>{body}</p>
        <Button variant="primary" size="lg" icon={Arrow(16)} onClick={() => navigate("book")}>{cta}</Button>
      </div>
    </section>
  );
}

// ---- Why Viyu is different (from capabilities deck) -----------------------
function WhyDifferentSection() {
  return (
    <section style={{ padding: SECPAD, background: "var(--navy-950)", borderTop: "1px solid var(--border-faint)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto", padding: "0 24px" }}>
        <SectionHead eyebrow="Why Viyu is different">The enterprise capability, without the enterprise <Accent>overhead.</Accent></SectionHead>
        <div style={{ borderTop: "1px solid var(--border-subtle)" }}>
          {DIFFERENTIATORS.map((d, i) => (
            <div key={d.n} className="v-reveal viyu-grid-collapse" style={{ display: "grid", gridTemplateColumns: "minmax(0,0.9fr) minmax(0,1.1fr)", gap: "clamp(24px,4vw,64px)", padding: "clamp(28px,3vw,42px) 0", borderBottom: "1px solid var(--border-subtle)", alignItems: "baseline", transitionDelay: (i*60)+"ms" }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: "20px" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", fontWeight: 600, letterSpacing: "0.12em", color: "var(--copper-text)" }}>{d.n}</span>
                <h3 style={{ color: "#fff", fontSize: "clamp(21px,2.4vw,30px)", fontWeight: 700, letterSpacing: "var(--tracking-tight)", lineHeight: 1.15 }}>{d.title}</h3>
              </div>
              <p style={{ color: "var(--gray-400)", fontSize: "clamp(16px,1.4vw,18px)", fontWeight: 300, lineHeight: 1.75 }}>{d.body}</p>
            </div>
          ))}
        </div>
        <p className="v-reveal" style={{ marginTop: "40px", color: "var(--gray-500)", fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.06em", lineHeight: 1.75, maxWidth: "820px" }}>
          Extensive knowledge, patterns from financial services, healthcare, professional services, automotive, manufacturing, and personal care, applied to your operating problem.
        </p>
      </div>
    </section>
  );
}

// ---- Proof / case studies (from capabilities deck) -----------------------
function CaseStudiesSection() {
  return (
    <section style={{ padding: SECPAD, background: "var(--navy-900)", borderTop: "1px solid var(--border-faint)" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto", padding: "0 24px" }}>
        <SectionHead eyebrow="Proof" width="740px">The work, <Accent>in production.</Accent></SectionHead>
        <div className="viyu-tilegrid" style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "1px", background: "var(--border-subtle)" }}>
          {CASES.map((c, i) => (
            <div key={c.title} className="v-reveal" style={{ background: "var(--navy-900)", padding: "clamp(32px,3vw,44px) clamp(28px,2.6vw,38px)", display: "flex", flexDirection: "column", transitionDelay: (i*80)+"ms" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", marginBottom: "30px" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--gray-500)" }}>{c.tag}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "10px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--copper-text)", border: "1px solid var(--border-copper)", borderRadius: "999px", padding: "4px 10px" }}>{c.status}</span>
              </div>
              <h3 style={{ color: "#fff", fontSize: "clamp(21px,2vw,25px)", fontWeight: 700, letterSpacing: "var(--tracking-tight)", lineHeight: 1.22, marginBottom: "18px" }}>{c.title}</h3>
              <p style={{ color: "var(--gray-400)", fontSize: "15px", fontWeight: 300, lineHeight: 1.7, marginBottom: "28px" }}>{c.body}</p>
              <div style={{ marginTop: "auto", paddingTop: "24px", borderTop: "1px solid var(--border-faint)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: "10px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gray-500)", marginBottom: "10px" }}>Outcome</div>
                <p style={{ color: "var(--gray-200)", fontSize: "15px", fontWeight: 300, lineHeight: 1.65 }}>{c.outcome}</p>
              </div>
            </div>
          ))}
        </div>
        <p className="v-reveal" style={{ marginTop: "24px", color: "var(--gray-500)", fontSize: "13px", fontWeight: 300, fontStyle: "italic" }}>
          Client examples are anonymized or representative, based on Viyu engagements and diagnostic methodology.
        </p>
      </div>
    </section>
  );
}

// ---- Composed home (addendum S11: exactly four sections incl. hero) -------
function HomeContent({ navigate }) {
  return (
    <React.Fragment>
      <ApproachPreview navigate={navigate} />
      <ServiceGridSection navigate={navigate} />
    </React.Fragment>
  );
}

Object.assign(window, {
  HomeContent, PillarsSection, AppliedResearchBand, ServiceGridSection,
  ApproachPreview, WhyDifferentSection, CaseStudiesSection, IndustriesBand, ClosingCTASection, ServiceTile, Eyebrow, Accent, SectionHead, SECPAD, H2,
  SERVICES, PILLARS, PHASES, SECTORS, DIFFERENTIATORS, CASES,
});
