/* global React, SHexLogo, Brandmark, SiteHeader, HeroBg, Footer, ContactSection, CountUp, Reveal, Icon, RealProjectCard, REAL_PROJECTS */

function GroupHome() {
  return (
    <div className="page-enter theme-group" data-screen-label="Group Home">
      <SiteHeader current="home" theme="group" />

      {/* HERO */}
      <section className="hero" data-screen-label="01 Group Hero">
        <HeroBg theme="group" />
        <div className="container hero-content">
          <Reveal>
            <span className="eyebrow">Sinux Group · Holding Company</span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="h1" style={{ marginTop: 24, marginBottom: 24, maxWidth: "16ch" }}>
              See How We Build the Future.
            </h1>
          </Reveal>
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: 640 }}>
              We create, scale, and support high-growth ventures through strategic investments,
              advanced technology, and proven business expertise. From AI-powered consulting to
              innovative retail concepts, we drive transformation for global clients and partners.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div className="row-reflow" style={{ marginTop: 36 }}>
              <a href="#about" className="btn btn-primary">
                See How We Build The Future <Icon.arrow className="arrow" />
              </a>
              <a href="#work" className="btn btn-ghost">View Our Work</a>
            </div>
          </Reveal>
          <Reveal delay={420}>
            <div style={{ marginTop: "clamp(56px, 9vh, 96px)", display: "flex", flexWrap: "wrap", gap: 32, color: "var(--ink-3)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase" }}>
              <span>Kuala Lumpur · Malaysia</span>
              <span>info@sinuxgroup.com</span>
              <span>+60 12-618 7256</span>
            </div>
          </Reveal>
        </div>
        <div className="scroll-cue">Scroll</div>
      </section>

      {/* ABOUT — Who We Are */}
      <section id="about" className="section-py" data-screen-label="02 Who We Are">
        <div className="container">
          <div className="editorial-two-col">
            <Reveal>
              <div>
                <span className="eyebrow">Who We Are</span>
              </div>
            </Reveal>
            <div>
              <Reveal delay={80}>
                <h2 className="h2" style={{ marginBottom: 28, maxWidth: "20ch" }}>
                  Providing expertise across sectors.
                </h2>
              </Reveal>
              <Reveal delay={160}>
                <p className="lede" style={{ marginBottom: 32, maxWidth: 720 }}>
                  At Sinux Group, we operate as a diversified holding company with a mission to launch,
                  grow, and scale high-impact ventures. Our portfolio spans digital consulting, technology
                  solutions, education platforms, and physical ventures.
                </p>
              </Reveal>
              <div className="auto-grid" style={{ "--min": "220px", marginTop: 16 }}>
                {[
                  { t: "Business Growth", d: "Strategy, capital, and operating playbooks that compound." },
                  { t: "Analysis & Research", d: "Data-driven decisions across every investment and engagement." },
                  { t: "100% Secure", d: "Disciplined governance, robust infrastructure, transparent reporting." },
                ].map((p, i) => (
                  <Reveal key={i} delay={200 + i * 80}>
                    <div className="card" style={{ height: "100%" }}>
                      <div className="display" style={{ color: "var(--accent)", fontSize: 13, letterSpacing: "0.14em", marginBottom: 8 }}>0{i + 1}</div>
                      <h4 className="h4" style={{ marginBottom: 8 }}>{p.t}</h4>
                      <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.6 }}>{p.d}</p>
                    </div>
                  </Reveal>
                ))}
              </div>
              <Reveal delay={460}>
                <a href="#ventures" className="btn btn-link" style={{ marginTop: 28 }}>
                  Read more <Icon.arrow className="arrow" />
                </a>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* VENTURES — 3 Subsidiaries */}
      <section id="ventures" className="section-py" data-screen-label="03 Ventures" style={{ borderTop: "1px solid var(--line-2)" }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow">What We Offer</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 12, maxWidth: "22ch" }}>
              Let's discover our ventures.
            </h2>
            <p className="lede" style={{ maxWidth: 640 }}>
              Three divisions, one operating philosophy — build, fund, and scale enduring businesses.
            </p>
          </Reveal>

          <div className="auto-grid" style={{ "--min": "320px", marginTop: 56, gap: "var(--gap-lg)" }}>
            <SubsidiaryCard
              variant="consult"
              num="01"
              title="Sinux Consulting"
              sub="Business & Technology Consulting"
              desc="Expert business and technology consulting services to help organizations optimize operations, drive growth, and implement innovative solutions — with AI at every step."
              tags={["Tech Consulting", "Digital Growth", "AI Solutions"]}
              cta="Explore Sinux Consulting"
              href="/consulting"
            />
            <SubsidiaryCard
              variant="capital"
              num="02"
              title="Sinux Capital"
              sub="Fund Management & Investments"
              desc="Specialized in fund management and investments, offering strategic financial solutions to maximize returns and manage wealth effectively across public and private markets."
              tags={["Investments", "Trading", "Wealth Strategy"]}
              cta="Explore Sinux Capital"
              href="/capital"
            />
            <SubsidiaryCard
              variant="group"
              num="03"
              title="Sinux Ventures"
              sub="Funding & Acquiring Growth-Stage Companies"
              desc="An investment firm that funds and mentors growing companies, acquiring and investing in high-potential startups while driving innovation, strategic scaling, and sustainable long-term growth."
              tags={["Acquisitions", "Mentorship", "Growth Capital"]}
              cta="Coming Soon"
              href="/contact"
              comingSoon
            />
          </div>
        </div>
      </section>

      {/* WHY US */}
      <section className="section-py" data-screen-label="05 Why Us">
        <div className="container">
          <div className="editorial-two-col">
            <Reveal>
              <span className="eyebrow">Why We're The Best</span>
            </Reveal>
            <div>
              <Reveal delay={80}>
                <h2 className="h2" style={{ marginBottom: 24, maxWidth: "24ch" }}>
                  Strategic & technical expertise — delivered.
                </h2>
              </Reveal>
              <Reveal delay={160}>
                <p className="lede" style={{ maxWidth: 720, marginBottom: 40 }}>
                  From AI strategy to digital transformation, Sinux Consulting — our Technology Consulting
                  Subsidiary (TCS) — delivers measurable results for clients worldwide.
                </p>
              </Reveal>
              <div className="auto-grid" style={{ "--min": "280px" }}>
                {[
                  { t: "Technology Consulting", d: "Data-driven forecasting and capital efficiency.", icon: <Icon.cpu /> },
                  { t: "Digital Growth Solutions", d: "Insights that guide investment and expansion.", icon: <Icon.trend /> },
                ].map((p, i) => (
                  <Reveal key={i} delay={200 + i * 100}>
                    <div className="card" style={{ height: "100%", padding: "clamp(24px, 3vw, 36px)" }}>
                      <div style={{ display: "flex", gap: 18, alignItems: "flex-start" }}>
                        <div style={{ width: 52, height: 52, borderRadius: 14, background: "color-mix(in oklab, var(--accent) 14%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                          {p.icon}
                        </div>
                        <div>
                          <h4 className="h4" style={{ marginBottom: 8 }}>{p.t}</h4>
                          <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.65 }}>{p.d}</p>
                        </div>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="angled-divider" />

      {/* STATS STRIP */}
      <section className="stats-strip" data-screen-label="06 Stats">
        <div className="container" style={{ padding: 0 }}>
          <div className="stats-grid">
            <CountUp to={85} suffix="K+" label="RM Revenue Generated" />
            <CountUp to={5} suffix="+" label="Sites Shipped" />
            <CountUp to={2} label="Active Ventures" />
            <CountUp to={15} suffix="+" label="Years Leadership Experience" />
          </div>
        </div>
      </section>

      {/* SHIPPED WORK — Real projects */}
      <section id="work" className="section-py" data-screen-label="07 Work">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Sinux Consulting · Client Work</span>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 20, marginTop: 16, marginBottom: 32 }}>
              <h2 className="h2" style={{ maxWidth: "22ch" }}>
                Sites we've shipped.
              </h2>
              <p className="lede" style={{ maxWidth: 380, marginBottom: 8 }}>
                Websites and digital products built across industries, markets, and use cases —
                from US-based dealerships to Malaysian trading communities.
              </p>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 32, paddingTop: 24, paddingBottom: 32, borderTop: "1px solid var(--line-2)" }}>
              {[
                { v: "5+", l: "Projects Shipped" },
                { v: "US & MY", l: "Markets Served" },
                { v: "RM 85k+", l: "Revenue Generated" },
              ].map((s) => (
                <div key={s.l}>
                  <div className="display" style={{ fontSize: "clamp(24px,3vw,32px)", color: "var(--ink)" }}>{s.v}</div>
                  <div style={{ color: "var(--ink-3)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 6 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </Reveal>
          <div className="auto-grid" style={{ "--min": "320px", gap: "var(--gap-md)" }}>
            {REAL_PROJECTS.map((p, i) => (
              <RealProjectCard key={p.name} p={p} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* CALL CTA STRIP */}
      <section className="section-py" data-screen-label="08 Call CTA" style={{ borderTop: "1px solid var(--line-2)", background: "rgba(255,255,255,0.015)" }}>
        <div className="container">
          <div className="card elevated" style={{ padding: "clamp(32px, 5vw, 64px)", border: "1px solid color-mix(in oklab, var(--accent) 30%, transparent)" }}>
            <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) auto", gap: 24, alignItems: "center", flexWrap: "wrap" }} className="cta-strip">
              <div>
                <span className="eyebrow">Toll Free Call</span>
                <h3 className="h3" style={{ marginTop: 14, marginBottom: 14, maxWidth: "22ch" }}>
                  Let's build something together.
                </h3>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 20, color: "var(--ink)", fontSize: "clamp(18px, 2vw, 24px)" }}>
                  <a href="tel:+60126187256" style={{ color: "inherit", textDecoration: "none" }}>+60 12-618 7256</a>
                  <span style={{ color: "var(--ink-4)" }}>·</span>
                  <a href="tel:+12293746725" style={{ color: "inherit", textDecoration: "none" }}>+1 (229) 374-6725</a>
                </div>
              </div>
              <a href="/contact" className="btn btn-primary">Call the Head of Sinux <Icon.arrow className="arrow" /></a>
            </div>
          </div>
        </div>
      </section>

      {/* LEADERSHIP */}
      <section className="section-py" data-screen-label="09 Leadership">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Founder & Leadership</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14, maxWidth: "22ch" }}>
              Founder-led. Built for scale.
            </h2>
            <p className="lede" style={{ maxWidth: 680 }}>
              Led by the founder and supported by experienced advisors, our team combines strategic vision
              with deep technical and operational expertise to deliver results that scale.
            </p>
          </Reveal>

          <div style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.6fr)",
            gap: "var(--gap-lg)",
            marginTop: 48,
            alignItems: "stretch",
          }} className="leader-grid">
            <Reveal>
              <LohanCard />
            </Reveal>
            <Reveal delay={120}>
              <div style={{ display: "flex", flexDirection: "column", gap: 16, height: "100%" }}>
                {[
                  { name: "Jeremiah", role: "Business Advisor", initials: "JE", grad: "linear-gradient(135deg, #01A0A6, #00676E)" },
                  { name: "Aaron", role: "Capital Strategy Advisor", initials: "AA", grad: "linear-gradient(135deg, #D3AF37, #A08102)" },
                ].map((p, i) => (
                  <div key={i} className="card" style={{ display: "flex", gap: 20, alignItems: "center", padding: "clamp(20px, 2vw, 28px)" }}>
                    <div style={{
                      width: 84, height: 84, borderRadius: 14,
                      flexShrink: 0,
                      background: p.grad,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      position: "relative",
                    }}>
                      <svg viewBox="0 0 100 100" width="64%" height="64%" style={{ position: "absolute", inset: 0, margin: "auto", opacity: 0.18 }}>
                        <polygon points="50,8 88,28 88,72 50,92 12,72 12,28" fill="none" stroke="white" strokeWidth="0.5"/>
                      </svg>
                      <div className="display" style={{ fontSize: 28, color: "rgba(255,255,255,0.95)", letterSpacing: "0.04em" }}>
                        {p.initials}
                      </div>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <h4 className="h4" style={{ marginBottom: 4 }}>{p.name}</h4>
                      <div style={{ color: "var(--accent)", fontSize: 13, letterSpacing: "0.02em" }}>{p.role}</div>
                      <div style={{ marginTop: 8, fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.14em", textTransform: "uppercase", fontFamily: "'JetBrains Mono', monospace" }}>
                        [ portrait placeholder ]
                      </div>
                    </div>
                  </div>
                ))}
                <div style={{ flex: 1, minHeight: 16 }} />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS — Google Reviews */}
      <section className="section-py" data-screen-label="11 Testimonials" style={{ background: "rgba(255,255,255,0.015)" }}>
        <div className="container">
          <Reveal>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 6 }}>
              <span className="eyebrow">Verified Google Reviews</span>
              <GoogleVerifiedBadge />
            </div>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14 }}>What our clients say.</h2>
            <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap", marginBottom: 14 }}>
              <Stars n={5} />
              <span style={{ color: "var(--ink-2)", fontSize: 15, fontWeight: 500 }}>5.0</span>
              <span style={{ color: "var(--ink-3)", fontSize: 13 }}>· Pulled live from our Google Business Profile</span>
            </div>
            <p className="lede" style={{ maxWidth: 560 }}>
              Sinux Consulting — Business & Technology Consulting on Google.
            </p>
          </Reveal>

          {/* Featured large testimonial — Colton Tommy */}
          <Reveal delay={120}>
            <div className="card elevated" style={{ marginTop: 40, padding: "clamp(28px, 4vw, 56px)" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 24 }}>
                <Stars n={5} />
                <div style={{ color: "var(--ink-3)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                  Posted on Google · 10 weeks ago
                </div>
              </div>
              <div style={{ position: "relative" }}>
                <span style={{ position: "absolute", top: -16, left: -8, fontSize: 96, color: "color-mix(in oklab, var(--accent) 20%, transparent)", fontFamily: "'Michroma',sans-serif", lineHeight: 0.6, userSelect: "none" }}>"</span>
                <p style={{ color: "var(--ink)", fontSize: "clamp(18px, 2.2vw, 24px)", lineHeight: 1.55, paddingLeft: 36, fontWeight: 300, fontStyle: "italic" }}>
                  Had a great experience with Sinux Consultancy. The team is professional, responsive, and very
                  knowledgeable. They guided me through the entire process smoothly and made everything easy
                  to understand. Highly recommended!
                </p>
              </div>
              <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line-2)", display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
                <ReviewerAvatar initials="CT" tone="#f59e0b" />
                <div>
                  <div style={{ fontWeight: 500, fontSize: 15 }}>Colton Tommy</div>
                  <div style={{ color: "var(--ink-3)", fontSize: 12 }}>15 reviews · 3 photos on Google</div>
                </div>
              </div>
            </div>
          </Reveal>

          <div className="auto-grid" style={{ "--min": "320px", marginTop: 24, gap: "var(--gap-md)" }}>
            {[
              {
                name: "Jeremy Hassler",
                meta: "7 reviews · 2 photos on Google",
                date: "6 days ago",
                quote: "We've been working with Sinux Consulting since March 2024, and it's been one of the best decisions we've made for our business. Their team is responsive, technically sharp, and consistently delivers on what they promise.",
                reply: "Jeremy, really appreciate this man 🙏",
                initials: "JH",
                tone: "#a855f7",
              },
              {
                name: "Charan Dangeti",
                meta: "3 reviews · 0 photos on Google",
                date: "6 days ago",
                quote: "The website I bought looked great!! They also have a great team that communicates clearly and makes any adjustments you need :)",
                reply: "Really appreciate the support Charan 🙌",
                initials: "CD",
                tone: "#3b82f6",
              },
            ].map((r, i) => (
              <Reveal key={i} delay={i * 80}>
                <blockquote className="card" style={{ margin: 0, height: "100%", padding: "clamp(22px, 3vw, 32px)" }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 10, marginBottom: 16 }}>
                    <Stars n={5} />
                    <div style={{ color: "var(--ink-4)", fontSize: 11, letterSpacing: "0.08em" }}>{r.date}</div>
                  </div>
                  <p style={{ color: "var(--ink-2)", lineHeight: 1.65, fontSize: 14, marginBottom: 20 }}>
                    {r.quote}
                  </p>
                  <footer style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 16, borderTop: "1px solid var(--line-2)" }}>
                    <ReviewerAvatar initials={r.initials} tone={r.tone} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 500, fontSize: 13 }}>{r.name}</div>
                      <div style={{ color: "var(--ink-3)", fontSize: 11 }}>{r.meta}</div>
                    </div>
                    <GoogleG />
                  </footer>
                  {r.reply && (
                    <div style={{
                      marginTop: 14,
                      padding: "12px 14px",
                      background: "rgba(255,255,255,0.025)",
                      borderRadius: 10,
                      borderLeft: "2px solid var(--accent)",
                    }}>
                      <div style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>
                        Sinux Consulting · Owner reply
                      </div>
                      <div style={{ fontSize: 13, color: "var(--ink-2)", fontStyle: "italic" }}>
                        {r.reply}
                      </div>
                    </div>
                  )}
                </blockquote>
              </Reveal>
            ))}
          </div>

          <Reveal delay={300}>
            <div style={{ marginTop: 32, textAlign: "center" }}>
              <a
                href="https://share.google/hEtnzKJr1woTxljAV"
                target="_blank"
                rel="noreferrer"
                className="btn btn-ghost"
                style={{ display: "inline-flex", alignItems: "center", gap: 10 }}
              >
                <GoogleG /> Read all reviews on Google
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="section-py" data-screen-label="12 Final CTA" style={{ textAlign: "center" }}>
        <div className="container">
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 20, maxWidth: "20ch", marginInline: "auto" }}>
              Let's build something extraordinary.
            </h2>
            <p className="lede" style={{ maxWidth: 580, marginInline: "auto", marginBottom: 32 }}>
              Whether you're a founder, an operator, or an investor — there's a way to engage with Sinux Group.
            </p>
            <div className="row-reflow" style={{ justifyContent: "center" }}>
              <a href="/contact" className="btn btn-primary">Give Us a Message <Icon.arrow className="arrow" /></a>
              <a href="https://wa.me/60126187256" target="_blank" rel="noreferrer" className="btn btn-ghost"><Icon.whatsapp /> WhatsApp</a>
            </div>
          </Reveal>
        </div>
      </section>

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

// Founder card — featuring Lohan's portrait + bio + stats
function LohanCard() {
  return (
    <div className="card" style={{
      padding: 0,
      overflow: "hidden",
      height: "100%",
      display: "flex",
      flexDirection: "column",
    }}>
      <div style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", background: "#0f1422" }}>
        <img
          src="assets/lohan-portrait.png"
          alt="Lohan Ramachandran — Founder & CEO of Sinux Group"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block" }}
        />
        {/* gradient overlay */}
        <div style={{
          position: "absolute",
          inset: 0,
          background: "linear-gradient(180deg, transparent 40%, rgba(10,13,20,0.85) 100%)",
          pointerEvents: "none",
        }} />
        {/* Floating badge */}
        <div style={{
          position: "absolute",
          left: 16, bottom: 16,
          padding: "10px 14px",
          background: "rgba(10,13,20,0.85)",
          border: "1px solid var(--line)",
          borderRadius: 8,
          backdropFilter: "blur(8px)",
        }}>
          <div style={{ color: "var(--accent)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", marginBottom: 2 }}>
            Currently at
          </div>
          <div style={{ color: "var(--ink)", fontSize: 14, fontWeight: 500 }}>EY Consulting</div>
        </div>
      </div>
      <div style={{ padding: "clamp(20px, 2.5vw, 28px)", flex: 1, display: "flex", flexDirection: "column" }}>
        <div className="eyebrow" style={{ color: "var(--ink-3)" }}>Founder & CEO</div>
        <h3 className="h3" style={{ marginTop: 12, marginBottom: 6, fontSize: "clamp(22px,2.4vw,28px)" }}>
          Lohan Ramachandran
        </h3>
        <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.65, marginTop: 12 }}>
          Building technology, capital, and systems that compound. Technology Consultant at EY Malaysia
          and founder of the Sinux Group.
        </p>
        <div style={{ marginTop: "auto", paddingTop: 18, display: "flex", gap: 18, flexWrap: "wrap" }}>
          <a
            href="https://www.linkedin.com/in/lohan-ramachandran-6a74992b1/"
            target="_blank"
            rel="noreferrer"
            style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--accent)", fontSize: 13, textDecoration: "none" }}
          >
            <Icon.in /> LinkedIn
          </a>
          <a
            href="mailto:info@sinuxgroup.com"
            style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--ink-2)", fontSize: 13, textDecoration: "none" }}
          >
            <Icon.ext /> info@sinuxgroup.com
          </a>
        </div>
      </div>
    </div>
  );
}

function SubsidiaryCard({ variant, num, title, sub, desc, tags, cta, href, comingSoon }) {
  const Tag = comingSoon ? "div" : "a";
  const props = comingSoon ? {} : { href };
  return (
    <Reveal>
      <Tag
        {...props}
        className={`card subsid-card theme-${variant} ${comingSoon ? "dim" : ""}`}
        style={{
          display: "block",
          textDecoration: "none",
          color: "inherit",
          padding: "clamp(28px, 3.5vw, 40px)",
          minHeight: 420,
          cursor: comingSoon ? "default" : "pointer",
          height: "100%",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <SHexLogo size={52} variant={variant} />
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span className="display" style={{ color: "var(--accent)", fontSize: 12, letterSpacing: "0.18em" }}>{num}</span>
            {!comingSoon && <Icon.arrow style={{ width: 20, height: 20, color: "var(--accent)" }} />}
          </div>
        </div>
        <div style={{ marginTop: 24 }}>
          <h3 className="h3" style={{ marginBottom: 8, fontSize: "clamp(22px, 2.6vw, 30px)" }}>{title}</h3>
          <div style={{ color: "var(--accent)", fontSize: 13, marginBottom: 14, letterSpacing: "0.03em" }}>{sub}</div>
          <p style={{ color: "var(--ink-2)", lineHeight: 1.65, fontSize: 14 }}>{desc}</p>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 22 }}>
          {tags.map((t, i) => <span key={i} className="pill accent">{t}</span>)}
        </div>
        <div className="btn btn-link" style={{ marginTop: 24, padding: 0, fontSize: 13 }}>
          {cta} {!comingSoon && <Icon.arrow className="arrow" />}
        </div>
      </Tag>
    </Reveal>
  );
}

window.GroupHome = GroupHome;

// ============================================================
// GMB / Google Reviews helpers
// ============================================================
function Stars({ n = 5 }) {
  return (
    <div style={{ display: "inline-flex", gap: 2 }} aria-label={`${n} out of 5 stars`}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill={i < n ? "#fbbc04" : "rgba(255,255,255,0.12)"}>
          <path d="M12 2l2.7 6.3 6.8.6-5.2 4.5 1.6 6.6L12 16.7l-5.9 3.3 1.6-6.6L2.5 8.9l6.8-.6z" />
        </svg>
      ))}
    </div>
  );
}

function GoogleG({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-label="Google" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/>
      <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/>
      <path fill="#FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"/>
      <path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7C13.42 14.62 18.27 10.75 24 10.75z"/>
    </svg>
  );
}

function GoogleVerifiedBadge() {
  return (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      padding: "4px 10px",
      borderRadius: 999,
      background: "rgba(66,133,244,0.12)",
      border: "1px solid rgba(66,133,244,0.3)",
      color: "#a4c4fa",
      fontSize: 11,
      letterSpacing: "0.04em",
      fontWeight: 500,
    }}>
      <GoogleG size={12} />
      Verified on Google
    </span>
  );
}

function ReviewerAvatar({ initials, tone = "#3866AF" }) {
  return (
    <div style={{
      width: 40, height: 40, borderRadius: "50%",
      background: `linear-gradient(135deg, ${tone}, color-mix(in oklab, ${tone} 60%, #000))`,
      color: "white",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      fontFamily: "'Poppins',sans-serif", fontSize: 13, fontWeight: 600,
      flexShrink: 0,
      letterSpacing: "0.02em",
    }}>
      {initials}
    </div>
  );
}