/* global React */

// ============================================================
// bigExpertLab — shared atoms + icons
// ============================================================

const Arrow = ({ size = 14, className = "" }) => (
  <svg className={className} width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Check = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8.5L6.5 12L13 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Plus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M7 1V13M1 7H13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>
);

const WhatsAppIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.4-.1-.6.2s-.7.9-.9 1c-.2.2-.3.2-.6.1-1.8-.9-3-1.6-4.2-3.6-.3-.6.3-.5.9-1.7.1-.2 0-.4 0-.5s-.6-1.4-.8-2c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.4s-1 1-1 2.4 1 2.8 1.2 3c.1.2 2.1 3.2 5 4.5 1.8.8 2.5.8 3.4.7.5 0 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4s-.3-.3-.5-.4z M12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.3L2 22l4.8-1.5C8.4 21.5 10.1 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z" />
  </svg>
);

// ============================================================
// Logo (recreated as SVG)
// ============================================================
const Logo = ({ height = 32, inverse = false }) => {
  const lab = inverse ? "#FAF6EC" : "#3F3F46";
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 0, height }}>
      <span style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: height * 0.78,
        letterSpacing: "-0.045em",
        lineHeight: 1,
        color: "var(--bel-orange)",
      }}>
        Big<span style={{ textTransform: "none" }}>Expert</span>
      </span>
      <span style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: height * 0.78,
        letterSpacing: "-0.045em",
        lineHeight: 1,
        color: lab,
        marginLeft: "0.04em",
      }}>Lab</span>
      <sup style={{
        fontFamily: "var(--font-display)",
        fontSize: height * 0.22,
        marginLeft: 2,
        marginTop: -height * 0.35,
        color: "var(--bel-orange)",
        fontWeight: 600,
      }}>®</sup>
    </div>
  );
};

// ============================================================
// Section header — eyebrow + headline + lead
// ============================================================
const SectionHead = ({ eyebrow, title, lead, align = "left", maxw }) => (
  <div className="reveal" style={{
    textAlign: align,
    margin: align === "center" ? "0 auto" : "0",
    maxWidth: maxw || (align === "center" ? 780 : "100%"),
    display: "flex", flexDirection: "column", gap: 18,
    alignItems: align === "center" ? "center" : "flex-start",
  }}>
    {eyebrow && <span className="eyebrow">{eyebrow}</span>}
    <h2 className="h2" style={{ margin: 0 }}>{title}</h2>
    {lead && <p className="lead" style={{ margin: 0 }}>{lead}</p>}
  </div>
);

// ============================================================
// Stat — large number + label
// ============================================================
const Stat = ({ value, suffix, label, sub }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
    <div style={{ display: "flex", alignItems: "baseline", gap: 2 }}>
      <span style={{
        fontFamily: "var(--font-display)",
        fontSize: "clamp(48px, 6vw, 88px)",
        fontWeight: 600,
        letterSpacing: "-0.04em",
        lineHeight: 1,
        color: "var(--ink)",
      }}>{value}</span>
      {suffix && <span style={{
        fontFamily: "var(--font-display)",
        fontSize: "clamp(28px, 3vw, 44px)",
        fontWeight: 500,
        color: "var(--bel-orange)",
        letterSpacing: "-0.02em",
      }}>{suffix}</span>}
    </div>
    <div style={{ fontWeight: 600, color: "var(--ink)", fontSize: 16 }}>{label}</div>
    {sub && <div style={{ color: "var(--ink-soft)", fontSize: 14, maxWidth: 240 }}>{sub}</div>}
  </div>
);

Object.assign(window, { Arrow, Check, Plus, WhatsAppIcon, Logo, SectionHead, Stat });