/* global React */
const { useMemo } = React;

/* ──────────────────────────────────────────────────────────────────────────
   ICONS — clean line-art SVGs (no AI mush)
   ────────────────────────────────────────────────────────────────────────── */
const Stroke = ({ children, c = "currentColor", w = 2 }) => (
  <svg viewBox="0 0 64 64" fill="none" stroke={c} strokeWidth={w}
       strokeLinecap="round" strokeLinejoin="round"
       style={{ width: "100%", height: "100%", display: "block" }}>
    {children}
  </svg>
);

const IcClipper = ({ c }) => (
  <Stroke c={c} w={2.2}>
    {/* blade with teeth */}
    <path d="M6 20 L30 20 L34 26 L30 32 L6 32 Z" />
    <path d="M10 32 L10 35 M14 32 L14 35 M18 32 L18 35 M22 32 L22 35 M26 32 L26 35" />
    {/* body */}
    <rect x="30" y="14" width="26" height="24" rx="3" />
    {/* button + grill */}
    <circle cx="44" cy="20" r="2.4" />
    <path d="M36 28 L52 28 M36 32 L52 32" />
    {/* cord */}
    <path d="M50 38 C 50 46, 56 48, 58 56" />
  </Stroke>
);

const IcScissors = ({ c }) => (
  <Stroke c={c} w={2.2}>
    <circle cx="16" cy="46" r="8" />
    <circle cx="48" cy="46" r="8" />
    <path d="M22 40 L58 12" />
    <path d="M42 40 L6 12" />
    <circle cx="32" cy="28" r="2" />
  </Stroke>
);

const IcPhone = ({ c }) => (
  <Stroke c={c} w={2.2}>
    <rect x="18" y="6" width="28" height="52" rx="4" />
    <path d="M28 12 L36 12" />
    <circle cx="32" cy="50" r="2" />
    {/* magnifier inside the phone screen */}
    <circle cx="30" cy="28" r="6" />
    <path d="M34.5 32.5 L39 37" />
  </Stroke>
);

const IcDollar = ({ c }) => (
  <Stroke c={c} w={2.2}>
    <circle cx="32" cy="32" r="22" />
    <path d="M32 14 L32 50" />
    <path d="M40 22 H 28 a5 5 0 0 0 0 10 h 8 a5 5 0 0 1 0 10 H 24" />
  </Stroke>
);

const IcCalendar = ({ c }) => (
  <Stroke c={c} w={2.2}>
    <rect x="8" y="12" width="48" height="44" rx="3" />
    <path d="M8 24 L56 24" />
    <path d="M20 6 L20 18 M44 6 L44 18" />
    <circle cx="20" cy="36" r="1.6" fill={c} />
    <circle cx="32" cy="36" r="1.6" fill={c} />
    <circle cx="44" cy="36" r="1.6" fill={c} />
    <circle cx="20" cy="46" r="1.6" fill={c} />
    <circle cx="32" cy="46" r="1.6" fill={c} />
  </Stroke>
);

const IcPin = ({ c }) => (
  <Stroke c={c} w={2.2}>
    <path d="M32 6 C 20 6 12 14 12 26 C 12 38 32 58 32 58 C 32 58 52 38 52 26 C 52 14 44 6 32 6 Z" />
    <circle cx="32" cy="24" r="6" />
  </Stroke>
);

const IcInstagram = ({ c }) => (
  <Stroke c={c} w={2.2}>
    <rect x="8" y="8" width="48" height="48" rx="12" />
    <circle cx="32" cy="32" r="11" />
    <circle cx="46" cy="18" r="2.4" fill={c} stroke="none" />
  </Stroke>
);

const IcMustache = ({ c }) => (
  <svg viewBox="0 0 64 24" fill={c}
       style={{ width: "100%", height: "100%", display: "block" }}>
    <path d="M32 12 C 28 8, 22 6, 14 8 C 8 9, 4 12, 2 14 C 6 12, 10 12, 14 14 C 20 17, 26 14, 32 12 Z" />
    <path d="M32 12 C 36 8, 42 6, 50 8 C 56 9, 60 12, 62 14 C 58 12, 54 12, 50 14 C 44 17, 38 14, 32 12 Z" />
  </svg>
);

/* ──────────────────────────────────────────────────────────────────────────
   THEME PRESETS
   ────────────────────────────────────────────────────────────────────────── */
const THEMES = {
  classic: {
    label: "Preto · Dourado · Prata",
    bg1: "#08080a",
    bg2: "#16140e",
    surface: "#0e0d10",
    text: "#f3ede0",
    textMuted: "rgba(243,237,224,0.62)",
    accent: "#d4a44a",            // gold
    accentDeep: "#7a5a1e",
    accentLight: "#f0d488",
    metal: "#dcd8d0",             // silver title fill
    metalDeep: "#7c7a73",
    rule: "rgba(212,164,74,0.45)",
    photoMaskColor: "8,8,10",     // rgb to fade photos to
    foilOnDark: true,
  },
  emerald: {
    label: "Preto · Esmeralda · Dourado",
    bg1: "#040a08",
    bg2: "#0a1a14",
    surface: "#06120d",
    text: "#f3ede0",
    textMuted: "rgba(243,237,224,0.62)",
    accent: "#d4a44a",
    accentDeep: "#7a5a1e",
    accentLight: "#f0d488",
    metal: "#1a8a5e",             // emerald for the title
    metalDeep: "#0b3d2a",
    rule: "rgba(212,164,74,0.45)",
    photoMaskColor: "4,12,9",
    foilOnDark: true,
  },
  cream: {
    label: "Creme · Preto · Dourado",
    bg1: "#f1e9d8",
    bg2: "#e6dcc6",
    surface: "#efe6d2",
    text: "#0d0c0a",
    textMuted: "rgba(13,12,10,0.58)",
    accent: "#a07a2c",            // antique gold on cream
    accentDeep: "#5a4416",
    accentLight: "#d0a44a",
    metal: "#0d0c0a",             // black title fill
    metalDeep: "#3a3328",
    rule: "rgba(160,122,44,0.55)",
    photoMaskColor: "241,233,216",
    foilOnDark: false,
  },
};

/* ──────────────────────────────────────────────────────────────────────────
   FOIL TEXT — chunky title with metallic gradient + chiseled depth
   ────────────────────────────────────────────────────────────────────────── */
function Foil({ children, theme, fontSize = 168, letterSpacing = "-2px", lineHeight = 0.86 }) {
  const t = theme;
  const isDark = t.foilOnDark;
  // metallic gradient — slightly off-axis to read as light hitting metal
  const grad = isDark
    ? `linear-gradient(180deg,
         ${shade(t.accent, 25)} 0%,
         ${shade(t.accent, 8)} 22%,
         ${t.accentLight} 38%,
         ${t.accent} 52%,
         ${shade(t.accent, -18)} 70%,
         ${shade(t.accent, -32)} 88%,
         ${shade(t.accent, -10)} 100%)`
    : `linear-gradient(180deg,
         ${shade(t.metal, 30)} 0%,
         ${shade(t.metal, 10)} 35%,
         ${t.metal} 60%,
         ${shade(t.metal, -10)} 100%)`;

  return (
    <div style={{
      fontFamily: "'Anton', 'Oswald', sans-serif",
      fontWeight: 400,
      fontSize,
      lineHeight,
      letterSpacing,
      textTransform: "uppercase",
      backgroundImage: grad,
      WebkitBackgroundClip: "text",
      backgroundClip: "text",
      color: "transparent",
      WebkitTextStroke: isDark ? `1px ${shade(t.accent, -55)}` : "0",
      filter: isDark
        ? `drop-shadow(0 2px 0 ${shade(t.accent, -55)}) drop-shadow(0 6px 12px rgba(0,0,0,0.7))`
        : "drop-shadow(0 1px 0 rgba(0,0,0,0.18))",
      textAlign: "center",
    }}>
      {children}
    </div>
  );
}

// shade helper — quick lighten/darken on a hex
function shade(hex, pct) {
  const h = hex.replace("#", "");
  const n = parseInt(h, 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  const f = pct / 100;
  r = Math.round(r + (f > 0 ? (255 - r) : r) * f);
  g = Math.round(g + (f > 0 ? (255 - g) : g) * f);
  b = Math.round(b + (f > 0 ? (255 - b) : b) * f);
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return `rgb(${r},${g},${b})`;
}

/* ──────────────────────────────────────────────────────────────────────────
   BACKGROUND — brushed metal noise + soft light rays + corner ornaments
   ────────────────────────────────────────────────────────────────────────── */
function FlyerBackground({ theme }) {
  const t = theme;
  const isDark = t.foilOnDark;
  return (
    <>
      {/* base radial wash */}
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(120% 80% at 50% 8%, ${t.bg2} 0%, ${t.bg1} 55%, ${isDark ? "#000" : t.bg2} 100%)`,
      }} />
      {/* brushed-metal noise (SVG fractal) */}
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: isDark ? 0.18 : 0.10, mixBlendMode: isDark ? "screen" : "multiply", pointerEvents: "none" }}>
        <defs>
          <filter id={`noise-${t.label}`}>
            <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="3" />
            <feColorMatrix values="0 0 0 0 0.55  0 0 0 0 0.55  0 0 0 0 0.55  0 0 0 1 0" />
          </filter>
          <filter id={`brush-${t.label}`}>
            <feTurbulence type="fractalNoise" baseFrequency="0.012 0.6" numOctaves="2" seed="7" />
            <feColorMatrix values="0 0 0 0 0.45  0 0 0 0 0.42  0 0 0 0 0.38  0 0 0 0.7 0" />
          </filter>
        </defs>
        <rect width="100%" height="100%" filter={`url(#brush-${t.label})`} />
        <rect width="100%" height="100%" filter={`url(#noise-${t.label})`} opacity="0.35" />
      </svg>

      {/* light rays from upper corners (very subtle) */}
      {isDark && (
        <>
          <div style={{
            position: "absolute", left: "-8%", top: "-15%", width: "70%", height: "60%",
            background: `radial-gradient(ellipse at 30% 40%, ${hexToRGBA(t.accent, 0.10)} 0%, transparent 60%)`,
            transform: "rotate(-12deg)",
            pointerEvents: "none",
          }} />
          <div style={{
            position: "absolute", right: "-8%", top: "-12%", width: "70%", height: "55%",
            background: `radial-gradient(ellipse at 70% 40%, ${hexToRGBA(t.accent, 0.08)} 0%, transparent 60%)`,
            transform: "rotate(10deg)",
            pointerEvents: "none",
          }} />
        </>
      )}

      {/* corner hairline ornaments */}
      <CornerOrnaments color={t.rule} />

      {/* decorative shears + clipper, very subtle in sides */}
      <div style={{
        position: "absolute", left: "-40px", top: "60px", width: "240px", height: "240px",
        opacity: isDark ? 0.07 : 0.10, transform: "rotate(-18deg)",
        color: t.accent, pointerEvents: "none",
      }}>
        <IcClipper c="currentColor" />
      </div>
      <div style={{
        position: "absolute", right: "-30px", top: "70px", width: "230px", height: "230px",
        opacity: isDark ? 0.07 : 0.10, transform: "rotate(28deg)",
        color: t.accent, pointerEvents: "none",
      }}>
        <IcScissors c="currentColor" />
      </div>

      {/* vignette */}
      <div style={{
        position: "absolute", inset: 0,
        boxShadow: `inset 0 0 240px ${isDark ? "rgba(0,0,0,0.7)" : "rgba(60,40,10,0.25)"}`,
        pointerEvents: "none",
      }} />
    </>
  );
}

function CornerOrnaments({ color }) {
  // four corner L-brackets — very thin, double rule
  const arm = 92;
  const off = 36;
  const stroke = `1px solid ${color}`;
  const corner = (style) => (
    <div style={{
      position: "absolute",
      width: arm, height: arm,
      ...style,
      pointerEvents: "none",
    }}>
      <div style={{ position: "absolute", ...style.borders }} />
    </div>
  );
  return (
    <>
      {/* top-left */}
      <div style={{ position: "absolute", left: off, top: off, width: arm, height: arm, pointerEvents: "none" }}>
        <div style={{ position: "absolute", left: 0, top: 0, width: "100%", borderTop: stroke }} />
        <div style={{ position: "absolute", left: 0, top: 0, height: "100%", borderLeft: stroke }} />
        <div style={{ position: "absolute", left: 6, top: 6, width: "60%", borderTop: stroke, opacity: 0.6 }} />
        <div style={{ position: "absolute", left: 6, top: 6, height: "60%", borderLeft: stroke, opacity: 0.6 }} />
      </div>
      {/* top-right */}
      <div style={{ position: "absolute", right: off, top: off, width: arm, height: arm, pointerEvents: "none" }}>
        <div style={{ position: "absolute", right: 0, top: 0, width: "100%", borderTop: stroke }} />
        <div style={{ position: "absolute", right: 0, top: 0, height: "100%", borderRight: stroke }} />
        <div style={{ position: "absolute", right: 6, top: 6, width: "60%", borderTop: stroke, opacity: 0.6 }} />
        <div style={{ position: "absolute", right: 6, top: 6, height: "60%", borderRight: stroke, opacity: 0.6 }} />
      </div>
      {/* bottom-left */}
      <div style={{ position: "absolute", left: off, bottom: off, width: arm, height: arm, pointerEvents: "none" }}>
        <div style={{ position: "absolute", left: 0, bottom: 0, width: "100%", borderBottom: stroke }} />
        <div style={{ position: "absolute", left: 0, bottom: 0, height: "100%", borderLeft: stroke }} />
        <div style={{ position: "absolute", left: 6, bottom: 6, width: "60%", borderBottom: stroke, opacity: 0.6 }} />
        <div style={{ position: "absolute", left: 6, bottom: 6, height: "60%", borderLeft: stroke, opacity: 0.6 }} />
      </div>
      {/* bottom-right */}
      <div style={{ position: "absolute", right: off, bottom: off, width: arm, height: arm, pointerEvents: "none" }}>
        <div style={{ position: "absolute", right: 0, bottom: 0, width: "100%", borderBottom: stroke }} />
        <div style={{ position: "absolute", right: 0, bottom: 0, height: "100%", borderRight: stroke }} />
        <div style={{ position: "absolute", right: 6, bottom: 6, width: "60%", borderBottom: stroke, opacity: 0.6 }} />
        <div style={{ position: "absolute", right: 6, bottom: 6, height: "60%", borderRight: stroke, opacity: 0.6 }} />
      </div>
    </>
  );
}

function hexToRGBA(hex, a) {
  if (hex.startsWith("rgb")) return hex;
  const h = hex.replace("#", "");
  const n = parseInt(h, 16);
  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${a})`;
}

/* ──────────────────────────────────────────────────────────────────────────
   PORTRAIT — masked photo with vignette fade-to-bg
   ────────────────────────────────────────────────────────────────────────── */
function Portrait({ src, imgStyle = {}, theme, side, maskTightness = "normal", extraDarken = 0 }) {
  const t = theme;
  // Same layered-fade approach as before — but use an <img> tag with explicit
  // sizing/offsets for zoom, instead of background-image. Background-image
  // does not render reliably inside a transformed/scaled ancestor (which
  // design_canvas uses), while <img> does.
  const center = side === "left" ? "52%" : "48%";
  const radial = `radial-gradient(circle at ${center} 38%,
            transparent 25%,
            rgba(${t.photoMaskColor},0.10) 45%,
            rgba(${t.photoMaskColor},0.35) 65%,
            rgba(${t.photoMaskColor},0.7) 82%,
            rgba(${t.photoMaskColor},0.95) 100%)`;
  const seamFade = side === "left"
    ? `linear-gradient(90deg, transparent 0%, transparent 55%, rgba(${t.photoMaskColor},0.4) 80%, rgba(${t.photoMaskColor},1) 100%)`
    : `linear-gradient(90deg, rgba(${t.photoMaskColor},1) 0%, rgba(${t.photoMaskColor},0.4) 20%, transparent 45%, transparent 100%)`;
  const outerFade = side === "left"
    ? `linear-gradient(90deg, rgba(${t.photoMaskColor},1) 0%, rgba(${t.photoMaskColor},0.5) 8%, transparent 22%, transparent 100%)`
    : `linear-gradient(90deg, transparent 0%, transparent 78%, rgba(${t.photoMaskColor},0.5) 92%, rgba(${t.photoMaskColor},1) 100%)`;
  const topFade = `linear-gradient(180deg, rgba(${t.photoMaskColor},1) 0%, rgba(${t.photoMaskColor},0.85) 4%, rgba(${t.photoMaskColor},0.45) 10%, transparent 22%, transparent 100%)`;
  const bottomFade = `linear-gradient(180deg, transparent 45%, rgba(${t.photoMaskColor},0.5) 70%, rgba(${t.photoMaskColor},1) 92%)`;

  return (
    <div style={{
      position: "relative",
      width: "100%",
      height: "100%",
      overflow: "hidden",
      backgroundColor: `rgb(${t.photoMaskColor})`,
    }}>
      <img src={src} alt="" style={{
        position: "absolute",
        display: "block",
        userSelect: "none",
        ...imgStyle,
      }} />
      {extraDarken > 0 && (
        <div style={{
          position: "absolute", inset: 0,
          background: `rgba(${t.photoMaskColor}, ${extraDarken})`,
          pointerEvents: "none",
        }} />
      )}
      <div style={{ position: "absolute", inset: 0, background: radial,     pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 0, background: seamFade,   pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 0, background: outerFade,  pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 0, background: topFade,    pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 0, background: bottomFade, pointerEvents: "none" }} />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   TOPIC ICON BLOCK
   ────────────────────────────────────────────────────────────────────────── */
function Topic({ Icon, title, sub, theme }) {
  const t = theme;
  return (
    <div style={{
      display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
      flex: 1, minWidth: 0, padding: "0 6px",
    }}>
      <div style={{ width: 54, height: 54, color: t.accent }}>
        <Icon c={t.accent} />
      </div>
      <div style={{
        fontFamily: "'Oswald', sans-serif",
        fontWeight: 600,
        fontSize: 16.5,
        letterSpacing: "1.4px",
        textTransform: "uppercase",
        color: t.text,
        textAlign: "center",
        lineHeight: 1.2,
      }}>
        {title}
      </div>
      {sub && (
        <div style={{
          fontFamily: "'Oswald', sans-serif",
          fontWeight: 400,
          fontSize: 13,
          letterSpacing: "1px",
          textTransform: "uppercase",
          color: t.textMuted,
          textAlign: "center",
          lineHeight: 1.3,
          marginTop: -4,
        }}>
          {sub}
        </div>
      )}
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   INFO COLUMN
   ────────────────────────────────────────────────────────────────────────── */
function InfoCol({ Icon, theme, children }) {
  const t = theme;
  return (
    <div style={{
      flex: 1, display: "flex", flexDirection: "column",
      alignItems: "center", gap: 10, padding: "0 12px",
    }}>
      <div style={{ width: 44, height: 44, color: t.accent }}>
        <Icon c={t.accent} />
      </div>
      <div style={{ textAlign: "center", color: t.text }}>{children}</div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   BE MONOGRAM
   ────────────────────────────────────────────────────────────────────────── */
function BEMonogram({ theme, size = 76 }) {
  const t = theme;
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} style={{ display: "block" }}>
      <defs>
        <linearGradient id={`be-${t.label}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={shade(t.accent, 25)} />
          <stop offset="50%" stopColor={t.accentLight} />
          <stop offset="100%" stopColor={shade(t.accent, -25)} />
        </linearGradient>
      </defs>
      <rect x="4" y="4" width="92" height="92" rx="6" fill="none"
            stroke={`url(#be-${t.label})`} strokeWidth="2" />
      <rect x="10" y="10" width="80" height="80" rx="3" fill="none"
            stroke={`url(#be-${t.label})`} strokeWidth="0.8" opacity="0.55" />
      <text x="50" y="62" textAnchor="middle"
            fontFamily="Anton, sans-serif" fontWeight="400"
            fontSize="44" letterSpacing="-1"
            fill={`url(#be-${t.label})`}>BE</text>
    </svg>
  );
}

/* ──────────────────────────────────────────────────────────────────────────
   FLYER — the actual poster
   ────────────────────────────────────────────────────────────────────────── */
function Flyer({ theme }) {
  const t = theme;
  return (
    <div style={{
      position: "relative",
      width: 1080, height: 1620,
      background: t.bg1,
      color: t.text,
      fontFamily: "'Inter', sans-serif",
      overflow: "hidden",
    }}>
      <FlyerBackground theme={t} />

      {/* ── EYEBROW ─────────────────────────────────────── */}
      <div style={{
        position: "absolute", top: 50, left: 0, right: 0,
        textAlign: "center",
        fontFamily: "'Oswald', sans-serif",
        fontWeight: 500,
        fontSize: 20,
        letterSpacing: "11px",
        color: t.text,
        textTransform: "uppercase",
        zIndex: 5,
      }}>
        Workshop Presencial
      </div>

      {/* ── PORTRAITS ───────────────────────────────────── */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: 112,
        height: 580,
        display: "grid", gridTemplateColumns: "1fr 1fr",
        zIndex: 2,
      }}>
        <Portrait
          src="assets/cristian.png"
          imgStyle={{ width: 1300, height: "auto", left: -380, top: -150 }}
          theme={t}
          side="left"
          maskTightness="tight"
          extraDarken={0.08}
        />
        <Portrait
          src="assets/alex.jpg"
          imgStyle={{ width: 720, height: "auto", left: -90, top: -130 }}
          theme={t}
          side="right"
          maskTightness="normal"
        />
      </div>

      {/* BE ghost watermark behind portraits */}
      <div style={{
        position: "absolute", top: 200, left: "50%",
        transform: "translateX(-50%)",
        opacity: t.foilOnDark ? 0.10 : 0.07,
        zIndex: 1,
      }}>
        <BEMonogram theme={t} size={320} />
      </div>

      {/* ── NAME LABELS (overlap photos) ─────────────────── */}
      <NameLabel
        theme={t}
        script="Cristian"
        last="Reis"
        role="Educador"
        style={{ left: 60, top: 540 }}
      />
      <NameLabel
        theme={t}
        script="Alex"
        last="Torres"
        role="Educador"
        style={{ right: 60, top: 540, textAlign: "right" }}
        align="right"
      />

      {/* ── TITLE ───────────────────────────────────────── */}
      <div style={{
        position: "absolute", top: 720, left: 0, right: 0,
        zIndex: 6,
      }}>
        <Foil theme={t} fontSize={162} letterSpacing="-3px" lineHeight={0.85}>
          BARBER
        </Foil>
        <div style={{ height: 2 }} />
        <Foil theme={t} fontSize={162} letterSpacing="-3px" lineHeight={0.85}>
          EVOLUTION
        </Foil>
      </div>

      {/* ── SUBTITLE ────────────────────────────────────── */}
      <div style={{
        position: "absolute", top: 1042, left: 0, right: 0,
        textAlign: "center",
        fontFamily: "'Oswald', sans-serif",
        fontWeight: 400,
        fontSize: 18,
        letterSpacing: "6px",
        textTransform: "uppercase",
        color: t.text,
        zIndex: 6,
      }}>
        Evolua suas técnicas. <span style={{ color: t.accent, fontWeight: 600 }}>Transforme sua carreira.</span>
      </div>

      {/* divider */}
      <div style={{
        position: "absolute", top: 1095, left: 130, right: 130, height: 1,
        background: `linear-gradient(90deg, transparent, ${t.rule}, transparent)`,
        zIndex: 6,
      }} />

      {/* ── 4 TOPICS ────────────────────────────────────── */}
      <div style={{
        position: "absolute", top: 1125, left: 70, right: 70,
        display: "flex", justifyContent: "space-between", alignItems: "flex-start",
        gap: 6,
        zIndex: 6,
      }}>
        <Topic Icon={IcClipper}   title="Técnicas" sub="de Fade" theme={t} />
        <Divider theme={t} />
        <Topic Icon={IcScissors}  title="Técnicas" sub="de Tesoura" theme={t} />
        <Divider theme={t} />
        <Topic Icon={IcPhone}     title="Posicionamento" sub="no Digital" theme={t} />
        <Divider theme={t} />
        <Topic Icon={IcDollar}    title="Vendas" sub="produtos & serviços" theme={t} />
      </div>

      {/* divider */}
      <div style={{
        position: "absolute", top: 1280, left: 130, right: 130, height: 1,
        background: `linear-gradient(90deg, transparent, ${t.rule}, transparent)`,
        zIndex: 6,
      }} />

      {/* ── INFO 3 COLUMNS ──────────────────────────────── */}
      <div style={{
        position: "absolute", top: 1305, left: 70, right: 70,
        display: "flex", alignItems: "flex-start", gap: 6,
        zIndex: 6,
      }}>
        <InfoCol Icon={IcCalendar} theme={t}>
          <div style={{
            fontFamily: "'Anton', sans-serif", fontSize: 36, lineHeight: 1,
            color: t.accent, letterSpacing: "1px",
          }}>12/07</div>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 13, letterSpacing: "3px",
            marginTop: 6, color: t.text, textTransform: "uppercase",
          }}>Domingo</div>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 11, letterSpacing: "2px",
            marginTop: 2, color: t.textMuted, textTransform: "uppercase",
          }}>Das 09h às 18h</div>
        </InfoCol>

        <VInfoDivider theme={t} />

        <InfoCol Icon={IcPin} theme={t}>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 17, letterSpacing: "3px",
            color: t.accent, textTransform: "uppercase", fontWeight: 600,
          }}>Local</div>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 17, letterSpacing: "3px",
            color: t.text, textTransform: "uppercase", fontWeight: 600, marginTop: 2,
          }}>em breve</div>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 11, letterSpacing: "2px",
            color: t.textMuted, textTransform: "uppercase", marginTop: 6, lineHeight: 1.4,
          }}>Aguarde mais<br/>informações</div>
        </InfoCol>

        <VInfoDivider theme={t} />

        <InfoCol Icon={IcInstagram} theme={t}>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 12, letterSpacing: "3px",
            color: t.textMuted, textTransform: "uppercase",
          }}>Siga nosso</div>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 15, letterSpacing: "3px",
            color: t.accent, textTransform: "uppercase", fontWeight: 600, marginTop: 1,
          }}>Instagram</div>
          <div style={{
            fontFamily: "'Inter', sans-serif", fontSize: 12.5, fontWeight: 500,
            color: t.text, marginTop: 4, letterSpacing: "0.5px",
          }}>@alex.torres_s</div>
          <div style={{
            fontFamily: "'Inter', sans-serif", fontSize: 12.5, fontWeight: 500,
            color: t.text, marginTop: 1, letterSpacing: "0.5px",
          }}>@cristianreisbarber</div>
        </InfoCol>
      </div>

      {/* ── VAGAS LIMITADAS ─────────────────────────────── */}
      <div style={{
        position: "absolute", top: 1488, left: 0, right: 0,
        textAlign: "center",
        fontFamily: "'Anton', sans-serif",
        fontSize: 26,
        letterSpacing: "7px",
        color: t.accent,
        textTransform: "uppercase",
        zIndex: 6,
      }}>
        Vagas Limitadas!
      </div>

      {/* ── FOOTER LOGOS ───────────────────────────────── */}
      <div style={{
        position: "absolute", bottom: 32, left: 80, right: 80,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        zIndex: 6,
      }}>
        {/* Alex Torres logo */}
        <div style={{ textAlign: "center", flex: 1 }}>
          <div style={{
            fontFamily: "'Anton', sans-serif", fontSize: 21, letterSpacing: "2px",
            color: t.accent, textTransform: "uppercase", lineHeight: 1,
          }}>Alex Torres</div>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 9.5, letterSpacing: "5px",
            color: t.textMuted, textTransform: "uppercase", marginTop: 4,
          }}>Educador</div>
        </div>

        {/* BE Monogram */}
        <div style={{
          display: "flex", flexDirection: "column", alignItems: "center", flex: 1,
        }}>
          <BEMonogram theme={t} size={42} />
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 8.5, letterSpacing: "4px",
            color: t.accent, textTransform: "uppercase", marginTop: 4, fontWeight: 600,
          }}>Barber Evolution</div>
        </div>

        {/* Cristian Reis logo */}
        <div style={{ textAlign: "center", flex: 1 }}>
          <div style={{
            fontFamily: "'Anton', sans-serif", fontSize: 21, letterSpacing: "2px",
            color: t.accent, textTransform: "uppercase", lineHeight: 1,
          }}>Cristian Reis</div>
          <div style={{
            fontFamily: "'Oswald', sans-serif", fontSize: 9.5, letterSpacing: "5px",
            color: t.textMuted, textTransform: "uppercase", marginTop: 4,
          }}>Barber</div>
        </div>
      </div>
    </div>
  );
}

/* ── helpers ─────────────────────────────────────────── */
function Divider({ theme }) {
  return (
    <div style={{
      width: 1, height: 78, marginTop: 8,
      background: `linear-gradient(180deg, transparent, ${theme.rule}, transparent)`,
    }} />
  );
}
function VInfoDivider({ theme }) {
  return (
    <div style={{
      width: 1, height: 130, marginTop: 8,
      background: `linear-gradient(180deg, transparent, ${theme.rule}, transparent)`,
    }} />
  );
}

function NameLabel({ theme, script, last, role, style, align = "left" }) {
  const t = theme;
  return (
    <div style={{
      position: "absolute", zIndex: 4,
      color: t.text,
      ...style,
    }}>
      <div style={{
        fontFamily: "'Allura', cursive",
        fontSize: 50,
        lineHeight: 0.9,
        color: t.accentLight,
        textShadow: t.foilOnDark ? "0 2px 8px rgba(0,0,0,0.8), 0 1px 0 rgba(0,0,0,0.6)" : "none",
        marginLeft: align === "left" ? 4 : 0,
        marginRight: align === "right" ? 4 : 0,
      }}>{script}</div>
      <div style={{
        fontFamily: "'Anton', sans-serif",
        fontSize: 50,
        letterSpacing: "2px",
        lineHeight: 1,
        textTransform: "uppercase",
        color: t.text,
        marginTop: -4,
        textShadow: t.foilOnDark ? "0 2px 12px rgba(0,0,0,0.7)" : "none",
      }}>{last}</div>
      <div style={{
        fontFamily: "'Oswald', sans-serif",
        fontSize: 12,
        letterSpacing: "7px",
        textTransform: "uppercase",
        color: t.textMuted,
        marginTop: 5,
      }}>{role}</div>
    </div>
  );
}

window.Flyer = Flyer;
window.THEMES = THEMES;