// Saola Labs Landing — Sections part 1 (Header, Hero, LogoCloud, Services)
const { useState, useEffect, useMemo } = React;
const D = window.SAOLA_DATA;

function Brand() {
  return (
    <a href="#top" className="brand" aria-label="Saola Labs home">
      <span className="brand__mark"><span>S</span></span>
      <span>Saola Labs</span>
    </a>
  );
}

function Header() {
  const [open, setOpen] = useState(false);
  useEffect(() => { if (open) document.body.style.overflow = "hidden"; else document.body.style.overflow = ""; }, [open]);
  return (
    <header className="header" id="top">
      <div className="container header__inner">
        <Brand />
        <nav className="nav">
          {D.nav.map(n => <a key={n.label} href={n.href} className="nav__link">{n.label}</a>)}
        </nav>
        <div className="header__actions">
          <a href="#quote" className="btn btn--ghost btn--sm">Talk to us</a>
          <a href="#quote" className="btn btn--primary btn--sm">Request Free Quote <span className="arrow">→</span></a>
          <button className="menu-btn" aria-label="Menu" onClick={() => setOpen(!open)}><span></span></button>
        </div>
      </div>
      {open && (
        <div className="mobile-menu">
          {D.nav.map(n => <a key={n.label} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>)}
          <a href="#quote" className="btn btn--primary" onClick={() => setOpen(false)}>Request Free Quote</a>
        </div>
      )}
    </header>
  );
}

function Hero() {
  const tiles = [
    { cat: "AI", name: "Node Search", meta: "Decentralized AI", accent: true },
    { cat: "DeFi", name: "Singularity", meta: "ZK · institutional" },
    { cat: "Healthcare", name: "BeGood", meta: "5.4M patients" },
    { cat: "Travel", name: "GoHub", meta: "190+ countries" },
    { cat: "RWA", name: "Tayo", meta: "ERC-1155 · BSC" },
    { cat: "Treasury", name: "Flow Finance", meta: "Multi-chain ops" },
    { cat: "GIS", name: "Esri", meta: "20,000 km²" },
    { cat: "Commerce", name: "BidUp", meta: "Live auctions" },
    { cat: "Wallet", name: "UKISS", meta: "Self-custody" },
    { cat: "DeFi", name: "VeBank", meta: "VeChain lending" },
  ];
  return (
    <section className="hero">
      <div className="container">
        <div className="hero__eyebrow-row">
          <span className="eyebrow"><span className="dot"></span>Saola Labs · Singapore + Vietnam</span>
          <span className="eyebrow muted">Est. 2018 · 45 engineers · 65+ deliveries</span>
        </div>
        <h1 className="display">
          Build serious software with Vietnam's <span className="accent">top product engineering</span> team.
        </h1>
        <p className="lede hero__lede">
          Saola helps startups, enterprises, and Web3 teams ship production-grade software across AI, fintech, blockchain, healthcare, commerce, and enterprise systems.
        </p>
        <div className="hero__cta-row">
          <a className="btn btn--primary btn--lg" href="#quote">Request Free Quote <span className="arrow">→</span></a>
          <a className="btn btn--secondary btn--lg" href="#portfolio">View Portfolio</a>
        </div>

        <div className="hero__proof">
          {D.metrics.map((m, i) => (
            <div className="hero__proof-item" key={i}>
              <div className="num">{m.num}</div>
              <div className="lbl">{m.lbl}</div>
            </div>
          ))}
        </div>

        <div className="hero__diagram" aria-hidden="true">
          <div className="hero__diagram-inner">
            {tiles.map((t, i) => (
              <div className={`tile ${t.accent ? "tile--accent" : ""}`} key={i}>
                <div className="tile__cat">{t.cat}</div>
                <div>
                  <div className="tile__name">{t.name}</div>
                  <div className="tile__meta">{t.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function LogoCloud() {
  return (
    <section className="logo-cloud" aria-label="Trusted by">
      <div className="container">
        <div className="logo-cloud__title">Trusted by teams building what's next</div>
        <div className="logo-cloud__grid">
          {D.trustLogos.map(name => (
            <div className="logo-cloud__item" key={name}>{name}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow"><span className="dot"></span>Services</span>
          <h2 className="h2">Five disciplines. One delivery team.</h2>
          <p className="lede">From AI-native products to regulated enterprise systems, we ship across the stack with senior engineers who own the outcome — not just the ticket.</p>
        </div>

        <div className="services">
          {D.services.map((s, i) => {
            const open = i === openIdx;
            return (
              <div key={s.n} className={`service ${open ? "is-open" : ""}`}>
                <div className="service__head" onClick={() => setOpenIdx(open ? -1 : i)}>
                  <div className="service__num">{s.n}</div>
                  <div className="service__title">{s.title}</div>
                  <div className="service__chev" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                    </svg>
                  </div>
                </div>
                {open && (
                  <div className="service__body">
                    <div></div>
                    <p className="service__desc">{s.desc}</p>
                    <ul className="service__caps">
                      {s.caps.map(c => <li key={c}>{c}</li>)}
                    </ul>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, LogoCloud, Services, Brand });