/* global React, SiteHeader, SubNav, HeroBg, Footer, Reveal, Icon */

// Per-product accent colours
const DG_COLORS = {
  websites:    "#01A0A6",  // Sinux teal — brand standard
  reviewflow:  "#f59e0b",  // amber/gold — review stars, Google ratings
  sinuxmod:    "#5865F2",  // Discord blurple — explicit Discord identity
  switchboard: "#3D82FF",  // electric blue — already established on Consulting page
};

function DigitalGrowthHub() {
  return (
    <div className="page-enter theme-consult" data-screen-label="Digital Growth Hub">
      <SiteHeader current="consulting" theme="consult" />
      <SubNav
        active="growth"
        items={[
          { id: "overview", href: "#/consulting", label: "Overview" },
          { id: "growth", href: "#/consulting/digital-growth", 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 Hero">
        <HeroBg theme="consult" />
        <div className="container hero-content">
          <Reveal>
            <span className="eyebrow">Digital Growth · Sinux Consulting</span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="h1" style={{ marginTop: 24, marginBottom: 24, maxWidth: "16ch" }}>
              Grow Your Business. Online and Beyond.
            </h1>
          </Reveal>
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: 620 }}>
              Four products built and operated by Sinux Consulting — each solving a distinct
              digital growth challenge. Whether you need a website, more Google reviews, community
              automation, or an AI-powered front desk, we have you covered.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div className="row-reflow" style={{ marginTop: 36 }}>
              <a href="#services" className="btn btn-primary">Explore Services <Icon.arrow className="arrow" /></a>
              <a href="/consulting/contact" className="btn btn-ghost">Talk to Us</a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* SERVICES */}
      <section id="services" className="section-py" data-screen-label="02 Services" style={{ background: "linear-gradient(180deg, transparent, rgba(1,160,166,0.04), transparent)" }}>
        <div className="container">
          <Reveal>
            <span className="eyebrow">Our Services</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14, maxWidth: "22ch" }}>
              Four products. One division. All designed to grow your business.
            </h2>
            <p className="lede" style={{ maxWidth: 620 }}>
              From your first website to an AI system that runs your front-desk — pick the solution that fits your stage.
            </p>
          </Reveal>

          {/* 3-tile grid */}
          <div className="auto-grid" style={{ "--min": "280px", marginTop: 56, gap: "var(--gap-lg)" }}>
            <DGProductTile
              href="/consulting/digital-growth/websites"
              icon={<Icon.globe />}
              color={DG_COLORS.websites}
              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"
            />
            <DGProductTile
              href="/reviewflow"
              icon={<Icon.star />}
              color={DG_COLORS.reviewflow}
              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
            />
            <DGProductTile
              href="/sinuxmod"
              icon={<Icon.shield />}
              color={DG_COLORS.sinuxmod}
              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"
              subBadge="Discord Bot"
              live
            />
          </div>

          {/* Switchboard — featured wide card, same as Consulting page */}
          <div style={{ marginTop: "var(--gap-lg)" }}>
            <Reveal>
              <a href="/switchboard" className="card switchboard-feature-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",
              }}>
                <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 style={{ fontFamily: "'Michroma',sans-serif", fontSize: 11, letterSpacing: "0.18em", color: "#3D82FF", textTransform: "uppercase" }}>
                      Flagship · Coming Soon
                    </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>

                <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>

      {/* STATS STRIP */}
      <section className="section-py" data-screen-label="03 Stats" style={{ borderTop: "1px solid var(--line-2)", borderBottom: "1px solid var(--line-2)" }}>
        <div className="container">
          <div className="auto-grid" style={{ "--min": "200px", gap: 16 }}>
            {[
              { stat: "4", label: "Active products", sub: "All built in-house by Sinux" },
              { stat: "10+", label: "Businesses helped", sub: "Across Malaysia & the US" },
              { stat: "RM150k+", label: "Revenue tracked", sub: "Through our client platforms" },
              { stat: "24/7", label: "AI-powered", sub: "SinuxMod & Switchboard always on" },
            ].map((s, i) => (
              <Reveal key={i} delay={i * 60}>
                <div className="card" style={{ padding: "clamp(24px, 2.5vw, 36px)", textAlign: "center" }}>
                  <div className="display" style={{ fontSize: "clamp(28px, 3.6vw, 48px)", color: "var(--accent)", letterSpacing: "0.02em" }}>{s.stat}</div>
                  <div style={{ fontWeight: 600, marginTop: 8, fontSize: 15 }}>{s.label}</div>
                  <div style={{ color: "var(--ink-3)", fontSize: 13, marginTop: 4 }}>{s.sub}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-py" data-screen-label="04 CTA" style={{ textAlign: "center" }}>
        <div className="container">
          <Reveal>
            <h2 className="h2" style={{ marginBottom: 18, maxWidth: "22ch", marginInline: "auto" }}>
              Not sure which service fits?
            </h2>
            <p className="lede" style={{ maxWidth: 560, marginInline: "auto", marginBottom: 32 }}>
              Book a free discovery call with Sinux Consulting — we'll recommend the right solution
              for your business stage and goals.
            </p>
            <div className="row-reflow" style={{ justifyContent: "center" }}>
              <a href="/consulting/contact" className="btn btn-primary">Book a Discovery Call <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>
          </Reveal>
        </div>
      </section>

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

// Color-aware product tile — same structure as consulting.jsx ProductTile,
// with a per-product accent colour applied to icon, arrow, badge, and card border.
function DGProductTile({ href, icon, color, title, text, badge, subBadge, live }) {
  return (
    <Reveal>
      <a
        href={href}
        className="card"
        style={{
          display: "block",
          textDecoration: "none",
          color: "inherit",
          height: "100%",
          cursor: "pointer",
          padding: "clamp(24px, 3vw, 36px)",
          borderColor: `color-mix(in oklab, ${color} 22%, transparent)`,
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{
            width: 56, height: 56, borderRadius: 14,
            background: `color-mix(in oklab, ${color} 14%, transparent)`,
            color: color,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
          }}>
            {icon}
          </div>
          <Icon.arrow style={{ color: color }} />
        </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, display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }}>
          <span className={`pill ${live ? "live" : ""}`} style={{
            color: color,
            background: `color-mix(in oklab, ${color} 12%, transparent)`,
            borderColor: `color-mix(in oklab, ${color} 28%, transparent)`,
          }}>
            {badge}
          </span>
          {subBadge && (
            <span className="pill" style={{
              color: color,
              background: `color-mix(in oklab, ${color} 10%, transparent)`,
              borderColor: `color-mix(in oklab, ${color} 24%, transparent)`,
              fontSize: 10, letterSpacing: "0.08em",
            }}>
              {subBadge}
            </span>
          )}
        </div>
      </a>
    </Reveal>
  );
}

window.DigitalGrowthHub = DigitalGrowthHub;