/* global React, SHexLogo, SiteHeader, SubNav, HeroBg, Footer, ContactSection, Reveal, Icon */
const { useState: useStateC, useEffect: useEffectC } = React;

function ConsultingHub() {
  return (
    <div className="page-enter theme-consult" data-screen-label="Consulting Hub">
      <SiteHeader current="consulting" theme="consult" />
      <SubNav
        active="overview"
        items={[
          { id: "overview", href: "#/consulting", label: "Overview" },
          { id: "growth", href: "#/consulting/digital-growth/websites", label: "Digital Growth" },
          { id: "tech", href: "#/consulting/tech-consulting", label: "Tech Consulting" },
          { id: "contact", href: "#/consulting/contact", label: "Contact" },
        ]}
      />

      {/* HERO */}
      <section className="hero" data-screen-label="01 Consulting Hero">
        <HeroBg theme="consult" />
        <div className="container hero-content">
          <Reveal>
            <span className="eyebrow">Sinux Consulting</span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="h1" style={{ marginTop: 24, marginBottom: 24, maxWidth: "18ch" }}>
              Your End-to-End Technology Partner.
            </h1>
          </Reveal>
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: 640 }}>
              From subscription websites to full-scale platform builds — Sinux Consulting is a technology
              consulting company delivering digital growth and intelligent systems for businesses across the globe.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div className="row-reflow" style={{ marginTop: 36 }}>
              <a href="/consulting/digital-growth/websites" className="btn btn-primary">
                Explore Digital Growth <Icon.arrow className="arrow" />
              </a>
              <a href="/consulting/tech-consulting" className="btn btn-outline">
                Explore Tech Consulting <Icon.arrow className="arrow" />
              </a>
            </div>
          </Reveal>
        </div>
        <div className="scroll-cue">Scroll</div>
      </section>

      {/* TWO VERTICALS */}
      <section className="section-py" data-screen-label="02 What We Do">
        <div className="container">
          <Reveal>
            <span className="eyebrow">What We Do</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 16, maxWidth: "22ch" }}>
              Two verticals. One mission: turn vision into working systems.
            </h2>
          </Reveal>
          <div className="auto-grid" style={{ "--min": "300px", marginTop: 48, gap: "var(--gap-lg)" }}>
            <Reveal>
              <a href="/consulting/digital-growth/websites" className="card" style={{ display: "block", textDecoration: "none", color: "inherit", height: "100%" }}>
                <div style={{ width: 56, height: 56, borderRadius: 14, background: "color-mix(in oklab, var(--accent) 14%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon.trend />
                </div>
                <h3 className="h4" style={{ marginTop: 20, fontSize: "clamp(20px, 2.2vw, 26px)" }}>Digital Growth Solutions</h3>
                <p style={{ color: "var(--ink-2)", marginTop: 12, lineHeight: 1.65 }}>
                  Subscription-based websites with built-in SEO and AI optimization, plus our proprietary Digital
                  Growth products: ReviewFlow and Switchboard (coming soon).
                </p>
                <div className="btn btn-link" style={{ marginTop: 16, padding: 0 }}>See Digital Growth <Icon.arrow className="arrow" /></div>
              </a>
            </Reveal>
            <Reveal delay={120}>
              <a href="/consulting/tech-consulting" className="card" style={{ display: "block", textDecoration: "none", color: "inherit", height: "100%" }}>
                <div style={{ width: 56, height: 56, borderRadius: 14, background: "color-mix(in oklab, var(--accent) 14%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon.layers />
                </div>
                <h3 className="h4" style={{ marginTop: 20, fontSize: "clamp(20px, 2.2vw, 26px)" }}>Technology Consulting</h3>
                <p style={{ color: "var(--ink-2)", marginTop: 12, lineHeight: 1.65 }}>
                  End-to-end technology consulting through a 3-tier model: Advisory & Planning, MVP/POC Development,
                  and Full Suite Execution. AI-ready by design.
                </p>
                <div className="btn btn-link" style={{ marginTop: 16, padding: 0 }}>See Tech Consulting <Icon.arrow className="arrow" /></div>
              </a>
            </Reveal>
          </div>
        </div>
      </section>

      {/* DIGITAL GROWTH PRODUCTS */}
      <section className="section-py" data-screen-label="03 Products" style={{ background: "linear-gradient(180deg, transparent, rgba(1,160,166,0.04), transparent)" }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow">Digital Growth · Products</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14, maxWidth: "22ch" }}>Our Digital Growth Products</h2>
            <p className="lede" style={{ maxWidth: 620 }}>
              Under Sinux Consulting's Digital Growth division, we've built and operate these product lines.
            </p>
          </Reveal>

          <div className="auto-grid" style={{ "--min": "280px", marginTop: 56, gap: "var(--gap-lg)" }}>
            <ProductTile
              href="/consulting/digital-growth/websites"
              icon={<Icon.globe />}
              title="Websites"
              text="Subscription-based websites with monthly SEO updates and 2 blog posts included. Or choose our Signature Build — a professionally built site with ongoing care plan. Fully managed. Always optimized."
              badge="Active Service"
            />
            <ProductTile
              href="/reviewflow"
              icon={<Icon.star />}
              title="ReviewFlow"
              text="Smart QR-powered review management for local businesses. Positive reviews go straight to Google. Critical feedback stays private for internal action. Built by Sinux Consulting."
              badge="reviewflow.my"
              live
            />
            <ProductTile
              href="/sinuxmod"
              icon={<Icon.shield />}
              title="SinuxMod"
              text="AI-powered Discord ticket bot for paid communities. Reads ticket channels, answers from your Knowledge Base, escalates edge cases, and closes tickets — autonomously."
              badge="sinuxmod.com"
              live
            />
          </div>

          {/* Switchboard — featured wider tile */}
          <div style={{ marginTop: "var(--gap-lg)" }}>
            <Reveal>
              <a href="/switchboard" className="card" style={{
                display: "grid",
                gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.2fr)",
                gap: "clamp(28px, 4vw, 56px)",
                textDecoration: "none",
                color: "inherit",
                padding: "clamp(28px, 3.5vw, 48px)",
                background: "linear-gradient(135deg, rgba(0, 87, 255, 0.06), rgba(1, 160, 166, 0.03))",
                borderColor: "rgba(0, 87, 255, 0.25)",
                alignItems: "center",
              }} className="switchboard-feature-card">
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                    <div style={{
                      width: 56, height: 56, borderRadius: 14,
                      background: "linear-gradient(135deg, #0057FF, #3D82FF)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      color: "white",
                    }}>
                      <Icon.bot />
                    </div>
                    <div>
                      <div style={{ fontFamily: "'Michroma',sans-serif", fontSize: 11, letterSpacing: "0.18em", color: "#3D82FF", textTransform: "uppercase" }}>
                        Flagship · Coming Soon
                      </div>
                    </div>
                  </div>
                  <h3 className="h3" style={{ marginBottom: 14, fontSize: "clamp(26px, 3.4vw, 42px)" }}>
                    Switchboard
                  </h3>
                  <p style={{ color: "var(--ink-2)", lineHeight: 1.65, marginBottom: 20, fontSize: 15 }}>
                    Your AI Business Manager. Captures every lead, responds across every channel,
                    books appointments automatically, and remembers every customer — so service
                    businesses focus on the work, not the admin.
                  </p>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 22 }}>
                    {["AI Receptionist", "Lead Response", "CRM", "Scheduling", "Re-engagement"].map((t) => (
                      <span key={t} className="pill" style={{ color: "#3D82FF", background: "rgba(0,87,255,0.08)", borderColor: "rgba(0,87,255,0.25)" }}>{t}</span>
                    ))}
                  </div>
                  <div className="btn btn-link" style={{ padding: 0, fontSize: 14, color: "#3D82FF" }}>
                    Preview Switchboard <Icon.arrow className="arrow" />
                  </div>
                </div>

                {/* Mini ops dashboard preview */}
                <div className="switchboard-mini-dash">
                  <div className="sb-mini-chrome">
                    <span className="sb-mini-dot" style={{ background: "#ef4444" }} />
                    <span className="sb-mini-dot" style={{ background: "#f59e0b" }} />
                    <span className="sb-mini-dot" style={{ background: "#22c55e" }} />
                    <span style={{ marginLeft: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "rgba(255,255,255,0.5)" }}>command center</span>
                  </div>
                  <div className="sb-mini-stats">
                    <div className="sb-mini-stat"><span className="sb-mini-stat-num">12</span><span className="sb-mini-stat-label">New leads</span></div>
                    <div className="sb-mini-stat"><span className="sb-mini-stat-num">4</span><span className="sb-mini-stat-label">Need reply</span></div>
                    <div className="sb-mini-stat"><span className="sb-mini-stat-num">3</span><span className="sb-mini-stat-label">Booked today</span></div>
                  </div>
                  <div className="sb-mini-feed">
                    <div className="sb-mini-row">
                      <span className="sb-mini-dot-tag" style={{ background: "#1ADB8A" }} />
                      <span>AI replied to <strong>Oliver James</strong></span>
                      <span style={{ marginLeft: "auto", fontSize: 10, color: "rgba(255,255,255,0.4)" }}>2m ago</span>
                    </div>
                    <div className="sb-mini-row">
                      <span className="sb-mini-dot-tag" style={{ background: "#3D82FF" }} />
                      <span>Estimate booked — Thu 10am</span>
                      <span style={{ marginLeft: "auto", fontSize: 10, color: "rgba(255,255,255,0.4)" }}>14m</span>
                    </div>
                    <div className="sb-mini-row">
                      <span className="sb-mini-dot-tag" style={{ background: "#F59E0B" }} />
                      <span>SMS to Maria Chen — qualifying</span>
                      <span style={{ marginLeft: "auto", fontSize: 10, color: "rgba(255,255,255,0.4)" }}>22m</span>
                    </div>
                  </div>
                  <div className="sb-mini-pipeline">
                    {[
                      ["New", 8],
                      ["Contacted", 5],
                      ["Qualified", 3],
                      ["Booked", 3],
                    ].map(([l, n], i) => (
                      <div key={i} className="sb-mini-pipe-step">
                        <div className="sb-mini-pipe-count">{n}</div>
                        <div className="sb-mini-pipe-label">{l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </a>
            </Reveal>
          </div>
        </div>
      </section>

      {/* NOTABLE PROJECTS */}
      <section className="section-py" data-screen-label="04 Projects">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Notable Projects</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14, maxWidth: "22ch" }}>
              We Provide Solutions To Big & Small Organizations
            </h2>
          </Reveal>
          <div className="auto-grid" style={{ "--min": "320px", marginTop: 48, gap: "var(--gap-md)" }}>
            {REAL_PROJECTS.map((p, i) => (
              <RealProjectCard key={p.name} p={p} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* INDUSTRIES */}
      <section className="section-py" data-screen-label="05 Industries" style={{ borderTop: "1px solid var(--line-2)" }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow">Industries We Serve</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14, maxWidth: "20ch" }}>Serving Diverse Sectors</h2>
          </Reveal>
          <div className="auto-grid" style={{ "--min": "200px", marginTop: 40, gap: 16 }}>
            {[
              "Banking & Financial Services",
              "Retail & Ecommerce",
              "Digital Startups (B2B SaaS)",
              "Landscaping & Local Service (USA)",
              "Education & Upskilling",
              "Gaming & Automation Platforms",
            ].map((s, i) => (
              <Reveal key={i} delay={i * 60}>
                <div className="card" style={{ padding: "20px 22px", textAlign: "left", minHeight: 88, display: "flex", alignItems: "center", gap: 14 }}>
                  <span style={{ fontFamily: "'Michroma',sans-serif", fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>0{i + 1}</span>
                  <span style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.4 }}>{s}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <Testimonials />

      {/* CONTACT CTA */}
      <section className="section-py" data-screen-label="07 Contact CTA">
        <div className="container" style={{ textAlign: "center" }}>
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 18, maxWidth: "18ch", marginInline: "auto" }}>
              Ready to Build Something Extraordinary?
            </h2>
            <p className="lede" style={{ maxWidth: 620, marginInline: "auto" }}>
              Whether you need a subscription website, a full technology platform, or an AI-powered growth strategy
              — let's talk.
            </p>
            <div className="row-reflow" style={{ marginTop: 32, justifyContent: "center" }}>
              <a href="/consulting/contact" className="btn btn-primary">Start Your Project <Icon.arrow className="arrow" /></a>
              <a href="https://wa.me/60126187256" target="_blank" rel="noreferrer" className="btn btn-ghost"><Icon.whatsapp /> WhatsApp Us</a>
            </div>
            <div style={{ marginTop: 36, display: "flex", flexWrap: "wrap", gap: 24, justifyContent: "center", color: "var(--ink-3)", fontSize: 13, letterSpacing: "0.04em" }}>
              <span>info@sinuxconsulting.com</span>
              <span>·</span>
              <span>+60 12-618 7256</span>
              <span>·</span>
              <span>Mon–Fri 10am–9pm</span>
            </div>
          </Reveal>
        </div>
      </section>

      <Footer variant="consult" />
    </div>
  );
}

function ProductTile({ href, external, icon, title, text, badge, live, dim }) {
  const Tag = (href && !dim) ? "a" : "div";
  const props = (href && !dim)
    ? { href, target: external ? "_blank" : undefined, rel: external ? "noreferrer" : undefined }
    : {};
  return (
    <Reveal>
      <Tag
        {...props}
        className={`card ${dim ? "dim" : ""}`}
        style={{
          display: "block",
          textDecoration: "none",
          color: "inherit",
          height: "100%",
          cursor: dim ? "not-allowed" : "pointer",
          padding: "clamp(24px, 3vw, 36px)",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: "color-mix(in oklab, var(--accent) 14%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            {icon}
          </div>
          {!dim && (external ? <Icon.ext style={{ color: "var(--ink-3)" }} /> : <Icon.arrow style={{ color: "var(--accent)" }} />)}
        </div>
        <h3 className="h4" style={{ marginTop: 24, fontSize: "clamp(20px, 2.2vw, 26px)", fontFamily: "'Michroma',sans-serif", fontWeight: 400, letterSpacing: "0.02em" }}>
          {title}
        </h3>
        <p style={{ color: "var(--ink-2)", marginTop: 12, lineHeight: 1.6, fontSize: 14 }}>
          {text}
        </p>
        <div style={{ marginTop: 24 }}>
          <span className={`pill ${live ? "live accent" : "accent"}`} style={dim ? { opacity: 0.6 } : {}}>
            {badge}
          </span>
        </div>
      </Tag>
    </Reveal>
  );
}

function ProjectCard({ eyebrow, title, text, shape }) {
  // Each project gets a distinct abstract illustration
  return (
    <Reveal>
      <div className="card" style={{ padding: 0, overflow: "hidden", height: "100%", display: "flex", flexDirection: "column" }}>
        <div style={{ aspectRatio: "16/10", position: "relative", overflow: "hidden" }}>
          <ProjectArt shape={shape} />
        </div>
        <div style={{ padding: "clamp(20px, 2.5vw, 28px)" }}>
          <div className="eyebrow" style={{ color: "var(--ink-3)" }}>{eyebrow}</div>
          <h4 className="h4" style={{ marginTop: 10, marginBottom: 10, fontSize: "clamp(18px, 2vw, 22px)" }}>{title}</h4>
          <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.6 }}>{text}</p>
        </div>
      </div>
    </Reveal>
  );
}

function ProjectArt({ shape }) {
  if (shape === "landscape") {
    return (
      <svg viewBox="0 0 400 250" width="100%" height="100%" style={{ display: "block", background: "linear-gradient(180deg,#0c2826,#062a2a)" }}>
        <defs>
          <linearGradient id="lg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#01A0A6" stopOpacity="0.3"/><stop offset="100%" stopColor="#00676E" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <rect width="400" height="250" fill="url(#lg)"/>
        {/* hills */}
        <path d="M0 180 Q 80 130 160 170 T 320 160 T 400 180 L400 250 L0 250 Z" fill="#013a3e" opacity="0.7"/>
        <path d="M0 210 Q 100 170 200 200 T 400 200 L400 250 L0 250 Z" fill="#01A0A6" opacity="0.4"/>
        {/* trees */}
        {[60, 120, 200, 280, 340].map((x, i) => (
          <g key={i} opacity="0.7">
            <circle cx={x} cy={185 - (i % 2) * 10} r="14" fill="#01A0A6" opacity="0.4"/>
            <rect x={x - 1.5} y={188 - (i % 2) * 10} width="3" height="14" fill="#013a3e"/>
          </g>
        ))}
        {/* monogram */}
        <text x="20" y="40" fontFamily="Michroma" fontSize="14" fill="#01A0A6" letterSpacing="2">HCL</text>
      </svg>
    );
  }
  if (shape === "gaming") {
    return (
      <svg viewBox="0 0 400 250" width="100%" height="100%" style={{ display: "block", background: "linear-gradient(135deg,#1a1340,#3a1a5a)" }}>
        <defs>
          <radialGradient id="gg" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="#6f4ad6" stopOpacity="0.6"/><stop offset="100%" stopColor="#3866AF" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="400" height="250" fill="url(#gg)"/>
        {/* hex grid */}
        {Array.from({length: 24}, (_, i) => {
          const x = (i % 8) * 50 + 20;
          const y = Math.floor(i / 8) * 60 + 30 + ((i % 2) * 30);
          return <polygon key={i} points={`${x},${y-12} ${x+11},${y-6} ${x+11},${y+6} ${x},${y+12} ${x-11},${y+6} ${x-11},${y-6}`} fill="none" stroke="#a78bfa" strokeWidth="0.6" opacity="0.4"/>;
        })}
        {/* central trophy/boost shape */}
        <g transform="translate(200,125)">
          <path d="M-30 -20 L0 -40 L30 -20 L20 20 L-20 20 Z" fill="#fbbf24" opacity="0.85"/>
          <text x="0" y="6" fontFamily="Michroma" fontSize="16" fill="#1a1340" textAnchor="middle" fontWeight="bold">TB</text>
        </g>
        <text x="20" y="40" fontFamily="Michroma" fontSize="14" fill="#a78bfa" letterSpacing="2">TITAN</text>
      </svg>
    );
  }
  if (shape === "rescue") {
    return (
      <svg viewBox="0 0 400 250" width="100%" height="100%" style={{ display: "block", background: "linear-gradient(180deg,#1a0808,#2a0a0a)" }}>
        <defs>
          <linearGradient id="rr" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#c43b3b" stopOpacity="0.4"/><stop offset="100%" stopColor="#8a1f1f" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <rect width="400" height="250" fill="url(#rr)"/>
        {/* lifebuoy circle */}
        <g transform="translate(200,125)">
          <circle r="60" fill="none" stroke="#c43b3b" strokeWidth="14" opacity="0.7"/>
          <circle r="60" fill="none" stroke="#fff" strokeWidth="14" strokeDasharray="40 47" opacity="0.7" transform="rotate(45)"/>
          <circle r="32" fill="none" stroke="#c43b3b" strokeWidth="2" opacity="0.5"/>
        </g>
        {/* wave lines */}
        {[180, 200, 220].map((y, i) => (
          <path key={i} d={`M0 ${y} Q 50 ${y-8} 100 ${y} T 200 ${y} T 300 ${y} T 400 ${y}`} fill="none" stroke="#c43b3b" strokeOpacity="0.3" strokeWidth="1"/>
        ))}
        <text x="20" y="40" fontFamily="Michroma" fontSize="14" fill="#c43b3b" letterSpacing="2">RR</text>
      </svg>
    );
  }
  return null;
}
window.ProjectCard = ProjectCard;
window.ProjectArt = ProjectArt;

// Testimonials carousel — real testimonials from Lohan's portfolio
function Testimonials() {
  const items = [
    { quote: "Lohan's visionary leadership and innovative strategies have shaped a culture of excellence and innovation. His deep understanding of the digital landscape, combined with keen business acumen, has driven remarkable growth and client satisfaction.", name: "Aaron Peter", role: "Data & AI Technology Consultant at EY" },
    { quote: "Lohan has consistently demonstrated an exceptional level of dedication, proficiency, and adaptability. His proactive approach to integrating tech solutions optimised our workflow and positioned our team at the forefront of innovation.", name: "Manigandaa Keertan", role: "Director at Red Rescue Malaysia" },
    { quote: "Lohan is an exceptional CEO and partner. He possesses a unique blend of qualities — firm guidance but also the willingness to listen and incorporate rational suggestions. Working alongside Lohan has been an immensely valuable experience.", name: "Satoaki Ishihara", role: "Computer Science Student" },
    { quote: "Lohan was a very helpful, kind, and hardworking colleague. A person's ability to do great things is often judged by the small things — Lohan's work ethic and good attitude are an asset to any team.", name: "Yeap Eu Juan", role: "Founder of Swimin12" },
  ];
  const [idx, setIdx] = useStateC(0);
  useEffectC(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % items.length), 6000);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section-py" data-screen-label="06 Testimonials" style={{ background: "rgba(255,255,255,0.015)", borderTop: "1px solid var(--line-2)", borderBottom: "1px solid var(--line-2)" }}>
      <div className="container">
        <Reveal>
          <span className="eyebrow">Testimonials</span>
          <h2 className="h2" style={{ marginTop: 16, marginBottom: 40, maxWidth: "22ch" }}>What our clients say.</h2>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", alignItems: "center", gap: 32 }}>
          <Reveal>
            <blockquote
              key={idx}
              className="card"
              style={{
                margin: 0, padding: "clamp(28px, 3.5vw, 48px)",
                fontFamily: "'Poppins',sans-serif",
                fontSize: "clamp(18px, 2.2vw, 26px)",
                lineHeight: 1.5,
                letterSpacing: "0.005em",
                fontWeight: 400,
                animation: "pageenter .5s cubic-bezier(.2,.7,.2,1)",
              }}
            >
              <span style={{ color: "var(--accent)", fontFamily: "'Michroma',sans-serif", fontSize: "clamp(40px,5vw,72px)", lineHeight: 0.7, verticalAlign: "top", marginRight: 6 }}>"</span>
              {items[idx].quote}
              <footer style={{ marginTop: 28, fontSize: 14, color: "var(--ink-3)", display: "flex", gap: 14, alignItems: "center" }}>
                <div style={{ width: 40, height: 40, borderRadius: "50%", background: "color-mix(in oklab, var(--accent) 20%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "'Michroma',sans-serif", fontSize: 12 }}>
                  {items[idx].name.split(" ").map(w => w[0]).join("")}
                </div>
                <div>
                  <div style={{ color: "var(--ink)", fontWeight: 500, letterSpacing: 0 }}>{items[idx].name}</div>
                  <div style={{ fontSize: 13 }}>{items[idx].role}</div>
                </div>
              </footer>
            </blockquote>
          </Reveal>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            {items.map((_, i) => (
              <button
                key={i}
                onClick={() => setIdx(i)}
                aria-label={`Show testimonial ${i + 1}`}
                style={{
                  width: i === idx ? 32 : 8,
                  height: 8,
                  borderRadius: 999,
                  border: "none",
                  background: i === idx ? "var(--accent)" : "rgba(255,255,255,0.12)",
                  cursor: "pointer",
                  transition: "all .3s",
                }}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;
window.ConsultingHub = ConsultingHub;