/* Axon.ps website kit — ProductOrbit, Process, Founder, Contact, Footer */

const PRODUCT_META = {
  plexus: { tag: 'Research', side: 'right', lead: true },
  nowah:  { tag: 'Government', side: 'left', reveal: true },
  synap:  { tag: 'Infrastructure', side: 'right' },
  madar:  { tag: 'Privacy', side: 'left', soon: true, reveal: true },
};

/* One product as a node on the central signal spine */
function ProductNode({ p, num }) {
  const m = PRODUCT_META[p.id];
  const soon = !!m.soon;
  const reveal = !!m.reveal;
  const cls = ['pnode', m.side, m.lead ? 'lead' : '', (soon || reveal) ? 'dim' : '', 'fade-up'].filter(Boolean).join(' ');
  return (
    <div className={cls}>
      <div className="pmeta">
        <span className="pfolio">{num}</span>
        <span className="ptag">{reveal ? 'Awaiting reveal' : m.tag}</span>
      </div>
      <div className="hub">
        <span className="halo"><ProductLens id={p.id} size={m.lead ? 72 : 56} live={!soon && !reveal} dim={soon || reveal} name={p.name} /></span>
      </div>
      <div className="pcontent">
        <span className="pconn"></span>
        <div className="pbody">
          <div className="pname">{p.name}{reveal && <span className="psealed" aria-hidden="true"> · sealed</span>}</div>
          {reveal ? (
            <p className="pline preveal">Kept under wraps — to be revealed when {p.name} is ready.</p>
          ) : (
            <>
              <div className="ptagline">{p.tagline}</div>
              <p className="pline">{p.line}</p>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function ProductOrbit() {
  const reveal = useReveal();
  const [plexus, nowah, synap, madar] = AXON_PRODUCTS;
  return (
    <section id="products" style={{ background: 'var(--paper-1)', borderTop: '1px solid var(--ink-line)' }} ref={reveal}>
      <div className="tatreez-sec is-stars" aria-hidden="true"></div>
      <div className="wrap" style={{ paddingBlock: 'var(--sp-8) var(--sp-9)' }}>
        <div className="fade-up" style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto var(--sp-6)' }}>
          <Eyebrow>Product ecosystem</Eyebrow>
          <h2 style={{ marginTop: 'var(--sp-4)' }}>One core. Four signals.</h2>
          <p className="t-lead" style={{ color: 'var(--ink-1)', marginTop: 'var(--sp-4)', maxWidth: '48ch', marginInline: 'auto' }}>
            Four products, one shared core — the same intelligence and engineering, tuned to a different field. Synap is the studio's local-AI infrastructure layer.
          </p>
        </div>

        {/* the signal spine threading all four products as nodes of one system */}
        <div className="psystem">
          <div className="psystem-spine" aria-hidden="true"><span className="psystem-pulse"></span></div>
          {/* origin — the Axon core */}
          <div className="fade-up psys-cap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 2, paddingBottom: 'var(--sp-3)', gap: 6 }}>
            <span style={{ background: 'var(--paper-1)', padding: '0 12px' }}><AxonMark size={36} /></span>
            <span className="t-caption" style={{ background: 'var(--paper-1)', padding: '0 8px', fontSize: '0.58rem', letterSpacing: '0.2em', color: 'var(--ink-2)' }}>AXON CORE · SHARED INTELLIGENCE</span>
          </div>
          <ProductNode p={plexus} num="01" />
          <ProductNode p={nowah} num="02" />
          <ProductNode p={synap} num="03" />
          <ProductNode p={madar} num="04" />
          {/* terminus — closes the system */}
          <div className="fade-up psys-cap psys-terminus" style={{ display: 'flex', justifyContent: 'center', position: 'relative', zIndex: 2, paddingTop: 'var(--sp-3)' }}>
            <span className="t-caption" style={{ background: 'var(--paper-1)', padding: '0 12px', fontSize: '0.6rem', letterSpacing: '0.16em', color: 'var(--ink-2)' }}>
              ONE TEAM · ONE CORE · ONE SYSTEM
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const reveal = useReveal();
  const STEPS = [
    { num: '01', title: 'Discovery', desc: 'Understand the problem, map the constraints, define the scope.' },
    { num: '02', title: 'Architecture', desc: 'Design the system — data flow, stack choices, integration points.' },
    { num: '03', title: 'Build', desc: 'Execute with precision. Iterative delivery, continuous feedback.' },
    { num: '04', title: 'Launch & support', desc: 'Ship to production. Monitor, optimize, and iterate.' },
  ];
  return (
    <section id="process" ref={reveal} style={{ background: 'var(--paper-0)', borderTop: '1px solid var(--ink-line)' }}>
      <div className="tatreez-sec is-chevrons" aria-hidden="true"></div>
      <div className="wrap" style={{ position: 'relative', paddingBlock: 'var(--sp-8) var(--sp-9)' }}>
        <div className="fade-up" style={{ marginBottom: 'var(--sp-7)' }}>
          <Eyebrow>Process</Eyebrow>
          <h2 style={{ marginTop: 'var(--sp-4)' }}>How a system gets built.</h2>
        </div>
        <div className="process-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 'var(--sp-6)' }}>
          {STEPS.map((s, i) => (
            <div className="fade-up process-step" key={s.num} style={{ borderTop: '1.5px solid var(--ink-0)', paddingTop: 'var(--sp-4)', transitionDelay: (i * 60) + 'ms' }}>
              <div className="t-folio" style={{ marginBottom: 'var(--sp-3)' }}>{s.num}</div>
              <h3 style={{ fontSize: 'var(--step-1)', marginBottom: '0.4rem' }}>{s.title}</h3>
              <p style={{ margin: 0 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Founder() {
  const reveal = useReveal();
  const [open, setOpen] = React.useState(null);
  const TEAM = [
    { id: 'tareq', name: 'Tareq Sartawi', role: 'Founder & Product Builder', initial: 'T', photo: 'assets/tareq.jpg',
      bio: "Computer Science graduate and founder of Axon.ps. He has worked across software projects, companies, and independent products — including Menha.ps — building practical systems, workflows, and AI-driven tools from Palestine, for the world.", filled: true },
    { id: 'laith', name: 'Laith Sarsour', role: 'Strategy & Partnerships Advisor', initial: 'L', photo: 'assets/laith.jpg',
      bio: "Laith Sarsour is a strategy and partnerships advisor at Axon, contributing to project direction, partnerships, and impact-driven innovation. With experience in program design, resource mobilization, humanitarian response, and sustainable livelihoods across Palestine, he helps shape practical solutions that connect real needs with accountable systems.", filled: true },
    { id: 'mohammad', name: 'Mohammad Salah', role: 'Legal, Finance & Relations Advisor', initial: 'M', photo: 'assets/mohammad.jpg',
      bio: "Mohammad Salah is a member of the Axon team, supporting the studio’s legal, financial, and public relations direction. He helps strengthen the structure behind Axon’s projects through practical advisory work, clear coordination, and responsible decision support.", filled: true },
  ];
  const active = TEAM.find(t => t.id === open);
  return (
    <section className="rule-top" ref={reveal} style={{ background: 'var(--paper-0)' }}>
      <div className="tatreez-sec is-rosette" aria-hidden="true"></div>
      <div className="wrap" style={{ paddingBlock: 'var(--sp-7) var(--sp-8)' }}>
        <div className="fade-up" style={{ maxWidth: 560, marginBottom: 'var(--sp-6)' }}>
          <Eyebrow>Our team</Eyebrow>
          <h2 style={{ marginTop: 'var(--sp-4)', marginBottom: 'var(--sp-3)' }}>The people behind the signal.</h2>
          <p style={{ margin: 0 }}>We don't just build software — we build the infrastructure that makes your work smarter. A small studio, deliberately.</p>
        </div>
        <div className="team-grid fade-up">
          {TEAM.map(t => (
            <button key={t.id} className={'team-card' + (t.filled ? '' : ' is-open-seat') + (open === t.id ? ' is-active' : '')}
              onClick={() => setOpen(open === t.id ? null : t.id)} aria-expanded={open === t.id}>
              <span className="team-portrait" data-initial={t.initial}>
                <span className="team-ring" aria-hidden="true"></span>
                {t.photo
                  ? <img className="team-photo" src={t.photo} alt={t.name} loading="lazy" />
                  : <span className="team-initial">{t.initial}</span>}
              </span>
              <span className="team-name">{t.name}</span>
              <span className="team-role">{t.role}</span>
              <span className="team-open" aria-hidden="true">{open === t.id ? 'Close' : 'View profile'}</span>
            </button>
          ))}
        </div>
        {active && (
          <div className="team-profile" role="region" aria-label={active.name + ' profile'}>
            <span className="team-profile-portrait" data-initial={active.initial}>
              {active.photo
                ? <img className="team-photo" src={active.photo} alt={active.name} loading="lazy" />
                : active.initial}
            </span>
            <div className="team-profile-body">
              <div className="team-profile-head">
                <span className="team-name" style={{ fontSize: '1.1rem' }}>{active.name}</span>
                <span className="team-role">{active.role}</span>
              </div>
              <p className="team-profile-bio">{active.bio}</p>
              <button className="team-profile-close" onClick={() => setOpen(null)} aria-label="Close profile">Close ×</button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* Studio ethos — the founding principle, in Arabic, as a centered manuscript
   centerpiece. Its own calm moment; a different axis from the founder quote. */
function ArabicEthos() {
  const reveal = useReveal();
  return (
    <section className="rule-top" ref={reveal} style={{ background: 'var(--paper-1)' }}>
      <div className="wrap" style={{ paddingBlock: 'var(--sp-9)' }}>
        <div className="ethos fade-up">
          <div className="ethos-tatreez" aria-hidden="true"></div>
          <p className="ethos-ar" dir="rtl" lang="ar">
            نحن نبتكر لكي نكون <span className="em">شريكًا في إبداعك</span>، لا بديلًا عن وجودك.
          </p>
          <p className="ethos-en">“We innovate to be a partner in your creativity — not a replacement for your presence.”</p>
          <span className="ethos-sig">مبدأ التأسيس</span>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = React.useState(false);
  const [mailtoHref, setMailtoHref] = React.useState('mailto:info@axon.ps');

  const onSubmit = (e) => {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    const name = (fd.get('name') || '').toString().trim();
    const email = (fd.get('email') || '').toString().trim();
    const message = (fd.get('message') || '').toString().trim();
    const subject = encodeURIComponent('New project enquiry' + (name ? ' — ' + name : ''));
    const body = encodeURIComponent(
      'Name: ' + name + '\n' +
      'Email: ' + email + '\n\n' +
      'Project:\n' + message + '\n\n' +
      '— Sent from axon.ps'
    );
    const href = 'mailto:info@axon.ps?subject=' + subject + '&body=' + body;
    setMailtoHref(href);
    // open the user's email client with the message prefilled (frontend-only, no backend)
    window.location.href = href;
    setSent(true);
  };
  return (
    <section id="contact" style={{ background: 'var(--paper-0)', position: 'relative', overflow: 'hidden', borderTop: '1px solid var(--ink-line)' }}>
      <div className="tatreez-sec is-zigzag" aria-hidden="true" style={{ position: 'relative', zIndex: 1 }}></div>
      {/* faint structural core echo, top-right — not pattern wallpaper */}
      <div aria-hidden="true" style={{ position: 'absolute', top: '-120px', right: '-120px', width: 420, height: 420, opacity: 0.5 }}>
        <svg viewBox="0 0 420 420" width="420" height="420">
          <g stroke="var(--ink-line)" fill="none" strokeWidth="0.9">
            <polygon points="210,40 330,90 380,210 330,330 210,380 90,330 40,210 90,90" />
            <polygon points="210,90 290,120 330,210 290,300 210,330 130,300 90,210 130,120" opacity="0.7" />
            <circle cx="210" cy="210" r="60" stroke="var(--gold)" opacity="0.6" />
          </g>
        </svg>
      </div>

      <div className="wrap" style={{ position: 'relative', paddingBlock: 'var(--sp-7) var(--sp-9)' }}>
        <figure className="epigraph fade-up">
          <blockquote className="epigraph-q">There has never been a better time in history to do it; it's the golden age. You and your agents can build a giant company.</blockquote>
          <figcaption className="epigraph-cite">Boris Cherny — Founder, Claude Code</figcaption>
        </figure>
        <div className="invite-rule fade-up">
          <span className="t-eyebrow">Start a project</span>
          <span className="t-caption">04 — Invitation</span>
          <span className="ipulse" aria-hidden="true"></span>
        </div>

        <div className="invite-grid">
          <div className="fade-up">
            <h2 className="invite-headline" style={{ fontWeight: 300, lineHeight: 1.1, marginTop: 'var(--sp-5)', marginBottom: 'var(--sp-6)', maxWidth: '15ch' }}>
              Bring us the problem that <span style={{ fontStyle: 'italic', color: 'var(--signal)' }}>doesn't fit the template.</span>
            </h2>
            <p className="t-lead" style={{ color: 'var(--ink-1)', maxWidth: '38ch' }}>
              Whether it's a research platform, an automation layer, or sovereign AI on your own hardware — tell us what you're building, and we'll take it from there.
            </p>
            <div className="invite-meta">
              <a href="mailto:info@axon.ps" className="meta-chip">
                <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h15A1.5 1.5 0 0 1 21 6.5v11a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z" fill="none" stroke="currentColor" strokeWidth="1.4"/><path d="m4 7 8 6 8-6" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                <span><span className="meta-k">Email</span>info@axon.ps</span>
              </a>
              <div className="meta-chip is-static">
                <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M12 21s-6.5-5.5-6.5-10A6.5 6.5 0 0 1 12 4.5 6.5 6.5 0 0 1 18.5 11c0 4.5-6.5 10-6.5 10Z" fill="none" stroke="currentColor" strokeWidth="1.4"/><circle cx="12" cy="11" r="2.2" fill="none" stroke="currentColor" strokeWidth="1.4"/></svg>
                <span><span className="meta-k">Studio</span>Palestine · Available globally</span>
              </div>
            </div>
          </div>

          <div className="fade-up" style={{ transitionDelay: '80ms' }}>
            {sent ? (
              <div style={{ borderTop: '1.5px solid var(--signal)', paddingTop: 'var(--sp-5)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', marginBottom: '0.4rem' }}>
                  <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--signal)' }}></span>
                  <span className="t-label">Your message is ready to send.</span>
                </div>
                <p style={{ margin: '0 0 var(--sp-4)', maxWidth: '36ch' }}>
                  Your email app should have opened with the message addressed to <strong>info@axon.ps</strong>. If it didn't, send it to us directly:
                </p>
                <div style={{ display: 'flex', gap: 'var(--sp-4)', alignItems: 'center', flexWrap: 'wrap' }}>
                  <Button variant="ink" href={mailtoHref}><span className="cta-dot" aria-hidden="true"></span>Open email again</Button>
                  <a href="mailto:info@axon.ps" className="t-caption" style={{ border: 'none' }}>info@axon.ps</a>
                </div>
              </div>
            ) : (
              <form className="invite-form" onSubmit={onSubmit}>
                <div className="form-card">
                  <div className="form-card-head">
                    <span className="t-caption" style={{ color: 'var(--ink-2)' }}>Project brief</span>
                    <span className="form-card-folio">01 — 03</span>
                  </div>
                  <div className="field-row">
                    <div className="ffield">
                      <input id="ff-name" name="name" className="ffield-input" autoComplete="name" placeholder=" " required />
                      <label htmlFor="ff-name" className="ffield-label">Your name</label>
                    </div>
                    <div className="ffield">
                      <input id="ff-email" name="email" type="email" className="ffield-input" autoComplete="email" placeholder=" " required />
                      <label htmlFor="ff-email" className="ffield-label">Email address</label>
                    </div>
                  </div>
                  <div className="ffield">
                    <textarea id="ff-msg" name="message" className="ffield-input" rows="3" placeholder=" " required></textarea>
                    <label htmlFor="ff-msg" className="ffield-label">What do you want to build?</label>
                  </div>
                  <div className="form-card-foot">
                    <Button variant="ink" type="submit"><span className="cta-dot" aria-hidden="true"></span>Send your message</Button>
                    <span className="form-hint">Opens your email app, ready to send.</span>
                  </div>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--paper-0)', borderTop: '1px solid var(--ink-line)' }}>
      <div className="wrap" style={{ paddingBlock: 'var(--sp-6)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'var(--sp-4)' }}>
        <AxonMark size={24} wordmark />
        <nav style={{ display: 'flex', gap: 'var(--sp-6)', flexWrap: 'wrap' }}>
          {AXON_PRODUCTS.map(p => <span key={p.id} className="t-small" style={{ color: 'var(--ink-1)' }}>{p.name}</span>)}
        </nav>
        <div style={{ display: 'flex', gap: 'var(--sp-5)', alignItems: 'center' }}>
          <a href="mailto:info@axon.ps" className="t-small" style={{ border: 'none', color: 'var(--ink-1)' }}>info@axon.ps</a>
          <span className="t-caption" style={{ fontSize: '0.62rem', letterSpacing: '0.08em', color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>Founded February 2026 · Axon.ps</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ProductOrbit, Process, Founder, ArabicEthos, Contact, Footer });