/* @jsx React.createElement */

window.Hero = function Hero({ go }) {
  return (
    <section style={{ position: 'relative', minHeight: '88vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      <Atmosphere />
      <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '0 32px', width: '100%', zIndex: 1 }}>
        <Stamp>00 · applied AI · Barcelona</Stamp>
        <h1 className="zl-h1" style={{ marginTop: 24, maxWidth: '14ch' }}>
          same hands,<br />
          <em style={{ fontStyle: 'italic' }}>end to end</em>.
        </h1>
        <p className="zl-body" style={{ marginTop: 32, maxWidth: '52ch', color: 'var(--ink-mid)' }}>
          An applied AI lab and consultancy. Two practices in concert: production systems
          we build to ship and last, and independent technical assessments. The same team
          writes the brief and writes the code.
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 14, alignItems: 'center' }}>
          <Button variant="primary" onClick={() => go('services')}>read the brief →</Button>
          <Button variant="ghost" onClick={() => go('work')}>view work</Button>
        </div>
      </div>
    </section>
  );
};

window.PillarCard = function PillarCard({ index, eyebrow, title, body, href, onClick }) {
  return (
    <a href={href || '#'} onClick={onClick} className="zl-glass" style={{
      display: 'block', padding: 32, textDecoration: 'none', color: 'inherit',
      cursor: 'pointer',
    }}>
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 24, minHeight: 280 }}>
        <Stamp>{index} · {eyebrow}</Stamp>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 300,
          fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.1,
          letterSpacing: '-0.018em', color: 'var(--ink)', flex: 1,
        }}>{title}</div>
        <div style={{
          fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 300,
          lineHeight: 1.55, color: 'var(--ink-mid)',
        }}>{body}</div>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 300,
          color: 'var(--accent)',
        }}>read more →</div>
      </div>
    </a>
  );
};

window.PrincipleRow = function PrincipleRow({ items }) {
  return (
    <section style={{ padding: '128px 32px', maxWidth: 1200, margin: '0 auto' }}>
      <Stamp>principles</Stamp>
      <h2 className="zl-h2" style={{ marginTop: 24, maxWidth: '14ch' }}>
        how we <em style={{ fontStyle: 'italic' }}>actually work</em>.
      </h2>
      <div style={{
        marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
      }}>
        {items.map((it, i) => (
          <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 24 }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-low)',
              letterSpacing: '0.08em',
            }}>0{i + 1}</div>
            <h3 className="zl-h3" style={{ marginTop: 12 }}>{it.title}</h3>
            <p className="zl-body" style={{ marginTop: 12, color: 'var(--ink-mid)' }}>{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

window.PartnersStamp = function PartnersStamp() {
  return (
    <section style={{ padding: '96px 32px', maxWidth: 1200, margin: '0 auto', borderTop: '1px solid var(--rule)' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        flexWrap: 'wrap', gap: 32,
      }}>
        <div style={{ maxWidth: '38ch' }}>
          <Stamp>partners</Stamp>
          <p className="zl-h3" style={{ marginTop: 16, fontWeight: 300 }}>
            Currently working with a small number of partners.
          </p>
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-mid)', lineHeight: 1.8,
        }}>
          <div>04 / active engagements</div>
          <div>02 / shipping this quarter</div>
          <div style={{ color: 'var(--accent)' }}>● accepting q1 2027</div>
        </div>
      </div>
    </section>
  );
};