/* Header + Hero — 4-slide client demo carousel */
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', on, { passive: true });
    on();
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <div className="container-wide site-header-inner">
        <a href="#" className="site-brand">
          <Brandmark size={32}/>
          <div className="site-brand-text">
            <div className="site-brand-name">Booster Block</div>
            <div className="site-brand-sub">AI + WEB4 STUDIO</div>
          </div>
        </a>
        <nav className="site-nav">
          <a href="#" className="active">Home</a>
          <a href="#solutions">Solutions</a>
          <a href="#ecosystem">Ecosystem</a>
          <a href="#work">Work</a>
          <a href="#process">Process</a>
          <a href="Boost TV.html" className="nav-live">
            <span className="nav-live-dot"/>Live
          </a>
          <a href="#contact">Contact</a>
        </nav>
        <div className="site-header-actions">
          <a href="#contact" className="btn btn-primary">
            Let's Build <IconArrowRight size={14}/>
          </a>
        </div>
      </div>
    </header>
  );
};

const Hero = () => (
  <section className="hero">
    <div className="hero-bg">
      <div className="glow-orb hero-orb-1"/>
      <div className="glow-orb hero-orb-2"/>
      <div className="glow-orb hero-orb-3"/>
      <div className="hero-grid"></div>
      <svg className="hero-particles" viewBox="0 0 1440 800" preserveAspectRatio="none">
        {Array.from({length: 38}).map((_, i) => {
          const cx = (i * 263) % 1440;
          const cy = (i * 179 + 50) % 720;
          const r = (i % 5 === 0) ? 1.4 : 0.7;
          return <circle key={i} cx={cx} cy={cy} r={r} fill="#5eead4" opacity={0.18 + ((i%4)*0.08)}/>;
        })}
      </svg>
    </div>
    <div className="container-wide">
      <HeroCarousel/>
    </div>
  </section>
);

/* Service constellation visual */
const SERVICES = [
  { icon: <IconBrain size={18}/>,  label: "AI Products",       sub: "agents · LLMs · automation", pos: 'tl', accent: '#22d3ee' },
  { icon: <IconCpu size={18}/>,    label: "Web4 Platforms",    sub: "ecosystems · automation",    pos: 'tr', accent: '#5eead4' },
  { icon: <IconNetwork size={18}/>,label: "Blockchain",        sub: "smart contracts · DeFi",     pos: 'ml', accent: '#7c5cff' },
  { icon: <IconPlay size={18}/>,   label: "Interactive Games", sub: "real-time · multiplayer",    pos: 'mr', accent: '#fbbf24' },
  { icon: <IconLayers size={18}/>, label: "Apps / SaaS",       sub: "iOS · Android · web",        pos: 'bl', accent: '#22d3ee' },
  { icon: <IconCloud size={18}/>,  label: "Infrastructure",    sub: "cloud · DevOps · scale",     pos: 'br', accent: '#5eead4' },
];

const ServicesConstellation = () => (
  <div className="svc-stage">
    <svg className="svc-svg" viewBox="0 0 500 500" preserveAspectRatio="none">
      <defs>
        <radialGradient id="svc-core" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="#22d3ee" stopOpacity="0.45"/>
          <stop offset="0.5" stopColor="#5eead4" stopOpacity="0.15"/>
          <stop offset="1" stopColor="#22d3ee" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id="svc-line" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#5eead4" stopOpacity="0.05"/>
          <stop offset="0.5" stopColor="#22d3ee" stopOpacity="0.55"/>
          <stop offset="1" stopColor="#5eead4" stopOpacity="0.05"/>
        </linearGradient>
      </defs>
      <circle cx="250" cy="250" r="180" fill="url(#svc-core)"/>
      <circle cx="250" cy="250" r="110" fill="none" stroke="rgba(34, 211, 238, 0.25)" strokeDasharray="2 4"/>
      <circle cx="250" cy="250" r="64" fill="none" stroke="rgba(34, 211, 238, 0.4)"/>
      {[[90, 90], [410, 90], [60, 250], [440, 250], [90, 410], [410, 410]].map(([x, y], i) => (
        <line key={i} x1="250" y1="250" x2={x} y2={y} stroke="url(#svc-line)" strokeWidth="1.2"/>
      ))}
      {[[170, 170], [330, 170], [155, 250], [345, 250], [170, 330], [330, 330]].map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r="2.5" fill="#5eead4">
          <animate attributeName="opacity" values="0.2;1;0.2" dur="2.4s" begin={`${i * 0.35}s`} repeatCount="indefinite"/>
        </circle>
      ))}
    </svg>
    <div className="svc-core">
      <Brandmark size={44}/>
      <div className="svc-core-tag">BOOSTER X</div>
      <div className="svc-core-sub">Execution Layer</div>
    </div>
    {SERVICES.map((s, i) => (
      <div key={i} className={"svc-tile svc-" + s.pos} style={{ '--c': s.accent }}>
        <div className="svc-tile-icon">{s.icon}</div>
        <div className="svc-tile-text">
          <div className="svc-tile-label">{s.label}</div>
          <div className="svc-tile-sub">{s.sub}</div>
        </div>
      </div>
    ))}
  </div>
);

const HeroCarousel = () => {
  const slides = [
    { id: 'overview', label: 'Overview' },
    { id: 'admin',    label: 'Admin Panel' },
    { id: 'mobile',   label: 'Mobile App' },
    { id: 'gaming',   label: 'Gaming' },
  ];
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      setActive(i => (i + 1) % slides.length);
    }, 9000);
    return () => clearInterval(id);
  }, [paused, slides.length]);

  return (
    <div
      className="hero-carousel"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="hero-carousel-track" style={{transform: `translateX(-${active * 100}%)`}}>

        {/* ===== Slide 01 — Overview ===== */}
        <section className="hero-slide hero-slide--split">
          <div className="hero-copy">
            <div className="hero-eyebrows">
              <span className="pill"><span className="pill-dot"/>AI + WEB4 STUDIO</span>
            </div>
            <h1 className="hero-headline h-display">
              If you can<br/>
              <span className="gradient-text">think it,</span><br/>
              we can <span className="gradient-text">build it.</span>
            </h1>
            <p className="hero-sub">
              We design and build custom software, admin panels, mobile apps, SaaS platforms, AI products, Web4 infrastructure, blockchain systems, games and scalable digital experiences for your business and your clients.
            </p>
            <div className="hero-ctas">
              <a href="#contact" className="btn btn-primary">Start a Project <IconArrowRight size={14}/></a>
              <a href="#work" className="btn btn-ghost">View Our Work <IconArrowUpRight size={14}/></a>
            </div>
            <div className="hero-stats">
              <div><strong>50+</strong> <span>Projects Delivered</span></div>
              <div className="hero-stats-sep"/>
              <div><strong>30+</strong> <span>Clients &amp; Partners</span></div>
              <div className="hero-stats-sep"/>
              <div><strong>99.98%</strong> <span>System Uptime</span></div>
            </div>
          </div>
          <div className="hero-visual">
            <ServicesConstellation/>
          </div>
        </section>

        {/* ===== Slide 02 — Admin Panel Demo ===== */}
        <section className="hero-slide hero-slide--split">
          <div className="hero-copy">
            <div className="hero-eyebrows">
              <span className="pill"><span className="pill-dot"/>CUSTOM ADMIN PANEL</span>
            </div>
            <h1 className="hero-headline h-display">
              One <span className="gradient-text">control panel</span><br/>
              for every system you ship.
            </h1>
            <p className="hero-sub">
              Manage users, clients, products, payments, AI agents, blockchain modules, analytics and infrastructure from a custom dashboard built for your business.
            </p>
            <ul className="hero-bullets">
              <li><IconCheck size={14}/> Real-time business analytics</li>
              <li><IconCheck size={14}/> User, client and module management</li>
              <li><IconCheck size={14}/> Payments, reports and operations control</li>
              <li><IconCheck size={14}/> AI-assisted alerts and workflows</li>
            </ul>
            <div className="hero-ctas">
              <a href="#process" className="btn btn-primary">Explore the Panel <IconArrowRight size={14}/></a>
            </div>
          </div>
          <div className="hero-visual hero-visual--monitor">
            <div className="mac-wrap">
              <div className="mac">
                <div className="mac-lid">
                  <div className="mac-notch"/>
                  <div className="mac-screen">
                    <Dashboard/>
                  </div>
                  <div className="mac-brand"/>
                </div>
                <div className="mac-base"/>
              </div>
            </div>
            <div className="hero-chip chip-mon-1">
              <span className="hero-chip-dot ok"/>
              <div>
                <div className="hero-chip-label">Live Deployment</div>
                <div className="hero-chip-val">nova-core · us-east-1</div>
              </div>
            </div>
            <div className="hero-chip chip-mon-2">
              <IconSparkle size={14}/>
              <div>
                <div className="hero-chip-label">AI Agent</div>
                <div className="hero-chip-val">12,481 tasks executed</div>
              </div>
            </div>
          </div>
        </section>

        {/* ===== Slide 03 — Mobile App Demo ===== */}
        <section className="hero-slide hero-slide--split">
          <div className="hero-copy">
            <div className="hero-eyebrows">
              <span className="pill"><span className="pill-dot"/>MOBILE APPS</span>
            </div>
            <h1 className="hero-headline h-display">
              Run your business<br/>
              from <span className="gradient-text">your pocket.</span>
            </h1>
            <p className="hero-sub">
              We build PWA, iOS and Android apps connected to your dashboards, clients, workflows, AI assistants and business systems.
            </p>
            <ul className="hero-bullets">
              <li><IconCheck size={14}/> PWA, Android and iOS apps</li>
              <li><IconCheck size={14}/> Client portals and internal apps</li>
              <li><IconCheck size={14}/> Push notifications and secure access</li>
              <li><IconCheck size={14}/> Connected to your admin panel</li>
            </ul>
            <div className="hero-ctas">
              <a href="#" className="btn btn-primary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.08zM12 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
                Preview iOS App
              </a>
              <a href="#" className="btn btn-ghost">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 1.27 14.5 12 3.6 22.73a1.95 1.95 0 0 1-.6-1.4V2.67c0-.55.22-1.05.6-1.4zM16.7 14.2l2.4 1.38c.95.54.95 1.9 0 2.44l-2.85 1.65L13.7 17l3-2.8zm0-4.4-3-2.8 2.55-2.67L19.1 5.98c.95.54.95 1.9 0 2.44L16.7 9.8zM4.8.74 14.5 9.5l-3 2.5z" /></svg>
                Preview Android App
              </a>
            </div>
          </div>
          <div className="hero-visual hero-visual--phone">
            <div className="phone-wrap phone-wrap--centered">
              <div className="phone-body">
                <div className="phone-notch"/>
                <div className="phone-screen">
                  <MobileDashboard/>
                </div>
              </div>
            </div>
            <div className="hero-chip chip-mob-1">
              <IconBolt size={14}/>
              <div>
                <div className="hero-chip-label">Push Notification</div>
                <div className="hero-chip-val">+18 updates this week</div>
              </div>
            </div>
            <div className="hero-chip chip-mob-2">
              <span className="hero-chip-dot ok"/>
              <div>
                <div className="hero-chip-label">iOS · Android · PWA</div>
                <div className="hero-chip-val">native + react native</div>
              </div>
            </div>
          </div>
        </section>

        {/* ===== Slide 04 — Gaming ===== */}
        <section className="hero-slide hero-slide--split">
          <div className="hero-copy">
            <div className="hero-eyebrows">
              <span className="pill"><span className="pill-dot"/>GAMING / INTERACTIVE EXPERIENCES</span>
            </div>
            <h1 className="hero-headline h-display">
              Build games<br/>
              people <span className="gradient-text">remember.</span>
            </h1>
            <p className="hero-sub">
              We design and build interactive games, gamified platforms, multiplayer experiences, reward systems and real-time digital products for brands, communities and Web4 ecosystems.
            </p>
            <ul className="hero-bullets">
              <li><IconCheck size={14}/> Interactive games and gamified platforms</li>
              <li><IconCheck size={14}/> Multiplayer and real-time experiences</li>
              <li><IconCheck size={14}/> Rewards, levels and achievement systems</li>
              <li><IconCheck size={14}/> Web4 gaming and digital asset integrations</li>
            </ul>
            <div className="hero-ctas">
              <a href="games.html" className="btn btn-primary">Explore Gaming Lab <IconArrowRight size={14}/></a>
              <a href="games/crypto-soccer.html" className="btn btn-ghost" target="_blank" rel="noopener">Play Demo <IconArrowUpRight size={14}/></a>
            </div>
          </div>
          <div className="hero-visual hero-visual--game">
            <CryptoSoccer/>
          </div>
        </section>

      </div>

      {/* Controls */}
      <button
        className="hero-arrow hero-arrow-prev"
        onClick={() => setActive(i => (i - 1 + slides.length) % slides.length)}
        aria-label="Previous"
      >
        <IconArrowRight size={16} style={{transform: 'rotate(180deg)'}}/>
      </button>
      <button
        className="hero-arrow hero-arrow-next"
        onClick={() => setActive(i => (i + 1) % slides.length)}
        aria-label="Next"
      >
        <IconArrowRight size={16}/>
      </button>

      {/* Indicator */}
      <div className="hero-indicator">
        {slides.map((s, i) => (
          <button
            key={s.id}
            className={"hero-dot" + (i === active ? " active" : "")}
            onClick={() => setActive(i)}
            aria-label={`Slide ${i+1}: ${s.label}`}
          >
            <span className="hero-dot-index">{String(i + 1).padStart(2, '0')}</span>
            <span className="hero-dot-label">{s.label}</span>
            <span className="hero-dot-fill" style={{
              animationPlayState: (i === active && !paused) ? 'running' : 'paused',
              transform: i === active ? undefined : 'scaleX(0)',
            }}/>
          </button>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { Header, Hero, HeroCarousel, ServicesConstellation });