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

// =====================================================================
//  Inner pages: About, Services, Industries, Delivery, Contact
// =====================================================================

function PageHero({ eyebrow, title, italic, body }) {
  return (
    <section style={{ paddingTop: 180, paddingBottom: 80 }} data-screen-label={`${title.toLowerCase()}-hero`}>
      <div className="container">
        <Reveal kind="reveal"><div className="eyebrow"><span className="dot"/> {eyebrow}</div></Reveal>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 400,
          fontSize: "clamp(56px, 10vw, 144px)", letterSpacing: "-0.04em",
          lineHeight: 0.96, marginTop: 24, color: "var(--color-ink)",
        }}>
          <WordReveal text={title}/>
          {italic && <><br/><span style={{ fontStyle: "italic", color: "var(--color-primary)" }}><WordReveal text={italic} baseDelay={200}/></span></>}
        </h1>
        {body && (
          <Reveal kind="reveal" delay={500}>
            <p style={{ marginTop: 32, fontSize: 19, color: "var(--color-body)", maxWidth: 720 }}>{body}</p>
          </Reveal>
        )}
      </div>
    </section>
  );
}

// ---------- ABOUT ----------
function AboutPage() {
  const values = [
    { t: "Plain-spoken.", b: "We tell you what we'd do if we owned the budget — even when it's not what you asked." },
    { t: "Senior-led.", b: "Principals stay on the engagement. No bait-and-switch staffing." },
    { t: "Outcome over hours.", b: "Bid on outcomes. Hours are a side-effect of getting there." },
    { t: "Quietly accountable.", b: "We hold the pager. We write the post-mortem. We fix what we shipped." },
  ];

  return (
    <main>
      <PageHero
        eyebrow="About"
        title="An IT firm that"
        italic="behaves like an in-house team."
        body="Worldonix Infotech is 180 engineers, designers and operators across Mumbai, Bengaluru and Singapore. Founded in 2014 by a team that had run platform engineering at three different banks. We started Worldonix because we kept getting hired to clean up after consultancies. Now we are the consultancy we wished existed."
      />

      {/* numbers */}
      <Section id="about-numbers">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="num-grid">
          {[
            { n: "2014", l: "Founded" },
            { n: "180+", l: "Engineers" },
            { n: "40+", l: "Enterprise clients" },
            { n: "98%", l: "Client retention" },
          ].map((s, i) => (
            <Reveal key={i} kind="reveal-up" delay={i * 100}>
              <div style={{ padding: 32, border: "1px solid var(--color-hairline)", borderRadius: 16 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 64, lineHeight: 1, letterSpacing: "-1px" }}>{s.n}</div>
                <div className="t-caption" style={{ marginTop: 12 }}>{s.l}</div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`@media (max-width: 720px) { .num-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
      </Section>

      {/* manifesto */}
      <Section id="manifesto" dark>
        <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"/> What we believe</div></Reveal>
            <h2 style={{ marginTop: 16, color: "var(--color-on-dark)", fontSize: "clamp(40px, 6vw, 72px)", letterSpacing: "-0.03em" }}>
              <WordReveal text="Four convictions"/><br/>
              <span style={{ fontStyle: "italic", color: "var(--color-primary)" }}><WordReveal text="that shape our work." baseDelay={250}/></span>
            </h2>
          </div>
          <div>
            {values.map((v, i) => (
              <Reveal key={i} kind="reveal-up" delay={i * 100}>
                <div style={{
                  display: "grid", gridTemplateColumns: "60px 1fr",
                  padding: "32px 0",
                  borderTop: "1px solid rgba(250,249,245,0.10)",
                  borderBottom: i === values.length - 1 ? "1px solid rgba(250,249,245,0.10)" : "none",
                }}>
                  <div style={{ fontFamily: "var(--font-mono)", color: "var(--color-on-dark-soft)" }}>0{i+1}</div>
                  <div>
                    <h3 style={{ fontFamily: "var(--font-display)", fontSize: 32, letterSpacing: "-0.3px", color: "var(--color-on-dark)" }}>{v.t}</h3>
                    <p style={{ marginTop: 8, color: "var(--color-on-dark-soft)" }}>{v.b}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>

      {/* leadership */}
      <Section id="leadership">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <Reveal kind="reveal"><div className="eyebrow"><span className="dot"/> Principals</div></Reveal>
            <h2 style={{ marginTop: 16, fontSize: "clamp(40px, 6vw, 72px)", letterSpacing: "-0.03em" }}>
              <WordReveal text="Senior, on every engagement."/>
            </h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 64 }} className="lead-grid">
          {[
            { n: "Aditya Rao", r: "CEO · ex-Goldman platform", c: "#1e3a8a" },
            { n: "Sara Iyer", r: "CTO · ex-AWS principal", c: "#1e4d6b" },
            { n: "Vikram Bose", r: "CISO · ex-PwC cyber lead", c: "#1f2a3d" },
            { n: "Niloufer Khan", r: "VP Delivery · 14yr at TCS", c: "#2c1f3d" },
          ].map((p, i) => (
            <Reveal key={p.n} kind="reveal-up" delay={i * 100}>
              <div style={{ borderRadius: 16, overflow: "hidden", background: "var(--color-surface-card)" }}>
                <div style={{ aspectRatio: "1/1", background: p.c, position: "relative", overflow: "hidden" }}>
                  <div style={{ position: "absolute", left: 24, bottom: 24, color: "var(--color-on-dark)", fontFamily: "var(--font-display)", fontSize: 60, letterSpacing: "-1px" }}>
                    {p.n.split(" ").map(s => s[0]).join("")}
                  </div>
                  <div style={{ position: "absolute", right: 16, top: 16, opacity: 0.2 }}>
                    <SpikeMark size={32} color="var(--color-on-dark)"/>
                  </div>
                </div>
                <div style={{ padding: 20 }}>
                  <div className="t-title-md">{p.n}</div>
                  <div className="t-caption" style={{ marginTop: 4 }}>{p.r}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 980px) { .lead-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 540px) { .lead-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </Section>
      <CTASection/>
    </main>
  );
}

// ---------- SERVICES ----------
const SERVICES_FULL = [
  {
    id: "consulting", icon: "consulting",
    title: "IT consulting & digital transformation",
    blurb: "Strategy, architecture and roadmaps that survive contact with reality.",
    bullets: ["Tech-strategy assessments", "Modernization roadmaps", "Vendor & build-vs-buy analysis", "Architecture reviews"],
  },
  {
    id: "agile", icon: "agile",
    title: "Agile project management",
    blurb: "Pods that deliver in weeks, not quarters.",
    bullets: ["Embedded scrum/kanban pods", "Discovery & estimation", "Outcome-based contracts", "Steering & governance"],
  },
  {
    id: "appdev", icon: "appdev",
    title: "Application development",
    blurb: "Web, mobile and back-of-house. Custom software your teams actually adopt.",
    bullets: ["React, Next.js, Vue", "iOS, Android & React Native", "Node, Python, Java, Go backends", "Internal tooling & dashboards"],
  },
  {
    id: "cloud", icon: "cloud",
    title: "Cloud & infrastructure services",
    blurb: "Migrate, modernize and run on AWS, Azure or GCP. Cost-optimized by default.",
    bullets: ["Cloud migrations & refactor", "Kubernetes & service mesh", "FinOps & cost optimization", "Site reliability engineering"],
  },
  {
    id: "security", icon: "security",
    title: "Cybersecurity",
    blurb: "From SOC2 readiness to zero-trust architecture and 24/7 SOC monitoring.",
    bullets: ["SOC2, ISO27001, HIPAA readiness", "Zero-trust architecture", "Pen testing & red-teaming", "24/7 SOC & incident response"],
  },
  {
    id: "managed", icon: "managed",
    title: "24/7 Managed IT services",
    blurb: "We hold the pager. Your team gets to ship features instead of fight fires.",
    bullets: ["L1–L3 ops, 24/7", "On-call rotation included", "Monthly reliability reviews", "Hard SLA commitments"],
  },
];

function ServicesPage() {
  const { open } = useBooking();
  return (
    <main>
      <PageHero
        eyebrow="Services"
        title="Six practices."
        italic="One accountable team."
        body="Each practice can run on its own. Most clients end up using two or three. A few hand us the whole stack — discovery to 24/7 ops."
      />

      {SERVICES_FULL.map((s, i) => (
        <section key={s.id} id={s.id} className={`page-section${i % 2 === 1 ? " dark" : ""}`} style={{ padding: "96px 0" }} data-screen-label={s.id}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }} className="svc-row">
              <div>
                <Reveal kind="reveal"><div className="eyebrow" style={i % 2 === 1 ? { color: "var(--color-on-dark-soft)" } : null}><span className="dot"/> 0{i + 1} / 06</div></Reveal>
                <h2 style={{ marginTop: 16, fontSize: "clamp(40px, 6vw, 72px)", letterSpacing: "-0.03em", color: i % 2 === 1 ? "var(--color-on-dark)" : "var(--color-ink)" }}>
                  <WordReveal text={s.title}/>
                </h2>
                <Reveal kind="reveal" delay={300}>
                  <p style={{ marginTop: 24, fontSize: 18, color: i % 2 === 1 ? "var(--color-on-dark-soft)" : "var(--color-body)", maxWidth: 480 }}>{s.blurb}</p>
                  <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
                    <Magnetic><button className="btn-coral" data-magnetic onClick={() => open()}>Talk to us <Arrow/></button></Magnetic>
                  </div>
                </Reveal>
              </div>
              <div>
                <Reveal kind="reveal-up" delay={200}>
                  <div style={{
                    borderRadius: 20, padding: 36,
                    background: i % 2 === 1 ? "var(--color-surface-dark-elevated)" : "var(--color-surface-card)",
                    color: i % 2 === 1 ? "var(--color-on-dark)" : "var(--color-ink)",
                  }}>
                    <ServiceIcon name={s.icon} size={48}/>
                    <div style={{ marginTop: 28 }}>
                      {s.bullets.map((b, j) => (
                        <div key={j} style={{
                          display: "flex", alignItems: "center", gap: 12,
                          padding: "16px 0",
                          borderTop: j === 0 ? "1px solid currentColor" : "1px solid currentColor",
                          borderColor: i % 2 === 1 ? "rgba(250,249,245,0.15)" : "var(--color-hairline-soft)",
                          fontSize: 17,
                        }}>
                          <ServiceIcon name="check" size={18}/>
                          <span>{b}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </Reveal>
              </div>
            </div>
          </div>
          <style>{`@media (max-width: 980px) { .svc-row { grid-template-columns: 1fr !important; } }`}</style>
        </section>
      ))}
      <CTASection/>
    </main>
  );
}

// ---------- INDUSTRIES PAGE ----------
const INDUSTRY_DETAILS = [
  {
    id: "bfsi", title: "Banking, Finance & Insurance", icon: "bfsi", swatch: "#1f2a3d",
    img: "https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=800&q=80",
    short: "Core modernization, KYC, regulatory reporting.",
    body: "We bring compliance-first thinking and modern engineering to retail banks, asset managers and insurers. From KYC automation to regulatory reporting — we add velocity without cutting corners.",
    highlights: [["Compliance-First", "engineering by design"], ["API-First", "integration layer"], ["Cloud-Native", "infrastructure"]],
    work: ["Core banking modernization", "KYC & onboarding pipelines", "Regulatory reporting (RBI, MAS, FCA)", "Trading platform engineering"],
  },
  {
    id: "health", title: "Healthcare & Lifesciences", icon: "health", swatch: "#1e4d6b",
    img: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=800&q=80",
    short: "EMR integrations, HIPAA-grade infra, telehealth.",
    body: "We build patient-facing portals, telehealth platforms and EMR integrations for hospital networks and digital-health startups. HIPAA-aware infrastructure, locked down by default.",
    highlights: [["HIPAA-Ready", "infrastructure by default"], ["HL7 / FHIR", "native support"], ["Zero-Trust", "security posture"]],
    work: ["EMR integrations (Epic, Cerner)", "Telehealth platforms", "Clinical-trial data infra", "HL7 / FHIR pipelines"],
  },
  {
    id: "retail", title: "Retail & E-commerce", icon: "retail", swatch: "#1e3a8a",
    img: "https://images.unsplash.com/photo-1472851294608-062f824d29cc?auto=format&fit=crop&w=800&q=80",
    short: "Headless commerce, OMS, omnichannel data layers.",
    body: "From storefront builds to OMS overhauls. We handle both the headless and the boring-but-critical — order routing, inventory sync, returns logic.",
    highlights: [["Headless-Ready", "composable commerce"], ["Omnichannel", "data & fulfilment"], ["Fast to Market", "lean MVP approach"]],
    work: ["Headless commerce (Shopify Hydrogen, commercetools)", "OMS overhauls", "Customer data platforms", "Loyalty & personalization"],
  },
  {
    id: "manufact", title: "Manufacturing & Logistics", icon: "manufact", swatch: "#2c1f3d",
    img: "https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?auto=format&fit=crop&w=800&q=80",
    short: "ERP overlays, IoT pipelines, predictive maintenance.",
    body: "ERP-adjacent web apps that humans actually want to use. IoT data pipelines, predictive maintenance models, factory-floor dashboards.",
    highlights: [["IoT-Ready", "real-time pipelines"], ["ERP-Agnostic", "overlay approach"], ["Edge-to-Cloud", "data architecture"]],
    work: ["ERP overlays (SAP, Oracle)", "IoT data pipelines", "Predictive maintenance models", "Warehouse & WMS systems"],
  },
];

function IndustriesPage() {
  return (
    <main>
      <PageHero
        eyebrow="Industries"
        title="Where our work"
        italic="actually runs."
        body="We're sector-agnostic on principle — every problem is, in the end, an engineering problem. Here's where our expertise and focus runs deepest."
      />
      {INDUSTRY_DETAILS.map((it, i) => (
        <section key={it.id} id={it.id} className="page-section" style={{ padding: "96px 0", background: i % 2 === 0 ? "var(--color-canvas)" : "var(--color-surface-soft)" }} data-screen-label={it.id}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64 }} className="ind-page-row">
              <div>
                <Reveal kind="reveal-up">
                  <div className="ind-card-image" style={{
                    borderRadius: 24, height: 460,
                    background: it.swatch,
                    padding: 40,
                    display: "flex", flexDirection: "column", justifyContent: "space-between",
                    color: "var(--color-on-dark)",
                    position: "relative", overflow: "hidden",
                  }}>
                    {it.img && (
                      <>
                        <img src={it.img} alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                        <div style={{ position: "absolute", inset: 0, background: `${it.swatch}cc` }} />
                      </>
                    )}
                    <div style={{ position: "relative", zIndex: 1, display: "flex", justifyContent: "space-between" }}>
                      <ServiceIcon name={it.icon} size={40}/>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, opacity: 0.7 }}>0{i+1} / 04</span>
                    </div>
                    <div style={{ position: "absolute", right: -40, bottom: -40, opacity: 0.08, zIndex: 1 }}>
                      <SpikeMark size={300} color="var(--color-on-dark)"/>
                    </div>
                    <div style={{ position: "relative", zIndex: 1 }}>
                      <h3 style={{ fontFamily: "var(--font-display)", fontSize: 44, letterSpacing: "-0.5px", lineHeight: 1.05, color: "var(--color-on-dark)" }}>{it.title}</h3>
                      <p style={{ marginTop: 12, color: "rgba(250,249,245,0.75)" }}>{it.short}</p>
                    </div>
                  </div>
                </Reveal>
              </div>
              <div>
                <Reveal kind="reveal"><div className="eyebrow"><span className="dot"/> {it.title}</div></Reveal>
                <h2 style={{ marginTop: 16, fontSize: "clamp(36px, 5vw, 56px)", letterSpacing: "-0.03em" }}>
                  <WordReveal text={it.title}/>
                </h2>
                <Reveal kind="reveal" delay={300}>
                  <p style={{ marginTop: 20, fontSize: 18, color: "var(--color-body)" }}>{it.body}</p>
                </Reveal>

                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, marginTop: 32 }}>
                  {it.highlights.map(([n, l], j) => (
                    <Reveal key={j} kind="reveal-up" delay={400 + j * 80}>
                      <div style={{ padding: 20, borderRadius: 12, border: "1px solid var(--color-hairline)", background: "var(--color-surface-soft)" }}>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: "-0.3px", fontWeight: 600 }}>{n}</div>
                        <div className="t-caption" style={{ marginTop: 4 }}>{l}</div>
                      </div>
                    </Reveal>
                  ))}
                </div>

                <Reveal kind="reveal-up" delay={600}>
                  <div style={{ marginTop: 32 }}>
                    <div className="eyebrow"><span className="dot"/> What we build</div>
                    <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0" }}>
                      {it.work.map((w, j) => (
                        <li key={j} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 0", borderTop: "1px solid var(--color-hairline-soft)" }}>
                          <ServiceIcon name="check" size={16}/> {w}
                        </li>
                      ))}
                    </ul>
                  </div>
                </Reveal>
              </div>
            </div>
          </div>
          <style>{`@media (max-width: 980px) { .ind-page-row { grid-template-columns: 1fr !important; } }`}</style>
        </section>
      ))}
      <CTASection/>
    </main>
  );
}

// ---------- DELIVERY ----------
function DeliveryPage() {
  const phases = [
    { n: "01", t: "Discover", d: "Two weeks", b: "We embed for two weeks. Map your stack, your team's calendar, the metric your CEO cares about. Output: a one-page diagnostic." },
    { n: "02", t: "Design", d: "Two weeks", b: "Reference architecture, scope, and a fixed-fee proposal you can take to your CFO. Output: signed SOW." },
    { n: "03", t: "Build", d: "8–24 weeks", b: "Embedded pod ships in 2-week sprints. Demo every Friday. You can pause, redirect or kill the project at any sprint boundary." },
    { n: "04", t: "Run", d: "Ongoing", b: "We hold the pager. SLAs, on-call rotation, monthly reliability reviews, quarterly tech-debt budget. Most clients stay with us 4+ years." },
  ];

  return (
    <main>
      <PageHero
        eyebrow="Delivery model"
        title="One process."
        italic="Four moments."
        body="The same delivery model whether we're shipping a product or running your data center. Predictable, measurable, no surprises after sprint review."
      />

      <Section id="phases">
        {phases.map((p, i) => (
          <Reveal key={p.n} kind="reveal-up" delay={i * 100}>
            <div style={{
              display: "grid", gridTemplateColumns: "100px 1fr 200px",
              gap: 32, alignItems: "start",
              padding: "48px 0",
              borderTop: "1px solid var(--color-hairline)",
              borderBottom: i === phases.length - 1 ? "1px solid var(--color-hairline)" : "none",
            }} className="phase-row">
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--color-muted)" }}>{p.n}</span>
              <div>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(36px, 5vw, 64px)", letterSpacing: "-0.5px" }}>{p.t}</h3>
                <p style={{ marginTop: 16, fontSize: 18, color: "var(--color-body)", maxWidth: 720 }}>{p.b}</p>
              </div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 13,
                padding: "8px 14px", borderRadius: 9999,
                border: "1px solid var(--color-hairline)",
                justifySelf: "start",
              }}>{p.d}</div>
            </div>
          </Reveal>
        ))}
        <style>{`@media (max-width: 720px) { .phase-row { grid-template-columns: 1fr !important; } }`}</style>
      </Section>

      <Section id="commitments" dark>
        <Reveal kind="reveal"><div className="eyebrow" style={{ color: "var(--color-on-dark-soft)" }}><span className="dot"/> Commitments</div></Reveal>
        <h2 style={{ marginTop: 16, color: "var(--color-on-dark)", fontSize: "clamp(40px, 6vw, 72px)", letterSpacing: "-0.03em" }}>
          <WordReveal text="What you can hold us to."/>
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 64 }} className="cmt-grid">
          {[
            { t: "Friday demos", b: "Working software, every two weeks. Or your money back." },
            { t: "Fixed-fee scopes", b: "If we miss, we eat the overage. No T&M creep." },
            { t: "On-call rotation", b: "We share the pager — yours and ours." },
            { t: "Exit-ready code", b: "We document so you can leave any time. Most don't." },
          ].map((c, i) => (
            <Reveal key={i} kind="reveal-up" delay={i * 100}>
              <div style={{
                padding: 28, borderRadius: 16,
                background: "var(--color-surface-dark-elevated)",
                color: "var(--color-on-dark)", height: "100%",
              }}>
                <ServiceIcon name="check" size={24}/>
                <h4 style={{ marginTop: 24, fontFamily: "var(--font-display)", fontSize: 26, letterSpacing: "-0.3px", color: "var(--color-on-dark)" }}>{c.t}</h4>
                <p style={{ marginTop: 8, color: "var(--color-on-dark-soft)" }}>{c.b}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 980px) { .cmt-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 540px) { .cmt-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </Section>

      <CTASection/>
    </main>
  );
}

// ---------- CONTACT ----------
function ContactPage() {
  const { open } = useBooking();
  return (
    <main>
      <PageHero
        eyebrow="Contact"
        title="Let's talk."
        italic="No deck. No sales pitch."
        body="Pick a slot, tell us what's on your plate, and we'll show up with one of our principals on the call."
      />

      <Section id="contact-grid">
        <div
          style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}
          className="cnt-grid"
        >
          <div>
            <Reveal kind="reveal-up">
              <h2
                style={{
                  fontSize: "clamp(36px, 5vw, 56px)",
                  letterSpacing: "-0.03em",
                }}
              >
                Reach out, three ways.
              </h2>
              <p
                style={{
                  marginTop: 16,
                  color: "var(--color-body)",
                  maxWidth: 480,
                }}
              >
                The booking form is the fastest. But you can also email us
                directly, or drop into one of our offices.
              </p>
            </Reveal>

            <div
              style={{
                marginTop: 40,
                display: "flex",
                flexDirection: "column",
                gap: 16,
              }}
            >
              {[
                {
                  t: "Book a 30-min call",
                  d: "Confirmed within an hour",
                  a: (
                    <button className="btn-coral" onClick={() => open()}>
                      Book a call <Arrow />
                    </button>
                  ),
                },
                {
                  t: "Email",
                  d: "info@worldonixit.com · We reply within 4 business hours.",
                  a: null,
                },
                {
                  t: "Phone",
                  d: "7497814202",
                  a: null,
                },
                { t: "Offices", d: "Gurgaon", a: null },
              ].map((c, i) => (
                <Reveal key={i} kind="reveal-up" delay={i * 100}>
                  <div
                    className="cnt-item"
                    style={{
                      padding: 28,
                      borderRadius: 16,
                      border: "1px solid var(--color-hairline)",
                      display: "grid",
                      gridTemplateColumns: "1fr auto",
                      alignItems: "center",
                      gap: 16,
                    }}
                  >
                    <div>
                      <div className="t-title-md">{c.t}</div>
                      <div className="t-body-sm" style={{ marginTop: 6 }}>
                        {c.d}
                      </div>
                    </div>
                    {c.a}
                  </div>
                </Reveal>
              ))}
            </div>
          </div>

          <div>
            <Reveal kind="reveal-up" delay={200}>
              <div
                style={{
                  background: "var(--color-ink)",
                  color: "var(--color-on-dark)",
                  borderRadius: 24,
                  padding: 40,
                  position: "relative",
                  overflow: "hidden",
                }}
              >
                <SpikeMark size={28} color="var(--color-primary)" />
                <h3
                  style={{
                    marginTop: 24,
                    color: "var(--color-on-dark)",
                    fontFamily: "var(--font-display)",
                    fontSize: 36,
                    letterSpacing: "-0.3px",
                  }}
                >
                  Or just open the booking sheet.
                </h3>
                <p
                  style={{ marginTop: 16, color: "var(--color-on-dark-soft)" }}
                >
                  Five fields. Pick a slot. We'll handle the rest.
                </p>
                <button
                  className="btn-coral"
                  style={{ marginTop: 32 }}
                  onClick={() => open()}
                >
                  Open booking sheet <Arrow />
                </button>
                <div
                  style={{
                    position: "absolute",
                    right: -60,
                    bottom: -60,
                    opacity: 0.06,
                  }}
                >
                  <SpikeMark size={300} color="var(--color-on-dark)" />
                </div>
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width: 980px) { .cnt-grid { grid-template-columns: 1fr !important; } }`}</style>
      </Section>
    </main>
  );
}

Object.assign(window, { AboutPage, ServicesPage, IndustriesPage, DeliveryPage, ContactPage });