/* global React */
const { useState, useEffect, useRef } = React;

// =====================================================================
//  HOMEPAGE — full editorial layout with rich animation
// =====================================================================

function HomePage() {
  const { open } = useBooking();
  return (
    <main>
      <HomeHero />
      {/* <LogoMarquee /> */}
      <HomeServicesGrid />
      <WhyChooseUs />
      <ServicesStickyStack />
      <IndustriesPreview />
      <DeliveryPreview />
      <Testimonial />
      <BigMarquee />
      <CTASection />
    </main>
  );
}

// ---------- Hero ----------
function HomeHero() {
  const { open } = useBooking();
  return (
    <section
      data-screen-label="hero"
      style={{
        paddingTop: 160,
        paddingBottom: 120,
        position: "relative",
        overflow: "hidden",
        minHeight: "88vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-end",
      }}
    >
      {/* Full-bleed video background */}
      <video
        autoPlay
        muted
        loop
        playsInline
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
          zIndex: 0,
        }}
        poster="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80"
      >
        <source
          src="https://videos.pexels.com/video-files/3571264/3571264-hd_1920_1080_25fps.mp4"
          type="video/mp4"
        />
      </video>
      <div
        style={{
          position: "absolute",
          inset: 0,
          background:
            "linear-gradient(135deg, rgba(10,18,40,0.88) 0%, rgba(10,18,40,0.65) 100%)",
          zIndex: 1,
        }}
      />

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ maxWidth: 820 }}>
          <Reveal kind="reveal">
            <div
              className="eyebrow"
              style={{ color: "rgba(248,250,255,0.65)" }}
            >
              <span className="dot" /> Operational 24/7
            </div>
          </Reveal>
          <h1
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 400,
              fontSize: "clamp(40px, 7.5vw, 120px)",
              letterSpacing: "-0.04em",
              lineHeight: 1.1,
              marginTop: 28,
              color: "#f8faff",
            }}
          >
            <div>
              <WordReveal text="Your Technology" />
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 24,
                flexWrap: "wrap",
              }}
            >
              <WordReveal text="Partner for" baseDelay={150} />
              <Reveal kind="reveal" delay={400}>
                <span
                  style={{
                    display: "inline-flex",
                    alignItems: "center",
                    height: "0.85em",
                    padding: "0 0.35em",
                    borderRadius: 9999,
                    background: "var(--color-primary)",
                    color: "var(--color-on-primary)",
                    fontStyle: "italic",
                    fontSize: "0.85em",
                  }}
                >
                  Growth
                </span>
              </Reveal>
            </div>
            <div>
              <WordReveal text="& Innovation." baseDelay={300} />
            </div>
          </h1>
          <Reveal kind="reveal" delay={400}>
            <p
              style={{
                fontSize: 18,
                lineHeight: 1.6,
                color: "rgba(248,250,255,0.72)",
                maxWidth: 560,
                marginTop: 32,
              }}
            >
              We help startups, businesses and enterprises with website
              development, IT infrastructure management & building, IT
              consulting services,digital transformation. we run the systems
              that run your business.
            </p>
          </Reveal>
          <Reveal kind="reveal" delay={600}>
            <div
              style={{
                display: "flex",
                gap: 12,
                marginTop: 32,
                flexWrap: "wrap",
              }}
            >
              <Magnetic>
                <button
                  className="btn-coral"
                  data-magnetic
                  onClick={() => open()}
                >
                  Get free consultation <Arrow />
                </button>
              </Magnetic>
              <Link to="/services">
                <button className="btn-ghost on-dark">See services</button>
              </Link>
            </div>
          </Reveal>
          <Reveal kind="reveal" delay={800}>
            <div
              style={{
                display: "flex",
                gap: 40,
                marginTop: 48,
                paddingTop: 32,
                borderTop: "1px solid rgba(248,250,255,0.12)",
              }}
            >
              <Stat n="180+" l="engineers" light />
              <Stat n="40+" l="enterprise clients" light />
              <Stat n="11" l="years shipping" light />
            </div>
          </Reveal>
        </div>

        {/* feature bar */}
        <Reveal kind="reveal-up" delay={900}>
          <div
            style={{
              marginTop: 72,
              padding: "18px 28px",
              border: "1px solid rgba(248,250,255,0.12)",
              borderRadius: 9999,
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              gap: 24,
              background: "rgba(10,18,40,0.55)",
              backdropFilter: "blur(14px)",
              WebkitBackdropFilter: "blur(14px)",
            }}
            className="hero-feature"
          >
            <span
              style={{ display: "inline-flex", alignItems: "center", gap: 12 }}
            >
              <span
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: 9999,
                  background: "var(--color-success)",
                  boxShadow: "0 0 0 4px rgba(93,184,114,0.2)",
                  flexShrink: 0,
                }}
              />
              <span
                className="t-caption-uppercase"
                style={{ color: "rgba(248,250,255,0.6)" }}
              >
                Operating now
              </span>
            </span>
            <span style={{ color: "rgba(248,250,255,0.72)" }}>
              20 active engagements across BFSI, Healthcare, Retail and
              Manufacturing — running 24/7 Pan India.
            </span>
            <Link
              to="/industries"
              className="u-link"
              style={{ color: "#f8faff", whiteSpace: "nowrap" }}
            >
              Industries →
            </Link>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-feature { flex-direction: column; align-items: flex-start !important; border-radius: 16px !important; }
        }
      `}</style>
    </section>
  );
}

function Stat({ n, l, light }) {
  return (
    <div>
      <div
        style={{
          fontFamily: "var(--font-display)",
          fontSize: 36,
          lineHeight: 1,
          color: light ? "#f8faff" : "var(--color-ink)",
          letterSpacing: "-0.5px",
        }}
      >
        {n}
      </div>
      <div
        className="t-caption"
        style={{
          marginTop: 4,
          color: light ? "rgba(248,250,255,0.55)" : undefined,
        }}
      >
        {l}
      </div>
    </div>
  );
}

/* ---------- Logo marquee (placeholder client names) ----------
function LogoMarquee() {
  const items = [
    "Nordbank",
    "Cleo Health",
    "Halcyon Retail",
    "Forge Industries",
    "Pearl Logistics",
    "Atlas Insure",
    "Meridian Tech",
    "Praxis Pharma",
    "Stratus Cloud",
  ];
  return (
    <section
      style={{
        padding: "32px 0",
        borderTop: "1px solid var(--color-hairline)",
        borderBottom: "1px solid var(--color-hairline)",
      }}
      data-screen-label="logos"
    >
      <div
        className="container logo-row"
        style={{ display: "flex", alignItems: "center", gap: 24 }}
      >
        <div
          className="t-caption-uppercase logo-label"
          style={{ minWidth: 200 }}
        >
          Trusted by teams at
        </div>
        <div className="marquee" style={{ flex: 1 }}>
          <div className="marquee-track">
            {[...items, ...items].map((it, i) => (
              <span
                key={i}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 12,
                  fontFamily: "var(--font-display)",
                  fontSize: 28,
                  color: "var(--color-muted)",
                  letterSpacing: "-0.3px",
                }}
              >
                {it}{" "}
                <span
                  style={{
                    width: 4,
                    height: 4,
                    borderRadius: 9999,
                    background: "var(--color-hairline)",
                  }}
                />
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
*/

// ---------- Services 3x2 grid ----------
const SERVICES = [
  {
    id: "consulting",
    icon: "consulting",
    title: "IT consulting & digital transformation",
    body: "Strategy, architecture and roadmaps that survive contact with reality.",
  },
  {
    id: "agile",
    icon: "agile",
    title: "IT infrastructure management",
    body: "End-to-end management of your IT infrastructure — servers, networks, storage and beyond — keeping systems reliable and performance-optimized.",
  },
  {
    id: "appdev",
    icon: "appdev",
    title: "Application development",
    body: "Web, mobile and back-of-house. Custom software your teams actually adopt.",
  },
  {
    id: "cloud",
    icon: "cloud",
    title: "Network, ISP & Cloud support",
    body: "Robust networking, reliable ISP management and cloud operations across AWS, Azure and GCP — keeping your connectivity and workloads always on.",
  },
  {
    id: "security",
    icon: "security",
    title: "IT asset & end user support",
    body: "Corporate office AMC, end user support, and full asset lifecycle management — keeping your teams productive and your hardware running.",
  },
  {
    id: "managed",
    icon: "managed",
    title: "Managed IT, 24/7",
    body: "We hold the pager. Your team gets to ship features instead of fight fires.",
  },
];

function HomeServicesGrid() {
  return (
    <Section id="services-overview">
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "end",
          flexWrap: "wrap",
          gap: 24,
        }}
      >
        <div>
          <Reveal kind="reveal">
            <div className="eyebrow">
              <span className="dot" /> Services
            </div>
          </Reveal>
          <h2
            style={{
              marginTop: 16,
              fontSize: "clamp(40px, 6vw, 72px)",
              letterSpacing: "-0.03em",
            }}
          >
            <WordReveal text="Six practices." />
            <br />
            <span
              style={{ fontStyle: "italic", color: "var(--color-primary)" }}
            >
              <WordReveal text="One accountable team." baseDelay={250} />
            </span>
          </h2>
        </div>
        <Reveal kind="reveal" delay={300}>
          <Link to="/services">
            <button className="btn-ghost">
              All services <Arrow />
            </button>
          </Link>
        </Reveal>
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 16,
          marginTop: 64,
        }}
        className="svc-grid"
      >
        {SERVICES.map((s, i) => (
          <Reveal key={s.id} kind="reveal-up" delay={i * 80}>
            <ServiceCard {...s} />
          </Reveal>
        ))}
      </div>

      <style>{`
        @media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </Section>
  );
}

function ServiceCard({ icon, title, body, id }) {
  const [hovered, setHovered] = useState(false);
  return (
    <Link
      to={`/services#${id}`}
      style={{ display: "block", color: "inherit" }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div
        style={{
          background: "var(--color-surface-card)",
          borderRadius: 16,
          padding: 28,
          height: "100%",
          minHeight: 280,
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          transition:
            "background 350ms ease, transform 450ms cubic-bezier(0.2,0.7,0,1)",
          background: hovered
            ? "var(--color-ink)"
            : "var(--color-surface-card)",
          color: hovered ? "var(--color-on-dark)" : "var(--color-ink)",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-start",
          }}
        >
          <div
            style={{
              width: 48,
              height: 48,
              borderRadius: 9999,
              border: `1px solid ${hovered ? "rgba(250,249,245,0.2)" : "var(--color-hairline)"}`,
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              transition: "border-color 350ms ease",
            }}
          >
            <ServiceIcon name={icon} size={22} />
          </div>
          <div
            style={{
              width: 36,
              height: 36,
              borderRadius: 9999,
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              background: hovered ? "var(--color-primary)" : "transparent",
              color: hovered ? "var(--color-on-primary)" : "var(--color-body)",
              transition: "all 350ms ease",
              transform: hovered ? "rotate(0deg)" : "rotate(-30deg)",
            }}
          >
            <ServiceIcon name="arrow-ne" size={16} />
          </div>
        </div>
        <div>
          <h3
            style={{
              fontFamily: "var(--font-display)",
              fontSize: 26,
              letterSpacing: "-0.4px",
              lineHeight: 1.15,
              fontWeight: 400,
              color: "inherit",
            }}
          >
            {title}
          </h3>
          <p
            style={{
              marginTop: 12,
              color: hovered
                ? "var(--color-on-dark-soft)"
                : "var(--color-body)",
              transition: "color 350ms ease",
            }}
          >
            {body}
          </p>
        </div>
      </div>
    </Link>
  );
}

// ---------- Why choose us ----------
function WhyChooseUs() {
  const items = [
    {
      n: "01",
      t: "Senior by default.",
      b: "Average 6 years experience per engineer. No bait-and-switch staffing.",
    },
    {
      n: "02",
      t: "Outcome-priced engagements.",
      b: "We bid on outcomes, not bodies. Fixed-fee or T&M with hard ceilings.",
    },
    {
      n: "03",
      t: "Built into your stand-up.",
      b: "We integrate directly into your workflow - with dedicated teams, transparent communication, and real-time project collaboration from day one.",
    },
    {
      n: "04",
      t: "Run-rate accountability.",
      b: "If we built it, we own it. SLAs, on-call rotation, post-incident reviews.",
    },
  ];
  return (
    <section
      className="dark"
      style={{ padding: "120px 0", position: "relative", overflow: "hidden" }}
      data-screen-label="why"
    >
      <div className="container">
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}
          className="why-grid"
        >
          <div>
            <Reveal kind="reveal">
              <div
                className="eyebrow"
                style={{ color: "var(--color-on-dark-soft)" }}
              >
                <span className="dot" /> Why Worldonix
              </div>
            </Reveal>
            <h2
              style={{
                marginTop: 16,
                color: "var(--color-on-dark)",
                fontSize: "clamp(40px, 6vw, 72px)",
                letterSpacing: "-0.03em",
              }}
            >
              <WordReveal text="The IT partner" />
              <br />
              <span
                style={{ fontStyle: "italic", color: "var(--color-primary)" }}
              >
                <WordReveal text="you stop replacing." baseDelay={300} />
              </span>
            </h2>
            <Reveal kind="reveal" delay={500}>
              <p
                style={{
                  marginTop: 24,
                  color: "var(--color-on-dark-soft)",
                  maxWidth: 380,
                }}
              >
                Most agencies sell hours. We sell outcomes — measured against
                the metric you actually care about.
              </p>
            </Reveal>
          </div>
          <div>
            {items.map((it, i) => (
              <Reveal key={it.n} kind="reveal-up" delay={i * 100}>
                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "80px 1fr",
                    padding: "32px 0",
                    borderTop: "1px solid rgba(250,249,245,0.10)",
                    borderBottom:
                      i === items.length - 1
                        ? "1px solid rgba(250,249,245,0.10)"
                        : "none",
                  }}
                >
                  <div
                    style={{
                      fontFamily: "var(--font-mono)",
                      color: "var(--color-on-dark-soft)",
                      fontSize: 13,
                    }}
                  >
                    {it.n}
                  </div>
                  <div>
                    <h3
                      style={{
                        fontFamily: "var(--font-display)",
                        fontSize: 32,
                        letterSpacing: "-0.4px",
                        color: "var(--color-on-dark)",
                      }}
                    >
                      {it.t}
                    </h3>
                    <p
                      style={{
                        marginTop: 8,
                        color: "var(--color-on-dark-soft)",
                      }}
                    >
                      {it.b}
                    </p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .why-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
    </section>
  );
}

// ---------- Services sticky stack ----------
function ServicesStickyStack() {
  const list = SERVICES;
  const wrapRef = useRef(null);
  const [active, setActive] = useState(0);

  useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const onScroll = () => {
      const items = wrap.querySelectorAll("[data-stick-item]");
      let best = 0;
      const center = window.innerHeight / 2;
      items.forEach((el, i) => {
        const r = el.getBoundingClientRect();
        if (r.top < center && r.bottom > 0) best = i;
      });
      setActive(best);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <Section id="sticky-services">
      <div
        style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64 }}
        className="stk-grid"
      >
        <div>
          <div className="stk-heading" style={{ position: "sticky", top: 120 }}>
            <Reveal kind="reveal">
              <div className="eyebrow">
                <span className="dot" /> What we do, in detail
              </div>
            </Reveal>
            <h2
              style={{
                marginTop: 16,
                fontSize: "clamp(40px, 6vw, 72px)",
                letterSpacing: "-0.03em",
              }}
            >
              <WordReveal text="A practice" />
              <br />
              <WordReveal text="for every layer" baseDelay={200} />
              <br />
              <span
                style={{ fontStyle: "italic", color: "var(--color-primary)" }}
              >
                <WordReveal text="of the stack." baseDelay={400} />
              </span>
            </h2>
            <p
              style={{
                marginTop: 24,
                color: "var(--color-body)",
                maxWidth: 380,
              }}
            >
              Six independent practices that compose. Engage one, or hand us the
              whole stack.
            </p>
            <Link to="/services">
              <button className="btn-ghost" style={{ marginTop: 28 }}>
                Read full services <Arrow />
              </button>
            </Link>
          </div>
        </div>

        <div ref={wrapRef} style={{ position: "relative" }}>
          {list.map((s, i) => (
            <div
              data-stick-item
              key={s.id}
              style={{ position: "relative", marginBottom: 16 }}
            >
              <div
                className="stick-card"
                style={{
                  position: "sticky",
                  top: `${130 + i * 14}px`,
                  background:
                    i === active
                      ? "var(--color-ink)"
                      : "var(--color-surface-card)",
                  color:
                    i === active ? "var(--color-on-dark)" : "var(--color-ink)",
                  borderRadius: 20,
                  padding: 36,
                  minHeight: 320,
                  transition:
                    "background 500ms ease, color 500ms ease, transform 500ms cubic-bezier(0.2,0.7,0,1)",
                  transform: `scale(${1 - (list.length - 1 - i) * 0.012})`,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                  }}
                >
                  <span
                    style={{
                      fontFamily: "var(--font-mono)",
                      fontSize: 12,
                      opacity: 0.65,
                    }}
                  >
                    0{i + 1} / 06
                  </span>
                  <ServiceIcon name={s.icon} size={32} />
                </div>
                <h3
                  style={{
                    marginTop: 80,
                    fontFamily: "var(--font-display)",
                    fontWeight: 400,
                    fontSize: "clamp(36px, 4.5vw, 56px)",
                    letterSpacing: "-0.5px",
                    lineHeight: 1.05,
                    color: "inherit",
                  }}
                >
                  {s.title}
                </h3>
                <p
                  style={{
                    marginTop: 16,
                    color:
                      i === active
                        ? "var(--color-on-dark-soft)"
                        : "var(--color-body)",
                    maxWidth: 480,
                  }}
                >
                  {s.body}
                </p>
                <Link
                  to={`/services#${s.id}`}
                  style={{
                    marginTop: 28,
                    display: "inline-flex",
                    alignItems: "center",
                    gap: 8,
                    color: "inherit",
                  }}
                  className="u-link"
                >
                  Read more <Arrow />
                </Link>
              </div>
              {/* spacer pushes sticky */}
              <div
                className="stick-spacer"
                style={{ height: i === list.length - 1 ? "0px" : "260px" }}
              />
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .stk-grid { grid-template-columns: 1fr !important; } }`}</style>
    </Section>
  );
}

// ---------- Industries (vertical rows with hover preview) ----------
const INDUSTRIES = [
  {
    id: "bfsi",
    title: "Banking, Finance & Insurance",
    blurb: "Core modernization, KYC pipelines, regulatory reporting.",
    icon: "bfsi",
    swatch: "#1f2a3d",
    img: "https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=600&q=80",
  },
  {
    id: "health",
    title: "Healthcare & Lifesciences",
    blurb: "EMR integrations, HIPAA-grade infra, telehealth platforms.",
    icon: "health",
    swatch: "#1e4d6b",
    img: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=600&q=80",
  },
  {
    id: "retail",
    title: "Retail & E-commerce",
    blurb: "Headless commerce, OMS, omnichannel data layers.",
    icon: "retail",
    swatch: "#1e3a8a",
    img: "https://images.unsplash.com/photo-1472851294608-062f824d29cc?auto=format&fit=crop&w=600&q=80",
  },
  {
    id: "manufact",
    title: "Manufacturing & Logistics",
    blurb: "ERP overlays, IoT pipelines, predictive maintenance.",
    icon: "manufact",
    swatch: "#2c1f3d",
    img: "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=600&q=80",
  },
];

function IndustriesPreview() {
  const [hover, setHover] = useState(null);
  const wrapRef = useRef(null);
  const previewRef = useRef(null);

  useEffect(() => {
    const wrap = wrapRef.current;
    const preview = previewRef.current;
    if (!wrap || !preview) return;
    const onMove = (e) => {
      const r = wrap.getBoundingClientRect();
      const x = e.clientX - r.left;
      const y = e.clientY - r.top;
      preview.style.transform = `translate(${x - 180}px, ${y - 130}px)`;
    };
    wrap.addEventListener("mousemove", onMove);
    return () => wrap.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <Section id="industries">
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "end",
          flexWrap: "wrap",
          gap: 24,
        }}
      >
        <div>
          <Reveal kind="reveal">
            <div className="eyebrow">
              <span className="dot" /> Industries
            </div>
          </Reveal>
          <h2
            style={{
              marginTop: 16,
              fontSize: "clamp(40px, 6vw, 72px)",
              letterSpacing: "-0.03em",
            }}
          >
            <WordReveal text="Where our work" />
            <br />
            <span
              style={{ fontStyle: "italic", color: "var(--color-primary)" }}
            >
              <WordReveal text="actually runs." baseDelay={200} />
            </span>
          </h2>
        </div>
        <Reveal kind="reveal" delay={300}>
          <Link to="/industries">
            <button className="btn-ghost">
              All industries <Arrow />
            </button>
          </Link>
        </Reveal>
      </div>

      <div
        ref={wrapRef}
        style={{ marginTop: 64, position: "relative" }}
        onMouseLeave={() => setHover(null)}
      >
        {INDUSTRIES.map((it, i) => (
          <Reveal key={it.id} kind="reveal-up" delay={i * 80}>
            <Link
              to={`/industries#${it.id}`}
              onMouseEnter={() => setHover(i)}
              style={{
                display: "grid",
                gridTemplateColumns: "60px 1fr 220px 60px",
                alignItems: "center",
                gap: 16,
                padding: "36px 8px",
                borderTop: "1px solid var(--color-hairline)",
                borderBottom:
                  i === INDUSTRIES.length - 1
                    ? "1px solid var(--color-hairline)"
                    : "none",
                color: "var(--color-ink)",
                textDecoration: "none",
                transition: "padding 350ms ease, color 350ms ease",
                paddingLeft: hover === i ? 32 : 8,
              }}
              className="ind-row"
            >
              <span
                style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 13,
                  color: "var(--color-muted)",
                }}
              >
                0{i + 1}
              </span>
              <h3
                style={{
                  fontFamily: "var(--font-display)",
                  fontSize: "clamp(28px, 4vw, 56px)",
                  letterSpacing: "-0.5px",
                  fontWeight: 400,
                  fontStyle: hover === i ? "italic" : "normal",
                  color:
                    hover === null || hover === i
                      ? "var(--color-ink)"
                      : "var(--color-muted-soft)",
                  transition: "color 350ms ease, font-style 350ms ease",
                }}
              >
                {it.title}
              </h3>
              <p className="t-body-sm" style={{ color: "var(--color-muted)" }}>
                {it.blurb}
              </p>
              <span
                style={{
                  width: 44,
                  height: 44,
                  borderRadius: 9999,
                  justifySelf: "end",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  background:
                    hover === i ? "var(--color-primary)" : "transparent",
                  color:
                    hover === i
                      ? "var(--color-on-primary)"
                      : "var(--color-body)",
                  border:
                    hover === i
                      ? "1px solid var(--color-primary)"
                      : "1px solid var(--color-hairline)",
                  transition: "all 350ms ease",
                }}
              >
                <ServiceIcon name="arrow-ne" size={16} />
              </span>
            </Link>
          </Reveal>
        ))}

        {/* hover preview tile that follows cursor */}
        <div
          ref={previewRef}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: 360,
            height: 260,
            pointerEvents: "none",
            borderRadius: 16,
            overflow: "hidden",
            opacity: hover !== null ? 1 : 0,
            transition: "opacity 250ms ease",
            background:
              hover !== null ? INDUSTRIES[hover].swatch : "transparent",
            boxShadow: "0 18px 40px rgba(20,20,19,0.25)",
            zIndex: 5,
          }}
        >
          {hover !== null && (
            <>
              <img
                src={INDUSTRIES[hover].img}
                alt=""
                aria-hidden="true"
                style={{
                  position: "absolute",
                  inset: 0,
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                }}
              />
              <div
                style={{
                  position: "absolute",
                  inset: 0,
                  background: `${INDUSTRIES[hover].swatch}dd`,
                }}
              />
              <div
                style={{
                  position: "relative",
                  zIndex: 1,
                  height: "100%",
                  padding: 28,
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                  color: "var(--color-on-dark)",
                }}
              >
                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                >
                  <ServiceIcon name={INDUSTRIES[hover].icon} size={32} />
                  <span
                    style={{
                      fontFamily: "var(--font-mono)",
                      fontSize: 12,
                      opacity: 0.7,
                    }}
                  >
                    0{hover + 1} / 04
                  </span>
                </div>
                <div>
                  <h4
                    style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 26,
                      lineHeight: 1.1,
                      color: "var(--color-on-dark)",
                    }}
                  >
                    {INDUSTRIES[hover].title}
                  </h4>
                  <p style={{ fontSize: 13, opacity: 0.85, marginTop: 8 }}>
                    {INDUSTRIES[hover].blurb}
                  </p>
                </div>
              </div>
            </>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .ind-row { grid-template-columns: 40px 1fr 40px !important; }
          .ind-row > p { display: none; }
        }
      `}</style>
    </Section>
  );
}

// ---------- Delivery preview ----------
function DeliveryPreview() {
  const phases = [
    {
      n: "01",
      t: "Discover",
      b: "Two-week diagnostic. We map your stack, your team, your bottleneck.",
    },
    {
      n: "02",
      t: "Design",
      b: "Architecture, scope and a fixed-fee proposal you can take to your CFO.",
    },
    {
      n: "03",
      t: "Build",
      b: "Embedded pod ships in 2-week sprints. Demo every Friday.",
    },
    {
      n: "04",
      t: "Run",
      b: "We hold the pager. SLAs, on-call, monthly reliability reviews.",
    },
  ];
  return (
    <Section id="delivery-preview" dark>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 64,
          alignItems: "center",
        }}
        className="dlv-grid"
      >
        <div>
          <Reveal kind="reveal">
            <div
              className="eyebrow"
              style={{ color: "var(--color-on-dark-soft)" }}
            >
              <span className="dot" /> Delivery model
            </div>
          </Reveal>
          <h2
            style={{
              marginTop: 16,
              color: "var(--color-on-dark)",
              fontSize: "clamp(40px, 6vw, 72px)",
              letterSpacing: "-0.03em",
            }}
          >
            <WordReveal text="One process." />
            <br />
            <span
              style={{ fontStyle: "italic", color: "var(--color-primary)" }}
            >
              <WordReveal text="Four moments." baseDelay={250} />
            </span>
          </h2>
          <Reveal kind="reveal" delay={500}>
            <p
              style={{
                marginTop: 24,
                color: "var(--color-on-dark-soft)",
                maxWidth: 420,
              }}
            >
              The same delivery model whether we're shipping a product or
              running your data center. Predictable, measurable, no surprises.
            </p>
            <Link to="/delivery">
              <button className="btn-ghost on-dark" style={{ marginTop: 28 }}>
                See how it works <Arrow />
              </button>
            </Link>
          </Reveal>
        </div>

        <div>
          {phases.map((p, i) => (
            <Reveal key={p.n} kind="reveal-up" delay={i * 100}>
              <div
                className="dlv-card"
                style={{
                  background: "var(--color-surface-dark-elevated)",
                  borderRadius: 16,
                  padding: 24,
                  marginBottom: 12,
                  display: "grid",
                  gridTemplateColumns: "60px 1fr auto",
                  alignItems: "center",
                  gap: 16,
                  transform: `translateX(${i * 24}px)`,
                  maxWidth: `calc(100% - ${(phases.length - 1 - i) * 24}px)`,
                }}
              >
                <span
                  style={{
                    fontFamily: "var(--font-mono)",
                    color: "var(--color-on-dark-soft)",
                  }}
                >
                  {p.n}
                </span>
                <div>
                  <div
                    style={{
                      fontFamily: "var(--font-display)",
                      fontSize: 28,
                      letterSpacing: "-0.3px",
                      color: "var(--color-on-dark)",
                    }}
                  >
                    {p.t}
                  </div>
                  <p
                    style={{
                      color: "var(--color-on-dark-soft)",
                      fontSize: 14,
                      marginTop: 4,
                    }}
                  >
                    {p.b}
                  </p>
                </div>
                <ServiceIcon name="arrow-ne" size={18} />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 980px) { .dlv-grid { grid-template-columns: 1fr !important; } }`}</style>
    </Section>
  );
}

// ---------- Testimonial ----------
function Testimonial() {
  return (
    <Section id="testimonial">
      <div
        style={{
          background: "var(--color-surface-card)",
          borderRadius: 24,
          padding: "72px 64px",
        }}
        className="tm-card"
      >
        <Reveal kind="reveal">
          <SpikeMark size={28} color="var(--color-primary)" />
        </Reveal>
        <Reveal kind="reveal-up" delay={150}>
          <blockquote
            style={{
              margin: "32px 0 0",
              fontFamily: "var(--font-display)",
              fontWeight: 400,
              fontSize: "clamp(28px, 3.4vw, 48px)",
              lineHeight: 1.2,
              letterSpacing: "-0.5px",
              color: "var(--color-ink)",
              maxWidth: 1000,
            }}
          >
            "We replaced three vendors with Worldonix. They run our cloud, our
            security ops, and shipped our customer portal in nine weeks. Our CTO
            sleeps through the night again."
          </blockquote>
        </Reveal>
        <Reveal kind="reveal" delay={400}>
          <div
            style={{
              marginTop: 40,
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              flexWrap: "wrap",
              gap: 16,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div
                style={{
                  width: 48,
                  height: 48,
                  borderRadius: 9999,
                  background:
                    "linear-gradient(135deg, var(--color-primary), #60a5fa)",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: "var(--color-on-primary)",
                  fontFamily: "var(--font-display)",
                  fontSize: 20,
                }}
              >
                RM
              </div>
              <div>
                <div className="t-title-md">Reema Mahadevan</div>
                <div className="t-caption">VP Engineering · Halcyon Retail</div>
              </div>
            </div>
            <div style={{ display: "inline-flex", gap: 32 }}>
              <Stat n="9wk" l="to MVP" />
              <Stat n="3" l="vendors consolidated" />
              <Stat n="42%" l="infra cost cut" />
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 720px) { .tm-card { padding: 40px 28px !important; } }`}</style>
    </Section>
  );
}

// ---------- Big marquee ----------
function BigMarquee() {
  return (
    <section
      style={{
        padding: "60px 0",
        overflow: "hidden",
        borderTop: "1px solid var(--color-hairline)",
        borderBottom: "1px solid var(--color-hairline)",
      }}
    >
      <Marquee
        items={["Strategy", "Engineering", "Cloud", "Security", "Operations"]}
      />
    </section>
  );
}

Object.assign(window, { HomePage });