// HowItWorks V7 (option A) — Phone simulation cu 3 stări auto-cycling.
// Un singur device mockup, animat prin 3 stadii: install → configure → live calls.

const HV7_STAGES = [
{ id: 0, label: "Conectăm Magazinul", time: "5 min", chip: "Pas 1" },
{ id: 1, label: "Alegi ce opțiuni dorești", time: "10 min", chip: "Pas 2" },
{ id: 2, label: "Sunăm Clienții", time: "5 min", chip: "Pas 3" }];


const HV7_AUTO_MS = 4500;

const HV7_DeviceFrame = ({ children, isMobile }) =>
<div style={{
  width: isMobile ? 280 : 380, height: isMobile ? 540 : 720,
  borderRadius: 48,
  background: "linear-gradient(145deg, #0a2e1a 0%, #05130b 55%, #09a955 100%)",
  border: "1px solid rgba(9,169,85,0.25)",
  boxShadow: "0 40px 120px rgba(0,0,0,0.65), 0 0 60px rgba(9,169,85,0.15), inset 0 1px 0 rgba(255,255,255,0.06)",
  padding: 14,
  position: "relative"
}}>
    {/* notch */}
    <div style={{
    position: "absolute", top: 22, left: "50%", transform: "translateX(-50%)",
    width: 110, height: 30, borderRadius: 999, background: "#000",
    border: "1px solid rgba(255,255,255,0.06)",
    zIndex: 5
  }} />
    {/* screen */}
    <div style={{
    width: "100%", height: "100%", borderRadius: 36,
    background: "#05130b",
    overflow: "hidden", position: "relative"
  }}>
      {children}
    </div>
  </div>;


// Stage 1: Shopify connect screen
const HV7_Stage1 = () =>
<div style={{ padding: "60px 24px 24px", height: "100%", display: "flex", flexDirection: "column" }}>
    <div style={{ fontSize: 11, fontWeight: 800, color: "var(--fg-3)", letterSpacing: "0.20em", textTransform: "uppercase", marginBottom: 8 }}>App Store</div>
    <div style={{ fontSize: 22, fontWeight: 800, color: "#fff", marginBottom: 22, letterSpacing: "-0.02em" }}>Conectează magazinul</div>
    {[
  { name: "Shopify", color: "#95bf45", initial: "S", ok: true },
  { name: "WooCommerce", color: "#c084d6", initial: "W", ok: false },
  { name: "Magento", color: "#f26322", initial: "M", ok: false },
  { name: "API Custom", color: "var(--neon-purple-2)", initial: "{}", ok: false }].
  map((p, i) =>
  <div key={i} style={{
    display: "flex", alignItems: "center", gap: 12,
    padding: "12px 14px", borderRadius: 14, marginBottom: 8,
    background: p.ok ? "rgba(9,169,85,0.14)" : "rgba(255,255,255,0.03)",
    border: p.ok ? "1px solid rgba(9,169,85,0.45)" : "1px solid rgba(255,255,255,0.06)"
  }}>
        <div style={{
      width: 38, height: 38, borderRadius: 10,
      background: `${p.color}22`, border: `1px solid ${p.color}55`,
      display: "flex", alignItems: "center", justifyContent: "center",
      fontSize: 14, fontWeight: 900, color: p.color
    }}>{p.initial}</div>
        <div style={{ flex: 1, fontSize: 13, fontWeight: 700, color: "#fff" }}>{p.name}</div>
        {p.ok &&
    <div style={{
      width: 22, height: 22, borderRadius: 999, background: "var(--neon-purple)",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 0 16px rgba(9,169,85,0.55)"
    }}>
            <window.Icon name="check" size={12} color="#fff" strokeWidth={3} />
          </div>
    }
      </div>
  )}
    <div style={{ marginTop: "auto", padding: 14, borderRadius: 14, background: "rgba(34,197,94,0.10)", border: "1px solid rgba(34,197,94,0.30)", display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: "#22c55e", boxShadow: "0 0 12px #22c55e" }} />
      <div style={{ fontSize: 12, fontWeight: 700, color: "#86efac" }}>Conectat · 1.247 comenzi sincronizate</div>
    </div>
  </div>;


// Stage 2: Service selector — agent capabilities
const HV7_Stage2 = () =>
<div style={{ padding: "60px 24px 24px", height: "100%", display: "flex", flexDirection: "column" }}>
    <div style={{ fontSize: 11, fontWeight: 800, color: "var(--fg-3)", letterSpacing: "0.20em", textTransform: "uppercase", marginBottom: 8 }}>Servicii Confirmări.ro</div>
    <div style={{ fontSize: 22, fontWeight: 800, color: "#fff", marginBottom: 18, letterSpacing: "-0.02em" }}>Alege opțiuni</div>

    {[
  { name: "Confirmări Drafts", desc: "Recuperează coșuri abandonate", icon: "phone", active: true },
  { name: "Confirmări Comenzi Plasate", desc: "Confirmă comenzi COD", icon: "check", active: true },
  { name: "SMS Confirmare Whatsapp", desc: "Mesaje automate pe Whatsapp", icon: "message", active: false },
  { name: "Upsell-uri", desc: "Crește valoarea coșului în apel", icon: "trending-up", active: false }].
  map((s, i) =>
  <div key={i} style={{
    display: "flex", alignItems: "center", gap: 11,
    padding: "10px 12px", borderRadius: 12, marginBottom: 6,
    background: s.active ? "rgba(9,169,85,0.14)" : "rgba(255,255,255,0.03)",
    border: s.active ? "1px solid rgba(9,169,85,0.45)" : "1px solid rgba(255,255,255,0.06)"
  }}>
        <div style={{
      width: 32, height: 32, borderRadius: 9,
      background: s.active ? "rgba(9,169,85,0.20)" : "rgba(255,255,255,0.04)",
      border: s.active ? "1px solid rgba(9,169,85,0.40)" : "1px solid rgba(255,255,255,0.06)",
      display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0
    }}>
          <window.Icon name={s.icon} size={14} color={s.active ? "var(--neon-purple-2)" : "var(--fg-3)"} strokeWidth={2} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 800, color: "#fff", lineHeight: 1.2 }}>{s.name}</div>
          <div style={{ fontSize: 9, color: "var(--fg-3)", marginTop: 2, lineHeight: 1.2 }}>{s.desc}</div>
        </div>
        <div style={{
      width: 18, height: 18, borderRadius: 5,
      background: s.active ? "var(--neon-purple)" : "transparent",
      border: s.active ? "none" : "1.5px solid rgba(255,255,255,0.20)",
      display: "flex", alignItems: "center", justifyContent: "center",
      boxShadow: s.active ? "0 0 12px rgba(9,169,85,0.55)" : "none",
      flexShrink: 0
    }}>
          {s.active && <window.Icon name="check" size={11} color="#fff" strokeWidth={3} />}
        </div>
      </div>
  )}

    <button style={{
    marginTop: 8, padding: "10px 14px", borderRadius: 12,
    background: "rgba(255,255,255,0.04)",
    border: "1px solid rgba(255,255,255,0.10)",
    color: "var(--fg-1)", fontSize: 11, fontWeight: 800,
    letterSpacing: "0.18em", textTransform: "uppercase",
    display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
    cursor: "pointer"
  }}>
      Mai mult
      <span style={{ fontSize: 14 }}>→</span>
    </button>

    <div style={{
    marginTop: "auto",
    padding: 10, borderRadius: 10,
    background: "rgba(34,197,94,0.10)", border: "1px solid rgba(34,197,94,0.30)",
    display: "flex", alignItems: "center", gap: 8
  }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: "#22c55e" }} />
      <span style={{ fontSize: 10, fontWeight: 700, color: "#86efac" }}>2 servicii active · gata de pornit</span>
    </div>
  </div>;


// Stage 3: Live calls dashboard
const HV7_Stage3 = () =>
<div style={{ padding: "60px 24px 24px", height: "100%", display: "flex", flexDirection: "column" }}>
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
      <div>
        <div style={{ fontSize: 11, fontWeight: 800, color: "var(--fg-3)", letterSpacing: "0.20em", textTransform: "uppercase", marginBottom: 4 }}>Dashboard</div>
        <div style={{ fontSize: 18, fontWeight: 800, color: "#fff", letterSpacing: "-0.02em" }}>Live Operations</div>
      </div>
      <div style={{
      display: "flex", alignItems: "center", gap: 6,
      padding: "5px 10px", borderRadius: 999,
      background: "rgba(34,197,94,0.12)", border: "1px solid rgba(34,197,94,0.35)"
    }}>
        <span style={{
        width: 7, height: 7, borderRadius: 999, background: "#22c55e",
        animation: "hv7-pulse 1.4s ease-out infinite"
      }} />
        <span style={{ fontSize: 9, fontWeight: 800, color: "#22c55e", letterSpacing: "0.16em" }}>LIVE</span>
      </div>
    </div>

    {/* big stat */}
    <div style={{
    padding: 14, borderRadius: 14, marginBottom: 12,
    background: "linear-gradient(135deg, rgba(9,169,85,0.18), rgba(9,169,85,0.04))",
    border: "1px solid rgba(9,169,85,0.30)"
  }}>
      <div style={{ fontSize: 10, fontWeight: 700, color: "var(--neon-purple-2)", letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 4 }}>Apeluri active</div>
      <div style={{ fontSize: 36, fontWeight: 900, color: "#fff", letterSpacing: "-0.04em", lineHeight: 1 }}>295</div>
      <div style={{ fontSize: 10, color: "#86efac", marginTop: 4, fontWeight: 700 }}>+9 în ultimele 10 minute</div>
    </div>

    {/* call list */}
    {[
  { name: "Mihai T.", st: "Confirmat", ok: true },
  { name: "Cristina D.", st: "În apel", ok: false },
  { name: "Vlad S.", st: "În apel", ok: false },
  { name: "Ana R.", st: "Confirmat", ok: true }].
  map((c, i) =>
  <div key={i} style={{
    display: "flex", alignItems: "center", gap: 10,
    padding: "8px 10px", borderRadius: 10, marginBottom: 6,
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(255,255,255,0.05)"
  }}>
        <div style={{
      width: 26, height: 26, borderRadius: 999,
      background: c.ok ? "rgba(34,197,94,0.18)" : "rgba(9,169,85,0.18)",
      border: c.ok ? "1px solid rgba(34,197,94,0.35)" : "1px solid rgba(9,169,85,0.35)",
      display: "flex", alignItems: "center", justifyContent: "center"
    }}>
          <window.Icon name={c.ok ? "check" : "phone"} size={11} color={c.ok ? "#22c55e" : "var(--neon-purple-2)"} strokeWidth={2.4} />
        </div>
        <div style={{ flex: 1, fontSize: 11, fontWeight: 700, color: "#fff" }}>{c.name}</div>
        <div style={{
      fontSize: 8, fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase",
      color: c.ok ? "#86efac" : "var(--neon-purple-2)"
    }}>{c.st}</div>
      </div>
  )}
  </div>;


const HowItWorksV7 = () => {
  const [stage, setStage] = React.useState(0);
  const [started, setStarted] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  const rootRef = React.useRef(null);

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

  React.useEffect(() => {
    if (!rootRef.current) return;
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {
            // Reset to Pas 1 fresh and start cycling
            setStage(0);
            setStarted(true);
          } else {
            setStarted(false);
          }
        }
      },
      { threshold: 0.35, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(rootRef.current);
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    if (!started) return;
    const id = setInterval(() => setStage((s) => (s + 1) % 3), HV7_AUTO_MS);
    return () => clearInterval(id);
  }, [started]);

  const stages = [HV7_Stage1, HV7_Stage2, HV7_Stage3];
  const Active = stages[stage];

  return (
    <div ref={rootRef} className="ev-stage" style={{ width: "100%", height: "100%", padding: isMobile ? "40px 18px" : "60px 80px", overflow: "hidden" }}>
      <style>{`
        @keyframes hv7-pulse {
          0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
          70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
          100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
        }
        @keyframes hv7-fade-in {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>

      <h2 style={{ fontSize: 56, fontWeight: 900, color: "var(--neon-purple)", letterSpacing: "-0.035em", lineHeight: 1.05, margin: "0 0 40px", textAlign: "center" }}>
        <span style={{
          display: "inline-block",
          opacity: started ? 1 : 0,
          transform: started ? "translateX(0)" : "translateX(-60px)",
          transition: "opacity 0.9s cubic-bezier(.16,.84,.32,1) 0.05s, transform 0.9s cubic-bezier(.16,.84,.32,1) 0.05s"
        }}>Cum încep colaborarea?</span>
      </h2>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "420px minmax(0, 560px)", gap: isMobile ? 32 : 80, alignItems: "center", justifyContent: "center", margin: "0 auto", maxWidth: 1100 }}>
        {/* LEFT: phone */}
        <div style={{ display: "flex", justifyContent: "center", order: isMobile ? 2 : 0 }}>
          <HV7_DeviceFrame isMobile={isMobile}>
            <div key={stage} style={{ height: "100%", animation: "hv7-fade-in .5s ease-out both" }}>
              <Active />
            </div>
          </HV7_DeviceFrame>
        </div>

        {/* RIGHT: stage controls + descriptions */}
        <div>
          {HV7_STAGES.map((s, i) => {
            const active = i === stage;
            return (
              <div
                key={s.id}
                onClick={() => setStage(i)}
                style={{
                  display: "flex", alignItems: "flex-start", gap: isMobile ? 14 : 20,
                  padding: isMobile ? "14px 16px" : "20px 22px", marginBottom: isMobile ? 10 : 12,
                  borderRadius: isMobile ? 14 : 18, cursor: "pointer",
                  background: active ?
                  "linear-gradient(180deg, rgba(14,110,60,0.75) 0%, rgba(8,66,36,0.85) 100%)" :
                  "linear-gradient(180deg, rgba(11,88,48,0.65) 0%, rgba(6,50,28,0.78) 100%)",

                  boxShadow: active ?
                  "0 18px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(255,255,255,0.03), inset 1px 0 0 rgba(255,255,255,0.04), inset -1px 0 0 rgba(255,255,255,0.04)" :
                  "0 10px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.02), inset 1px 0 0 rgba(255,255,255,0.03), inset -1px 0 0 rgba(255,255,255,0.03)",
                  transition: "all .35s ease",
                  position: "relative", overflow: "hidden", color: "rgb(255, 255, 255)", border: "1px solid rgb(255, 255, 255)"
                }}>
                
                {/* bottom-up color glow (gradient that rises into the card) */}
                <div aria-hidden style={{
                  position: "absolute", inset: 0, pointerEvents: "none",
                  background: active ?
                  "radial-gradient(120% 90% at 50% 115%, rgba(87,255,135,0.55) 0%, rgba(9,169,85,0.30) 25%, rgba(9,169,85,0.10) 45%, transparent 65%)" :
                  "radial-gradient(120% 90% at 50% 115%, rgba(9,169,85,0.28) 0%, rgba(9,169,85,0.12) 30%, transparent 60%)",
                  transition: "opacity .35s ease"
                }} />
                {/* dark vignette top corners for depth */}
                <div aria-hidden style={{
                  position: "absolute", inset: 0, pointerEvents: "none",
                  background: "radial-gradient(80% 60% at 50% 0%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.25) 100%)",
                  mixBlendMode: "multiply"
                }} />
                {/* progress bar — only on active, only after section is in view */}
                {active && started &&
                <div style={{
                  position: "absolute", left: 0, bottom: 0, height: 2, width: "100%",
                  background: "rgba(9,169,85,0.14)", overflow: "hidden"
                }}>
                    <div style={{
                    height: "100%",
                    background: "linear-gradient(90deg, var(--neon-purple), var(--neon-purple-2))",
                    animation: `hv7-progress ${HV7_AUTO_MS}ms linear`,
                    transformOrigin: "left"
                  }} />
                  </div>
                }
                <style>{`@keyframes hv7-progress { from { width: 0%; } to { width: 100%; } }`}</style>

                <div style={{
                  width: isMobile ? 42 : 56, height: isMobile ? 42 : 56, borderRadius: isMobile ? 11 : 14, flexShrink: 0,
                  background: active ? "linear-gradient(135deg, var(--neon-purple), var(--neon-purple-2))" : "rgba(255,255,255,0.04)",
                  border: active ? "none" : "1px solid rgba(255,255,255,0.08)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontFamily: "Georgia, serif",
                  fontSize: isMobile ? 18 : 24, fontWeight: 700,
                  color: active ? "#fff" : "var(--fg-3)",
                  boxShadow: active ? "0 12px 32px rgba(9,169,85,0.35)" : "none",
                  transition: "all .35s ease",
                  position: "relative", zIndex: 1
                }}>{i + 1}</div>

                <div style={{ flex: 1, paddingTop: isMobile ? 2 : 4, position: "relative", zIndex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: isMobile ? 4 : 6 }}>
                    <span style={{ fontSize: isMobile ? 9 : 10, fontWeight: 800, color: active ? "var(--neon-purple-2)" : "var(--fg-3)", letterSpacing: "0.22em", textTransform: "uppercase" }}>
                      {s.chip} · {s.time}
                    </span>
                  </div>
                  <div style={{ fontSize: isMobile ? 16 : 22, fontWeight: 800, color: active ? "#fff" : "var(--fg-1)", letterSpacing: "-0.02em", lineHeight: 1.2 }}>
                    {s.label}
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </div>);

};

window.HowItWorksV7 = HowItWorksV7;