// 12 — Director + carta de compromiso
function CDirector() {
  const [, t] = window.useLang();
  return (
    <section className="cgclm-dir">
      <style>{`
        .cgclm-dir { padding: 80px 40px; background: var(--c-cream-deep); }
        .cgclm-dir .cd-grid {
          display: grid;
          grid-template-columns: 0.85fr 1.2fr;
          gap: 56px;
          align-items: stretch;
        }
        .cgclm-dir .cd-photo {
          aspect-ratio: 4/5;
          background-image: url('assets/miguel-angel-gomez-borja.webp');
          background-size: cover;
          background-position: center top;
          background-color: var(--c-aubergine);
          border-radius: 18px;
          color: rgba(242,239,228,0.95);
          font: 500 11px monospace;
          letter-spacing: 0.04em;
          display: flex; align-items: end; padding: 22px;
          position: relative;
          overflow: hidden;
        }
        .cgclm-dir .cd-photo::after {
          content: "";
          position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
          pointer-events: none;
        }
        .cgclm-dir .cd-photo > * { position: relative; z-index: 2; }
        .cgclm-dir .cd-photo::before {
          content: "";
          position: absolute; top: 22px; left: 22px;
          width: 28px; height: 28px;
          border-left: 2px solid var(--c-saffron);
          border-top: 2px solid var(--c-saffron);
          z-index: 2;
        }
        .cgclm-dir .cd-photo-meta {
          position: absolute;
          top: 22px; right: 22px;
          font-family: var(--font-impact);
          font-size: 10px; letter-spacing: 0.18em;
          padding: 6px 10px;
          background: rgba(242,239,228,0.12);
          color: var(--c-cream);
          border-radius: 4px;
        }
        .cgclm-dir .cd-letter {
          background: var(--c-cream);
          border-radius: 18px;
          padding: 48px 48px;
          position: relative;
        }
        .cgclm-dir .cd-letter-tag {
          font-family: var(--font-impact);
          font-size: 11px; letter-spacing: 0.22em;
          color: var(--c-green-deep);
          text-transform: uppercase;
          margin-bottom: 14px;
        }
        .cgclm-dir .cd-letter-title {
          font-family: var(--font-script);
          font-size: clamp(48px, 6vw, 80px);
          line-height: 1;
          color: var(--c-red);
          margin: 0 0 30px;
          font-weight: 400;
        }
        .cgclm-dir .cd-letter-body p {
          font-family: var(--font-display);
          font-weight: 400;
          font-size: 17px;
          line-height: 1.65;
          color: var(--c-ink);
          margin: 0 0 16px;
          text-wrap: pretty;
        }
        .cgclm-dir .cd-letter-body p:first-child {
          font-style: italic;
          color: var(--c-aubergine);
        }
        .cgclm-dir .cd-sign {
          margin-top: 32px;
          padding-top: 24px;
          border-top: 1px solid var(--c-line);
        }
        .cgclm-dir .cd-sign-pre {
          font: 400 14px var(--font-body);
          font-style: italic;
          color: var(--c-ink-soft);
          margin-bottom: 12px;
        }
        .cgclm-dir .cd-signature {
          font-family: var(--font-script);
          font-size: 38px;
          color: var(--c-red);
          line-height: 1;
          margin: 0 0 6px;
        }
        .cgclm-dir .cd-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 17px;
          color: var(--c-ink);
        }
        .cgclm-dir .cd-role {
          font: 400 13px var(--font-body);
          color: var(--c-ink-soft);
        }
        @media (max-width: 1000px) {
          .cgclm-dir .cd-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 600px) {
          .cgclm-dir { padding: 56px 22px; }
          .cgclm-dir .cd-letter { padding: 32px 24px; }
        }
      `}</style>

      <div className="cd-grid">
        <div className="cd-photo">
          <span className="cd-photo-meta">{t.director.kicker}</span>
          <span style={{
            fontFamily: 'var(--font-display)',
            fontSize: 18,
            fontWeight: 600,
            color: 'var(--c-cream)',
            lineHeight: 1.2,
            letterSpacing: '-0.01em',
          }}>
            {t.director.name}
            <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 400, opacity: 0.85, marginTop: 4 }}>
              {t.director.role}
            </span>
          </span>
        </div>
        <article className="cd-letter">
          <div className="cd-letter-tag">— {t.director.kicker}</div>
          <h2 className="cd-letter-title">{t.director.letterTitle}</h2>
          <div className="cd-letter-body">
            {t.director.letter.map((p, i) => <p key={i}>{p}</p>)}
          </div>
          <div className="cd-sign">
            <div className="cd-sign-pre">{t.director.sign}</div>
            <div className="cd-signature">{t.director.name.replace('Dr. ', '')}</div>
            <div className="cd-name">{t.director.name}</div>
            <div className="cd-role">{t.director.role}</div>
          </div>
        </article>
      </div>
    </section>
  );
}
window.CDirector = CDirector;