// RelatedContent.jsx — Sobre la firma, Más información, Archivado en, Escaparate

Object.assign(window, { RelatedContent });

const _rc_img = "assets/images/avatars/";

const AUTHOR = {
  name: "Iker Seisdedos",
  avatar: "assets/images/Figure.png",
  bio: "VER BIOGRAFÍA",
  notice: "Recibe nuestro boletín de actualidad económica solo para suscriptores.",
};

const MAS_INFO = [
  {
    img: "assets/images/Container.png",
    title: "Oriente Próximo se encamina hacia la guerra total con la intensificación de los ataques",
    source: "ANTONIO PITA / MACARENA VIDAL LIY | TEL AVIV / WASHINGTON",
  },
  {
    img: "assets/images/Container-1.png",
    title: "Irán designa al triunvirato que dirigirá el país hasta la elección del sucesor de Jamenéi",
    source: "TRINIDAD DEIROS BRONTE | MADRID",
  },
];

const TAGS = [
  "Economía","Golfo pérsico","Carburantes","Precio gasolina","Precio gasóleo","Precio energía",
];

const ESC_TABS = ["Escaparate","Cursos","Cursos online","Idiomas online","EL PAÍS Colecciones"];

const PRODUCTS = [
  { img: null, bg: "#0d1b3e", name: null },
  {
    img: _rc_img + "TX4EQPUR2BEIZMWBRUPIF5EO2M.jpg",
    name: "FIESTA DE OFERTAS DE PRIMAVERA AMAZON. Levi'S 501 Original Fit vaqueros para hombre.",
    price: "52,25€", discount: "42% DE DESCUENTO",
  },
  {
    img: _rc_img + "BF767GIJXFE5JPPWJTRUHFPPAA.jpg",
    name: "Juego de 3 sartenes de Tefal de 22/24/28 cm.",
    price: "59,99€", discount: "40% DE DESCUENTO",
  },
  {
    img: _rc_img + "RQUMRZIEY5CSXIHFZGTOFXKHP4.png",
    name: "Chubasquero Helly Hansen para hombre.",
    price: "73,05€", discount: "46% DE DESCUENTO",
  },
  {
    img: _rc_img + "G34PWFZI2FBE3EHD7XJI43VSIE.png",
    name: "Polo clásico de Levi's para hombre.",
    price: "21,99€", discount: "45% DE DESCUENTO",
  },
];

function RelatedContent() {
  const [activeTab, setActiveTab] = React.useState(3); // "Idiomas online" active by default

  return (
    <div style={{ width: "100%", fontFamily: "Arial, sans-serif" }}>

      {/* ── Sobre la firma ── */}
      <div style={{ marginTop: 28, borderTop: "2px solid #111" }}>
        <div style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 12, color: "#111", textTransform: "uppercase", letterSpacing: 0.5, padding: "10px 0 12px" }}>
          Sobre la firma
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
          <img src={AUTHOR.avatar} alt={AUTHOR.name}
            style={{ width: 72, height: 72, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }}
            onError={e => { e.target.style.display = "none"; }} />
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
              <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 15, color: "#111" }}>{AUTHOR.name}</span>
              {/* X / Twitter icon */}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="#111">
                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.737-8.857L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
              </svg>
            </div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "#111", color: "#fff", borderRadius: 3, padding: "5px 12px", cursor: "pointer" }}>
              <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: 0.3 }}>VER BIOGRAFÍA</span>
              <span style={{ fontSize: 10 }}>▼</span>
            </div>
          </div>
        </div>

        {/* Newsletter + social */}
        <div style={{ display: "flex", alignItems: "center", borderTop: "1px solid #e0e0e0", borderBottom: "1px solid #e0e0e0", padding: "10px 0" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flex: 1 }}>
            {/* Envelope icon */}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#555" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
              <rect x="2" y="4" width="20" height="16" rx="2"/>
              <path d="M2 7l10 7 10-7"/>
            </svg>
            <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#444" }}>
              Recibe nuestro boletín de actualidad económica solo para suscriptores.
            </span>
          </div>
          <div style={{ width: 1, height: 32, background: "#ddd", margin: "0 16px", flexShrink: 0 }} />
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexShrink: 0 }}>
            {/* Facebook */}
            <svg width="18" height="18" viewBox="0 0 24 24" fill="#555" style={{ cursor: "pointer" }}>
              <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
            </svg>
            {/* Instagram */}
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#555" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ cursor: "pointer" }}>
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
              <circle cx="12" cy="12" r="4"/>
              <circle cx="17.5" cy="6.5" r="1" fill="#555" stroke="none"/>
            </svg>
            {/* X / Twitter */}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#555" style={{ cursor: "pointer" }}>
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.737-8.857L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
            </svg>
          </div>
        </div>
      </div>

      {/* ── COMENTARIOS ── */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 0", borderBottom: "2px solid #111", marginBottom: 20 }}>
        <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 13, color: "#111", textTransform: "uppercase", letterSpacing: 0.3 }}>
          Comentarios 90
        </span>
        <a href="#" style={{ fontFamily: "Arial, sans-serif", fontSize: 13, color: "#1a73e8", textDecoration: "none" }}>Normas ›</a>
      </div>

      {/* ── Más información ── */}
      <div style={{ marginBottom: 20 }}>
        <div style={{ borderBottom: "2px solid #111", paddingBottom: 8, marginBottom: 14 }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 12, color: "#111", textTransform: "uppercase", letterSpacing: 0.5 }}>
            Más información
          </span>
        </div>
        {MAS_INFO.map((art, i) => (
          <div key={i} style={{ display: "flex", gap: 14, padding: "12px 0", borderBottom: "1px solid #e8e8e8" }}>
            <div style={{ width: 100, height: 78, background: "#f0f0f0", flexShrink: 0, borderRadius: 2, overflow: "hidden" }}>
              <img src={art.img} alt=""
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                onError={e => { e.target.style.display = "none"; }} />
            </div>
            <div>
              <a href="#" style={{ fontFamily: "Arial, sans-serif", fontSize: 13, fontWeight: 700, color: "#e8321c", lineHeight: 1.4, margin: "0 0 6px", display: "block", textDecoration: "none" }}>
                {art.title}
              </a>
              <span style={{ fontFamily: "Arial, sans-serif", fontSize: 11, color: "#e8321c", textTransform: "uppercase", letterSpacing: 0.3 }}>
                {art.source}
              </span>
            </div>
          </div>
        ))}
      </div>

      {/* ── Archivado en ── */}
      <div style={{ marginBottom: 20 }}>
        <div style={{ borderBottom: "2px solid #111", paddingBottom: 8, marginBottom: 12 }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 12, color: "#111", textTransform: "uppercase", letterSpacing: 0.5 }}>
            Archivado en
          </span>
        </div>
        <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", rowGap: 6 }}>
          {TAGS.map((tag, i) => (
            <React.Fragment key={i}>
              <a href="#" style={{ fontFamily: "Arial, sans-serif", fontSize: 13, color: "#333", textDecoration: "none", whiteSpace: "nowrap" }}>{tag}</a>
              <span style={{ color: "#bbb", margin: "0 6px", fontSize: 13 }}>·</span>
            </React.Fragment>
          ))}
          <div style={{ width: 28, height: 28, borderRadius: "50%", background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", marginLeft: 4 }}>
            <span style={{ fontSize: 12, color: "#555" }}>▾</span>
          </div>
        </div>
      </div>

      {/* ── Trust Project + licensing ── */}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 0, alignItems: "stretch", borderTop: "1px solid #ccc", borderBottom: "4px solid #111", padding: "14px 0", marginBottom: 0 }}>
        <div style={{ flex: 1, minWidth: 200, paddingRight: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#444" }}>Se adhiere a los criterios de</span>
            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
              <div style={{ width: 18, height: 18, background: "#111", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 10, color: "#fff" }}>T</span>
              </div>
              <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#111", fontWeight: 700 }}>The Trust Project</span>
            </div>
          </div>
          <a href="#" style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#444", display: "block", marginTop: 4, textDecoration: "none" }}>Más información ›</a>
        </div>
        <div style={{ width: 1, background: "#ddd", margin: "0 16px", flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 200, display: "flex", alignItems: "center" }}>
          <span style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "#444" }}>
            Si está interesado en licenciar este contenido, pinche{" "}
            <a href="#" style={{ color: "#1a73e8", fontWeight: 400, textDecoration: "none" }}>aquí</a>
          </span>
        </div>
      </div>

      {/* ── Escaparate ── */}
      <div>
        <style>{`
          .esc-tabs-bar::-webkit-scrollbar { display: none; }
          .esc-cards-row::-webkit-scrollbar { display: none; }
        `}</style>

        {/* Tabs */}
        <div className="esc-tabs-bar" style={{ display: "flex", overflowX: "auto", scrollbarWidth: "none", borderBottom: "1px solid #e0e0e0" }}>
          {ESC_TABS.map((tab, i) => (
            <button key={i} onClick={() => setActiveTab(i)} style={{
              background: "none", border: "none", cursor: "pointer",
              fontFamily: "Arial, sans-serif", fontSize: 13,
              fontWeight: activeTab === i ? 700 : 400,
              color: "#111", padding: "10px 16px",
              borderBottom: activeTab === i ? "3px solid #ff0000" : "3px solid transparent",
              marginBottom: -1, whiteSpace: "nowrap", flexShrink: 0,
            }}>{tab}</button>
          ))}
        </div>

        {/* Cards row */}
        <div className="esc-cards-row" style={{ display: "flex", overflowX: "auto", scrollbarWidth: "none", padding: "14px 0 10px", gap: 0 }}>

          {/* Card 1 — gymglish / EL PAÍS (red, narrow) */}
          <div style={{ flexShrink: 0, width: 160, paddingRight: 12 }}>
            <div style={{ width: "100%", height: 210, background: "#e8321c", borderRadius: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, overflow: "hidden" }}>
              <span style={{ fontFamily: "Arial, sans-serif", fontSize: 15, color: "rgba(255,255,255,0.85)", letterSpacing: 1 }}>gymglish</span>
              <div style={{ width: 60, height: 1, background: "rgba(255,255,255,0.5)" }} />
              <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 17, color: "#fff", letterSpacing: 1 }}>EL PAÍS</span>
            </div>
          </div>

          {/* Card 2 — banner (red, wide) */}
          <div style={{ flexShrink: 0, width: 320, paddingRight: 12 }}>
            <div style={{ width: "100%", height: 210, background: "#e8321c", borderRadius: 2, overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "20px 24px", gap: 10 }}>
              <p style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 20, color: "#fff", textAlign: "center", lineHeight: 1.2, margin: 0 }}>
                I love that accent,<br/>but what are you saying?
              </p>
              <p style={{ fontFamily: "Arial, sans-serif", fontSize: 12, color: "rgba(255,255,255,0.9)", textAlign: "center", margin: 0 }}>
                Mejora tus habilidades lingüísticas.
              </p>
              <div style={{ background: "#fff", borderRadius: 20, padding: "6px 20px" }}>
                <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 12, color: "#e8321c" }}>Prueba gratuita</span>
              </div>
              <div style={{ display: "flex", gap: 4 }}>
                {["🇪🇸","🇬🇧","🇩🇪","🇫🇷","🇮🇹"].map((flag, i) => (
                  <span key={i} style={{ fontSize: 14 }}>{flag}</span>
                ))}
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ fontFamily: "Arial, sans-serif", fontSize: 11, color: "rgba(255,255,255,0.8)" }}>gymglish</span>
                <span style={{ color: "rgba(255,255,255,0.5)", fontSize: 11 }}>|</span>
                <span style={{ fontFamily: "Arial, sans-serif", fontWeight: 700, fontSize: 11, color: "#fff" }}>EL PAÍS</span>
              </div>
            </div>
            <p style={{ fontFamily: "Arial, sans-serif", fontSize: 11, color: "#111", lineHeight: 1.5, margin: "8px 0 0" }}>
              Mejora tus habilidades lingüísticas con una Learning Serie.
            </p>
          </div>

          {/* Card 3 — TV illustration */}
          <div style={{ flexShrink: 0, width: 158, paddingRight: 12, paddingLeft: 12, borderLeft: "1px solid #e8e8e8" }}>
            <div style={{ width: "100%", height: 165, background: "#f5f5f5", borderRadius: 2, overflow: "hidden" }}>
              <img src="assets/images/EQ264VFWYBETRIIG5YI4NIPYJI.png.png" alt=""
                style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <p style={{ fontFamily: "Arial, sans-serif", fontSize: 11, color: "#111", lineHeight: 1.5, margin: "8px 0 0" }}>
              Episodios diarios, culturales y personalizados.
            </p>
          </div>

          {/* Card 4 — certificate */}
          <div style={{ flexShrink: 0, width: 158, paddingRight: 12, paddingLeft: 12, borderLeft: "1px solid #e8e8e8" }}>
            <div style={{ width: "100%", height: 165, background: "#f5f5f5", borderRadius: 2, overflow: "hidden" }}>
              <img src="assets/images/A2U57LVM5VEKBBWSO77S7QQBOQ.png.png" alt=""
                style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <p style={{ fontFamily: "Arial, sans-serif", fontSize: 11, color: "#111", lineHeight: 1.5, margin: "8px 0 0" }}>
              Evaluación de nivel y certificado pedagógico al acabar la formación.
            </p>
          </div>

          {/* Card 5 — gymglish branding */}
          <div style={{ flexShrink: 0, width: 158, paddingLeft: 12, borderLeft: "1px solid #e8e8e8" }}>
            <div style={{ width: "100%", height: 165, background: "#f5f5f5", borderRadius: 2, overflow: "hidden" }}>
              <img src="assets/images/CNKTNYKTKVE57BQMYFLEOL2CSI.png.png" alt=""
                style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <p style={{ fontFamily: "Arial, sans-serif", fontSize: 11, color: "#111", lineHeight: 1.5, margin: "8px 0 0" }}>
              Prueba 7 días gratis y sin compromiso.
            </p>
          </div>

        </div>
      </div>

    </div>
  );
}