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

// ===== Brand Mark =====
function GurooMark({ size = 32, color = "#273d4d", dot = "#b36541" }) {
  return (
    <svg width={size} height={size * (749.42 / 505.6)} viewBox="0 0 505.6 749.42" aria-label="Guroo">
      <circle fill={dot} cx="449.75" cy="55.85" r="55.85"></circle>
      <path fill={color} d="M231.42,36.1c-117.91,0-213.49,95.59-213.49,213.49s95.58,213.49,213.49,213.49c49.14,0,94.4-16.6,130.48-44.51,50.49-39.04,83-100.21,83-168.98,0-117.9-95.58-213.49-213.48-213.49h0ZM234.88,382.93c-71.73,0-129.88-58.15-129.88-129.88s58.15-129.88,129.88-129.88,129.88,58.15,129.88,129.88-58.15,129.88-129.88,129.88Z"></path>
      <path fill={color} d="M462.83,619.39c0,17.53-3.38,34.26-9.52,49.52-11.26,28.02-31.8,51.14-57.7,65.32-16.29,8.92-34.69,14.31-54.24,15.18-3.02.13-5.56-2.24-5.56-5.27v-69.96c0-2.85,2.26-5.14,5.11-5.27h.05c29.6-1.25,52.41-24.54,54.64-50.14.24-2.72.24-5.46,0-8.21-2.22-25.11-24.91-46.89-53.33-48.39-2.13-.12-4.28-.12-6.47,0H72.75c-10.93-.48-32.98-3.8-51.12-21.9C5.55,524.21,1.24,505.22.04,495.16c-.37-3.14,2.07-5.9,5.24-5.9h330.53c21.62,0,41.98,5.54,59.8,15.3,23.49,12.86,42.56,33.06,54.31,57.61,8.27,17.27,12.91,36.69,12.91,57.22h0Z"></path>
    </svg>
  );
}

function MtgosMark({ size = 28 }) {
  return (
    <svg width={size} height={size * (856.55 / 1000)} viewBox="0 0 1000 856.55">
      <path fill="#355066" d="M43.99,0h75.03C202.88,0,270.96,68.09,270.96,151.95v660.61c0,24.28-19.71,43.99-43.99,43.99H43.99C19.71,856.55,0,836.84,0,812.56V43.99C0,19.71,19.71,0,43.99,0Z"></path>
      <rect fill="#567b9e" x="364.52" y="0" width="270.96" height="856.55" rx="135.48" ry="135.48"></rect>
      <rect fill="#9eb7d2" x="729.04" y="0" width="270.96" height="541.59" rx="135.48" ry="135.48"></rect>
      <circle fill="#b36541" cx="864.52" cy="722.57" r="133.98"></circle>
    </svg>
  );
}

// Tiny glyph for a service card / industry tile
function Glyph({ kind, size = 20 }) {
  const s = size;
  const stroke = "currentColor";
  const sw = 1.6;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "saas": return <svg {...common}><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 10h18"/><circle cx="6" cy="7" r="0.6"/><path d="M9 21h6"/><path d="M12 18v3"/></svg>;
    case "cloud": return <svg {...common}><path d="M7 18a4 4 0 1 1 .8-7.92 5 5 0 0 1 9.7 1.42A3.5 3.5 0 0 1 17.5 18Z"/></svg>;
    case "strategy": return <svg {...common}><path d="M3 21V8l9-5 9 5v13"/><path d="M9 21V12h6v9"/></svg>;
    case "team": return <svg {...common}><circle cx="9" cy="8" r="3"/><circle cx="17" cy="10" r="2"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M14 20a4 4 0 0 1 7 0"/></svg>;
    case "ai": return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>;
    case "shield": return <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6Z"/><path d="m9 12 2 2 4-4"/></svg>;
    case "mortgage": return <svg {...common}><path d="M3 11 12 4l9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-5h4v5"/></svg>;
    case "fintech": return <svg {...common}><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M3 10h18"/><path d="M7 15h4"/></svg>;
    case "health": return <svg {...common}><path d="M12 21s-7-4.5-7-11a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 6.5-7 11-7 11Z"/></svg>;
    case "energy": return <svg {...common}><path d="m13 3-9 11h6l-1 7 9-11h-6Z"/></svg>;
    case "logistics": return <svg {...common}><path d="M3 7h13v10H3z"/><path d="M16 10h4l2 3v4h-6"/><circle cx="7" cy="19" r="1.6"/><circle cx="18" cy="19" r="1.6"/></svg>;
    case "ops": return <svg {...common}><circle cx="12" cy="12" r="3.5"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>;
    case "arrow": return <svg {...common}><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>;
    default: return null;
  }
}

// ===== Top Nav =====
function Nav() {
  return (
    <header className="nav">
      <div className="shell nav-inner">
        <a className="nav-brand" href="#top">
          <span className="nav-brand-mark"><GurooMark size={26} color="#1f1d1b"/></span>
          <span className="nav-brand-word">Guroo<span className="nav-brand-dot"/></span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a className="nav-link" href="#services">Services</a>
          <a className="nav-link" href="#mtgos">Products</a>
          <a className="nav-link" href="#process">Process</a>
          <a className="nav-link" href="#industries">Industries</a>
          <a className="nav-link" href="#contact">Contact</a>
          <a className="btn btn-primary nav-cta" href="#contact">
            Book intro call
            <span className="btn-arrow"><Glyph kind="arrow" size={16}/></span>
          </a>
        </nav>
      </div>
    </header>
  );
}

// ===== Hero =====
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true"/>
      <div className="shell hero-inner">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow"><span className="eyebrow">Guroo Technology Services</span></div>
            <h1 className="display-xl hero-title">
              Enterprise software,<br/>
              built with <span className="serif-accent">care</span>.
            </h1>
            <p className="lede">
              Guroo is a technology studio for serious operators. We design, build, and run
              enterprise-grade SaaS platforms — and advise the teams behind them — with the
              calm rigor that compliance-heavy industries demand.
            </p>
            <div className="hero-cta-row">
              <a className="btn btn-primary" href="#contact">
                Book a discovery call
                <span className="btn-arrow"><Glyph kind="arrow" size={16}/></span>
              </a>
              <a className="btn btn-secondary" href="#mtgos">See our work</a>
            </div>
            <div className="hero-meta">
              <div className="hero-meta-item">
                <div className="hero-meta-num">12+</div>
                <div className="hero-meta-label">Platforms shipped</div>
              </div>
              <div className="hero-meta-item">
                <div className="hero-meta-num">SOC&nbsp;2</div>
                <div className="hero-meta-label">Compliance-ready by default</div>
              </div>
            </div>
          </div>
          <HeroArt/>
        </div>
      </div>
    </section>
  );
}

function HeroArt() {
  return (
    <div className="hero-art" aria-hidden="true">
      <div className="hero-art-grid"/>
      <svg viewBox="0 0 520 540" style={{ position:"absolute", inset:0, width:"100%", height:"100%" }}>
        {/* stacked geometric composition — echoes MtgOS lettermark */}
        <defs>
          <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#567b9e"/>
            <stop offset="1" stopColor="#355066"/>
          </linearGradient>
        </defs>
        <rect className="bar bar-1" x="60"  y="120" width="76"  height="320" rx="38" fill="url(#g1)"/>
        <rect className="bar bar-2" x="160" y="80"  width="76"  height="380" rx="38" fill="#273d4d"/>
        <rect className="bar bar-3" x="260" y="160" width="76"  height="240" rx="38" fill="#9eb7d2"/>
        <rect className="bar bar-4" x="360" y="120" width="76"  height="200" rx="38" fill="#44647f"/>
        <circle className="bar bar-5" cx="398" cy="380" r="38" fill="#b36541"/>
        {/* tiny labels */}
        <g fontFamily="JUST Sans, system-ui" fontSize="11" fill="#655f57" opacity="0.7">
          <text x="60"  y="475">01</text>
          <text x="160" y="475">02</text>
          <text x="260" y="475">03</text>
          <text x="360" y="475">04</text>
        </g>
        <g fontFamily="JUST Sans, system-ui" fontSize="10" fill="#655f57" opacity="0.55" letterSpacing="2">
          <text x="60" y="100">SYSTEM · 2025.04</text>
        </g>
      </svg>
    </div>
  );
}

// ===== Proof strip =====
function Proof() {
  return (
    <section className="proof-strip">
      <div className="shell proof-row">
        <div className="proof-label">Trusted by operators in</div>
        <div className="proof-logos">
          <span className="proof-logo">Mortgage</span>
          <span className="proof-logo">Fintech</span>
          <span className="proof-logo">Healthcare</span>
          <span className="proof-logo">Logistics</span>
          <span className="proof-logo">Energy</span>
          <span className="proof-logo">Public sector</span>
        </div>
      </div>
    </section>
  );
}

window.Guroo = Object.assign(window.Guroo || {}, { Nav, Hero, HeroArt, Proof, GurooMark, MtgosMark, Glyph });