// Bilingual section — "Fully bilingual" callout placed between Experience and Expertise
// Positioned as a high-contrast standout band that breaks the rhythm of dark/light alternation.

function BilingualSection({ density, motion }) {
  const pad = density === "compact" ? "100px 0" : density === "comfy" ? "180px 0" : "140px 0";
  return (
    <section id="bilingual" style={{
      background: "#0F8C6E",
      padding: pad,
      position: "relative",
      overflow: "hidden",
      color: "#ffffff",
    }}>
      {/* Diagonal hatch decoration */}
      <div style={{
        position: "absolute",
        inset: 0,
        backgroundImage: "repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 60px)",
        pointerEvents: "none",
      }} />
      {/* Big ghost wordmark */}
      <div style={{
        position: "absolute",
        right: "-4%",
        bottom: "-30%",
        fontFamily: "Outfit, sans-serif",
        fontWeight: 700,
        fontSize: "clamp(280px, 40vw, 560px)",
        lineHeight: 0.85,
        letterSpacing: "-0.06em",
        color: "rgba(255,255,255,0.06)",
        pointerEvents: "none",
        userSelect: "none",
        whiteSpace: "nowrap",
      }}>EN · ES</div>

      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 48px", position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <Reveal motion={motion}>
            <div style={{
              fontFamily: "Outfit, sans-serif",
              fontSize: 11,
              fontWeight: 600,
              letterSpacing: "3px",
              textTransform: "uppercase",
              color: "rgba(255,255,255,0.85)",
              marginBottom: 24,
              display: "flex",
              alignItems: "center",
              gap: 12,
            }}>
              <span style={{ width: 24, height: 1, background: "rgba(255,255,255,0.85)" }} />
              A rare combination
            </div>
            <div style={{ display: "flex", gap: 16, alignItems: "baseline", flexWrap: "wrap" }}>
              <span style={{
                fontFamily: "Outfit, sans-serif",
                fontWeight: 700,
                fontSize: 18,
                color: "#ffffff",
                background: "rgba(255,255,255,0.18)",
                padding: "10px 18px",
                letterSpacing: "0.05em",
              }}>EN</span>
              <span style={{
                fontFamily: "Outfit, sans-serif",
                fontWeight: 300,
                fontSize: 28,
                color: "rgba(255,255,255,0.6)",
              }}>+</span>
              <span style={{
                fontFamily: "Outfit, sans-serif",
                fontWeight: 700,
                fontSize: 18,
                color: "#ffffff",
                background: "rgba(255,255,255,0.18)",
                padding: "10px 18px",
                letterSpacing: "0.05em",
              }}>ES</span>
            </div>
          </Reveal>
          <Reveal motion={motion} delay={140}>
            <h2 style={{
              fontFamily: "Outfit, sans-serif",
              fontWeight: 700,
              fontSize: "clamp(40px, 5vw, 68px)",
              lineHeight: 1.02,
              letterSpacing: "-1.5px",
              color: "#ffffff",
              margin: "0 0 32px",
              textWrap: "balance",
            }}>
              Fully bilingual<br/>consulting — in English<br/>and Spanish.
            </h2>
            <p style={{
              fontFamily: "Outfit, sans-serif",
              fontSize: 19,
              fontWeight: 400,
              lineHeight: 1.7,
              color: "rgba(255,255,255,0.92)",
              margin: "0 0 24px",
              maxWidth: 640,
              textWrap: "pretty",
            }}>
              All consulting services are available in Spanish — from donor conversations and board training to strategic planning facilitation and staff coaching. Few consultants can serve Spanish-speaking organizations at this level of depth and experience.
            </p>
            <p style={{
              fontFamily: "Outfit, sans-serif",
              fontSize: 17,
              fontStyle: "italic",
              fontWeight: 300,
              lineHeight: 1.6,
              color: "rgba(255,255,255,0.75)",
              margin: 0,
              paddingLeft: 20,
              borderLeft: "2px solid rgba(255,255,255,0.4)",
              maxWidth: 600,
            }}>
              Todos mis servicios de consultoría están disponibles en español.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.BilingualSection = BilingualSection;