// hero-funnel.jsx, Animated sales funnel for the hero section.
// Shows leads dropping in, being processed by AI at each stage,
// and contracts coming out at the bottom.

const FUNNEL_CSS = `
.hf-wrap{position:relative;width:100%;max-width:980px;margin:84px auto 0;padding:0 12px}
.hf{position:relative;height:480px;background:
    radial-gradient(ellipse 60% 40% at 50% 18%,rgba(4,35,115,.5),transparent 70%),
    linear-gradient(180deg,#020611,#000000);
  border:1px solid var(--line);border-radius:28px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(2,162,255,.08) inset}
.hf::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);pointer-events:none}

/* Top bar */
.hf-top{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;z-index:6;pointer-events:none}
.hf-top-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(2,162,255,.08);border:1px solid rgba(2,162,255,.28);
  font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hf-top-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);animation:hfLivePulse 1.8s ease-in-out infinite}
.hf-top-meta{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase}
@keyframes hfLivePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}

/* Funnel walls */
.hf-walls{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Stage bands & labels */
.hf-stage{position:absolute;left:0;right:0;display:flex;align-items:center;pointer-events:none;z-index:4}
.hf-stage-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(2,162,255,.22) 20%,rgba(2,162,255,.22) 80%,transparent)}
.hf-stage-left{padding-right:18px;text-align:right;width:200px;font-family:'Poppins',sans-serif;font-size:12.5px;color:var(--ink-dim);font-weight:500;letter-spacing:-.005em}
.hf-stage-left small{display:block;font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px;font-weight:400}
.hf-stage-right{padding-left:18px;width:200px;display:flex;align-items:center;gap:6px}
.hf-ai{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:rgba(2,162,255,.1);border:1px solid rgba(2,162,255,.32);color:var(--accent);
  font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 0 24px -6px var(--accent-glow);animation:hfAiPulse 2.6s ease-in-out infinite}
.hf-ai svg{flex-shrink:0}
@keyframes hfAiPulse{0%,100%{box-shadow:0 0 24px -6px var(--accent-glow)}50%{box-shadow:0 0 36px -4px var(--accent-glow),0 0 0 4px rgba(2,162,255,.08)}}

/* Lead cards */
.hf-stream{position:absolute;inset:0;pointer-events:none;
  clip-path:polygon(23.5% 12.5%, 76.5% 12.5%, 55.1% 87.5%, 44.9% 87.5%);
  -webkit-clip-path:polygon(23.5% 12.5%, 76.5% 12.5%, 55.1% 87.5%, 44.9% 87.5%);
  background:radial-gradient(ellipse at 50% 50%,rgba(2,162,255,.04),transparent 70%)}
.hf-card{position:absolute;display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 5px;background:#08102a;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:var(--ink);
  white-space:nowrap;opacity:0;will-change:left,top,opacity;
  transform:translate(-50%,-50%);
  box-shadow:0 4px 12px rgba(0,0,0,.4)}
.hf-card-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#02a2ff,#0040ff);flex-shrink:0;
  box-shadow:0 0 0 1px rgba(2,162,255,.4) inset,0 0 10px rgba(2,162,255,.4)}
.hf-card.tagged{border-color:rgba(2,162,255,.45);background:rgba(2,162,255,.08)}
.hf-card .check{color:var(--accent);font-size:11px;margin-left:2px}

/* Falling animation, 5 lanes that converge into the funnel shape.
   Top of funnel: x ~ 24%,76% (centered). Bottom: x ~ 45%,55%. y from 10%→90%.
   The clip-path on .hf-stream guarantees cards never render outside the trapezoid. */
@keyframes hfL0{0%{left:24%;top:10%;opacity:0}
                10%{opacity:1}
                90%{opacity:1;left:46%;top:86%}
                100%{left:46%;top:90%;opacity:0}}
@keyframes hfL1{0%{left:37%;top:10%;opacity:0}
                10%{opacity:1}
                90%{opacity:1;left:48.5%;top:86%}
                100%{left:48.5%;top:90%;opacity:0}}
@keyframes hfL2{0%{left:50%;top:10%;opacity:0}
                10%{opacity:1}
                90%{opacity:1;left:50%;top:86%}
                100%{left:50%;top:90%;opacity:0}}
@keyframes hfL3{0%{left:63%;top:10%;opacity:0}
                10%{opacity:1}
                90%{opacity:1;left:51.5%;top:86%}
                100%{left:51.5%;top:90%;opacity:0}}
@keyframes hfL4{0%{left:76%;top:10%;opacity:0}
                10%{opacity:1}
                90%{opacity:1;left:54%;top:86%}
                100%{left:54%;top:90%;opacity:0}}

/* Output card */
.hf-out{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;
  background:linear-gradient(180deg,rgba(2,162,255,.18),rgba(2,162,255,.06));
  border:1px solid rgba(2,162,255,.4);border-radius:14px;z-index:7;
  box-shadow:0 10px 40px -10px var(--accent-glow),0 0 0 1px rgba(2,162,255,.1) inset}
.hf-out-icon{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#02a2ff,#0040ff);color:#ffffff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;box-shadow:0 0 18px var(--accent-glow)}
.hf-out-text{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.hf-out-h{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em}
.hf-out-n{font-family:'Geist Mono',monospace;font-size:10.5px;color:var(--ink-dim);letter-spacing:.06em}
.hf-out-n em{font-style:italic;color:var(--accent);font-family:'Instrument Serif',serif;font-size:14px;margin-right:3px}

/* Side particles */
.hf-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);opacity:.6;pointer-events:none}

/* Caption strip under the funnel */
.hf-cap{display:flex;justify-content:space-between;align-items:flex-start;margin-top:18px;padding:0 8px;gap:30px;flex-wrap:wrap}
.hf-cap small{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.hf-cap-script{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent);font-size:18px;display:inline-flex;align-items:center;gap:8px}

@media (max-width: 860px){
  .hf{height:520px}
  .hf-stage-left,.hf-stage-right{width:120px;font-size:11px}
  .hf-stage-left small,.hf-ai{font-size:9px}
}
@media (max-width: 600px){
  .hf{height:480px}
  .hf-stage-left,.hf-stage-right{width:80px;font-size:10px}
  .hf-stage-left small{display:none}
  .hf-ai{padding:3px 7px;font-size:8.5px;letter-spacing:.1em}
  .hf-card{font-size:9.5px;padding:4px 8px 4px 4px}
  .hf-card-dot{width:11px;height:11px}
}
`;

const Sparkle = ({ size = 11 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" aria-hidden>
    <path d="M8 0L9.2 6.8L16 8L9.2 9.2L8 16L6.8 9.2L0 8L6.8 6.8Z" />
  </svg>
);

const HeroFunnel = () => {
  // Inject CSS once
  React.useEffect(() => {
    if (document.getElementById("hf-style")) return;
    const s = document.createElement("style");
    s.id = "hf-style";
    s.textContent = FUNNEL_CSS;
    document.head.appendChild(s);
  }, []);

  // Counter for contracts closed
  const [contracts, setContracts] = React.useState(247);
  React.useEffect(() => {
    const id = setInterval(() => setContracts((c) => c + 1), 5200);
    return () => clearInterval(id);
  }, []);

  // 10 leads in 5 lanes, staggered delays
  const names = ["Maria S.", "João R.", "Ana C.", "Pedro L.", "Carla M.", "Lucas P.", "Beatriz K.", "Felipe O.", "Rafael T.", "Júlia N."];
  const leads = names.map((n, i) => {
    const lane = i % 5;
    const delay = (i * 1.1) % 7;
    return { name: n, lane, delay, tagged: i % 2 === 0 };
  });

  return (
    <div className="hf-wrap">
      <div className="hf">
        {/* Top bar */}
        <div className="hf-top">
          <div className="hf-top-tag"><span className="dot" /> Operação ao vivo</div>
          <div className="hf-top-meta">Funil comercial · processo.adv</div>
        </div>

        {/* Funnel walls + decorative SVG */}
        <svg className="hf-walls" viewBox="0 0 980 480" preserveAspectRatio="none">
          <defs>
            <linearGradient id="hfWallGrad" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="rgba(2,162,255,.08)" />
              <stop offset="100%" stopColor="rgba(2,162,255,.02)" />
            </linearGradient>
            <radialGradient id="hfGlowGrad" cx="50%" cy="100%" r="50%">
              <stop offset="0%" stopColor="rgba(2,162,255,.45)" />
              <stop offset="100%" stopColor="rgba(2,162,255,0)" />
            </radialGradient>
          </defs>
          {/* Funnel trapezoid (wide top, narrow bottom) */}
          <path
            d="M 230 60 L 750 60 L 540 420 L 440 420 Z"
            fill="url(#hfWallGrad)"
            stroke="rgba(2,162,255,.28)"
            strokeWidth="1"
          />
          {/* glow at exit */}
          <ellipse cx="490" cy="420" rx="120" ry="40" fill="url(#hfGlowGrad)" />
          {/* Decorative side particles */}
          <g fill="rgba(2,162,255,.6)">
            <circle cx="60" cy="120" r="1.5" opacity=".5" />
            <circle cx="90" cy="180" r="1" opacity=".4" />
            <circle cx="50" cy="260" r="1.5" opacity=".5" />
            <circle cx="80" cy="340" r="1" opacity=".3" />
            <circle cx="920" cy="140" r="1.5" opacity=".5" />
            <circle cx="900" cy="220" r="1" opacity=".4" />
            <circle cx="930" cy="300" r="1.5" opacity=".5" />
            <circle cx="890" cy="380" r="1" opacity=".3" />
          </g>
        </svg>

        {/* Stage 1, Entrada */}
        <div className="hf-stage" style={{ top: 60 }}>
          <div className="hf-stage-left">
            Entrada do lead
            <small>1.284 / mês</small>
          </div>
          <div className="hf-stage-line" />
          <div className="hf-stage-right" />
        </div>

        {/* Stage 2, AI atende */}
        <div className="hf-stage" style={{ top: 170 }}>
          <div className="hf-stage-left">
            Atende 24/7
            <small>resposta &lt; 5min</small>
          </div>
          <div className="hf-stage-line" />
          <div className="hf-stage-right">
            <span className="hf-ai"><Sparkle /> IA + automação</span>
          </div>
        </div>

        {/* Stage 3, AI qualifica */}
        <div className="hf-stage" style={{ top: 270 }}>
          <div className="hf-stage-left">
            Qualifica caso
            <small>nicho · prioridade</small>
          </div>
          <div className="hf-stage-line" />
          <div className="hf-stage-right">
            <span className="hf-ai"><Sparkle /> IA + automação</span>
          </div>
        </div>

        {/* Stage 4, Reunião */}
        <div className="hf-stage" style={{ top: 360 }}>
          <div className="hf-stage-left">
            Reunião agendada
            <small>com sócio</small>
          </div>
          <div className="hf-stage-line" />
          <div className="hf-stage-right" />
        </div>

        {/* Falling lead cards, clipped to funnel shape via .hf-stream */}
        <div className="hf-stream">
          {leads.map((lead, i) => (
            <div
              key={i}
              className={"hf-card" + (lead.tagged ? " tagged" : "")}
              style={{
                animation: `hfL${lead.lane} 7s linear infinite`,
                animationDelay: `-${lead.delay}s`,
              }}
            >
              <span className="hf-card-dot" />
              <span>{lead.name}</span>
              {lead.tagged && <span className="check">✓</span>}
            </div>
          ))}
        </div>

        {/* Output card at bottom */}
        <div className="hf-out">
          <div className="hf-out-icon">✓</div>
          <div className="hf-out-text">
            <div className="hf-out-h">Contrato assinado</div>
            <div className="hf-out-n"><em>{contracts}</em>este mês · 31% conversão</div>
          </div>
        </div>
      </div>

      {/* Caption under funnel */}
      <div className="hf-cap">
        <small>Entrada → atendimento → qualificação → reunião → contrato</small>
        <span className="hf-cap-script">
          rodando 24/7, sem você botar a mão
          <svg width="38" height="14" viewBox="0 0 38 14" fill="none">
            <path d="M2 7 C 10 2, 22 12, 34 5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" fill="none" />
            <path d="M30 2 L34 5 L31 9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
          </svg>
        </span>
      </div>
    </div>
  );
};

Object.assign(window, { HeroFunnel, Sparkle });