/** CRAiD UI kit — Doro (agent introduction) + Footer */
function Doro() {
  return (
    <section style={doroStyles.section}>
      <div style={doroStyles.inner}>
        <div style={doroStyles.portrait}>
          <img src="../../assets/brand-image-021.jpeg" alt="Doro — the CRAiD agent" style={doroStyles.img} />
          <div style={doroStyles.tagPill}>
            <span style={doroStyles.dot} />
            <span style={doroStyles.pillText}>Online · replies in minutes</span>
          </div>
        </div>

        <div>
          <span className="overline" style={{ display: 'block', marginBottom: 20 }}>03 — Meet Doro</span>
          <h2 style={doroStyles.h2}>
            Doro is<br />
            <span style={{ color: 'var(--primary)' }}>a teammate,</span><br />
            not a chatbot.
          </h2>
          <p style={doroStyles.body}>
            Doro onboards you, scopes the work, and stays with the project end-to-end
            alongside our humans. She remembers every conversation, every decision,
            every file. That is what working with CRAiD feels like.
          </p>
          <div style={doroStyles.stats}>
            {[
              ['12 min', 'Median first response'],
              ['3 yrs', 'In production with clients'],
              ['100%', 'Human-reviewed outputs'],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={doroStyles.statK}>{k}</div>
                <div style={doroStyles.statV}>{v}</div>
              </div>
            ))}
          </div>
          <button style={doroStyles.cta}>
            Start a conversation with Doro
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 10 }}>
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}

const doroStyles = {
  section: { padding: '128px 48px', background: 'var(--bg)' },
  inner: { maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' },
  portrait: { position: 'relative', borderRadius: 24, overflow: 'hidden', aspectRatio: '4/5', boxShadow: 'var(--shadow-lg)' },
  img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
  tagPill: {
    position: 'absolute', bottom: 20, left: 20,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    padding: '8px 14px', borderRadius: 9999,
    background: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(12px)',
    border: '1px solid rgba(255,255,255,0.6)',
  },
  dot: { width: 8, height: 8, borderRadius: '50%', background: 'var(--craid-success)' },
  pillText: { fontSize: 12, fontWeight: 500, color: 'var(--fg)' },
  h2: { fontSize: 'clamp(2.5rem, 4.5vw, 4rem)', fontWeight: 700, lineHeight: 1.05, margin: '0 0 28px', letterSpacing: '-0.02em' },
  body: { fontSize: 17, fontWeight: 300, lineHeight: 1.625, color: 'var(--fg-muted)', margin: '0 0 36px', maxWidth: 480 },
  stats: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, paddingTop: 28, paddingBottom: 32, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', marginBottom: 32 },
  statK: { fontSize: 28, fontWeight: 600, color: 'var(--fg)', letterSpacing: '-0.02em', marginBottom: 4 },
  statV: { fontSize: 12, color: 'var(--fg-muted)', letterSpacing: '0.05em' },
  cta: {
    display: 'inline-flex', alignItems: 'center', padding: '14px 28px',
    background: 'var(--primary)', color: '#fff', border: 0, borderRadius: 9999,
    fontFamily: 'inherit', fontWeight: 600, fontSize: 15, cursor: 'pointer',
  },
};

function Footer() {
  return (
    <footer style={footStyles.foot}>
      <div style={footStyles.inner}>
        <div style={footStyles.brand}>
          <img src="../../assets/logo-craid-wordmark.png" alt="CRAiD" style={{ height: 28, filter: 'brightness(0) invert(1)' }} />
          <p style={footStyles.tag}>
            Design consultancy for the agentic era. Humans + AI, every day, everywhere.
          </p>
        </div>
        {[
          { h: 'Work', links: ['Case studies', 'Industries', 'Methods', 'Agentic index'] },
          { h: 'Studio', links: ['About', 'Careers', 'Press', 'Talks'] },
          { h: 'Contact', links: ['Doro', 'Berlin HQ', 'Munich studio', 'hello@craid.de'] },
        ].map((col) => (
          <div key={col.h}>
            <div style={footStyles.colH}>{col.h}</div>
            <ul style={footStyles.list}>
              {col.links.map((l) => <li key={l} style={footStyles.li}>{l}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={footStyles.legal}>
        <span>© 2026 CRAiD GmbH</span>
        <span style={{ opacity: 0.4 }}>Made in Berlin ·  Shipped with Doro</span>
      </div>
    </footer>
  );
}

const footStyles = {
  foot: { background: 'var(--craid-ink)', color: '#fff', padding: '96px 48px 32px' },
  inner: { maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 64, paddingBottom: 80 },
  brand: { maxWidth: 360 },
  tag: { marginTop: 20, fontSize: 14, fontWeight: 300, lineHeight: 1.625, color: 'rgba(255,255,255,0.65)' },
  colH: { fontSize: 12, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 20 },
  list: { margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 },
  li: { fontSize: 14, fontWeight: 400, color: 'rgba(255,255,255,0.85)', cursor: 'pointer' },
  legal: { maxWidth: 1200, margin: '0 auto', paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.1)', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(255,255,255,0.5)' },
};

Object.assign(window, { Doro, Footer });