// components.jsx — Reusable building blocks for Advogado AI landing page
// All components exported to window at the bottom.

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────────────
// Icon set — minimal stroked icons (no robots, no gavels)
// ─────────────────────────────────────────────────────────────────────────
const Icon = ({ name, size = 18, stroke = 1.6, style }) => {
  const s = { width: size, height: size, ...style };
  const common = { fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "play":
      return <svg viewBox="0 0 24 24" style={s}><path d="M7 5l12 7-12 7V5z" fill="currentColor" stroke="none"/></svg>;
    case "arrow-right":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "arrow-up-right":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M7 17L17 7M9 7h8v8"/></svg>;
    case "spark":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>;
    case "scale":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 3v18M5 21h14M7 7l-3 6a3 3 0 006 0L7 7zM17 7l-3 6a3 3 0 006 0L17 7zM7 7l10-2"/></svg>;
    case "book":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M4 5a2 2 0 012-2h13v17H7a3 3 0 00-3 3V5z"/><path d="M4 20a3 3 0 013-3h12"/></svg>;
    case "doc":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M7 3h8l4 4v14H7z"/><path d="M15 3v4h4M10 12h7M10 16h5M10 8h2"/></svg>;
    case "workflow":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="3" y="3" width="6" height="6" rx="1.5"/><rect x="15" y="15" width="6" height="6" rx="1.5"/><rect x="15" y="3" width="6" height="6" rx="1.5"/><path d="M9 6h6M12 9v6M18 9v6"/></svg>;
    case "shield":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;
    case "users":
      return <svg viewBox="0 0 24 24" style={s} {...common}><circle cx="9" cy="9" r="3.5"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="7" r="2.5"/><path d="M15.5 14a4.5 4.5 0 015.5 4.4"/></svg>;
    case "bolt":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z"/></svg>;
    case "compass":
      return <svg viewBox="0 0 24 24" style={s} {...common}><circle cx="12" cy="12" r="9"/><path d="M15.5 8.5l-2 5.5-5.5 2 2-5.5 5.5-2z"/></svg>;
    case "newspaper":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M4 5h13v14H6a2 2 0 01-2-2V5z"/><path d="M17 8h3v9a2 2 0 01-2 2M7 9h7M7 13h7M7 17h4"/></svg>;
    case "mail":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case "youtube":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="2.5" y="6" width="19" height="12" rx="3"/><path d="M10.5 9.5l4.5 2.5-4.5 2.5z" fill="currentColor"/></svg>;
    case "instagram":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="3.5" y="3.5" width="17" height="17" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r="0.5" fill="currentColor"/></svg>;
    case "linkedin":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="3.5" y="3.5" width="17" height="17" rx="2"/><path d="M8 10v7M8 7.5v.01M12 17v-4a2 2 0 014 0v4M12 17v-7"/></svg>;
    case "check":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M4 12l5 5L20 6"/></svg>;
    case "menu":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case "x":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M5 5l14 14M19 5L5 19"/></svg>;
    case "download":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 3v13M5 12l7 7 7-7M5 20h14"/></svg>;
    case "search":
      return <svg viewBox="0 0 24 24" style={s} {...common}><circle cx="11" cy="11" r="7"/><path d="M16 16l5 5"/></svg>;
    case "megaphone":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M18 8a3 3 0 010 6M4 9h4l5-4v14l-5-4H4V9z"/></svg>;
    case "clock":
      return <svg viewBox="0 0 24 24" style={s} {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>;
    case "globe":
      return <svg viewBox="0 0 24 24" style={s} {...common}><circle cx="12" cy="12" r="9"/><path d="M3.6 9h16.8M3.6 15h16.8"/><ellipse cx="12" cy="12" rx="4" ry="9"/></svg>;
    case "grid":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
    case "chat":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M21 12a9 9 0 01-9 9 9 9 0 01-6.7-3L3 21l2.7-2.3A9 9 0 0112 3a9 9 0 019 9z"/></svg>;
    case "wrench":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.9 6.9a2.12 2.12 0 01-3-3l6.9-6.9A6 6 0 0114.7 6.3z"/></svg>;
    case "lock":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>;
    case "briefcase":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>;
    case "star":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>;
    case "map-pin":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 21s-7-5.5-7-11a7 7 0 0114 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case "phone":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>;
    case "target":
      return <svg viewBox="0 0 24 24" style={s} {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></svg>;
    case "layers":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>;
    case "cpu":
      return <svg viewBox="0 0 24 24" style={s} {...common}><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></svg>;
    case "pen":
      return <svg viewBox="0 0 24 24" style={s} {...common}><path d="M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>;
    default: return null;
  }
};

// ─────────────────────────────────────────────────────────────────────────
// Logo — wordmark "Advogado AI" with a small mark
// ─────────────────────────────────────────────────────────────────────────
const Logo = ({ size = 22 }) => (
  <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
    <svg width={size + 6} height={size + 6} viewBox="0 0 32 32" style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id="lg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="var(--brand-700)"/>
          <stop offset="1" stopColor="var(--accent)"/>
        </linearGradient>
      </defs>
      <rect x="2" y="2" width="28" height="28" rx="8" fill="url(#lg)"/>
      <path d="M10 22 L16 9 L22 22" stroke="white" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M12.6 17.2 H19.4" stroke="white" strokeWidth="2.2" fill="none" strokeLinecap="round"/>
      <circle cx="24.5" cy="9.5" r="1.6" fill="white"/>
    </svg>
    <span style={{
      fontFamily: "var(--font-display)",
      fontSize: size,
      fontWeight: 500,
      letterSpacing: "-0.02em",
      lineHeight: 1,
    }}>
      Advogado<span style={{ fontStyle: "italic", marginLeft: 4, color: "var(--accent)" }}>AI</span>
    </span>
  </div>
);

// ─────────────────────────────────────────────────────────────────────────
// Buttons (declarative)
// ─────────────────────────────────────────────────────────────────────────
const Button = ({ variant = "primary", size, icon, iconRight, children, onClick, href, style }) => {
  const cls = `btn btn-${variant}${size ? " btn-" + size : ""}`;
  const inner = (
    <>
      {icon && <Icon name={icon} size={16}/>}
      {children}
      {iconRight && <Icon name={iconRight} size={16}/>}
    </>
  );
  if (href) return <a className={cls} href={href} style={style} onClick={onClick}>{inner}</a>;
  return <button className={cls} onClick={onClick} style={style}>{inner}</button>;
};

// ─────────────────────────────────────────────────────────────────────────
// Eyebrow label (mono uppercase with rule)
// ─────────────────────────────────────────────────────────────────────────
const Eyebrow = ({ children, style }) => <span className="eyebrow" style={style}>{children}</span>;

// ─────────────────────────────────────────────────────────────────────────
// SectionHeader: eyebrow + headline + lede + optional cta
// ─────────────────────────────────────────────────────────────────────────
const SectionHeader = ({ eyebrow, title, titleAccent, lede, cta, align = "left" }) => (
  <div style={{
    display: "flex",
    flexDirection: align === "center" ? "column" : "row",
    alignItems: align === "center" ? "center" : "flex-end",
    justifyContent: "space-between",
    gap: 32,
    textAlign: align === "center" ? "center" : "left",
    marginBottom: 48,
  }} className="section-header">
    <div style={{ maxWidth: 720 }}>
      {eyebrow && <Eyebrow style={{ marginBottom: 18 }}>{eyebrow}</Eyebrow>}
      <h2 className="h-display" style={{ fontSize: "clamp(32px, 4.5vw, 52px)", margin: 0 }}>
        {title}{titleAccent && <> <em>{titleAccent}</em></>}
      </h2>
      {lede && <p className="lede" style={{ marginTop: 18 }}>{lede}</p>}
    </div>
    {cta && align !== "center" && <div style={{ flexShrink: 0 }}>{cta}</div>}
  </div>
);

// ─────────────────────────────────────────────────────────────────────────
// Video thumbnail — design-system cover with category + title
// ─────────────────────────────────────────────────────────────────────────
const VideoThumb = ({ category = "", title = "", featured = false, variant = 0 }) => {
  const iconMap = {
    "IA para escritórios": "briefcase",
    "Ferramentas IA":      "cpu",
    "Ética e limites":     "shield",
    "IA na prática":       "spark",
    "LGPD e IA":           "lock",
    "Produtividade":       "bolt",
    "Automação":           "workflow",
    "IA para petições":    "doc",
    "IA para estudos":     "book",
  };
  const iconName = iconMap[category] || "spark";

  const bgs = [
    "linear-gradient(135deg, #0B2545 0%, #11315F 60%, #173E7C 100%)",
    "linear-gradient(150deg, #0A0F1C 0%, #0B2545 55%, #11315F 100%)",
    "linear-gradient(125deg, #0E1424 0%, #11315F 50%, #1E2638 100%)",
    "linear-gradient(118deg, #0B2545 0%, #0A0F1C 60%, #0E1424 100%)",
    "linear-gradient(142deg, #173E7C 0%, #0B2545 55%, #0A0F1C 100%)",
  ];
  const glows = [
    { top: "-35%", right: "-10%" },
    { bottom: "-25%", left: "-10%" },
    { top: "-20%", right: "15%" },
    { top: "25%", right: "-18%" },
    { top: "-30%", left: "5%" },
  ];
  const shapes = [
    <polygon key="s" points="370,20 415,20 438,60 415,100 370,100 347,60" fill="none" stroke="rgba(255,255,255,0.055)" strokeWidth="1"/>,
    <><circle key="c1" cx="410" cy="195" r="65" fill="none" stroke="rgba(255,255,255,0.045)" strokeWidth="1"/><circle key="c2" cx="410" cy="195" r="42" fill="none" stroke="rgba(255,255,255,0.045)" strokeWidth="1"/></>,
    <><line key="l1" x1="345" y1="0" x2="480" y2="135" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/><circle key="c" cx="430" cy="55" r="28" fill="none" stroke="rgba(6,182,212,0.12)" strokeWidth="1"/></>,
    <><line key="la" x1="370" y1="15" x2="455" y2="100" stroke="rgba(6,182,212,0.10)" strokeWidth="1.5"/><line key="lb" x1="455" y1="15" x2="370" y2="100" stroke="rgba(6,182,212,0.10)" strokeWidth="1.5"/></>,
    <path key="arc" d="M 370 270 Q 490 140 415 20" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1.2"/>,
  ];
  const v = variant % 5;
  const patId = `tvg${v}`;
  const pad = featured ? "18px 20px" : "14px 16px";

  return (
    <div style={{ width: "100%", height: "100%", background: bgs[v], position: "relative", overflow: "hidden" }}>
      {/* Grid */}
      <svg aria-hidden style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <pattern id={patId} width="38" height="38" patternUnits="userSpaceOnUse">
            <path d="M38 0L0 0 0 38" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="0.8"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#${patId})`}/>
        {shapes[v]}
      </svg>
      {/* Glow blob */}
      <div aria-hidden style={{
        position: "absolute", width: "58%", height: "58%", borderRadius: "50%",
        background: "radial-gradient(circle, rgba(6,182,212,0.22) 0%, transparent 68%)",
        ...glows[v],
      }}/>
      {/* Watermark icon */}
      <div aria-hidden style={{
        position: "absolute", right: -6, bottom: -6,
        color: "rgba(255,255,255,0.055)",
        transform: "rotate(-8deg)",
        pointerEvents: "none",
      }}>
        <Icon name={iconName} size={featured ? 96 : 72} stroke={1}/>
      </div>
      {/* Bottom accent line */}
      <div aria-hidden style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 2,
        background: "linear-gradient(90deg, rgba(6,182,212,0.75), transparent 70%)",
      }}/>
      {/* Text content */}
      <div style={{
        position: "absolute", inset: 0, padding: pad,
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        pointerEvents: "none",
      }}>
        {/* Category */}
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <div style={{ width: 22, height: 2, background: "#06B6D4", borderRadius: 1, flexShrink: 0 }}/>
          <span style={{
            fontFamily: '"Geist Mono", "Geist", monospace',
            fontSize: 9, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "#06B6D4", fontWeight: 600,
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
          }}>{category}</span>
        </div>
        {/* Title */}
        <div style={{
          fontSize: featured ? 15.5 : 12.5,
          fontWeight: 540,
          color: "rgba(255,255,255,0.90)",
          lineHeight: 1.35,
          letterSpacing: "-0.01em",
          display: "-webkit-box",
          WebkitLineClamp: featured ? 3 : 2,
          WebkitBoxOrient: "vertical",
          overflow: "hidden",
          paddingRight: featured ? 8 : 4,
        }}>{title}</div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// Video card (YouTube-style)
// ─────────────────────────────────────────────────────────────────────────
const VideoCard = ({ title, category, duration, thumb, featured, youtubeId, variant = 0 }) => {
  const href = youtubeId ? `https://www.youtube.com/watch?v=${youtubeId}` : undefined;

  const inner = (
    <>
      <div style={{ position: "relative", aspectRatio: "16/9", overflow: "hidden" }}>
        {youtubeId
          ? <VideoThumb variant={variant} category={category} title={title} featured={featured}/>
          : <div style={{ width: "100%", height: "100%", background: thumb || "linear-gradient(135deg, var(--ink-800), var(--brand-800))" }}/>
        }
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(10,15,28,0) 45%, rgba(10,15,28,0.55) 100%)",
        }}/>
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{
            width: 52, height: 52, borderRadius: "50%",
            background: "rgba(255,255,255,0.13)", backdropFilter: "blur(8px)",
            border: "1px solid rgba(255,255,255,0.28)",
            color: "white",
            display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
            transition: "transform .2s ease, background .2s ease",
          }} className="play-button">
            <Icon name="play" size={20}/>
          </div>
        </div>
        {duration && (
          <div style={{
            position: "absolute", right: 12, bottom: 12,
            background: "rgba(10,15,28,0.85)", color: "white", fontSize: 11.5,
            fontFamily: "var(--font-mono)", padding: "3px 8px", borderRadius: 6,
          }}>{duration}</div>
        )}
      </div>
      <div style={{ padding: "18px 20px 22px", display: "flex", flexDirection: "column", gap: 10 }}>
        <span className="chip chip-accent" style={{ alignSelf: "flex-start" }}>{category}</span>
        <h3 style={{
          margin: 0, fontSize: featured ? 20 : 17, lineHeight: 1.3,
          letterSpacing: "-0.01em", fontWeight: 540, textWrap: "balance",
        }}>{title}</h3>
      </div>
    </>
  );

  const sharedStyle = {
    overflow: "hidden", display: "flex", flexDirection: "column",
    gridColumn: featured ? "span 2" : undefined,
  };

  if (href) return (
    <a href={href} target="_blank" rel="noopener noreferrer"
      className="card video-card" style={{ ...sharedStyle, textDecoration: "none", color: "inherit" }}>
      {inner}
    </a>
  );
  return <article className="card video-card" style={sharedStyle}>{inner}</article>;
};

// ─────────────────────────────────────────────────────────────────────────
// Trail card (learning path)
// ─────────────────────────────────────────────────────────────────────────
const TrailCard = ({ number, title, description, icon, modules, level }) => (
  <article className="card card-pad-lg" style={{
    display: "flex", flexDirection: "column", gap: 18, position: "relative", overflow: "hidden",
  }}>
    <div style={{
      position: "absolute",
      top: 18, right: 22,
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      color: "var(--fg-subtle)",
      letterSpacing: "0.1em",
    }}>{number}</div>
    <div style={{
      width: 44, height: 44, borderRadius: 12,
      background: "var(--accent-soft)",
      color: "var(--brand-800)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <Icon name={icon} size={22}/>
    </div>
    <div>
      <h3 style={{
        margin: "0 0 8px",
        fontSize: 20,
        letterSpacing: "-0.01em",
        fontWeight: 560,
        lineHeight: 1.25,
        textWrap: "balance",
      }}>{title}</h3>
      <p style={{ margin: 0, color: "var(--fg-muted)", fontSize: 14.5, lineHeight: 1.55 }}>{description}</p>
    </div>
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      paddingTop: 14, borderTop: "1px solid var(--border)", marginTop: 4,
    }}>
      <span style={{ fontSize: 12.5, color: "var(--fg-subtle)" }}>
        {modules} módulos · {level}
      </span>
      <button className="btn-link" style={{ fontSize: 13.5 }}>Ver trilha</button>
    </div>
  </article>
);

// ─────────────────────────────────────────────────────────────────────────
// Material card (lead magnet)
// ─────────────────────────────────────────────────────────────────────────
const MaterialCard = ({ kind, title, pages, format = "PDF" }) => (
  <article className="card card-pad" style={{ display: "flex", gap: 18, alignItems: "flex-start" }}>
    <div style={{
      width: 56, height: 72, borderRadius: 6,
      background: "linear-gradient(180deg, var(--white), var(--bg-sunken))",
      border: "1px solid var(--border)",
      flexShrink: 0,
      position: "relative",
      boxShadow: "0 4px 12px -4px rgba(11,37,69,0.10)",
    }}>
      <div style={{ position: "absolute", top: 10, left: 8, right: 8, height: 2, background: "var(--accent)" }}/>
      <div style={{ position: "absolute", top: 18, left: 8, right: 14, height: 1.5, background: "var(--graphite-200)" }}/>
      <div style={{ position: "absolute", top: 24, left: 8, right: 18, height: 1.5, background: "var(--graphite-200)" }}/>
      <div style={{ position: "absolute", top: 30, left: 8, right: 12, height: 1.5, background: "var(--graphite-200)" }}/>
      <div style={{ position: "absolute", top: 40, left: 8, right: 24, height: 1.5, background: "var(--graphite-200)" }}/>
      <div style={{ position: "absolute", top: 46, left: 8, right: 16, height: 1.5, background: "var(--graphite-200)" }}/>
      <div style={{ position: "absolute", bottom: 6, left: 6, right: 6, fontFamily: "var(--font-mono)", fontSize: 7, color: "var(--graphite-400)", textAlign: "center" }}>{format}</div>
    </div>
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--accent)", marginBottom: 6 }}>{kind}</div>
      <h3 style={{ margin: "0 0 8px", fontSize: 16.5, fontWeight: 560, letterSpacing: "-0.01em", lineHeight: 1.3 }}>{title}</h3>
      <div style={{ fontSize: 12.5, color: "var(--fg-subtle)" }}>{pages} · gratuito</div>
    </div>
  </article>
);

// ─────────────────────────────────────────────────────────────────────────
// Course card
// ─────────────────────────────────────────────────────────────────────────
const CourseCard = ({ title, description, status, statusLabel, modules, hours }) => (
  <article className="card card-pad-lg course-card" style={{
    display: "flex", flexDirection: "column", gap: 14,
    minHeight: 280,
  }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
      <span className={`status ${status}`}>{statusLabel}</span>
      <Icon name="arrow-up-right" size={18} style={{ color: "var(--fg-subtle)" }}/>
    </div>
    <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
      <h3 className="h-display" style={{ fontSize: 26, margin: "0 0 10px", lineHeight: 1.1 }}>{title}</h3>
      <p style={{ margin: "0 0 16px", color: "var(--fg-muted)", fontSize: 14.5, lineHeight: 1.5 }}>{description}</p>
      <div style={{
        display: "flex", gap: 16, fontSize: 12.5, color: "var(--fg-subtle)",
        paddingTop: 14, borderTop: "1px solid var(--border)",
      }}>
        <span>{modules} módulos</span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span>{hours} de aulas</span>
      </div>
    </div>
  </article>
);

// ─────────────────────────────────────────────────────────────────────────
// Article card (editorial)
// ─────────────────────────────────────────────────────────────────────────
const ArticleCard = ({ category, title, excerpt, date, readTime }) => (
  <article className="card card-pad-lg article-card" style={{
    display: "flex", flexDirection: "column", gap: 14, height: "100%",
  }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span className="chip chip-accent">{category}</span>
      <span style={{ fontSize: 12, color: "var(--fg-subtle)" }}>{date}</span>
    </div>
    <h3 className="h-display" style={{ fontSize: 24, margin: 0, lineHeight: 1.15, textWrap: "balance" }}>{title}</h3>
    <p style={{ margin: 0, color: "var(--fg-muted)", fontSize: 14.5, lineHeight: 1.55 }}>{excerpt}</p>
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      marginTop: "auto", paddingTop: 14, borderTop: "1px solid var(--border)",
    }}>
      <span style={{ fontSize: 12.5, color: "var(--fg-subtle)" }}>{readTime} de leitura</span>
      <button className="btn-link" style={{ fontSize: 13.5 }}>Ler artigo</button>
    </div>
  </article>
);

// ─────────────────────────────────────────────────────────────────────────
// Benefit tile (differentiators)
// ─────────────────────────────────────────────────────────────────────────
const BenefitTile = ({ icon, title, description }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
    <div style={{
      width: 40, height: 40, borderRadius: 10,
      border: "1px solid var(--border-strong)",
      display: "flex", alignItems: "center", justifyContent: "center",
      color: "var(--accent)",
      background: "var(--bg-elev)",
    }}>
      <Icon name={icon} size={20}/>
    </div>
    <div>
      <h4 style={{ margin: "0 0 6px", fontSize: 16, fontWeight: 560, letterSpacing: "-0.01em" }}>{title}</h4>
      <p style={{ margin: 0, color: "var(--fg-muted)", fontSize: 14, lineHeight: 1.5 }}>{description}</p>
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────────────────
// Page Hero — internal page header
// ─────────────────────────────────────────────────────────────────────────
const PageHero = ({ eyebrow, title, titleAccent, lede, children, dark }) => (
  <section className={`page-hero ${dark ? 'surface-dark' : ''}`} style={{ position: 'relative', overflow: 'hidden' }}>
    <HeroBackdrop dark={dark}/>
    <div className="container" style={{ position: 'relative', zIndex: 2 }}>
      {eyebrow && <Eyebrow style={dark ? { color: 'var(--accent)' } : {}}>{eyebrow}</Eyebrow>}
      <h1 className="h-display">
        {title}{titleAccent && <> <em>{titleAccent}</em></>}
      </h1>
      {lede && <p className="lede" style={dark ? { color: '#A3ACBF' } : {}}>{lede}</p>}
      {children}
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────
// Tool Card — ferramentas page
// ─────────────────────────────────────────────────────────────────────────
const ToolCardComp = ({ icon, title, description, category, status, statusLabel }) => (
  <article className="card tool-card">
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
      <div className="tool-card-icon" style={{ background: 'var(--accent-soft)', color: 'var(--brand-800)' }}>
        <Icon name={icon} size={24}/>
      </div>
      {status && <span className={`status ${status}`}>{statusLabel}</span>}
    </div>
    {category && <span className="chip chip-accent" style={{ alignSelf: 'flex-start' }}>{category}</span>}
    <h3 style={{ margin: 0, fontSize: 19, fontWeight: 560, letterSpacing: '-0.01em', lineHeight: 1.25 }}>{title}</h3>
    <p style={{ margin: 0, color: 'var(--fg-muted)', fontSize: 14.5, lineHeight: 1.55 }}>{description}</p>
    <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--border)' }}>
      <Button variant={status === 'in-breve' ? 'ghost' : 'accent'} size="sm">
        {status === 'in-breve' ? 'Em breve' : 'Saiba mais'}
      </Button>
    </div>
  </article>
);

Object.assign(window, {
  Icon, Logo, Button, Eyebrow, SectionHeader,
  VideoCard, TrailCard, MaterialCard, CourseCard, ArticleCard, BenefitTile,
  PageHero, ToolCardComp,
});
