/* Axon.ps website kit — Nav, Hero (Illuminated Field), Capabilities, ProductOrbit */

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-brand">
        <AxonMark size={40} wordmark />
        <span className="nav-rule" aria-hidden="true"></span>
        <span className="t-caption nav-coord">AI systems studio</span>
      </div>
      <div className="nav-links">
        <a className="nav-link" href="#capabilities"><span className="nav-idx">01</span>Capabilities</a>
        <a className="nav-link" href="#products"><span className="nav-idx">02</span>Products</a>
        <a className="nav-link" href="#process"><span className="nav-idx">03</span>Process</a>
        <Button variant="ink" href="#contact"><span className="cta-dot" aria-hidden="true"></span>Start a project</Button>
      </div>
    </nav>
  );
}

/* ---- The Illuminated Field: a structural orbital schematic on light parchment.
   The Axon mark is the live core; the four products orbit it on a thin-line
   octagon construction, each connected by a signal path carrying a crimson
   pulse. Geometry reads as an intelligent diagram, not decoration. ---- */
function SignalField() {
  const C = 260, Rout = 214, Rmid = 150, Rorbit = 208;
  const vert = (r, k) => {
    const a = (-90 + k * 45) * Math.PI / 180;
    return [C + r * Math.cos(a), C + r * Math.sin(a)];
  };
  const oct = (r) => Array.from({ length: 8 }, (_, k) => vert(r, k).map(n => n.toFixed(1)).join(',')).join(' ');
  // products sit on the 4 diagonal vertices (k = 1,3,5,7)
  const orbit = [
    { id: 'plexus', name: 'Plexus', k: 1, live: true },
    { id: 'nowah', name: 'Nowah', k: 3, live: true },
    { id: 'synap', name: 'Synap', k: 5, live: true },
    { id: 'madar', name: 'Madar', k: 7, live: false },
  ];
  const pct = (r, k) => { const [x, y] = vert(r, k); return { left: (x / 520 * 100) + '%', top: (y / 520 * 100) + '%' }; };
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 440, aspectRatio: '1', margin: '0 auto' }}>
      <svg viewBox="0 0 520 520" width="100%" aria-label="Axon product orbit" style={{ display: 'block', overflow: 'visible' }}>
        {/* technical registration corners — engineered, not decorative */}
        <g stroke="var(--ink-2)" strokeWidth="1" opacity="0.4">
          {[[24,24,1,1],[496,24,-1,1],[24,496,1,-1],[496,496,-1,-1]].map(([x,y,dx,dy],i)=>(
            <g key={i}><line x1={x} y1={y} x2={x+14*dx} y2={y} /><line x1={x} y1={y} x2={x} y2={y+14*dy} /></g>
          ))}
        </g>
        {/* structural construction — present but elegant */}
        <g stroke="var(--ink-1)" fill="none" opacity="0.24" strokeWidth="0.9">
          <polygon points={oct(Rout)} />
          <polygon points={oct(Rmid * 1.18)} transform={`rotate(22.5 ${C} ${C})`} opacity="0.55" />
        </g>
        {/* the orbit ring — connects all four products into one system */}
        <circle cx={C} cy={C} r={Rorbit} fill="none" stroke="var(--ink-1)" strokeWidth="1.1" opacity="0.42" />
        {/* axis radials (faint, to the non-product vertices) */}
        <g stroke="var(--ink-1)" opacity="0.16" strokeWidth="0.9">
          {[0, 2, 4, 6].map(k => { const [x, y] = vert(Rorbit, k); return <line key={k} x1={C} y1={C} x2={x} y2={y} />; })}
          {[0, 2, 4, 6].map(k => { const [x, y] = vert(Rorbit, k); return <circle key={'an' + k} cx={x} cy={y} r="2.5" fill="var(--ink-2)" stroke="none" opacity="1.6" />; })}
        </g>
        {/* signal paths core -> products */}
        {orbit.map(p => {
          const [x, y] = vert(Rorbit, p.k);
          return <line key={'l' + p.id} x1={C} y1={C} x2={x} y2={y}
            stroke={p.live ? 'var(--ink-0)' : 'var(--ink-2)'} strokeWidth="1.1" opacity={p.live ? 0.5 : 0.3}
            strokeDasharray={p.live ? 'none' : '3 5'} />;
        })}
        {/* travelling crimson pulses (live products only) */}
        {orbit.filter(p => p.live).map((p, i) => {
          const [x, y] = vert(Rorbit, p.k);
          const dur = 5.5 + i;
          return (
            <circle key={'p' + p.id} r="3.5" fill="var(--signal)">
              <animateMotion dur={dur + 's'} begin={(i * 1.2) + 's'} repeatCount="indefinite" path={`M ${C} ${C} L ${x.toFixed(1)} ${y.toFixed(1)}`} />
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.15;0.82;1" dur={dur + 's'} begin={(i * 1.2) + 's'} repeatCount="indefinite" />
            </circle>
          );
        })}
        {/* alive core — solid disc + slow breathing gold ring */}
        <circle cx={C} cy={C} r="70" fill="var(--paper-0)" />
        <circle cx={C} cy={C} r="62" fill="none" stroke="var(--gold)" strokeWidth="1.25" opacity="0.75" />
        <circle cx={C} cy={C} r="62" fill="none" stroke="var(--gold)" strokeWidth="1">
          <animate attributeName="r" values="62;84;62" dur="5.5s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.2 1; 0.4 0 0.2 1" keyTimes="0;0.5;1" />
          <animate attributeName="opacity" values="0.5;0;0.5" dur="5.5s" repeatCount="indefinite" />
        </circle>
      </svg>
      {/* live Axon core */}
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
        <AxonMark size={108} />
        <span className="t-caption" style={{ fontSize: '0.58rem', letterSpacing: '0.22em', color: 'var(--ink-2)' }}>AXON CORE</span>
      </div>
      {/* product lenses orbiting */}
      {orbit.map(p => (
        <div key={p.id} style={{ position: 'absolute', ...pct(Rorbit, p.k), transform: 'translate(-50%,-50%)', textAlign: 'center' }}>
          <span style={{ background: 'var(--paper-0)', borderRadius: '50%', padding: 5, display: 'inline-block' }}>
            <ProductLens id={p.id} size={52} live={p.live} dim={!p.live} name={p.name} />
          </span>
          <div className="t-caption" style={{ marginTop: 5, fontSize: '0.62rem', letterSpacing: '0.1em', color: p.live ? 'var(--ink-1)' : 'var(--ink-2)' }}>{p.name}</div>
        </div>
      ))}
    </div>
  );
}

function FlagshipMenha() {
  return (
    <a className="flagship" href="https://menha.ps" target="_blank" rel="noopener noreferrer"
      aria-label="Menha — Axon's flagship platform, now live. Opens menha.ps in a new tab.">
      <span className="flagship-glow" aria-hidden="true"></span>
      <span className="flagship-seal">
        <img className="flagship-logo" src="assets/menha-logo.svg" alt="Menha logo" />
      </span>
      <span className="flagship-text">
        <span className="flagship-kicker">
          <svg className="fk-star" viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M12 2l2.4 6.5L21 11l-6.6 2.5L12 20l-2.4-6.5L3 11l6.6-2.5z" fill="currentColor"/></svg>
          Axon's flagship
        </span>
        <span className="flagship-name">Menha<span className="flagship-ar">منحة</span></span>
        <span className="flagship-meta"><span className="fm-dot"></span>Now live at menha.ps</span>
      </span>
      <span className="flagship-go" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="19" height="19"><path d="M5 12h12M11 6l6 6-6 6" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </span>
    </a>
  );
}

function FlagshipIntag() {
  return (
    <div className="flagship is-soon" role="group"
      aria-label="in-tag (إنتاج) — Axon's agricultural production platform, in development. Coming soon at in-tag.ps.">
      <span className="flagship-glow" aria-hidden="true"></span>
      <span className="flagship-seal">
        <img className="flagship-logo" src="assets/intag-logo.svg" alt="in-tag logo" />
      </span>
      <span className="flagship-text">
        <span className="flagship-kicker">
          <span className="soon-pill">Soon</span>
          Next from Axon
        </span>
        <span className="flagship-name">in-tag<span className="flagship-ar">إنتاج</span></span>
        <span className="flagship-meta"><span className="fm-dot fm-dot-soon"></span>In development · in-tag.ps</span>
      </span>
      <span className="flagship-go flagship-go-soon" aria-hidden="true">
        <svg viewBox="0 0 24 24" width="17" height="17"><circle cx="12" cy="12" r="8.2" fill="none" stroke="currentColor" strokeWidth="1.7" /><path d="M12 7.6v4.6l2.9 1.8" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </span>
    </div>
  );
}

function Hero() {
  return (
    <header style={{ position: 'relative', background: 'var(--paper-0)' }}>
      <div className="wrap hero-grid" style={{ display: 'grid', gap: 'var(--sp-7)',
        alignItems: 'center', paddingBlock: 'var(--sp-6) var(--sp-6)' }}>
        <div>
          <div className="flagship-stack">
            <FlagshipMenha />
            <FlagshipIntag />
          </div>
          <h1 style={{ fontSize: 'clamp(2rem, 1.4rem + 1.9vw, 2.95rem)', fontWeight: 400, lineHeight: 1.12, marginTop: 'var(--sp-5)', marginBottom: 'var(--sp-5)', maxWidth: '17ch' }}>
            Systems for ideas that <span style={{ fontStyle: 'italic', color: 'var(--signal)' }}>outgrow templates.</span>
          </h1>
          <p className="t-lead" style={{ maxWidth: '38ch', color: 'var(--ink-1)' }}>
            We build intelligent software, automation layers, and local AI infrastructure — engineered for teams whose problems don't fit off-the-shelf tools.
          </p>
          <div className="hero-cta" style={{ display: 'flex', gap: 'var(--sp-3)', marginTop: 'var(--sp-6)', alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="ink" href="#contact"><span className="cta-dot" aria-hidden="true"></span>Start a project</Button>
            <Button variant="ghost" href="#products">Explore the ecosystem</Button>
          </div>
        </div>
        <div className="hero-orbit-col" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--sp-4)' }}>
          <span className="dev-note">
            <span className="dev-dot" aria-hidden="true"></span>
            In active development
          </span>
          <SignalField />
        </div>
      </div>
    </header>
  );
}

/* ---- model-agnostic compatibility strip (real logos, tinted to ink) ---- */
const MODELS = (() => {
  const I = 'https://api.iconify.design/logos/', S = 'https://cdn.simpleicons.org/';
  return [
    { n: 'Claude', u: I + 'anthropic-icon.svg' },
    { n: 'OpenAI', u: I + 'openai-icon.svg' },
    { n: 'Gemini', u: S + 'googlegemini' },
    { n: 'DeepSeek', u: I + 'deepseek-icon.svg' },
    { n: 'Qwen', u: I + 'qwen-icon.svg' },
    { n: 'Llama', u: I + 'meta-icon.svg' },
    { n: 'Mistral', u: I + 'mistral-ai-icon.svg' },
    { n: 'Kimi K2', u: S + 'moonshotai' },
    { n: 'MiniMax', u: S + 'minimax' },
    { n: 'GLM', t: 'GLM' },
    { n: 'Grok', u: I + 'grok-icon.svg' },
    { n: 'Nemotron', u: S + 'nvidia' },
    { n: 'Gemma', t: 'G', serif: true },
    { n: 'Ollama', u: S + 'ollama', local: true },
    { n: 'Perplexity', u: I + 'perplexity-icon.svg' },
    { n: 'Copilot', u: I + 'github-copilot.svg' },
  ];
})();

function CompatStrip() {
  return (
    <div className="compat">
      <div className="wrap">
        <p className="compat-line">
          We design our systems to stay compatible with most AI models — <em>even the ones you run locally.</em>
        </p>
        <ul className="compat-row" aria-label="Compatible AI models">
          {MODELS.map(m => (
            <li className="model" key={m.n}>
              <span className="model-w">
                {m.u
                  ? <img className="model-img" src={m.u} alt={m.n + ' logo'} loading="lazy" crossOrigin="anonymous" />
                  : <span className={m.serif ? 'model-serif' : 'model-mono'}>{m.t}</span>}
              </span>
              <span className="model-cap">{m.local ? 'Local' : m.n}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function Capabilities() {
  const reveal = useReveal();
  const SERVICES = [
    { num: '01', title: 'AI automation & workflow design', desc: 'Intelligent automation that eliminates repetitive work — connecting teams through AI-driven workflows.' },
    { num: '02', title: 'Software development', desc: 'Full-stack engineering from prototype to production: web apps, APIs, and internal tools with clean architecture.' },
    { num: '03', title: 'Scientific research tools', desc: 'Specialized platforms for researchers — AI-assisted writing, reference verification, and citation checking.' },
    { num: '04', title: 'Local AI infrastructure', desc: 'On-premise AI for organizations that need data sovereignty. We supply the hardware and build the infrastructure.' },
    { num: '05', title: 'Technical consulting', desc: 'Strategic guidance on architecture, stack selection, and AI adoption — helping teams move faster.' },
    { num: '06', title: 'Project execution & delivery', desc: 'End-to-end delivery: from scoping to launch, we own execution so you focus on the outcome.' },
  ];
  return (
    <section id="capabilities" ref={reveal} style={{ borderTop: '1px solid var(--ink-line)' }}>
      <div className="tatreez-sec is-nested" aria-hidden="true"></div>
      <div className="wrap" style={{ paddingBlock: 'var(--sp-8) var(--sp-9)' }}>
      <div className="cap-grid">
        <div className="cap-head fade-up">
          <Eyebrow>Capabilities</Eyebrow>
          <h2 style={{ marginTop: 'var(--sp-4)' }}>Six layers, one system.</h2>
          <p className="cap-standfirst">Not a service menu — a stack. Each layer is built to connect to the next, from automation at the surface down to the infrastructure it runs on.</p>
          <div className="t-caption" style={{ marginTop: 'var(--sp-5)', display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
            <span style={{ width: 22, height: 1, background: 'var(--signal)' }}></span>Six connected layers
          </div>
        </div>
        <div className="cap-list">
          {SERVICES.map((s, i) => (
            <div className="cap-item fade-up" key={s.num} style={{ transitionDelay: (i * 40) + 'ms' }}>
              <span className="cap-num">{s.num}</span>
              <div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, SignalField, Capabilities });