/* =========================================================
   Funnel Labs IA — UI Components
   FormField, Select, ChipGroup, RadioCardGroup, PlanCard, ProgressBar, Hero, Header, ThankYou
   ========================================================= */
const { useState, useEffect, useRef, useCallback, useMemo, Fragment } = React;

/* ---------- Atom: animated check icon ---------- */
function CheckIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4 12 L10 18 L20 6" />
    </svg>
  );
}

/* ---------- Atom: arrow ---------- */
function Arrow({ dir = "right" }) {
  return (
    <span className="arrow" aria-hidden="true">
      {dir === "left" ? "←" : "→"}
    </span>
  );
}

/* ---------- Field: text/email/tel/textarea floating-label ---------- */
function FormField({
  id,
  label,
  type = "text",
  value,
  onChange,
  onBlur,
  error,
  required,
  multiline,
  showCounterFrom,
  hint,
  inputMode,
  autoComplete,
  maxLength,
  validateLive, // if true, valid state shows green check before blur
}) {
  const [focused, setFocused] = useState(false);
  const [shake, setShake] = useState(false);
  const [touched, setTouched] = useState(false);
  const hasValue = value != null && String(value).length > 0;
  const showError = touched && !!error;
  const showValid = touched && !error && hasValue;

  useEffect(() => {
    if (showError) {
      setShake(true);
      const t = setTimeout(() => setShake(false), 360);
      return () => clearTimeout(t);
    }
  }, [error, touched]);

  const cls = [
    "field",
    focused ? "is-focused" : "",
    hasValue ? "has-value" : "",
    showError ? "is-error" : "",
    showValid ? "is-valid" : "",
    shake ? "is-shake" : "",
  ].filter(Boolean).join(" ");

  const handleBlur = (e) => {
    setFocused(false);
    setTouched(true);
    if (onBlur) onBlur(e);
  };

  const charCount = String(value || "").length;
  const showCounter = showCounterFrom != null && charCount >= showCounterFrom;
  const counterGood = showCounterFrom && charCount >= showCounterFrom + 50;

  const Tag = multiline ? "textarea" : "input";

  return (
    <div className={cls}>
      <div className="field__inner">
        <label className="field__label" htmlFor={id}>
          {label}
          {required && <span className="req">*</span>}
        </label>
        <Tag
          id={id}
          type={multiline ? undefined : type}
          inputMode={inputMode}
          autoComplete={autoComplete}
          maxLength={maxLength}
          className={multiline ? "field__textarea" : "field__input"}
          value={value || ""}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={handleBlur}
          aria-required={required}
          aria-invalid={showError}
          aria-describedby={showError ? `${id}-err` : (hint ? `${id}-hint` : undefined)}
          rows={multiline ? 6 : undefined}
        />
        {!multiline && (
          <div className="field__check"><CheckIcon /></div>
        )}
      </div>
      {showError && (
        <div className="field__error" id={`${id}-err`} role="alert">
          {error}
        </div>
      )}
      {!showError && hint && (
        <div className="field__hint" id={`${id}-hint`}>{hint}</div>
      )}
      {showCounterFrom != null && (
        <div className={"field__counter " + (showCounter ? "is-visible" : "") + (counterGood ? " is-good" : "")}>
          {charCount}{maxLength ? `/${maxLength}` : ""} caracteres
        </div>
      )}
    </div>
  );
}

/* ---------- Select (custom dropdown) ---------- */
function Select({ id, label, options, value, onChange, onBlur, error, required }) {
  const [open, setOpen] = useState(false);
  const [touched, setTouched] = useState(false);
  const ref = useRef(null);
  const hasValue = value != null && value !== "";
  const showError = touched && !!error;

  useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    function onEsc(e) { if (e.key === "Escape") setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onEsc);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onEsc);
    };
  }, []);

  const cls = [
    "select",
    open ? "is-open" : "",
    hasValue ? "has-value" : "",
    showError ? "is-error" : "",
  ].filter(Boolean).join(" ");

  const selected = options.find(o => o.value === value);

  return (
    <div className={"field " + (showError ? "is-error" : (hasValue && !open ? "is-valid" : ""))} ref={ref}>
      <div className={cls}>
        <button
          type="button"
          id={id}
          className={"select__trigger " + (!hasValue ? "is-placeholder" : "")}
          onClick={() => setOpen(o => !o)}
          onBlur={(e) => {
            // only fire blur if click outside list
            setTimeout(() => { setTouched(true); if (onBlur) onBlur(); }, 0);
          }}
          aria-haspopup="listbox"
          aria-expanded={open}
          aria-required={required}
          aria-invalid={showError}
        >
          <span className="select__floating">
            {label}{required && <span style={{color: "var(--accent)"}}> *</span>}
          </span>
          <span style={{position:"relative",zIndex:1,opacity: hasValue ? 1 : 0, color: "var(--white-100)"}}>
            {selected ? selected.label : ""}
          </span>
          <span className="select__caret" aria-hidden="true">
            <svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
        </button>
        <div className="select__list" role="listbox">
          {options.map(opt => (
            <div
              key={opt.value}
              className={"select__opt " + (opt.value === value ? "is-selected" : "")}
              role="option"
              aria-selected={opt.value === value}
              onClick={() => { onChange(opt.value); setOpen(false); setTouched(true); }}
            >
              <span>{opt.label}</span>
              {opt.tag && <span style={{fontFamily:"var(--mono)",fontSize:10,color:"var(--ink-low)",letterSpacing:".1em",textTransform:"uppercase"}}>{opt.tag}</span>}
            </div>
          ))}
        </div>
      </div>
      {showError && <div className="field__error">{error}</div>}
    </div>
  );
}

/* ---------- RadioCardGroup ---------- */
function RadioCardGroup({ name, options, value, onChange, cols = 3 }) {
  return (
    <div className={"radiogrid radiogrid--" + cols} role="radiogroup">
      {options.map((opt, i) => (
        <button
          key={opt.value}
          type="button"
          role="radio"
          aria-checked={value === opt.value}
          className={"radiocard " + (value === opt.value ? "is-selected" : "")}
          onClick={() => onChange(opt.value)}
        >
          <div className="radiocard__num">{String(i + 1).padStart(2, "0")}</div>
          <div className="radiocard__title">{opt.label}</div>
          {opt.sub && <div className="radiocard__sub">{opt.sub}</div>}
        </button>
      ))}
    </div>
  );
}

/* ---------- ChipGroup (multi-select) ---------- */
function ChipGroup({ options, value = [], onChange }) {
  const toggle = (v) => {
    if (value.includes(v)) onChange(value.filter(x => x !== v));
    else onChange([...value, v]);
  };
  return (
    <div className="chips" role="group">
      {options.map(opt => {
        const sel = value.includes(opt.value);
        return (
          <button
            key={opt.value}
            type="button"
            className={"chip " + (sel ? "is-selected" : "")}
            onClick={() => toggle(opt.value)}
            aria-pressed={sel}
          >
            <span className="chip__dot" aria-hidden="true" />
            {opt.label}
          </button>
        );
      })}
    </div>
  );
}

/* ---------- ContextNote (microcopy contextual) ---------- */
function ContextNote({ visible, mark = "Nota da banca", children }) {
  return (
    <div className={"context " + (visible ? "is-visible" : "")} role="status" aria-live="polite">
      <div className="context__mark">{mark}</div>
      <div>{children}</div>
    </div>
  );
}

/* ---------- PlanCard ---------- */
function PlanCard({ plan, selected, onSelect }) {
  return (
    <button
      type="button"
      className={"plan " + (selected ? "is-selected" : "")}
      onClick={() => onSelect(plan.id)}
      aria-pressed={selected}
    >
      <div className="plan__head">
        <div className="plan__name">{plan.name}</div>
        <div className="plan__duration">{plan.duration}</div>
      </div>
      <div className="plan__price">
        <div className="plan__price__main">
          <span className="cur">R$</span>{plan.priceCash}
          <span className="tag">à vista</span>
        </div>
        <div className="plan__price__sub">
          ou <strong>R$ {plan.priceInstall}</strong> em até {plan.installments}x
        </div>
      </div>
      <ul className="plan__benefits">
        {plan.benefits.map((b, i) => <li key={i}>{b}</li>)}
      </ul>
      <div className="plan__cta">
        <span>{selected ? "Plano selecionado" : "Selecionar este plano"}</span>
        <span className="plan__check" aria-hidden="true" />
      </div>
    </button>
  );
}

/* ---------- ProgressBar (sticky top) ---------- */
function ProgressBar({ visible, step, totalSteps, stepLabels, onJump, allowJump, style }) {
  return (
    <div className={"progress " + (visible ? "is-visible" : "") + (style === "dots" ? " style--dots" : "")}>
      <div className="progress__inner">
        <div className="progress__steps">
          {stepLabels.map((label, i) => {
            const idx = i + 1;
            const cls = "progress__step " + (idx === step ? "is-active" : idx < step ? "is-done" : "");
            const canJump = allowJump && idx <= step;
            return (
              <button
                key={i}
                className={cls}
                onClick={() => canJump && onJump && onJump(idx)}
                style={{ cursor: canJump ? "pointer" : "default" }}
                disabled={!canJump}
              >
                <span className="num">{String(idx).padStart(2, "0")}</span>
                <span>{label}</span>
              </button>
            );
          })}
        </div>
        <div className="progress__counter">
          <span className="accent">Passo</span>&nbsp;<strong>{String(step).padStart(2, "0")}</strong>&nbsp;<span style={{opacity:0.4}}>/</span>&nbsp;{String(totalSteps).padStart(2, "0")}
        </div>
      </div>
    </div>
  );
}

/* ---------- Header ---------- */
function Header() {
  return (
    <header className="hdr">
      <div className="hdr__logo">
        <img src="assets/logo.png" alt="Funnel Labs IA — Mentoria e Aceleração" />
        <span className="hdr__sub">Aplicação · Banca de seleção</span>
      </div>
      <a className="hdr__back" href="index.html">
        <Arrow dir="left" />
        <span>Voltar para o programa</span>
      </a>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero anim-stagger">
      <div className="hero__meta">
        <span>Aplicação · Funnel Labs IA</span>
        <span className="sep" />
        <span>Mentoria · COPY S/A</span>
        <span className="sep" />
        <span>Anthony · André Cia</span>
      </div>
      <h1 className="hero__h1">
        Antes da vaga,<br />
        <span className="line-accent">vem a conversa.</span>
      </h1>
      <p className="hero__sub">
        Esta não é uma página de inscrição. É a porta da banca de seleção. <strong>Anthony e André Cia</strong> leem cada aplicação pessoalmente antes de abrir conversa pelo WhatsApp. Responda com o cuidado que a vaga pede — quanto mais específico, melhor.
      </p>
      <div className="hero__stats">
        <div className="hero__stat">
          <div className="hero__stat__num">≈ 8–10 min</div>
          <div className="hero__stat__lbl">Tempo médio de preenchimento</div>
        </div>
        <div className="hero__stat">
          <div className="hero__stat__num">48h úteis</div>
          <div className="hero__stat__lbl">Prazo de resposta da banca, direto no WhatsApp</div>
        </div>
        <div className="hero__stat">
          <div className="hero__stat__num">Rascunho salvo</div>
          <div className="hero__stat__lbl">Suas respostas ficam guardadas se você sair e voltar</div>
        </div>
      </div>
      <div className="hero__quote">
        Não é um programa para estudar. É um sistema para executar. A banca seleciona quem chega disposto a operar diferente do mercado.
      </div>
    </section>
  );
}

/* ---------- ThankYou ---------- */
function ThankYou({ applicationCode, plan, name }) {
  const firstName = (name || "").split(" ")[0] || "";
  return (
    <section className="thanks">
      <div className="thanks__mark" aria-hidden="true">
        <svg width="36" height="36" viewBox="0 0 24 24">
          <path d="M4 12 L10 18 L20 6" />
        </svg>
      </div>
      <div className="thanks__eyebrow">Aplicação recebida</div>
      <h1 className="thanks__h1">
        {firstName ? `${firstName}, ` : ""}sua aplicação<br />
        está <em>na banca.</em>
      </h1>
      <p className="thanks__sub">
        Anthony e André Cia recebem a notificação agora e leem pessoalmente. <strong>A resposta sai em até 48h úteis</strong>, direto no WhatsApp que você cadastrou. Se houver match com o {plan === "parceiro" ? "Plano Parceiro" : "Plano Acelerador"}, a conversa começa por ali.
      </p>
      <ol className="thanks__steps">
        <li className="thanks__step">
          <div className="thanks__step__num">01</div>
          <div>
            <div className="thanks__step__title">Avaliação da banca</div>
            <p className="thanks__step__body">Anthony e André leem cada aplicação. O que pesa mais aqui são as duas respostas abertas — quanto mais específico o projeto, mais rápido o retorno.</p>
          </div>
        </li>
        <li className="thanks__step">
          <div className="thanks__step__num">02</div>
          <div>
            <div className="thanks__step__title">Conversa por WhatsApp</div>
            <p className="thanks__step__body">Se houver match, marcamos uma call de 30 minutos para alinhar expectativas, prazos e a melhor forma de você entrar no programa.</p>
          </div>
        </li>
        <li className="thanks__step">
          <div className="thanks__step__num">03</div>
          <div>
            <div className="thanks__step__title">Onboarding individual</div>
            <p className="thanks__step__body">Quando aprovado, o onboarding é feito direto com os fundadores. Você começa executando, não estudando — a primeira aplicação dos agentes acontece na primeira semana.</p>
          </div>
        </li>
      </ol>
      <div className="thanks__code">
        <span className="dot" aria-hidden="true" />
        Protocolo&nbsp;·&nbsp;<strong>{applicationCode}</strong>
      </div>
      <p style={{marginTop: 48, fontSize: 13, color: "var(--ink-low)", maxWidth: "52ch", lineHeight: 1.6}}>
        Se a banca não retornar em 48h úteis, escreva para <a style={{color:"var(--accent)",textDecoration:"none",borderBottom:"1px dashed var(--accent-line)"}} href="#">contato@copysa.com.br</a> mencionando o protocolo acima.
      </p>
    </section>
  );
}

/* ---------- Export to window ---------- */
Object.assign(window, {
  FormField, Select, RadioCardGroup, ChipGroup, ContextNote,
  PlanCard, ProgressBar, Header, Hero, ThankYou,
  CheckIcon, Arrow,
});