/* Shared components */
const { useState, useEffect, useRef } = React;

function useResponsive() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler, { passive: true });
    return () => window.removeEventListener('resize', handler);
  }, []);
  return { isMobile: width <= 480, isTablet: width <= 768 };
}

/* Reveal-on-scroll wrapper */
function Reveal({ children, delay = 0, as: As = "div", className = "", style = {} }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Failsafe: always reveal after a short delay, in case IntersectionObserver
    // doesn't fire (e.g. iframe/preview contexts).
    const failsafe = setTimeout(() => setShown(true), 600 + delay);
    if (typeof IntersectionObserver === "undefined") {
      return () => clearTimeout(failsafe);
    }
    const io = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting) {
          setTimeout(() => setShown(true), delay);
          io.disconnect();
          clearTimeout(failsafe);
        }
      },
      { threshold: 0.05, rootMargin: "0px 0px -4% 0px" }
    );
    io.observe(el);
    return () => { io.disconnect(); clearTimeout(failsafe); };
  }, [delay]);
  return <As ref={ref} className={`reveal ${shown ? "in" : ""} ${className}`} style={style}>{children}</As>;
}

/* Eyebrow label */
function Eyebrow({ children, dot = true, style = {} }) {
  return (
    <div className="mono" style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--muted)", ...style }}>
      {dot && <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", display: "inline-block" }} />}
      <span>{children}</span>
    </div>
  );
}

/* Display headline — hero size */
function Display({ parts, italicIndex = 1, size = 132 }) {
  return (
    <h1 className="serif" style={{
      fontSize: `clamp(48px, ${size / 14}vw, ${size}px)`,
      lineHeight: 0.96,
      letterSpacing: "-0.025em",
      fontWeight: 400,
      color: "var(--ink)",
    }}>
      {parts.map((p, i) => (
        <span key={i} style={{ display: "block", fontStyle: i === italicIndex ? "italic" : "normal" }}>
          {p}
        </span>
      ))}
    </h1>
  );
}

/* Section heading — medium */
function SectionTitle({ parts, italicIndex = 1 }) {
  return (
    <h2 className="serif" style={{
      fontSize: "clamp(34px, 5.6vw, 78px)",
      lineHeight: 0.98,
      letterSpacing: "-0.022em",
      fontWeight: 400,
      color: "var(--ink)",
    }}>
      {parts.map((p, i) => (
        <span key={i} style={{ display: "block", fontStyle: i === italicIndex ? "italic" : "normal" }}>
          {p}
        </span>
      ))}
    </h2>
  );
}

/* CTA Button */
function Cta({ children, primary = false, href = "#contact", small = false, onClick }) {
  const [hover, setHover] = useState(false);
  const base = {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: small ? "9px 16px" : "13px 22px",
    borderRadius: 999,
    fontSize: small ? 13 : 14,
    fontWeight: 500,
    letterSpacing: "-0.005em",
    transition: "all .35s cubic-bezier(.2,.6,.2,1)",
    cursor: "pointer",
    border: "1px solid",
    whiteSpace: "nowrap",
  };
  const styles = primary ? {
    background: hover ? "#000" : "var(--ink)",
    color: "var(--bg)",
    borderColor: "var(--ink)",
  } : {
    background: hover ? "rgba(26,24,21,0.04)" : "transparent",
    color: "var(--ink)",
    borderColor: "var(--line)",
  };
  return (
    <a href={href} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{ ...base, ...styles }}>
      {children}
      <svg width={small ? 12 : 14} height={small ? 12 : 14} viewBox="0 0 14 14" fill="none" style={{ transition: "transform .35s", transform: hover ? "translateX(3px)" : "none" }}>
        <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </a>
  );
}

/* Logo wordmark with the LT mark */
function Logo({ size = 22, color = "var(--ink)" }) {
  return (
    <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 10, color }}>
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
        {/* L */}
        <path d="M11 5v22h11" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square" />
        {/* T crossbar */}
        <path d="M6 8h17" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square" />
        {/* T stem */}
        <path d="M16 5v22" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square" />
      </svg>
      <span className="serif" style={{ fontSize: size * 0.95, letterSpacing: "0.01em", lineHeight: 1 }}>
        TRANS<span style={{ opacity: 0.4 }}>—</span>LOG
      </span>
    </a>
  );
}

/* Brand wordmark for partner row (Dell, HP, Lenovo, etc.) */
function PartnerMark({ name, weight = 500 }) {
  return (
    <span className="serif-i" style={{
      fontSize: 28,
      fontWeight: weight,
      color: "var(--ink)",
      opacity: 0.78,
      letterSpacing: "-0.005em",
      whiteSpace: "nowrap",
    }}>{name}</span>
  );
}

/* Image placeholder block */
function Placeholder({ label, ratio = "4 / 5", style = {}, src, blend = false, children }) {
  if (src) {
    return (
      <div style={{ aspectRatio: ratio, width: "100%", overflow: "hidden", background: blend ? "var(--bg)" : undefined, ...style }}>
        <img src={src} alt={label} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", mixBlendMode: blend ? "multiply" : undefined }} />
      </div>
    );
  }
  return (
    <div className="ph" data-label={label} style={{ aspectRatio: ratio, width: "100%", ...style }}>
      {children}
    </div>
  );
}

Object.assign(window, { Reveal, Eyebrow, Display, SectionTitle, Cta, Logo, PartnerMark, Placeholder, useResponsive });