// CtaBand — final editorial closer. Full-bleed ink panel.
// Big statement, three-column ground (engage / what we do / channels),
// process strip, mark watermark. Replaces the thin two-column version.

function CtaBand({ onNav }) {
  const wrap = {
    background: 'var(--bc-ink)',
    color: 'var(--bc-paper)',
    padding: '120px clamp(20px,4vw,48px) 96px',
    borderTop: '1px solid rgba(237,234,229,0.08)',
    position: 'relative',
    overflow: 'hidden',
  };
  const inner = { maxWidth: 1280, margin: '0 auto', position: 'relative', zIndex: 2 };

  // Top section: eyebrow + huge headline + lede
  const eyebrowRow = { display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48 };
  const eyebrowDot = { width: 6, height: 6, borderRadius: '50%', background: 'var(--bc-selvedge)' };
  const eyebrow = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.6)', fontWeight: 500 };
  const eyebrowRule = { flex: 1, height: 1, background: 'rgba(237,234,229,0.12)', marginLeft: 12 };
  const eyebrowEnd = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.45)', fontWeight: 500 };

  const h = {
    fontFamily: 'var(--bc-font-display)',
    fontWeight: 300,
    fontSize: 'clamp(48px,8vw,120px)',
    lineHeight: 1.0,
    letterSpacing: '-0.04em',
    textWrap: 'balance',
    marginBottom: 32,
    maxWidth: 1100,
    color: 'var(--bc-paper)',
  };
  const accent = { color: 'var(--bc-selvedge)', fontStyle: 'italic', fontWeight: 300 };

  const lede = {
    fontFamily: 'var(--bc-font-display)',
    fontStyle: 'italic',
    fontWeight: 300,
    fontSize: 'clamp(20px,2.2vw,28px)',
    lineHeight: 1.45,
    color: 'rgba(237,234,229,0.78)',
    maxWidth: 760,
    marginBottom: 80,
  };

  // CTA row
  const ctaRow = { display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap', marginBottom: 96 };
  const ctaPrimary = {
    fontFamily: 'var(--bc-font-mono)', fontSize: 12, fontWeight: 500,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    padding: '20px 32px', whiteSpace: 'nowrap',
    background: 'var(--bc-paper)', color: 'var(--bc-ink)',
    border: '1px solid var(--bc-paper)', cursor: 'pointer',
    transition: 'background 160ms cubic-bezier(.32,.72,0,1)',
  };
  const ctaSecondary = {
    fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    padding: '20px 28px', whiteSpace: 'nowrap',
    background: 'transparent', color: 'var(--bc-paper)',
    border: '1px solid rgba(237,234,229,0.3)', cursor: 'pointer',
  };
  const ctaMeta = {
    fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'rgba(237,234,229,0.5)',
    fontWeight: 500, marginLeft: 8,
  };

  // Three-column ground
  const grid = {
    display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0,
    paddingTop: 56,
    borderTop: '1px solid rgba(237,234,229,0.12)',
  };
  const col = (i) => ({
    padding: i === 0 ? '0 48px 0 0' : (i === 2 ? '0 0 0 48px' : '0 48px'),
    borderRight: i < 2 ? '1px solid rgba(237,234,229,0.10)' : 'none',
  });
  const colHead = {
    fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--bc-selvedge)',
    fontWeight: 500, marginBottom: 24,
  };
  const colTitle = {
    fontFamily: 'var(--bc-font-display)', fontSize: 22, fontWeight: 400,
    letterSpacing: '-0.015em', lineHeight: 1.25, marginBottom: 16, color: 'var(--bc-paper)',
  };
  const colBody = {
    fontFamily: 'var(--bc-font-sans)', fontSize: 14, lineHeight: 1.65,
    color: 'rgba(237,234,229,0.7)', marginBottom: 20,
  };
  const colLink = {
    fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--bc-paper)',
    cursor: 'pointer', borderBottom: '1px solid rgba(237,234,229,0.4)',
    paddingBottom: 4, fontWeight: 500, display: 'inline-block', textDecoration: 'none',
  };

  // Channels list
  const chRow = (last) => ({
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    padding: '12px 0',
    borderBottom: last ? 'none' : '1px solid rgba(237,234,229,0.10)',
  });
  const chLbl = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.5)', fontWeight: 500 };
  const chVal = { fontFamily: 'var(--bc-font-sans)', fontSize: 14, color: 'var(--bc-paper)', textDecoration: 'none' };

  // Process strip
  const procWrap = {
    marginTop: 80,
    paddingTop: 32,
    borderTop: '1px solid rgba(237,234,229,0.08)',
    display: 'grid',
    gridTemplateColumns: '120px repeat(4,1fr)',
    gap: 24,
    alignItems: 'start',
  };
  const procEb = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.45)', fontWeight: 500, paddingTop: 6 };
  const procStep = (i) => ({
    paddingLeft: 20,
    borderLeft: '1px solid rgba(237,234,229,0.15)',
    position: 'relative',
  });
  const procNum = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--bc-selvedge)', fontWeight: 500, marginBottom: 10 };
  const procName = { fontFamily: 'var(--bc-font-display)', fontSize: 18, fontWeight: 400, letterSpacing: '-0.01em', color: 'var(--bc-paper)', marginBottom: 6, lineHeight: 1.2 };
  const procDur = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(237,234,229,0.5)', fontWeight: 500, marginBottom: 10 };
  const procDesc = { fontFamily: 'var(--bc-font-sans)', fontSize: 12.5, lineHeight: 1.55, color: 'rgba(237,234,229,0.65)' };

  // Watermark mark — woven 3x3, very faint
  const watermark = (
    <svg viewBox="0 0 100 100" style={{
      position: 'absolute', right: -120, top: -80,
      width: 560, height: 560, opacity: 0.05,
      pointerEvents: 'none', zIndex: 1,
    }}>
      <g stroke="var(--bc-paper)" strokeWidth="2" fill="none">
        {/* Verticals */}
        <line x1="25" y1="0" x2="25" y2="100" />
        <line x1="50" y1="0" x2="50" y2="100" />
        <line x1="75" y1="0" x2="75" y2="100" />
        {/* Horizontals */}
        <line x1="0" y1="25" x2="100" y2="25" />
        <line x1="0" y1="50" x2="100" y2="50" />
        <line x1="0" y1="75" x2="100" y2="75" />
      </g>
    </svg>
  );

  return (
    <section style={wrap} data-screen-label="09 CTA band">
      {watermark}
      <div style={inner}>

        <div style={eyebrowRow}>
          <span style={eyebrowDot}></span>
          <span style={eyebrow}>§ 09 — Currently booking Q3 2026</span>
          <span style={eyebrowRule}></span>
          <span style={eyebrowEnd}>Two slots remain</span>
        </div>

        <h2 style={h}>
          Have a problem worth solving?<br/>
          <span style={accent}>Bring it to the loom.</span>
        </h2>

        <p style={lede}>
          We work with a small handful of teams each quarter — six-week engagements,
          fixed scope, embedded with one of yours. Tell us what's tangled. We'll
          tell you within two working days whether we're the right thread to pull.
        </p>

        <div style={ctaRow}>
          <button style={ctaPrimary}
                  onClick={() => onNav('contact')}
                  onMouseOver={e => e.currentTarget.style.background = 'var(--bc-selvedge)'}
                  onMouseOut={e => e.currentTarget.style.background = 'var(--bc-paper)'}>
            Start a project →
          </button>
          <button style={ctaSecondary}
                  onClick={() => onNav('about')}>
            Read the manifesto
          </button>
          <span style={ctaMeta}>Or — hello@buildcraft.town</span>
        </div>

        <div style={grid}>
          <div style={col(0)}>
            <div style={colHead}>§ 09.1 — How we engage</div>
            <h3 style={colTitle}>Six-week sprints. Fixed scope. One team at a time.</h3>
            <p style={colBody}>
              We embed with you, not over you. Day one is a problem brief; week six
              ships something durable. Nothing loose, nothing left running unmaintained.
            </p>
            <a style={colLink} onClick={() => onNav('work')}>How we work →</a>
          </div>

          <div style={col(1)}>
            <div style={colHead}>§ 09.2 — What we take on</div>
            <h3 style={colTitle}>AI systems · automation · product design.</h3>
            <p style={colBody}>
              Production-ready agents, evaluation harnesses, n8n workflows that don't
              fall over, and the design work that makes them legible to the people
              who use them.
            </p>
            <a style={colLink} onClick={() => onNav('work')}>See the work →</a>
          </div>

          <div style={col(2)}>
            <div style={colHead}>§ 09.3 — Channels</div>
            <div style={chRow(false)}>
              <span style={chLbl}>Email</span>
              <a href="mailto:hello@buildcraft.town" style={chVal}>hello@buildcraft.town</a>
            </div>
            <div style={chRow(false)}>
              <span style={chLbl}>Hours</span>
              <span style={chVal}>Mon — Fri · IST + global</span>
            </div>
            <div style={chRow(false)}>
              <span style={chLbl}>Reply within</span>
              <span style={chVal}>2 working days</span>
            </div>
            <div style={chRow(false)}>
              <span style={chLbl}>LinkedIn</span>
              <a href="https://linkedin.com/company/buildcraftlabs" target="_blank" rel="noreferrer" style={chVal}>buildcraftlabs ↗</a>
            </div>
            <div style={chRow(true)}>
              <span style={chLbl}>GitHub</span>
              <a href="https://github.com/buildcraftlabs" target="_blank" rel="noreferrer" style={chVal}>buildcraftlabs ↗</a>
            </div>
          </div>
        </div>

        <div style={procWrap}>
          <div style={procEb}>§ 09.4 — Process</div>
          <div style={procStep(0)}>
            <div style={procNum}>01</div>
            <h4 style={procName}>Brief</h4>
            <div style={procDur}>Day 0 — 3</div>
            <p style={procDesc}>You write what's tangled. We write back what we heard.</p>
          </div>
          <div style={procStep(1)}>
            <div style={procNum}>02</div>
            <h4 style={procName}>Frame</h4>
            <div style={procDur}>Week 1</div>
            <p style={procDesc}>One page of scope, one of risk, one of what we will not do.</p>
          </div>
          <div style={procStep(2)}>
            <div style={procNum}>03</div>
            <h4 style={procName}>Build</h4>
            <div style={procDur}>Week 2 — 5</div>
            <p style={procDesc}>Embedded with one of your teams. Daily threads, weekly demos.</p>
          </div>
          <div style={procStep(3)}>
            <div style={procNum}>04</div>
            <h4 style={procName}>Hand off</h4>
            <div style={procDur}>Week 6</div>
            <p style={procDesc}>Working software, plain-English documentation, and a quiet exit.</p>
          </div>
        </div>

      </div>
    </section>
  );
}

window.CtaBand = CtaBand;