/* global React */
const { Fragment, useEffect, useState } = React;

/* =====================================================================
   Slide chrome — marca superior (sección / brand / handle).
   ===================================================================== */

function Chrome({ section, n, total = 20, brand = "INTERFACE SCHOOL" }) {
  return (
    <Fragment>
      <div className="chrome-top">
        <span><span className="slash">/</span>{section}</span>
        <div className="chrome-brand-row">
          <span>{brand}</span>
          <span>@SHOVILLALBA</span>
        </div>
      </div>
    </Fragment>
  );
}

function Eyebrow({ children }) {
  return <div className="eyebrow"><span className="slash">/</span>{children}</div>;
}

/* =====================================================================
   Reusable layout: section divider — big number + label
   ===================================================================== */
function SectionDivider({ num, label, title, sub }) {
  return (
    <div className="frame" style={{ justifyContent: "space-between" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 28 }}>
        <span className="eyebrow" style={{ fontSize: 28 }}><span className="slash">/</span>SECCIÓN {num}</span>
        <span className="eyebrow" style={{ fontSize: 28, color: "var(--fg-3)" }}>· {label}</span>
      </div>
      <div>
        <h2 className="title" style={{ fontSize: 160, lineHeight: 0.9, textTransform: "uppercase", maxWidth: 1700 }}>
          {title}
        </h2>
        {sub && <p className="subtitle" style={{ marginTop: 40, maxWidth: 1300 }}>{sub}</p>}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
        <div className="mono" style={{ fontSize: 22, color: "var(--fg-3)" }}>SCROLL ↓</div>
        <div className="is-mark">IS</div>
      </div>
    </div>
  );
}

/* =====================================================================
   IS Logo — small wordmark
   ===================================================================== */
function ISWordmark({ small }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
      <div className="is-mark" style={small ? { width: 40, height: 40, fontSize: 16 } : null}>IS</div>
      <span className="mono" style={{ fontSize: small ? 24 : 26, fontWeight: 700, letterSpacing: "0.08em" }}>
        INTERFACE SCHOOL
      </span>
    </div>
  );
}

window.Chrome = Chrome;
window.Eyebrow = Eyebrow;
window.SectionDivider = SectionDivider;
window.ISWordmark = ISWordmark;