/* global React, Arrow, Logo, WhatsAppIcon, Plus, Check */

// ============================================================
// Hero
// ============================================================
const Hero = () => (
  <section id="home" style={{ paddingBlock: "clamp(36px, 4.5vw, 72px) clamp(28px, 3.6vw, 56px)", position: "relative", overflow: "hidden" }}>
    {/* Background grid */}
    <div aria-hidden="true" style={{
      position: "absolute", inset: 0,
      backgroundImage:
        "linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)",
      backgroundSize: "56px 56px",
      maskImage: "radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%)",
      WebkitMaskImage: "radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 80%)",
      opacity: 0.5,
    }} />
    <div className="wrap" style={{ position: "relative" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 44, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <span className="kicker" style={{ alignSelf: "flex-start" }}>
            <span className="dot"></span>
            Elevate your workflow
          </span>
          <h1 className="display" style={{ margin: 0, fontSize: "clamp(40px, 4.6vw, 68px)", lineHeight: 1.05 }}>
            We make complex tech decisions{" "}
            <span style={{ color: "var(--bel-orange)", fontStyle: "italic", fontWeight: 500 }}>obvious.</span>
          </h1>
          <p className="lead" style={{ margin: 0, fontSize: "clamp(17px, 1.4vw, 21px)" }}>
            A senior consulting practice for IT strategy, business empowerment, and
            corporate legal — built on 14 years of helping Indian enterprises
            invest in the right technology and grow with discipline.
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 8 }}>
            <a href="#contact" className="btn btn--primary">
              Book a 30-min consult
              <span className="arrow"><Arrow size={11} /></span>
            </a>
            <a href="#services" className="btn btn--ghost">
              See our services
            </a>
          </div>
          <div style={{ display: "flex", gap: 32, marginTop: 14, paddingTop: 24, borderTop: "1px dashed var(--line)" }}>
            <MiniStat n="1,100+" l="enterprise clients" />
            <MiniStat n="3,500+" l="projects delivered" />
            <MiniStat n="14 yrs" l="building in India" />
          </div>
        </div>
        <HeroVisual />
      </div>
    </div>
  </section>
);

const MiniStat = ({ n, l }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
    <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.02em" }}>{n}</div>
    <div style={{ fontSize: 12.5, color: "var(--ink-soft)", letterSpacing: 0.01 }}>{l}</div>
  </div>
);

// Hero right-side visual — animated partner-logo tile grid
const HeroVisual = () => {
  const tiles = [
    { kind: "google", bg: "white" },
    { kind: "microsoft", bg: "white" },
    { kind: "hp", bg: "white" },
    { kind: "fortinet", bg: "white" },
    { kind: "iot", bg: "white" },
    { kind: "cloud", bg: "white" },
    { kind: "shield", bg: "white" },
    { kind: "lock", bg: "white" },
    { kind: "aws", bg: "#0F0F11" },
  ];

  return (
    <div style={{ position: "relative", aspectRatio: "0.95 / 1", maxWidth: 520, justifySelf: "end", width: "100%" }}>
      {/* Warm orange gradient panel */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(155deg, #FFE3CC 0%, #F7A668 45%, var(--bel-orange) 100%)",
        borderRadius: 28,
        overflow: "hidden",
        boxShadow: "0 36px 80px -32px rgba(239,106,31,0.55)",
      }}>
        {/* Subtle pattern */}
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: "radial-gradient(circle at 80% 20%, rgba(255,255,255,0.3), transparent 40%), radial-gradient(circle at 20% 90%, rgba(255,255,255,0.18), transparent 35%)",
        }} />
        {/* Concentric ripples */}
        <svg aria-hidden viewBox="0 0 400 400" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.18 }}>
          <circle cx="200" cy="200" r="90" stroke="white" strokeWidth="1" fill="none" />
          <circle cx="200" cy="200" r="140" stroke="white" strokeWidth="1" fill="none" />
          <circle cx="200" cy="200" r="190" stroke="white" strokeWidth="1" fill="none" />
        </svg>
      </div>

      {/* Tile grid */}
      <div style={{
        position: "relative",
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: "10%",
        padding: "14% 14%",
        height: "100%",
        placeItems: "center",
      }}>
        {tiles.map((t, i) => (
          <PartnerTile key={i} kind={t.kind} bg={t.bg} index={i} />
        ))}
      </div>

      {/* Floating caption pill */}
      <div style={{
        position: "absolute", bottom: -16, left: "50%", transform: "translateX(-50%)",
        background: "var(--ink)",
        color: "var(--cream)",
        borderRadius: 999,
        padding: "10px 18px",
        display: "inline-flex", alignItems: "center", gap: 10,
        fontFamily: "var(--font-mono)",
        fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase",
        boxShadow: "0 18px 40px -16px rgba(24,24,27,0.45)",
        whiteSpace: "nowrap",
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: "50%", background: "#22C55E",
          boxShadow: "0 0 0 3px rgba(34,197,94,0.3)",
          animation: "belPulse 2.4s ease-in-out infinite",
        }} />
        Certified partner of 24+ global tech vendors
      </div>

      {/* keyframes */}
      <style>{`
        @keyframes belFloat {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50%      { transform: translateY(-6px) rotate(0.6deg); }
        }
        @keyframes belPulse {
          0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.3); }
          50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
        }
        @keyframes belPopIn {
          0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
          70%  { opacity: 1; transform: scale(1.08) translateY(0); }
          100% { opacity: 1; transform: scale(1) translateY(0); }
        }
      `}</style>
    </div>
  );
};

const PartnerTile = ({ kind, bg, index }) => {
  // Per-tile animation: pop in staggered, then gentle float forever
  const delay = (index * 0.08).toFixed(2);
  return (
    <div style={{
      width: "78%",
      aspectRatio: "1 / 1",
      background: bg,
      borderRadius: 16,
      display: "grid", placeItems: "center",
      boxShadow: "0 14px 28px -14px rgba(140,55,10,0.35), inset 0 -2px 0 rgba(0,0,0,0.04)",
      animation: `belPopIn 0.7s cubic-bezier(.2,.9,.3,1.3) ${delay}s both, belFloat ${(4 + (index % 3) * 0.6).toFixed(2)}s ease-in-out ${(0.5 + index * 0.18).toFixed(2)}s infinite`,
    }}>
      <BrandMark kind={kind} />
    </div>
  );
};

const BrandMark = ({ kind }) => {
  const size = "58%";
  if (kind === "google") return (
    <svg viewBox="0 0 48 48" style={{ width: size, height: size }}>
      <path fill="#FFC107" d="M43.6 20H24v8h11.3c-1 5-5.3 8-11.3 8a12 12 0 1 1 7.9-21l5.6-5.6A20 20 0 1 0 44 24c0-1.4-.1-2.7-.4-4z"/>
      <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3 0 5.7 1.1 7.8 3l5.7-5.7A20 20 0 0 0 6.3 14.7z"/>
      <path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2c-1.8 1.3-4.2 2.4-7.2 2.4-5.9 0-10.3-3-11.3-8l-6.5 5A20 20 0 0 0 24 44z"/>
      <path fill="#1976D2" d="M43.6 20H24v8h11.3a12 12 0 0 1-4.1 5.6l6.2 5.2C41 35 44 30 44 24c0-1.4-.1-2.7-.4-4z"/>
    </svg>
  );
  if (kind === "microsoft") return (
    <svg viewBox="0 0 24 24" style={{ width: size, height: size }}>
      <rect x="1" y="1" width="10" height="10" fill="#F25022"/>
      <rect x="13" y="1" width="10" height="10" fill="#7FBA00"/>
      <rect x="1" y="13" width="10" height="10" fill="#00A4EF"/>
      <rect x="13" y="13" width="10" height="10" fill="#FFB900"/>
    </svg>
  );
  if (kind === "hp") return (
    <svg viewBox="0 0 100 100" style={{ width: size, height: size }}>
      <circle cx="50" cy="50" r="46" fill="none" stroke="#0096D6" strokeWidth="6"/>
      <text x="50" y="62" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="36" fontWeight="700" fill="#0096D6" fontStyle="italic">hp</text>
    </svg>
  );
  if (kind === "fortinet") return (
    <svg viewBox="0 0 36 36" style={{ width: size, height: size }}>
      <g fill="#E2231A">
        <rect x="2" y="6" width="6" height="6"/>
        <rect x="10" y="6" width="6" height="6"/>
        <rect x="18" y="6" width="6" height="6"/>
        <rect x="2" y="14" width="6" height="6"/>
        <rect x="10" y="14" width="6" height="6"/>
        <rect x="2" y="22" width="6" height="6"/>
        <rect x="26" y="6" width="6" height="6"/>
        <rect x="26" y="22" width="6" height="6"/>
      </g>
    </svg>
  );
  if (kind === "iot") return (
    <svg viewBox="0 0 48 48" style={{ width: size, height: size }}>
      <rect x="10" y="10" width="28" height="28" rx="3" fill="#1A1F36"/>
      <rect x="16" y="16" width="16" height="16" rx="1" fill="#1AA7EC"/>
      {[10,18,26,34].map(y => <rect key={y} x="6" y={y} width="4" height="2" fill="#1A1F36"/>)}
      {[10,18,26,34].map(y => <rect key={y} x="38" y={y} width="4" height="2" fill="#1A1F36"/>)}
      {[10,18,26,34].map(x => <rect key={x} x={x} y="6" width="2" height="4" fill="#1A1F36"/>)}
      {[10,18,26,34].map(x => <rect key={x} x={x} y="38" width="2" height="4" fill="#1A1F36"/>)}
      <text x="24" y="28" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="6" fontWeight="700" fill="white">IoT</text>
    </svg>
  );
  if (kind === "cloud") return (
    <svg viewBox="0 0 48 48" style={{ width: size, height: size }}>
      <path d="M14 32c-4 0-8-3-8-8s4-8 8-8c1-5 5-8 10-8s9 3 10 8c4 0 8 3 8 8s-4 8-8 8H14z"
            fill="#10B981" stroke="#10B981" strokeWidth="1"/>
      <path d="M20 22l-4 4 4 4M28 22l4 4-4 4" stroke="white" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  if (kind === "shield") return (
    <svg viewBox="0 0 48 48" style={{ width: size, height: size }}>
      <path d="M24 4l16 6v12c0 10-7 18-16 22-9-4-16-12-16-22V10l16-6z" fill="#3F3F46"/>
      <path d="M16 24l6 6 12-12" stroke="white" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  if (kind === "lock") return (
    <svg viewBox="0 0 48 48" style={{ width: size, height: size }}>
      <path d="M14 22V16a10 10 0 1 1 20 0v6" stroke="#3F3F46" strokeWidth="3.5" fill="none" strokeLinecap="round"/>
      <rect x="10" y="22" width="28" height="20" rx="3" fill="#3F3F46"/>
      <circle cx="24" cy="32" r="2.5" fill="white"/>
      <rect x="22.6" y="32" width="2.8" height="6" fill="white"/>
    </svg>
  );
  if (kind === "aws") return (
    <svg viewBox="0 0 100 60" style={{ width: "68%", height: "auto" }}>
      <text x="50" y="36" textAnchor="middle" fontFamily="Arial, sans-serif" fontSize="28" fontWeight="700" fill="white">aws</text>
      <path d="M22 46 C40 56, 60 56, 78 46" stroke="#FF9900" strokeWidth="4" fill="none" strokeLinecap="round"/>
      <path d="M76 42 L80 46 L76 50" stroke="#FF9900" strokeWidth="4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  return null;
};

// ============================================================
// Partner marquee
// ============================================================
const Partners = () => {
  // Customer logos — uniform-sized image tiles in a marquee strip
  const partners = [
    { name: "IGL",                src: "assets/customers/20.png" },
    { name: "IIT Delhi",          src: "assets/customers/21.png" },
    { name: "IAA",                src: "assets/customers/22.png" },
    { name: "FITT",               src: "assets/customers/23.png" },
    { name: "SMC",                src: "assets/customers/24.png" },
    { name: "SIS",                src: "assets/customers/25.png" },
    { name: "Fortis Hospitals",   src: "assets/customers/26.png" },
    { name: "Adayu",              src: "assets/customers/27.png" },
    { name: "MacMillon",          src: "assets/customers/28.png" },
    { name: "G2M",                src: "assets/customers/29.png" },
    { name: "Ravenbhel",          src: "assets/customers/30.png" },
    { name: "E3 HDMR",            src: "assets/customers/31.png" },
    { name: "SIB",                src: "assets/customers/32.png" },
    { name: "Onextel",            src: "assets/customers/33.png" },
    { name: "Haldiram's",         src: "assets/customers/34.png" },
    { name: "Dwarikesh",          src: "assets/customers/35.png" },
    { name: "ICICI Foundation",   src: "assets/customers/icici-foundation.png" },
    { name: "Hero MotoCorp",      src: "assets/customers/hero.png" },
    { name: "Paisabazaar",        src: "assets/customers/paisa-bazaar.png" },
  ];
  const tile = (p, i) => (
    <div key={i} className="partners-tile" aria-label={p.name}>
      <img src={p.src} alt={p.name} loading="lazy" />
    </div>
  );
  const list = [...partners, ...partners];
  return (
    <section className="section-tight" style={{ paddingBlock: "44px", borderBlock: "1px solid var(--line)" }}>
      <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-soft)" }}>
            Trusted by 100+ leading companies in India
          </span>
          <a href="#case-studies" style={{ fontSize: 13.5, color: "var(--ink)", borderBottom: "1px solid var(--line)", paddingBottom: 2 }}>
            See client outcomes →
          </a>
        </div>
        <div className="marquee">
          <div className="marquee__track">
            {list.map(tile)}
          </div>
        </div>
      </div>

      <style>{`
        .partners-tile {
          flex: 0 0 auto;
          display: inline-flex;
          align-items: center; justify-content: center;
          height: 72px;
          width: 160px;
          padding: 10px 16px;
          margin: 0 6px;
        }
        .partners-tile img {
          max-height: 100%;
          max-width: 100%;
          width: auto;
          height: auto;
          object-fit: contain;
          display: block;
          filter: saturate(0.92);
          transition: filter .25s ease, transform .25s ease;
        }
        .partners-tile:hover img { filter: saturate(1.05); transform: translateY(-1px); }
      `}</style>
    </section>
  );
};

Object.assign(window, { Hero, Partners });