/* @jsx React.createElement */

window.HomePage = function HomePage({ go }) {
  return (
    <div>
      <Hero go={go} />

      <section style={{ padding: '128px 32px', maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}><div className="zl-atmos" style={{ position: 'absolute', inset: 0, opacity: 0.6 }} /></div>
        <div style={{ position: 'relative' }}>
          <Stamp>what we do</Stamp>
          <h2 className="zl-h2" style={{ marginTop: 24, maxWidth: '16ch' }}>
            two practices, <em style={{ fontStyle: 'italic' }}>in concert</em>.
          </h2>
          <p className="zl-body" style={{ marginTop: 24, maxWidth: '60ch', color: 'var(--ink-mid)' }}>
            Same team, deep range. We describe; you decide.
          </p>
          <div style={{
            marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
          }}>
            <PillarCard
              index="01"
              eyebrow="consulting & custom builds"
              title={<>production AI <em style={{ fontStyle: 'italic' }}>built to last</em>.</>}
              body="From research-grade prototype to a system on call. We integrate with your stack, ship the code, and stay on the line."
              onClick={(e) => { e.preventDefault(); go('services'); }}
            />
            <PillarCard
              index="02"
              eyebrow="research & strategy advisory"
              title={<>independent <em style={{ fontStyle: 'italic' }}>technical assessments</em>.</>}
              body="A short engagement for clarity. We read the code, talk to the team, write a brief that someone could act on tomorrow."
              onClick={(e) => { e.preventDefault(); go('services'); }}
            />
          </div>
        </div>
      </section>

      <PrincipleRow items={[
        { title: 'No slide-show theatre.', body: 'We work in code, briefs, and conversations. The deliverable is the work, not a deck about the work.' },
        { title: 'Same hands, end to end.', body: 'The person who writes the assessment is the person who ships the system. Continuity is the value.' },
        { title: 'A small number of partners.', body: 'We take on engagements one at a time. Quality of attention is finite; we don\'t pretend otherwise.' },
      ]} />

      <PartnersStamp />
      <Footer />
    </div>
  );
};

window.ServicesPage = function ServicesPage({ go }) {
  return (
    <div>
      <section style={{ position: 'relative', padding: '160px 32px 96px', maxWidth: 1200, margin: '0 auto', overflow: 'hidden' }}>
        <Stamp>services · two practices</Stamp>
        <h1 className="zl-h1" style={{ marginTop: 24, maxWidth: '12ch' }}>
          consulting & <em style={{ fontStyle: 'italic' }}>advisory</em>.
        </h1>
      </section>

      <section style={{ padding: '0 32px 128px', maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, borderTop: '1px solid var(--rule)', paddingTop: 48 }}>
          <div>
            <Stamp>01 · consulting & custom builds</Stamp>
            <h2 className="zl-h3" style={{ marginTop: 16, fontWeight: 300 }}>Production AI systems built to ship and last.</h2>
            <p className="zl-body" style={{ marginTop: 24, color: 'var(--ink-mid)' }}>
              Engagements typically run 8–16 weeks. We integrate with your team's stack, write code that goes to production, and stay on call after launch.
            </p>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {['retrieval-augmented systems', 'agent infrastructure', 'evaluation pipelines', 'fine-tuning & adaptation'].map((s) => (
                <div key={s} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 0', borderBottom: '1px solid var(--rule)',
                  fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 300,
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
                  {s}
                </div>
              ))}
            </div>
          </div>

          <div>
            <Stamp>02 · research & strategy advisory</Stamp>
            <h2 className="zl-h3" style={{ marginTop: 16, fontWeight: 300 }}>Independent technical assessments and AI roadmaps.</h2>
            <p className="zl-body" style={{ marginTop: 24, color: 'var(--ink-mid)' }}>
              Short engagements, typically 2–4 weeks. We read the code, talk to the team, and produce a brief that someone could act on tomorrow.
            </p>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {['technical due diligence', 'AI roadmap & sequencing', 'build-vs-buy assessments', 'second opinions'].map((s) => (
                <div key={s} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 0', borderBottom: '1px solid var(--rule)',
                  fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 300,
                }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
                  {s}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{ marginTop: 64, display: 'flex', gap: 14 }}>
          <Button variant="primary" onClick={() => go('contact')}>send a brief →</Button>
          <Button variant="ghost" onClick={() => go('work')}>see past work</Button>
        </div>
      </section>

      <Footer />
    </div>
  );
};

window.WorkPage = function WorkPage({ go }) {
  const items = [
    { year: '2026', client: 'Partner 04', scope: 'agent infrastructure for a financial-research team · 14 weeks', status: 'shipping' },
    { year: '2026', client: 'Partner 03', scope: 'technical due diligence on a series-B AI platform · 3 weeks', status: 'delivered' },
    { year: '2026', client: 'Partner 02', scope: 'evaluation pipeline & adaptation strategy · 10 weeks', status: 'delivered' },
    { year: '2026', client: 'Partner 01', scope: 'retrieval-augmented system for legal review · 12 weeks', status: 'delivered' },
  ];
  return (
    <div>
      <section style={{ padding: '160px 32px 64px', maxWidth: 1200, margin: '0 auto' }}>
        <Stamp>selected work · names withheld</Stamp>
        <h1 className="zl-h1" style={{ marginTop: 24, maxWidth: '12ch' }}>
          the <em style={{ fontStyle: 'italic' }}>record</em>.
        </h1>
        <p className="zl-body" style={{ marginTop: 32, maxWidth: '50ch', color: 'var(--ink-mid)' }}>
          We don't publish logos. Most engagements are under NDA; the ones that aren't, we still ask first. References on request.
        </p>
      </section>

      <section style={{ padding: '0 32px 128px', maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ borderTop: '1px solid var(--rule)' }}>
          {items.map((it, i) => <WorkRow key={i} {...it} />)}
        </div>
        <div style={{ marginTop: 48 }}>
          <Button variant="ghost" onClick={() => go('contact')}>references →</Button>
        </div>
      </section>

      <Footer />
    </div>
  );
};

window.ContactPage = function ContactPage({ go }) {
  const [sent, setSent] = useState(false);
  return (
    <div>
      <section style={{ position: 'relative', padding: '160px 32px 96px', maxWidth: 1200, margin: '0 auto', overflow: 'hidden' }}>
        <Atmosphere />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Stamp>contact</Stamp>
          <h1 className="zl-h1" style={{ marginTop: 24, maxWidth: '14ch' }}>
            send the <em style={{ fontStyle: 'italic' }}>brief</em>.
          </h1>
          <p className="zl-body" style={{ marginTop: 32, maxWidth: '52ch', color: 'var(--ink-mid)' }}>
            A few sentences is enough. We read everything; we reply within two working days.
          </p>
        </div>
      </section>

      <section style={{ padding: '0 32px 128px', maxWidth: 720, margin: '0 auto' }}>
        {sent ? (
          <div className="zl-glass" style={{ padding: 40 }}>
            <Stamp>received · 14:32 CET</Stamp>
            <h2 className="zl-h3" style={{ marginTop: 16, fontWeight: 300 }}>Thank you. We'll be in touch within two working days.</h2>
          </div>
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <Field label="name" placeholder="who's asking" />
            <Field label="email" placeholder="hola@" type="email" />
            <Field label="company / context" placeholder="optional" />
            <Field label="the brief" placeholder="a few sentences is enough" textarea />
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginTop: 8 }}>
              <Button variant="primary">send →</Button>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-low)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>
                or hola@000labs.com
              </span>
            </div>
          </form>
        )}
      </section>

      <Footer />
    </div>
  );
};

function Field({ label, placeholder, type = 'text', textarea }) {
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 500,
        letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mid)',
        marginBottom: 8,
      }}>{label}</div>
      <Tag
        type={type}
        placeholder={placeholder}
        rows={textarea ? 5 : undefined}
        style={{
          fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 300,
          color: 'var(--ink)', background: 'var(--bg-2)',
          border: '1px solid var(--rule)', borderRadius: 8,
          padding: '14px 16px', width: '100%', boxSizing: 'border-box',
          outline: 'none', resize: textarea ? 'vertical' : undefined,
        }}
      />
    </div>
  );
}