// Problema V1 — Focus PRINCIPAL: draft orders / coșuri abandonate.
// Confirmare COD = serviciu paralel, secundar.

const { useState: useStatePV1, useEffect: useEffectPV1, useRef: useRefPV1 } = React;

const lerpPV1 = (a, b, t) => a + (b - a) * t;
const clampPV1 = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
const easeOutPV1 = (t) => 1 - Math.pow(1 - t, 2.2);

const MorphLine = () => {
  const ref = useRefPV1(null);
  const [p, setP] = useStatePV1(0); // scroll progress 0..1
  const [pulseKey, setPulseKey] = useStatePV1(0); // increments each time threshold crossed upward
  const wasAbove = useRefPV1(false);

  useEffectPV1(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || 1;
      const start = vh * 0.95;
      const end = vh * 0.35;
      const raw = (start - r.top) / (start - end);
      const next = clampPV1(raw, 0, 1);
      setP(next);

      // Re-trigger pulse on every upward crossing through 0.5
      // Reset arming when progress drops below 0.35 (hysteresis)
      if (next >= 0.5 && !wasAbove.current) {
        wasAbove.current = true;
        setPulseKey((k) => k + 1);
      } else if (next < 0.35 && wasAbove.current) {
        wasAbove.current = false;
      }
    };
    const onScroll = () => {
      if (!raf) raf = requestAnimationFrame(update);
    };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  const t = easeOutPV1(p);

  const blur = lerpPV1(14, 0, t);
  const opacity = lerpPV1(0, 1, Math.min(1, t * 1.6));
  const ty = lerpPV1(60, 0, t);
  const scale = lerpPV1(0.94, 1, t);

  const greenAlpha = clampPV1((t - 0.35) / 0.55, 0, 1);
  const greenColor = `rgba(52, 211, 153, ${0.55 + 0.45 * greenAlpha})`;
  const greenGlow = greenAlpha > 0
    ? `0 0 ${22 * greenAlpha}px rgba(52,211,153,${0.55 * greenAlpha})`
    : "none";

  return (
    <div
      ref={ref}
      style={{
        marginTop: 56,
        marginBottom: 24,
        padding: "40px 24px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minHeight: 280,
      }}
    >
      <style>{`
        @keyframes pv1-pulse {
          0%   { transform: scale(1);    text-shadow: 0 0 22px rgba(52,211,153,0.55); filter: brightness(1); }
          25%  { transform: scale(1.08); text-shadow: 0 0 48px rgba(52,211,153,0.95), 0 0 90px rgba(52,211,153,0.55); filter: brightness(1.4); }
          55%  { transform: scale(1.02); text-shadow: 0 0 32px rgba(52,211,153,0.7); filter: brightness(1.15); }
          100% { transform: scale(1);    text-shadow: 0 0 22px rgba(52,211,153,0.55); filter: brightness(1); }
        }
        .pv1-pulse-once {
          animation: pv1-pulse 850ms cubic-bezier(.2,.7,.2,1) 1;
          display: inline-block;
          transform-origin: center;
        }
      `}</style>
      <h3
        style={{
          margin: 0,
          fontSize: "clamp(28px, 4vw, 56px)",
          fontWeight: 900,
          color: "#fff",
          letterSpacing: "-0.03em",
          lineHeight: 1.15,
          textAlign: "center",
          maxWidth: 1120,
          transform: `translate3d(0, ${ty}px, 0) scale(${scale})`,
          filter: blur > 0.05 ? `blur(${blur}px)` : "none",
          opacity,
          willChange: "transform, filter, opacity",
        }}
      >
        Dacă ai recupera cei{" "}
        <span
          key={pulseKey}
          className={pulseKey > 0 ? "pv1-pulse-once" : ""}
          style={{
            color: greenColor,
            textShadow: greenGlow,
            transition: "text-shadow 0.15s ease",
            display: "inline-block",
          }}
        >
          11 - 13K €
        </span>{" "}
        lunar,
        <br />
        cum ar arăta afacerea ta?
      </h3>
    </div>
  );
};

const ProblemaV1 = () => {
  const [isMobile, setIsMobile] = useStatePV1(false);

  useEffectPV1(() => {
    const check = () => setIsMobile(window.innerWidth < 760);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);

  const secondary = [
    {
      big: "40%", bigLabel: "comenzi COD neconfirmate",
      head: "Fără confirmarea comenzilor, pierzi mii de lei.",
      body: "4 din 10 SMS-uri de confirmare sunt către numere invalide, clienți care nu răspund/intră căsuța vocală sau clienți care se răzgândesc fix după ce plasează comanda. Noi trimitem automat SMS pe Whatsapp cu opțiune de Confirmare sau Refuz ca tu să știi sigur dacă trimiți comanda.",
      colorRgb: "239,68,68", color: "#ef4444",
    },
    {
      big: "70%", bigLabel: "coșuri abandonate",
      head: "7 din 10 clienți abandonează comanda",
      body: "Un apel de confirmare convertește 3 din 5 comenzi. Dar nimeni nu are timp să sune sute de comenzi în timp util - mai ales un singur angajat. În funcție de volumul tău de comenzi, noi îți oferim 1,2 sau chiar 3 agenți pentru confirmarea comenzilor.",
      colorRgb: "239,68,68", color: "#ef4444",
    },
    {
      big: "1.000€", bigLabel: "salariu lunar / angajat",
      head: "Angajații costă, dar nu scalează.",
      body: "1000€+ pentru un angajat căruia trebuie să îi faci training, să îi dai pauze, concedii și care omite comenzi și nu lucrează în weekend. Echipa Confirmări.ro sună clienții în fiecare zi, fără training din partea ta, pauze sau concedii de care să îți faci griji.",
      colorRgb: "249,115,22", color: "#f97316",
    },
  ];

  return (
  <div className="ev-stage" style={{ width: "100%", height: "100%", padding: isMobile ? "40px 18px" : "60px 80px", overflow: "visible" }}>
    {/* Soft top fade */}
    <div style={{
      position: "absolute", top: -120, left: 0, right: 0, height: 200,
      background: "linear-gradient(to bottom, transparent, var(--bg-canvas))",
      pointerEvents: "none", zIndex: 0,
    }} />
    {/* Top-left indigo blob that continues from Hero's bottom-left blob — seamless bridge (desktop only) */}
    {!isMobile && (
      <span className="ev-blob ev-blob--indigo" style={{ width: 700, height: 700, left: -260, top: -340, opacity: 0.45, position: "absolute" }} />
    )}
    <h2 style={{ fontSize: isMobile ? 30 : 56, fontWeight: 900, color: "#fff", letterSpacing: "-0.035em", lineHeight: isMobile ? 1.15 : 1.05, margin: isMobile ? "0 auto 24px" : "0 auto 36px", maxWidth: 920, textAlign: "center" }}>
      Confirmarea Comenzilor Plasate și a Comenzilor Abandonate este{" "}
      <span style={{ color: "var(--neon-purple)", textShadow: "var(--glow-purple)" }}>esențială</span> pentru a avea un{" "}
      <span style={{ color: "var(--neon-purple)", textShadow: "var(--glow-purple)" }}>magazin profitabil</span>.
    </h2>

    {/* 3 secondary problems */}
    {isMobile ? (
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {secondary.map((p, i) => (
          <div key={i} className="ev-glass" style={{
            padding: 0,
            borderColor: `rgba(${p.colorRgb},0.22)`,
            position: "relative", overflow: "hidden",
          }}>
            <div style={{ padding: "16px 18px" }}>
              <div style={{ minWidth: 0 }}>
                <div style={{
                  fontSize: 32, fontWeight: 900,
                  color: p.color, letterSpacing: "-0.04em", lineHeight: 1,
                  textShadow: `0 0 14px rgba(${p.colorRgb},0.3)`,
                  fontVariantNumeric: "tabular-nums",
                }}>{p.big}</div>
                <div style={{
                  fontSize: 9, fontWeight: 800, color: p.color,
                  letterSpacing: "0.18em", textTransform: "uppercase",
                  marginTop: 6,
                }}>{p.bigLabel}</div>
              </div>
            </div>
            <div style={{ padding: "0 18px 16px" }}>
              <div style={{ fontSize: 15, fontWeight: 800, color: "#fff", letterSpacing: "-0.015em", marginBottom: 8, lineHeight: 1.25 }}>
                {p.head}
              </div>
              <div style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.55 }}>
                {p.body}
              </div>
            </div>
          </div>
        ))}
      </div>
    ) : (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
        {secondary.map((p, i) => (
          <div key={i} className="ev-glass" style={{
            padding: 24,
            borderColor: `rgba(${p.colorRgb},0.22)`,
            position: "relative", overflow: "hidden",
            transition: "all .3s ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderColor = `rgba(${p.colorRgb},0.45)`;
            e.currentTarget.style.transform = "translateY(-4px)";
            e.currentTarget.style.boxShadow = `0 24px 60px rgba(0,0,0,0.5), 0 0 30px rgba(${p.colorRgb},0.25)`;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderColor = `rgba(${p.colorRgb},0.22)`;
            e.currentTarget.style.transform = "translateY(0)";
            e.currentTarget.style.boxShadow = "0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08)";
          }}>
            <div style={{
              fontSize: 44, fontWeight: 900,
              color: p.color, letterSpacing: "-0.04em", lineHeight: 1,
              textShadow: `0 0 18px rgba(${p.colorRgb},0.35)`,
              fontVariantNumeric: "tabular-nums",
              marginBottom: 4,
            }}>{p.big}</div>
            <div style={{
              fontSize: 10, fontWeight: 800, color: p.color,
              letterSpacing: "0.20em", textTransform: "uppercase",
              marginBottom: 16,
            }}>{p.bigLabel}</div>
            <div style={{ fontSize: 17, fontWeight: 800, color: "#fff", letterSpacing: "-0.015em", marginBottom: 8, lineHeight: 1.2 }}>
              {p.head}
            </div>
            <div style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.55 }}>
              {p.body}
            </div>
          </div>
        ))}
      </div>
    )}

    <div style={{
      marginTop: isMobile ? 20 : 28, padding: isMobile ? "14px 16px" : "20px 28px",
      borderRadius: 14,
      background: "linear-gradient(90deg, rgba(239,68,68,0.10), transparent)",
      border: "1px solid rgba(239,68,68,0.25)",
      display: "flex", alignItems: "center", justifyContent: "center", gap: isMobile ? 10 : 14,
    }}>
      <span style={{ fontSize: isMobile ? 13 : 16, fontWeight: 700, color: "#fff", letterSpacing: "-0.01em", lineHeight: 1.45, textAlign: "center" }}>
        Dacă ai 3.000 comenzi/lună, minim <span style={{ color: "#ef4444" }}>~60.000—70.000 RON</span> nu ajung lunar în contul tău.
      </span>
    </div>

    <MorphLine />
    {/* Bottom fade — masks the grid out and softens the color transition into next section */}
    <div style={{
      position: "absolute", bottom: 0, left: 0, right: 0, height: 320,
      background: "linear-gradient(to bottom, transparent, var(--bg-canvas))",
      pointerEvents: "none", zIndex: 1,
    }} />
  </div>
  );
};

window.ProblemaV1 = ProblemaV1;