// Shared primitives + tiny icon helper
const { useEffect, useRef, useState, useMemo } = React;

// Lucide icon helper — renders an inline SVG by name from window.lucide
function Icon({ name, className = "w-5 h-5", strokeWidth = 1.8 }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const lib = window.lucide;
    if (!lib) return;
    const icons = lib.icons || lib;
    const def = icons[name] || icons[name?.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] || icons[name?.replace(/(^|-)([a-z])/g, (_, __, c) => c.toUpperCase())];
    if (!def) return;
    const create = lib.createElement || ((d) => {
      const [tag, attrs, children] = d;
      const ns = "http://www.w3.org/2000/svg";
      const el = document.createElementNS(ns, tag);
      Object.entries(attrs || {}).forEach(([k, v]) => el.setAttribute(k, v));
      (children || []).forEach((c) => el.appendChild(create(c)));
      return el;
    });
    ref.current.innerHTML = "";
    const svg = create(def);
    svg.setAttribute("stroke-width", strokeWidth);
    svg.setAttribute("class", className);
    ref.current.appendChild(svg);
  }, [name, className, strokeWidth]);
  return <span ref={ref} className="inline-flex" aria-hidden="true" />;
}

function CTAButton({ children, variant = "primary", size = "md", href = "#", className = "", icon }) {
  const base = "inline-flex items-center justify-center gap-2 font-semibold rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange whitespace-nowrap";
  const sizes = {
    sm: "px-4 py-2 text-sm",
    md: "px-5 py-3 text-[15px]",
    lg: "px-7 py-4 text-base",
  };
  const variants = {
    primary: "bg-brand-orange text-white hover:bg-brand-orange2 shadow-[0_10px_24px_-10px_rgba(249,115,22,0.7)] hover:shadow-[0_14px_30px_-10px_rgba(249,115,22,0.8)] hover:-translate-y-0.5",
    dark: "bg-brand-navy text-white hover:bg-brand-navy2 shadow-[0_10px_24px_-12px_rgba(11,26,51,0.6)]",
    ghost: "bg-white/80 text-brand-navy ring-1 ring-ink-100 hover:ring-ink-200 hover:bg-white",
    outline: "bg-transparent text-brand-navy ring-1 ring-ink-200 hover:ring-brand-navy hover:bg-white",
    soft: "bg-orange-50 text-brand-orange2 ring-1 ring-orange-100 hover:bg-orange-100",
  };
  return (
    <a href={href} className={`${base} ${sizes[size]} ${variants[variant]} ${className}`}>
      {children}
      {icon && <Icon name={icon} className="w-4 h-4" />}
    </a>
  );
}

function Eyebrow({ children, color = "orange" }) {
  const tones = {
    orange: "bg-orange-50 text-brand-orange2 ring-orange-100",
    navy: "bg-slate-100 text-brand-navy ring-slate-200",
    green: "bg-emerald-50 text-emerald-700 ring-emerald-100",
    blue: "bg-sky-50 text-sky-700 ring-sky-100",
  };
  return (
    <span className={`inline-flex items-center gap-2 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] rounded-full ring-1 ${tones[color]}`}>
      <span className="w-1.5 h-1.5 rounded-full bg-current" />
      {children}
    </span>
  );
}

function SectionTitle({ eyebrow, title, subtitle, center = true, eyebrowColor = "orange" }) {
  return (
    <div className={`max-w-3xl ${center ? "mx-auto text-center" : ""}`}>
      {eyebrow && <Eyebrow color={eyebrowColor}>{eyebrow}</Eyebrow>}
      <h2 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-brand-navy mt-5 leading-[1.1]" style={{ textWrap: "balance" }}>
        {title}
      </h2>
      {subtitle && (
        <p className="mt-5 text-ink-500 text-lg leading-relaxed" style={{ textWrap: "pretty" }}>
          {subtitle}
        </p>
      )}
    </div>
  );
}

// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as: Tag = "div", className = "" }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${className}`}>{children}</Tag>;
}

// Brand mark — real logo image
function BrandLogo({ className = "h-9", inverted = false }) {
  return (
    <a href="#hero" className={`inline-flex items-center ${className}`}>
      <img
        src="assets/logo.png"
        alt="Yo car Manager"
        className={`h-full w-auto object-contain ${inverted ? "brightness-0 invert" : ""}`}
      />
    </a>
  );
}

// Floating stat chip used around the hero device
function StatChip({ icon, label, value, accent = "orange", className = "" }) {
  const tones = {
    orange: "bg-orange-50 text-brand-orange2 ring-orange-100",
    blue: "bg-sky-50 text-sky-700 ring-sky-100",
    green: "bg-emerald-50 text-emerald-700 ring-emerald-100",
    violet: "bg-violet-50 text-violet-700 ring-violet-100",
  };
  return (
    <div className={`bg-white rounded-2xl shadow-card ring-soft px-4 py-3 flex items-center gap-3 min-w-[200px] ${className}`}>
      <span className={`inline-flex items-center justify-center w-9 h-9 rounded-xl ring-1 ${tones[accent]}`}>
        <Icon name={icon} className="w-4.5 h-4.5" />
      </span>
      <div className="leading-tight">
        <div className="text-[11px] uppercase tracking-wider text-ink-400 font-semibold">{label}</div>
        {value && <div className="text-brand-navy font-display font-bold text-base">{value}</div>}
      </div>
    </div>
  );
}

// Mock browser frame — used for site preview
function BrowserFrame({ url = "https://votreagence.com", children, className = "" }) {
  return (
    <div className={`rounded-2xl overflow-hidden bg-white shadow-card ring-1 ring-ink-100 ${className}`}>
      <div className="flex items-center gap-2 px-4 py-3 bg-ink-50 border-b border-ink-100">
        <span className="w-2.5 h-2.5 rounded-full bg-rose-300" />
        <span className="w-2.5 h-2.5 rounded-full bg-amber-300" />
        <span className="w-2.5 h-2.5 rounded-full bg-emerald-300" />
        <div className="ml-3 flex-1 max-w-md mx-auto bg-white rounded-md text-[11px] text-ink-400 px-3 py-1 ring-1 ring-ink-100 truncate">{url}</div>
        <span className="text-ink-300"><Icon name="more-horizontal" className="w-4 h-4" /></span>
      </div>
      <div>{children}</div>
    </div>
  );
}

// Generic card
function Card({ children, className = "", as: Tag = "div" }) {
  return <Tag className={`bg-white rounded-2xl ring-1 ring-ink-100 shadow-soft ${className}`}>{children}</Tag>;
}

// Make accessible on global scope to other Babel scripts
Object.assign(window, { Icon, CTAButton, Eyebrow, SectionTitle, Reveal, BrandLogo, StatChip, BrowserFrame, Card });