// Shadcn-style primitives reimplemented in Tailwind for the prototype.
const { useState, useEffect, useRef } = React;

function cn(...xs) { return xs.filter(Boolean).join(" "); }

const Button = ({ variant = "primary", size = "md", className = "", children, ...props }) => {
  const base = "inline-flex items-center justify-center gap-2 rounded-full font-medium transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none whitespace-nowrap";
  const sizes = {
    sm: "h-9 px-4 text-sm",
    md: "h-11 px-5 text-[15px]",
    lg: "h-12 px-6 text-[15px]",
  };
  const variants = {
    primary: "bg-fg text-bg hover:bg-fg/90",
    accent:  "bg-primary text-[#04140c] hover:brightness-110",
    secondary: "bg-card text-fg border border-line hover:bg-subtle",
    ghost: "text-fg hover:bg-subtle",
    outline: "border border-line text-fg hover:bg-subtle",
    link: "text-fg underline underline-offset-4 hover:no-underline px-0 h-auto",
  };
  return (
    <button {...props} className={cn(base, sizes[size], variants[variant], className)}>
      {children}
    </button>
  );
};

const Badge = ({ children, tone = "neutral", className = "" }) => {
  const tones = {
    neutral: "bg-subtle text-fg border-line",
    primary: "bg-primary/10 text-primary border-primary/20",
    secondary: "bg-secondary/10 text-secondary border-secondary/20",
    accent: "bg-accent/10 text-accent border-accent/20",
    dark: "bg-fg/5 text-fg border-fg/10",
  };
  return (
    <span className={cn("inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border", tones[tone], className)}>
      {children}
    </span>
  );
};

const Card = ({ children, className = "", as: As = "div", ...rest }) => (
  <As {...rest} className={cn("bg-card border border-line rounded-2xl", className)}>{children}</As>
);

const Section = ({ id, eyebrow, title, sub, children, className = "", inner = "max-w-7xl", dark = false }) => (
  <section id={id} className={cn("relative", dark ? "bg-[#0D0E0B] text-[#F9F8F6]" : "", className)}>
    <div className={cn("mx-auto px-6 md:px-10", inner)}>
      {(eyebrow || title || sub) && (
        <div className="max-w-3xl mb-12 md:mb-16">
          {eyebrow && <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-4">{eyebrow}</div>}
          {title && <h2 className="font-display text-4xl md:text-5xl leading-[1.05]">{title}</h2>}
          {sub && <p className="text-muted mt-4 text-lg max-w-2xl">{sub}</p>}
        </div>
      )}
      {children}
    </div>
  </section>
);

// Reveal-on-scroll wrapper
const Reveal = ({ children, delay = 0, 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(() => e.target.classList.add('in'), delay);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <div ref={ref} className={cn("reveal", className)}>{children}</div>;
};

// Tabs (controlled)
const Tabs = ({ value, onChange, items, className = "" }) => (
  <div className={cn("inline-flex flex-wrap gap-1 p-1 bg-subtle rounded-full border border-line max-w-full", className)} role="tablist">
    {items.map(it => (
      <button key={it.value} onClick={() => onChange(it.value)}
        className={cn("px-4 h-11 md:h-9 text-sm rounded-full transition-colors", value === it.value ? "bg-card text-fg shadow-sm border border-line" : "text-muted hover:text-fg")}
        role="tab" aria-selected={value === it.value}>
        {it.label}
      </button>
    ))}
  </div>
);

// Accordion item
const AccordionItem = ({ q, a, open, onToggle }) => (
  <div className="border-b border-line">
    <button onClick={onToggle} className="w-full flex items-center justify-between text-left py-5 gap-6 group">
      <span className="font-display text-lg md:text-xl pr-4">{q}</span>
      <span className={cn("shrink-0 w-9 h-9 rounded-full border border-line grid place-items-center transition-transform", open && "rotate-45")}>
        <svg viewBox="0 0 16 16" fill="none" className="w-3.5 h-3.5"><path d="M8 2v12M2 8h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
      </span>
    </button>
    <div className={cn("grid transition-all duration-300", open ? "grid-rows-[1fr] opacity-100 pb-6" : "grid-rows-[0fr] opacity-0")}>
      <div className="overflow-hidden text-muted max-w-3xl pr-12 leading-relaxed">{a}</div>
    </div>
  </div>
);

const Accordion = ({ items }) => {
  const [open, setOpen] = useState(0);
  return (
    <div className="border-t border-line">
      {items.map((it, i) => (
        <AccordionItem key={i} {...it} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
      ))}
    </div>
  );
};

// Slider (single thumb)
const Slider = ({ value, onChange, min, max, step = 1, format = (v) => v }) => {
  const pct = ((value - min) / (max - min)) * 100;
  // o polegar é maior no celular (28px) e menor no desktop (20px)
  const thumbOff = typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches ? '10px' : '14px';
  return (
    <div className="space-y-3">
      <div className="flex items-baseline justify-between">
        <span className="font-mono text-xs uppercase tracking-[0.18em] text-muted"></span>
        <span className="font-mono tabular text-xl text-fg">{format(value)}</span>
      </div>
      <div className="relative h-2 rounded-full bg-subtle border border-line">
        <div className="absolute inset-y-0 left-0 rounded-full bg-fg" style={{ width: `${pct}%` }} />
        {/* área de toque de 44px, bem maior que o trilho de 8px, para uso no celular */}
        <input type="range" value={value} min={min} max={max} step={step}
          onChange={(e) => onChange(Number(e.target.value))}
          className="absolute -inset-y-[18px] inset-x-0 w-full opacity-0 cursor-pointer touch-none" />
        <div className="absolute -top-2.5 w-7 h-7 md:-top-1.5 md:w-5 md:h-5 rounded-full bg-card border-2 border-fg shadow pointer-events-none"
          style={{ left: `calc(${pct}% - ${thumbOff})` }} />
      </div>
    </div>
  );
};

// Field
const Field = ({ label, hint, children }) => (
  <label className="block">
    <div className="flex items-baseline justify-between mb-2">
      <span className="text-sm font-medium text-fg">{label}</span>
      {hint && <span className="text-xs text-muted">{hint}</span>}
    </div>
    {children}
  </label>
);

const Input = ({ className = "", ...props }) => (
  <input {...props} className={cn("w-full h-11 px-4 rounded-xl bg-card border border-line focus:border-fg outline-none text-fg placeholder:text-muted transition-colors", className)} />
);

const Select = ({ className = "", children, ...props }) => (
  <div className="relative">
    <select {...props} className={cn("appearance-none w-full h-11 px-4 pr-10 rounded-xl bg-card border border-line focus:border-fg outline-none text-fg transition-colors", className)}>
      {children}
    </select>
    <svg viewBox="0 0 16 16" className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted"><path d="m4 6 4 4 4-4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
  </div>
);

const Textarea = ({ className = "", ...props }) => (
  <textarea {...props} className={cn("w-full px-4 py-3 rounded-xl bg-card border border-line focus:border-fg outline-none text-fg placeholder:text-muted transition-colors min-h-[120px]", className)} />
);

// MetricBig
const MetricBig = ({ value, label, sub }) => (
  <div>
    <div className="font-display text-5xl md:text-6xl tracking-tightest tabular">{value}</div>
    <div className="text-fg mt-2 font-medium">{label}</div>
    {sub && <div className="text-muted text-sm mt-1">{sub}</div>}
  </div>
);

Object.assign(window, { cn, Button, Badge, Card, Section, Reveal, Tabs, Accordion, Slider, Field, Input, Select, Textarea, MetricBig });