/* global React, Icons, Constellation, GlowOrbs, Dashboard, OrionData */
const { useState: useS, useEffect: useE } = React;

const ACCENT = {
  primary: { text: 'text-violet-300', dot: '#8B5CF6', ring: 'rgba(139,92,246,0.4)', soft: 'rgba(139,92,246,0.12)' },
  cyan: { text: 'text-cyan', dot: '#22D3EE', ring: 'rgba(34,211,238,0.4)', soft: 'rgba(34,211,238,0.12)' },
  mint: { text: 'text-mint', dot: '#34D399', ring: 'rgba(52,211,153,0.4)', soft: 'rgba(52,211,153,0.12)' },
};

// Orion constellation mark
function Logo({ size = 30 }) {
  return <img src="/icons/icon-512.png" width={size} height={size} alt="Orion Technologies" style={{ display: 'block' }} />;
}

function Wordmark() {
  return (
    <a href="#top" className="flex items-center gap-2.5 group">
      <Logo />
      <span className="font-display font-semibold text-heading text-[17px] tracking-tight">
        Orion<span className="text-body-dim font-normal"> Technologies</span>
      </span>
    </a>
  );
}

function Nav({ onCta }) {
  const [scrolled, setScrolled] = useS(false);
  const [open, setOpen] = useS(false);
  useE(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  useE(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]);

  return (
    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${scrolled ? 'py-2.5' : 'py-4'}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className={`flex items-center gap-4 rounded-2xl px-4 sm:px-5 h-14 transition-all duration-300 ${scrolled ? 'glass-strong shadow-[0_8px_40px_-12px_rgba(0,0,0,0.6)]' : ''}`}>
          <Wordmark />
          <nav className="hidden lg:flex items-center gap-1 ml-4">
            {OrionData.NAV_LINKS.map(l => (
              <a key={l.href} href={l.href} className="px-3.5 py-2 rounded-lg text-[14px] text-body hover:text-heading hover:bg-white/5 transition-colors">{l.label}</a>
            ))}
          </nav>
          <div className="ml-auto flex items-center gap-2.5">
            <button onClick={onCta} className="hidden sm:inline-flex items-center gap-1.5 btn-primary text-white text-[14px] font-medium px-4 py-2.5 rounded-xl">
              Book a call <Icons.Arrow size={15} />
            </button>
            <button onClick={() => setOpen(true)} className="lg:hidden w-10 h-10 grid place-items-center rounded-xl btn-ghost text-heading" aria-label="Open menu">
              <Icons.Menu size={20} />
            </button>
          </div>
        </div>
      </div>

      {/* mobile sheet */}
      <div className={`lg:hidden fixed inset-0 z-50 transition ${open ? 'visible' : 'invisible'}`}>
        <div className={`absolute inset-0 bg-ink/80 backdrop-blur-sm transition-opacity ${open ? 'opacity-100' : 'opacity-0'}`} onClick={() => setOpen(false)} />
        <div className={`absolute right-0 top-0 bottom-0 w-[82%] max-w-sm glass-strong p-6 flex flex-col transition-transform duration-300 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
          <div className="flex items-center justify-between mb-8">
            <Wordmark />
            <button onClick={() => setOpen(false)} className="w-10 h-10 grid place-items-center rounded-xl btn-ghost text-heading" aria-label="Close menu"><Icons.X size={20} /></button>
          </div>
          <nav className="flex flex-col gap-1">
            {OrionData.NAV_LINKS.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="px-4 py-3.5 rounded-xl text-lg text-body hover:text-heading hover:bg-white/5 transition-colors flex items-center justify-between group">
                {l.label} <Icons.ArrowUpRight size={18} className="opacity-0 group-hover:opacity-100 transition-opacity" />
              </a>
            ))}
          </nav>
          <button onClick={() => { setOpen(false); onCta(); }} className="mt-auto btn-primary text-white font-medium px-4 py-3.5 rounded-xl flex items-center justify-center gap-2">
            Book a call <Icons.Arrow size={17} />
          </button>
        </div>
      </div>
    </header>
  );
}

function TrustLine() {
  const items = [['Shield', 'US-registered · New Mexico LLC'], ['Bolt', 'Founder-led senior team'], ['Clock', 'Ships in weeks, not quarters']];
  return (
    <div className="flex flex-wrap items-center gap-x-6 gap-y-3 text-[13px] text-body">
      {items.map(([ic, t], i) => (
        <div key={t} className="flex items-center gap-2">
          {React.createElement(Icons[ic], { size: 15, className: 'text-violet-300' })}
          <span>{t}</span>
        </div>
      ))}
    </div>
  );
}

function Hero({ onCta }) {
  return (
    <section id="top" className="relative pt-32 sm:pt-40 pb-20 sm:pb-28 overflow-hidden">
      <div className="absolute inset-0 -z-10">
        <Constellation />
        <GlowOrbs />
        <div className="absolute inset-0" style={{ background: 'radial-gradient(120% 80% at 50% -10%, transparent 40%, #070912 78%)' }} />
        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-ink" />
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="grid lg:grid-cols-[1.05fr_0.95fr] gap-12 lg:gap-8 items-center">
          {/* copy */}
          <div className="reveal">
            <a href="#work" className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full glass text-[12.5px] text-body mb-7 hover:text-heading transition-colors">
              <span className="w-1.5 h-1.5 rounded-full bg-mint animate-pulse-dot" />
              <span className="font-mono">30+ AI products shipped</span>
              <span className="text-body-dim">·</span> Selected work <Icons.ArrowUpRight size={13} />
            </a>
            <h1 className="font-display font-bold text-heading leading-[1.04] tracking-tight text-[clamp(2.5rem,6vw,4.25rem)]">
              We build AI products <br className="hidden sm:block" />that <span className="text-gradient">actually ship.</span>
            </h1>
            <p className="mt-6 text-[17px] sm:text-[18px] leading-relaxed text-body max-w-xl">
              Orion is a founder-led AI engineering studio. We run the full arc — strategy, build, operate —
              for startups and teams that want real AI products without standing up an in-house AI team.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <button onClick={onCta} className="btn-primary text-white font-medium px-6 py-3.5 rounded-xl flex items-center gap-2 text-[15px]">
                Book a call <Icons.Arrow size={17} />
              </button>
              <a href="#product" className="btn-ghost text-heading font-medium px-6 py-3.5 rounded-xl flex items-center gap-2 text-[15px]">
                See the product <Icons.ArrowUpRight size={16} />
              </a>
            </div>
            <div className="mt-9"><TrustLine /></div>
          </div>

          {/* tilted dashboard frame */}
          <div className="reveal relative" style={{ transitionDelay: '120ms' }}>
            <div className="relative" style={{ perspective: '1600px' }}>
              <div className="relative rounded-2xl p-2 glass-strong shadow-[0_40px_120px_-30px_rgba(99,102,241,0.45)]"
                style={{ transform: 'rotateY(-13deg) rotateX(6deg) rotate(1deg)', transformStyle: 'preserve-3d' }}>
                <div className="absolute -inset-6 -z-10 rounded-3xl blur-2xl opacity-60" style={{ background: 'radial-gradient(circle at 60% 40%, rgba(99,102,241,0.5), transparent 70%)' }} />
                <div className="h-[300px] sm:h-[360px] lg:h-[400px]">
                  <Dashboard live />
                </div>
              </div>
              {/* floating chips */}
              <div className="hidden sm:flex absolute -left-6 top-12 items-center gap-2 px-3 py-2 rounded-xl glass-strong shadow-xl" style={{ transform: 'translateZ(40px)' }}>
                <span className="w-7 h-7 rounded-lg grid place-items-center bg-mint/15"><Icons.TrendUp size={15} className="text-mint" /></span>
                <div><div className="text-[11px] text-heading font-semibold leading-none">+12.4%</div><div className="text-[9px] text-body-dim font-mono mt-0.5">throughput</div></div>
              </div>
              <div className="hidden sm:flex absolute -right-4 bottom-16 items-center gap-2 px-3 py-2 rounded-xl glass-strong shadow-xl">
                <span className="w-7 h-7 rounded-lg grid place-items-center bg-violet-500/15"><Icons.Bot size={15} className="text-violet-300" /></span>
                <div><div className="text-[11px] text-heading font-semibold leading-none">12 agents</div><div className="text-[9px] text-body-dim font-mono mt-0.5">in production</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function LogoCloud() {
  const items = OrionData.TECH;
  const row = [...items, ...items];
  return (
    <section className="py-10 border-y border-white/5 bg-white/[0.012]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <p className="text-center text-[12px] font-mono uppercase tracking-[0.2em] text-body-dim mb-7">The stack we build production AI on</p>
        <div className="marquee relative overflow-hidden" style={{ maskImage: 'linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)', WebkitMaskImage: 'linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)' }}>
          <div className="marquee-track gap-3">
            {row.map((t, i) => (
              <div key={i} className="flex items-center gap-2.5 px-5 py-3 rounded-xl glass shrink-0 text-body hover:text-heading transition-colors">
                {React.createElement(Icons[t.icon], { size: 18, className: 'text-violet-300' })}
                <span className="font-display font-medium text-[15px] whitespace-nowrap">{t.name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHead({ kicker, title, sub, center }) {
  return (
    <div className={`reveal max-w-2xl ${center ? 'mx-auto text-center' : ''}`}>
      <div className={`flex items-center gap-2 mb-4 ${center ? 'justify-center' : ''}`}>
        <span className="w-1.5 h-1.5 rounded-full bg-gradient-to-r from-violet-400 to-cyan-400" />
        <span className="text-[12px] font-mono uppercase tracking-[0.2em] text-violet-300">{kicker}</span>
      </div>
      <h2 className="font-display font-bold text-heading text-[clamp(1.9rem,4vw,2.75rem)] leading-[1.08] tracking-tight">{title}</h2>
      {sub && <p className="mt-4 text-[16px] sm:text-[17px] leading-relaxed text-body">{sub}</p>}
    </div>
  );
}

function Services() {
  const s = OrionData.SERVICES;
  return (
    <section id="services" className="py-20 sm:py-28 relative">
      <GlowOrbs className="opacity-40" />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 relative">
        <SectionHead kicker="Services" title="Four things we do — end to end." sub="From the first strategy session to agents running in production. One senior team across the whole arc." />
        <div className="mt-12 grid sm:grid-cols-2 gap-4">
          {s.map((svc, i) => {
            const a = ACCENT[svc.accent];
            return (
              <div key={svc.title} className="reveal group relative rounded-2xl glass card-lift overflow-hidden p-6 sm:p-7 hover:border-white/12"
                style={{ transitionDelay: `${i * 70}ms` }}>
                <div className="absolute -top-24 -right-24 w-56 h-56 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" style={{ background: `radial-gradient(circle, ${a.soft}, transparent 70%)` }} />
                <div className="relative flex items-start justify-between mb-5">
                  <span className="w-12 h-12 rounded-xl grid place-items-center glass-strong" style={{ boxShadow: `inset 0 0 0 1px ${a.ring}` }}>
                    {React.createElement(Icons[svc.icon], { size: 22, className: a.text })}
                  </span>
                  <span className="font-mono text-[12px] text-body-dim">{svc.tag}</span>
                </div>
                <h3 className="font-display font-semibold text-heading text-[20px] mb-2">{svc.title}</h3>
                <p className="text-[14.5px] leading-relaxed text-body mb-5">{svc.desc}</p>
                <div className="flex flex-wrap gap-2">
                  {svc.points.map(p => (
                    <span key={p} className="text-[12px] text-body px-2.5 py-1 rounded-lg bg-white/[0.03] border border-white/5 flex items-center gap-1.5">
                      <span className="w-1 h-1 rounded-full" style={{ background: a.dot }} />{p}
                    </span>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Showcase() {
  return (
    <section id="product" className="py-20 sm:py-28 relative overflow-hidden">
      <div className="absolute inset-0 grid-faint opacity-60 -z-10" />
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6">
          <SectionHead kicker="Flagship product" title="Orion Ops — the AI control tower." sub="A real-time analytics dashboard with an AI summary layer and autonomous agents handling exceptions. This is the kind of product we ship." />
          <div className="reveal flex flex-wrap gap-2.5 shrink-0">
            {[['Sparkles', 'AI summaries'], ['Bot', 'Agent fleet'], ['Activity', 'Live insights']].map(([ic, t]) => (
              <span key={t} className="flex items-center gap-2 px-3 py-2 rounded-xl glass text-[13px] text-body">
                {React.createElement(Icons[ic], { size: 15, className: 'text-cyan' })}{t}
              </span>
            ))}
          </div>
        </div>

        <div className="reveal mt-12 relative">
          <div className="absolute -inset-8 -z-10 rounded-[2rem] blur-3xl opacity-50" style={{ background: 'radial-gradient(60% 60% at 50% 30%, rgba(99,102,241,0.4), transparent 70%)' }} />
          <div className="rounded-2xl p-2 sm:p-3 glass-strong shadow-[0_40px_120px_-30px_rgba(0,0,0,0.7)]">
            <div className="h-[460px] sm:h-[560px] lg:h-[620px]">
              <Dashboard live />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, LogoCloud, Services, Showcase, SectionHead, Logo, Wordmark, ACCENT });