// Ruben Cobo — page sections built on top of brutalist/components.jsx
// Hero, DisciplineNav, DisciplineSection (+ optional inner modules),
// ContactSection, PageFooter.
// Every Discipline module is independently optional and the layout
// re-numbers ("01 / N") based only on which modules actually have content.

// ─── helpers ──────────────────────────────────────────────────────
function moduleSet(d) {
  // Build ordered list of module specs that have content.
  // Qualifications and Testimonials are now top-level sections, not
  // per-discipline modules — so each discipline only renders Offering +
  // Outcomes here. The per-discipline quals/testimonials in content.js
  // are read by QualificationsSection / TestimonialsSection.
  const m = [];
  if (d.offering) m.push({ key: 'offering', title: 'Offering', kicker: 'What it is' });
  if (d.outcomes) m.push({ key: 'outcomes', title: 'Outcomes', kicker: 'What you’ll get' });
  return m;
}

// ─── ModuleRow — left/right scaffold every module shares ─────────
function ModuleRow({ index, total, title, kicker, last, children }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '240px 1fr', gap: 56,
      padding: '40px 56px',
      borderTop: 'var(--b-hair)',
      borderBottom: last ? 'var(--b-hair)' : 'none',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <BCaption tone="accent">§ {String(index).padStart(2, '0')} / {String(total).padStart(2, '0')}</BCaption>
        <BHeading size="m" style={{ textTransform: 'uppercase' }}>{title}</BHeading>
        <BCaption>— {kicker}</BCaption>
      </div>
      <div>{children}</div>
    </div>
  );
}

// ─── OfferingModule ──────────────────────────────────────────────
function OfferingModule({ data }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      {data.copy && (
        <p style={{ fontFamily: 'var(--b-f-body)', fontSize: 17, lineHeight: 1.55, color: 'rgba(244,241,236,0.85)', margin: 0, maxWidth: 720 }}>
          {data.copy}
        </p>
      )}
      <div style={{ border: 'var(--b-hair)' }}>
        {data.rows.map(([k, v], i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '200px 1fr', gap: 24,
            padding: '16px 22px',
            borderBottom: i < data.rows.length - 1 ? 'var(--b-hair)' : 'none',
            alignItems: 'center',
          }}>
            <BCaption>{k}</BCaption>
            <div style={{
              fontFamily: 'var(--b-f-display)', fontSize: 22,
              letterSpacing: '-0.01em', textTransform: 'uppercase',
            }}>{v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── OutcomesModule ──────────────────────────────────────────────
function OutcomesModule({ data }) {
  return (
    <div>
      {data.map((o, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '70px 1fr', gap: 18,
          padding: '18px 0', alignItems: 'baseline',
          borderTop: i === 0 ? 'none' : 'var(--b-hair)',
        }}>
          <span style={{
            fontFamily: 'var(--b-f-mono)', fontSize: 13,
            color: 'var(--b-accent)', letterSpacing: '0.14em',
          }}>{String(i + 1).padStart(2, '0')}.</span>
          <div style={{
            fontFamily: 'var(--b-f-display)', fontSize: 30, lineHeight: 1.15,
            letterSpacing: '-0.015em',
          }}>{o}</div>
        </div>
      ))}
    </div>
  );
}

// ─── QualificationsModule ────────────────────────────────────────
function QualificationsModule({ data }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
      gap: 0, border: 'var(--b-hair)',
    }}>
      {data.map((q, i) => (
        <div key={i} style={{
          padding: '20px 22px',
          borderRight: 'var(--b-hair)',
          borderBottom: 'var(--b-hair)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
            <BHeading size="s">{q.cert}</BHeading>
            <BCaption>{q.year}</BCaption>
          </div>
          <p style={{
            margin: 0, fontSize: 14, lineHeight: 1.5, color: 'rgba(244,241,236,0.75)',
          }}>{q.body}</p>
        </div>
      ))}
    </div>
  );
}

// ─── TestimonialsModule ──────────────────────────────────────────
function TestimonialsModule({ data }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: data.length === 1 ? '1fr' : 'repeat(auto-fit, minmax(320px, 1fr))',
      gap: 0,
    }}>
      {data.map((t, i) => (
        <div key={i} style={{
          padding: '24px 28px',
          borderTop: 'var(--b-hair)',
          borderRight: i < data.length - 1 ? 'var(--b-hair)' : 'none',
          borderBottom: 'var(--b-hair)',
          display: 'flex', flexDirection: 'column', gap: 14, justifyContent: 'space-between',
        }}>
          <div style={{
            fontFamily: 'var(--b-f-italic)', fontStyle: 'italic',
            fontSize: 26, lineHeight: 1.3, letterSpacing: '-0.005em',
          }}>“{t.quote}”</div>
          <BCaption>— {t.who}</BCaption>
        </div>
      ))}
    </div>
  );
}

// ─── DisciplineHeader — banner for each section ──────────────────
function DisciplineHeader({ n, total, name, kicker }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '240px 1fr auto',
      gap: 56, padding: '28px 56px', alignItems: 'center',
      background: 'var(--b-bg)',
      borderTop: '1px solid var(--b-fg)', borderBottom: 'var(--b-hair)',
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <BCaption tone="accent">— Discipline</BCaption>
      </div>
      <BDisplay size="m" style={{ fontSize: 72, lineHeight: 1 }}>{name}</BDisplay>
      <BCaption>{kicker}</BCaption>
    </div>
  );
}

// ─── IntroRow — paragraph + image plate ──────────────────────────
function DisciplineIntro({ copy, imageCaption, imageRatio }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64,
      padding: '48px 56px', borderBottom: 'var(--b-hair)',
      alignItems: 'center',
    }}>
      <div>
        <BItalic size={32} style={{ display: 'block', maxWidth: 720, lineHeight: 1.35, color: 'rgba(244,241,236,0.92)' }}>
          {copy}
        </BItalic>
      </div>
      <div style={{ aspectRatio: imageRatio || '4 / 5', position: 'relative' }}>
        <BImagePlate caption={imageCaption} index="PLATE · 01" style={{ height: '100%' }} />
      </div>
    </div>
  );
}

// ─── DisciplineSection (simplified) ──────────────────────────────
// One block per discipline: title bar on top, then offering (left)
// + small outcomes (right) in a single two-column row.
function DisciplineSection({ n, total, d, first }) {
  return (
    <section id={d.id} data-screen-label={`${String(n).padStart(2, '0')} ${d.shortName}`}
      style={{ borderTop: '1px solid var(--b-fg)' }}>
      {/* First-discipline section break — solid red rule marks the
          transition from the landing block (hero + nav) to the content. */}
      {first && (
        <div style={{ background: 'var(--b-accent)', height: 10 }} />
      )}
      {/* editorial split — title block left, points right */}
      <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr' }}>
        <div style={{
          padding: '80px 56px', borderRight: 'var(--b-hair)',
          display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
            <span style={{
              fontFamily: 'var(--b-f-mono)', fontSize: 'clamp(15px, 1.1vw, 18px)',
              letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--b-dim)',
            }}>Offering</span>
            <span style={{
              fontFamily: 'var(--b-f-display)', fontSize: 22, color: 'var(--b-accent)',
              letterSpacing: '-0.02em',
            }}>/</span>
          </div>
          <div style={{
            fontFamily: 'var(--b-f-display)', fontSize: 'clamp(44px, 4.6vw, 68px)',
            lineHeight: 0.98, letterSpacing: '-0.03em', textTransform: 'uppercase',
          }}>{d.name}</div>
          <BCaption>{d.kicker}</BCaption>
        </div>
        <div style={{ padding: '40px 56px', display: 'flex', flexDirection: 'column' }}>
          {(d.points || []).map((p, i, arr) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16, alignItems: 'baseline',
              padding: '24px 0',
              borderBottom: i < arr.length - 1 ? 'var(--b-hair)' : 'none',
            }}>
              <span style={{ width: 24, height: 3, background: 'var(--b-accent)', transform: 'translateY(-6px)' }} />
              <div style={{
                fontFamily: 'var(--b-f-body)', fontSize: 'clamp(20px, 1.9vw, 26px)', lineHeight: 1.4,
              }}>{p}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── QualificationsSection (Big-type credential wall) ────────────
// Promoted from variants. Cert codes set as huge display type,
// one row per credential, year + body + discipline tag inline.
function QualificationsSection({ disciplines, n = 6, total = 8 }) {
  // Prefer the flat top-level list; fall back to per-discipline quals.
  const flat = (window.RUBEN && window.RUBEN.qualifications) || null;
  const items = [];
  if (flat) {
    flat.forEach((q) => items.push({ cert: q.cert, body: q.body, discipline: q.tag }));
  } else {
    disciplines.forEach((d) => {
      if (!d.qualifications) return;
      d.qualifications.forEach((q) => items.push({ ...q, discipline: d.shortName }));
    });
  }
  const certCount = items.length;
  const discCount = disciplines.length;
  return (
    <section id="qualifications" data-screen-label={`${String(n).padStart(2, '0')} Qualifications`}
      style={{ borderTop: '1px solid var(--b-fg)' }}>
      {/* Title — the track record */}
      <div style={{
        padding: '64px 56px', borderBottom: 'var(--b-hair)',
      }}>
        <div>
          <BCaption tone="accent" style={{ marginBottom: 16 }}>— Qualifications · 25 years</BCaption>
          <div style={{
            fontFamily: 'var(--b-f-display)', fontSize: 'clamp(56px, 7vw, 96px)',
            lineHeight: 0.96, letterSpacing: '-0.04em', textTransform: 'uppercase',
          }}>The track record.</div>
        </div>
      </div>
      <div>
        {items.map((q, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: 'minmax(0,1.4fr) minmax(0,1fr) 140px',
            gap: 40, alignItems: 'baseline', padding: '36px 56px',
            borderBottom: i < items.length - 1 ? 'var(--b-hair)' : '1px solid var(--b-fg)',
          }}>
            <div style={{
              fontFamily: 'var(--b-f-display)',
              fontSize: 'clamp(40px, 5vw, 72px)',
              lineHeight: 1, letterSpacing: '-0.04em',
              textTransform: 'uppercase',
              color: 'var(--b-fg)',
            }}>{q.cert}</div>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: 'rgba(244,241,236,0.78)' }}>{q.body}</p>
            <BCaption style={{ textAlign: 'right' }}>{q.discipline}</BCaption>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── TestimonialsSection (Featured quote + thumbs) ───────────────
// Promoted from variants. One large quote on top, clickable
// previews row below — keeps all quotes accessible without scrolling.
function TestimonialsSection({ disciplines, n = 7, total = 8 }) {
  const flat = (window.RUBEN && window.RUBEN.testimonials) || null;
  const quotes = [];
  if (flat) {
    flat.forEach((t) => quotes.push({ quote: t.quote, who: t.name, role: t.role, discipline: t.tag }));
  } else {
    disciplines.forEach((d) => {
      if (!d.testimonials) return;
      d.testimonials.forEach((t) => quotes.push({ ...t, discipline: d.shortName }));
    });
  }
  const [active, setActive] = React.useState(0);
  const q = quotes[active];
  return (
    <section id="testimonials" data-screen-label={`${String(n).padStart(2, '0')} Testimonials`}
      style={{ borderTop: '1px solid var(--b-fg)' }}>
      {/* Title — italic display only */}
      <div style={{ borderBottom: 'var(--b-hair)', padding: '64px 56px 48px' }}>
        <div style={{
          fontFamily: 'var(--b-f-italic)', fontStyle: 'italic',
          fontSize: 'clamp(64px, 8vw, 128px)', lineHeight: 0.94, letterSpacing: '-0.02em',
        }}>
          In their <span style={{ color: 'var(--b-accent)' }}>words</span>.
        </div>
      </div>

      <div style={{ padding: '64px 56px 80px', display: 'flex', flexDirection: 'column', gap: 56 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32, maxWidth: 1000 }}>
          <BCaption tone="accent">— Quote {String(active + 1).padStart(2, '0')} / {String(quotes.length).padStart(2, '0')}</BCaption>
          <div style={{
            fontFamily: 'var(--b-f-italic)', fontStyle: 'italic',
            fontSize: 'clamp(24px, 2.6vw, 38px)', lineHeight: 1.32,
            letterSpacing: '-0.01em',
          }}>“{q.quote}”</div>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            paddingTop: 18, borderTop: 'var(--b-hair)', gap: 24,
          }}>
            <div style={{
              fontFamily: 'var(--b-f-display)', fontSize: 18,
              letterSpacing: '0.04em', textTransform: 'uppercase',
            }}>— {q.who}{q.role ? <span style={{ color: 'var(--b-dim)' }}> · {q.role}</span> : null}</div>
            <BCaption tone="accent">{q.discipline}</BCaption>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: `repeat(${quotes.length}, 1fr)`,
          borderTop: 'var(--b-hair)', borderBottom: 'var(--b-hair)',
        }}>
          {quotes.map((tq, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              padding: '18px 20px', textAlign: 'left',
              background: i === active ? 'rgba(255,59,31,0.08)' : 'transparent',
              borderRight: i < quotes.length - 1 ? 'var(--b-hair)' : 'none',
              borderTop: i === active ? '2px solid var(--b-accent)' : '2px solid transparent',
              display: 'flex', flexDirection: 'column', gap: 8, cursor: 'pointer',
              color: 'var(--b-fg)',
            }}>
              <BCaption tone={i === active ? 'accent' : 'dim'} style={{ textTransform: 'uppercase' }}>{tq.who}</BCaption>
              <div style={{
                fontFamily: 'var(--b-f-italic)', fontStyle: 'italic', fontSize: 13,
                lineHeight: 1.4, color: i === active ? 'var(--b-fg)' : 'rgba(244,241,236,0.55)',
                display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
              }}>“{tq.quote}”</div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── DisciplineNav — sticky jump bar under the hero ───────────────
// `variant` controls the visual treatment.
//   'default'  — original (black bg, hairlines)
//   'invert'   — cream bg, black text (default — stands out from page)
//   'thick'    — same colors but heavy 2px frame, panel bg
//   'hazard'   — hazard band under a black nav
function DisciplineNav({ disciplines, variant = 'invert' }) {
  const v = {
    'default': {
      shell: { background: 'var(--b-bg)', borderTop: 'var(--b-hair)', borderBottom: 'var(--b-hair)' },
      link:   { color: 'var(--b-fg)', borderRight: 'var(--b-hair)' },
      brand:  { borderRight: 'var(--b-hair)', color: 'var(--b-fg)' },
      brandDot: 'var(--b-accent)',
      cta:    { background: 'var(--b-accent)', color: 'var(--b-bg)' },
      kicker: 'var(--b-fg)',
    },
    'invert': {
      shell: { background: 'var(--b-fg)', borderTop: '2px solid var(--b-bg)', borderBottom: '2px solid var(--b-bg)' },
      link:   { color: 'var(--b-bg)', borderRight: '1px solid rgba(10,10,10,0.16)' },
      brand:  { borderRight: '1px solid rgba(10,10,10,0.16)', color: 'var(--b-bg)' },
      brandDot: 'var(--b-accent)',
      cta:    { background: 'var(--b-bg)', color: 'var(--b-fg)' },
      kicker: 'var(--b-bg)',
    },
    'thick': {
      shell: { background: 'var(--b-panel)', borderTop: '2px solid var(--b-fg)', borderBottom: '2px solid var(--b-fg)' },
      link:   { color: 'var(--b-fg)', borderRight: '1px solid var(--b-rule-2)' },
      brand:  { borderRight: '1px solid var(--b-rule-2)', color: 'var(--b-fg)' },
      brandDot: 'var(--b-accent)',
      cta:    { background: 'var(--b-accent)', color: 'var(--b-bg)' },
      kicker: 'var(--b-fg)',
    },
    'hazard': {
      shell: { background: 'var(--b-bg)', borderTop: 'none', borderBottom: 'none' },
      link:   { color: 'var(--b-fg)', borderRight: 'var(--b-hair)' },
      brand:  { borderRight: 'var(--b-hair)', color: 'var(--b-fg)' },
      brandDot: 'var(--b-accent)',
      cta:    { background: 'var(--b-accent)', color: 'var(--b-bg)' },
      kicker: 'var(--b-fg)',
    },
  }[variant];

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50, ...v.shell,
    }}>
      {variant === 'hazard' && <BHazardBand height={10} />}
      <div style={{
        display: 'grid', gridTemplateColumns: `220px repeat(${disciplines.length}, 1fr) 220px`,
      }}>
        <div style={{
          padding: '22px 24px',
          display: 'flex', alignItems: 'center', gap: 10,
          ...v.brand,
        }}>
          <span style={{ width: 8, height: 8, background: v.brandDot, borderRadius: '50%' }} />
          <span style={{
            fontFamily: 'var(--b-f-mono)', fontSize: 'var(--b-t-caption)',
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: v.kicker,
          }}>Jump to discipline</span>
        </div>
        {disciplines.map((d, i) => (
          <a key={d.id} href={`#${d.id}`} style={{
            padding: '22px 22px',
            display: 'flex', alignItems: 'center',
            fontFamily: 'var(--b-f-display)', fontSize: 14,
            letterSpacing: '0.02em', textTransform: 'uppercase',
            ...v.link,
            borderRight: i === disciplines.length - 1 ? v.link.borderRight : v.link.borderRight,
          }}>
            {d.shortName}
          </a>
        ))}
        <a href="#contact" style={{
          padding: '22px 22px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--b-f-display)', fontSize: 13, letterSpacing: '0.16em',
          textTransform: 'uppercase',
          ...v.cta,
        }}>Book ▸</a>
      </div>
      {variant === 'hazard' && <BHazardBand height={10} />}
    </div>
  );
}

// ─── HeroSection ──────────────────────────────────────────────────
function HeroSection({ brand, tagline, email, phone, location, hero, portraitSrc, portraitKey, chrome = false }) {
  // Resolve portrait: explicit src wins, then keyed portrait from content,
  // then fall back to default.
  const portraits = (window.RUBEN && window.RUBEN.portraits) || {};
  const key = portraitKey || (window.RUBEN && window.RUBEN.defaultPortrait);
  const fromKey = key && portraits[key];
  const portrait = portraitSrc
    ? { src: portraitSrc, focal: 'center top', fit: 'cover' }
    : (fromKey || { src: 'assets/ruben-arms-crossed.png', focal: '50% 20%', fit: 'contain' });
  return (
    <section data-screen-label="00 Hero">
      {/* top brand bar — opt in via chrome prop */}
      {chrome && (
        <header style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '24px 56px', borderBottom: 'var(--b-hair)',
          fontSize: 'var(--b-t-caption)', letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ width: 10, height: 10, background: 'var(--b-accent)', borderRadius: '50%' }} />
            <span style={{ fontWeight: 600 }}>{brand} / {tagline}</span>
          </div>
          <div style={{ display: 'flex', gap: 28, color: 'var(--b-dim)' }}>
            <span>{location}</span>
            <span>{email}</span>
            <span>{phone}</span>
          </div>
          <BLink accent>Book a session →</BLink>
        </header>
      )}

      {/* hero body */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.5fr 0.85fr',
        minHeight: 960, borderBottom: 'var(--b-hair)',
      }}>
        {/* left — type */}
        <div style={{
          padding: '120px 56px 96px', borderRight: 'var(--b-hair)',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 64,
        }}>
          <div style={{
            fontFamily: 'var(--b-f-display)', fontSize: 28,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--b-accent)',
          }}>{hero.kicker}</div>

          <div>
            <h1 style={{ margin: 0 }}>
              {hero.services.map((line, i) => (
                <div key={i} style={{
                  fontFamily: 'var(--b-f-display)',
                  fontSize: 'clamp(56px, 7vw, 104px)',
                  lineHeight: 0.96, letterSpacing: '-0.035em',
                  textTransform: 'uppercase',
                  color: 'var(--b-fg)',
                }}>
                  {i === 1 && (
                    <span style={{
                      fontFamily: 'var(--b-f-italic)',
                      fontStyle: 'italic',
                      color: 'var(--b-accent)',
                      textTransform: 'none',
                      fontSize: '0.85em',
                      letterSpacing: '-0.02em',
                      marginRight: '0.12em',
                      verticalAlign: '0.05em',
                    }}>&amp;</span>
                  )}
                  {line}
                </div>
              ))}
            </h1>
            {hero.place && (
              <div style={{
                marginTop: 48,
                display: 'inline-flex', alignItems: 'center', gap: 12,
                paddingTop: 14, borderTop: '1px solid var(--b-rule)',
              }}>
                <span style={{ width: 8, height: 8, background: 'var(--b-accent)' }} />
                <span style={{
                  fontFamily: 'var(--b-f-mono)', fontSize: 'var(--b-t-caption)',
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: 'var(--b-fg)',
                }}>{hero.place}</span>
              </div>
            )}
            {hero.introLines ? (
              <div style={{ marginTop: 28, maxWidth: 640, display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span style={{
                  fontFamily: 'var(--b-f-italic)', fontStyle: 'italic',
                  fontSize: 32, lineHeight: 1.3, letterSpacing: '-0.01em',
                  color: 'var(--b-accent)',
                }}>{hero.introLines[0]}</span>
                <span style={{
                  fontFamily: 'var(--b-f-italic)', fontStyle: 'italic',
                  fontSize: 26, lineHeight: 1.3, letterSpacing: '-0.01em',
                  color: 'rgba(244,241,236,0.9)',
                }}>{hero.introLines[1]}</span>
              </div>
            ) : (
              <p style={{
                marginTop: 28, maxWidth: 640,
                fontFamily: 'var(--b-f-italic)', fontStyle: 'italic',
                fontSize: 28, lineHeight: 1.35,
                color: 'var(--b-accent)',
              }}>{hero.intro}</p>
            )}
          </div>

          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <BButton variant="primary" as="a" style={{ }}>{hero.cta.primary}</BButton>
            <BLink accent>{hero.cta.secondary} →</BLink>
          </div>
        </div>

        {/* right — portrait */}
        <div style={{
          position: 'relative', background: 'var(--b-fg)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
          overflow: 'hidden',
        }}>
          <img src={portrait.src} alt="Ruben Cobo, coach"
            style={{
              width: '100%', height: '100%',
              objectFit: portrait.fit || 'cover',
              objectPosition: portrait.focal || 'center top',
            }} />
          <div style={{
            position: 'absolute', bottom: 22, right: 22,
            fontFamily: 'var(--b-f-mono)', fontSize: 10,
            color: 'var(--b-fg)', letterSpacing: '0.22em', textTransform: 'uppercase',
            background: 'var(--b-accent)',
            padding: '4px 8px',
          }}>RUBEN COBO</div>
        </div>
      </div>
    </section>
  );
}

// ─── ContactSection (Centered single-column) ─────────────────────
// Promoted from variants. Big centered headline, single-column form
// (two-col on wide screens), alt-contact strip below.
function ContactSection({ email, phone, location, brand, disciplines, n = 8, total = 8 }) {
  const [state, setState] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');
  const [form, setForm] = React.useState({ name: '', email: '', discipline: '', message: '' });
  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setState('sending');
    setErrorMsg('');
    try {
      const disciplineLabel = (disciplines.find((d) => d.id === form.discipline) || {}).name || form.discipline;
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, disciplineLabel }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || data.ok === false) {
        throw new Error(data.error || 'Something went wrong. Please try again.');
      }
      setState('sent');
    } catch (err) {
      setErrorMsg(err && err.message ? err.message : 'Something went wrong. Please try again.');
      setState('error');
    }
  };
  const inputStyle = {
    background: 'transparent', border: 0,
    borderBottom: '1px solid var(--b-fg)',
    padding: '10px 0', fontFamily: 'var(--b-f-display)',
    fontSize: 22, color: 'var(--b-fg)',
    letterSpacing: '-0.01em', outline: 'none',
  };

  return (
    <section id="contact" data-screen-label="08 Contact"
      style={{ borderTop: '1px solid var(--b-fg)' }}>
      {/* centered body */}
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        padding: '88px 56px 80px', gap: 56,
      }}>
        <div style={{
          textAlign: 'center', display: 'flex', flexDirection: 'column',
          gap: 14, maxWidth: 800,
        }}>
          <BCaption tone="accent" style={{ alignSelf: 'center' }}>— Reach out</BCaption>
          <BDisplay size="m" style={{ fontSize: 84, lineHeight: 0.95 }}>
            Let’s talk.
          </BDisplay>
          <p style={{
            margin: 0, fontFamily: 'var(--b-f-italic)', fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.45, color: 'rgba(244,241,236,0.85)',
          }}>
            One short note about what you’re training for. I read everything and reply within 24 hours.
          </p>
        </div>

        {state === 'sent' ? (
          <div style={{
            width: '100%', maxWidth: 720, textAlign: 'center',
            padding: '40px 0', borderTop: 'var(--b-hair)', borderBottom: 'var(--b-hair)',
          }}>
            <BCaption tone="accent">— Message received</BCaption>
            <BDisplay size="s" style={{ fontSize: 48, marginTop: 14 }}>I'll write back.</BDisplay>
            <p style={{ marginTop: 14, fontSize: 14, color: 'rgba(244,241,236,0.7)' }}>
              Most messages get a reply within 24 hours.
            </p>
          </div>
        ) : (
          <form onSubmit={submit} style={{
            width: '100%', maxWidth: 720,
            display: 'flex', flexDirection: 'column', gap: 28,
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <BCaption>Your name</BCaption>
                <input required value={form.name} onChange={update('name')}
                  style={inputStyle} placeholder="First & last" />
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <BCaption>Email</BCaption>
                <input required type="email" value={form.email} onChange={update('email')}
                  style={inputStyle} placeholder="you@email.com" />
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6, gridColumn: '1 / -1' }}>
                <BCaption>Discipline</BCaption>
                <select required value={form.discipline} onChange={update('discipline')}
                  style={{
                    ...inputStyle, appearance: 'none', WebkitAppearance: 'none',
                    backgroundImage: 'linear-gradient(45deg, transparent 50%, var(--b-fg) 50%), linear-gradient(135deg, var(--b-fg) 50%, transparent 50%)',
                    backgroundPosition: 'right 4px center, right 0px center',
                    backgroundSize: '6px 6px, 6px 6px',
                    backgroundRepeat: 'no-repeat',
                    paddingRight: 22,
                  }}>
                  <option value="" style={{ background: 'var(--b-bg)', color: 'var(--b-dim)' }}>— Pick one —</option>
                  {disciplines.map((d) => (
                    <option key={d.id} value={d.id} style={{ background: 'var(--b-bg)', color: 'var(--b-fg)' }}>{d.name}</option>
                  ))}
                  <option value="not-sure" style={{ background: 'var(--b-bg)', color: 'var(--b-fg)' }}>Not sure yet</option>
                </select>
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6, gridColumn: '1 / -1' }}>
                <BCaption>Tell me what you're training for</BCaption>
                <textarea required rows={4} value={form.message} onChange={update('message')}
                  placeholder="A sentence or two."
                  style={{ ...inputStyle, fontSize: 18, lineHeight: 1.4, resize: 'vertical', minHeight: 92 }} />
              </label>
            </div>
            {state === 'error' && (
              <div style={{
                textAlign: 'center', padding: '12px 16px',
                border: '1px solid var(--b-accent)', color: 'var(--b-accent)',
                fontFamily: 'var(--b-f-mono)', fontSize: 12,
                letterSpacing: '0.18em', textTransform: 'uppercase',
              }}>
                {errorMsg}
              </div>
            )}
            <div style={{ display: 'flex', justifyContent: 'center', gap: 18, alignItems: 'center', paddingTop: 8 }}>
              <button type="submit" disabled={state === 'sending'} style={{
                background: 'var(--b-accent)', color: 'var(--b-bg)',
                padding: '16px 32px', border: 0,
                cursor: state === 'sending' ? 'wait' : 'pointer',
                opacity: state === 'sending' ? 0.7 : 1,
                fontFamily: 'var(--b-f-display)', fontSize: 13,
                letterSpacing: '0.16em', textTransform: 'uppercase',
              }}>
                {state === 'sending' ? 'Sending…' : 'Send ▸'}
              </button>
            </div>
          </form>
        )}

        {/* alt strip */}
        <div style={{
          width: '100%',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          borderTop: '1px solid var(--b-fg)', marginTop: 16,
        }}>
          {[
            ['Phone', phone],
            ['Email', email],
            ['Address', location],
          ].map(([k, v], i) => (
            <div key={k} style={{
              padding: '20px 24px',
              borderRight: i < 2 ? 'var(--b-hair)' : 'none',
              textAlign: 'center',
            }}>
              <BCaption tone="accent">{k}</BCaption>
              <div style={{
                marginTop: 8,
                fontFamily: 'var(--b-f-display)', fontSize: 14,
                letterSpacing: '0.02em', textTransform: 'uppercase',
              }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PageFooter ──────────────────────────────────────────────────
function PageFooter({ brand, email, phone, location, est }) {
  return (
    <footer style={{
      padding: '32px 56px 28px',
      display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr',
      gap: 56,
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <BDisplay size="s" style={{ fontSize: 64, lineHeight: 0.9 }}>
          {brand}<span style={{ color: 'var(--b-accent)' }}>.</span>
        </BDisplay>
        <BCaption>Coach · Athlete · Los Angeles · est. {est}</BCaption>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <BCaption tone="accent">— Reach</BCaption>
        <div style={{ fontFamily: 'var(--b-f-display)', fontSize: 18, textTransform: 'uppercase' }}>{email}</div>
        <div style={{ fontFamily: 'var(--b-f-display)', fontSize: 18, textTransform: 'uppercase' }}>{phone}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-end', textAlign: 'right' }}>
        <BCaption tone="accent">— Floor</BCaption>
        <div style={{ fontFamily: 'var(--b-f-display)', fontSize: 18, textTransform: 'uppercase' }}>{location}</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  HeroSection, DisciplineNav, DisciplineSection,
  QualificationsSection, TestimonialsSection,
  ContactSection, PageFooter,
});