// HOW IT WORKS — 5-step timeline + MASCOT + PROBABILITY BARS + CHAT

function HowItWorks() {
  const t = useT();
  const steps = [
    { n:"01", title:t("s1Title"), body:t("s1Body"), color:"#7EB8F7",
      icon:"M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" },
    { n:"02", title:t("s2Title"), body:t("s2Body"), color:"#A8D8EA",
      icon:"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z" },
    { n:"03", title:t("s3Title"), body:t("s3Body"), color:"#F5A623",
      icon:"M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-15v2m0 16v2M5 12H3m18 0h-2" },
    { n:"04", title:t("s4Title"), body:t("s4Body"), color:"#C5B4F0",
      icon:"M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" },
  ];

  return (
    <section className="section-padding" style={{padding:"120px 0 100px", position:"relative"}}>
      <div className="container">
        <div style={{textAlign:"center", marginBottom:80}}>
          <h2 className="section-title">
            {t("howTitleA")}<br/>
            <em>{t("howTitleB")}</em>
          </h2>
          <p className="section-sub" style={{margin:"22px auto 0"}}>
            {t("howSub")}
          </p>
        </div>

        {/* Horizontal timeline */}
        <div style={{position:"relative"}}>
          {/* Connecting line */}
          <div className="steps-line" style={{
            position:"absolute", top:38, left:"6%", right:"6%", height:2,
            background:"linear-gradient(90deg, #7EB8F7, #A8D8EA, #F5A623, #C5B4F0)",
            opacity:0.35,
            zIndex:0,
          }}/>
          {/* Dotted overlay */}
          <div className="steps-line-dot" style={{
            position:"absolute", top:37, left:"6%", right:"6%", height:4,
            background:"repeating-linear-gradient(90deg, var(--surface-strong) 0 6px, transparent 6px 14px)",
            zIndex:1,
          }}/>

          <div className="steps-grid">
            {steps.map((s,i)=>(
              <div key={s.n} className="step-card" style={{display:"flex",flexDirection:"column",alignItems:"center",textAlign:"center"}}>
                {/* Step node */}
                <div style={{
                  width:76, height:76, borderRadius:"50%",
                  background:"var(--surface-strong)",
                  border:`2px solid ${s.color}55`,
                  display:"grid", placeItems:"center",
                  position:"relative",
                  boxShadow:`0 8px 24px ${s.color}33`,
                  marginBottom:20,
                  backdropFilter:"blur(20px)",
                }}>
                  <div style={{
                    position:"absolute", inset:6, borderRadius:"50%",
                    background:`linear-gradient(135deg, ${s.color}22, ${s.color}05)`,
                  }}/>
                  <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke={s.color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{position:"relative",zIndex:1}}>
                    <path d={s.icon}/>
                  </svg>
                  <div style={{
                    position:"absolute", top:-8, right:-8,
                    background:s.color,
                    color:"#fff",
                    fontFamily:"var(--font-body)",
                    fontSize:10, fontWeight:700, letterSpacing:0.5,
                    padding:"3px 8px", borderRadius:10,
                    boxShadow:`0 4px 10px ${s.color}55`,
                  }}>{s.n}</div>
                </div>
                <div style={{fontFamily:"var(--font-heading)",fontSize:18,fontWeight:600,color:"var(--ink)",lineHeight:1.25,marginBottom:8,maxWidth:200,textWrap:"balance"}}>
                  {s.title}
                </div>
                <div style={{fontFamily:"var(--font-body)",fontSize:13,color:"var(--ink-2)",lineHeight:1.6,maxWidth:200,textWrap:"pretty"}}>
                  {s.body}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── MASCOT + PROBABILITY BARS + CHAT ─────────────────────────────────
function MascotSection() {
  // Manifestation strength bars (animated)
  const goals = [
    { name: "Write a novel",        p: 78, color: "#7EB8F7" },
    { name: "Launch my business",   p: 91, color: "#C5B4F0" },
    { name: "Travel to Japan",      p: 64, color: "#A8D8EA" },
    { name: "Find a loving partner", p: 82, color: "#E8C5D8" },
    { name: "Run a half marathon",  p: 45, color: "#F5D78E" },
  ];

  // Chat messages
  const messages = [
    { role: "you",     text: "What's blocking me from finishing my novel?" },
    { role: "oracle",  text: "You're not blocked, beloved. You're afraid of being seen. Write the next page like no one will read it, and someone will." },
    { role: "you",     text: "How do I sit with that fear?" },
  ];

  return (
    <section style={{
      position:"relative",
      padding:"120px 0",
      background:"linear-gradient(180deg, transparent 0%, rgba(26,10,46,0.96) 18%, #0A0612 50%, rgba(26,10,46,0.96) 82%, transparent 100%)",
      overflow:"hidden",
    }}>
      {/* Cosmic glow */}
      <div style={{
        position:"absolute", top:"30%", left:"50%", transform:"translate(-50%,-50%)",
        width:900, height:900, borderRadius:"50%",
        background:"radial-gradient(circle, rgba(192,38,211,0.20) 0%, transparent 60%)",
        pointerEvents:"none",
      }}/>

      {/* Star field */}
      <DestinyStars />

      <div className="container" style={{position:"relative", zIndex:2}}>
        <div style={{textAlign:"center", marginBottom:64}}>
          <div className="eyebrow" style={{color:"#F0ABFC", marginBottom:18}}>✦ DESTINY AI</div>
          <h2 className="section-title" style={{color:"#FAF5FF"}}>
            Meet the Oracle,<br/>
            <em style={{color:"#F0ABFC"}}>your inner wisdom, illuminated.</em>
          </h2>
          <p className="section-sub" style={{color:"#C4B5FD", margin:"22px auto 0", maxWidth:540, textWrap:"pretty"}}>
            Destiny is the part of Lumgoals that listens. It reads the energy of your journal,
            the steadiness of your streaks, the shape of your dreams, and whispers back
            what you already know.
          </p>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1.05fr 1fr", gap:24, alignItems:"stretch"}}>
          {/* LEFT — Manifestation strength bars */}
          <div style={{
            background:"linear-gradient(180deg, rgba(192,38,211,0.10), rgba(124,58,237,0.04))",
            border:"1px solid rgba(192,38,211,0.25)",
            borderRadius:24, padding:28,
            backdropFilter:"blur(20px)",
            boxShadow:"0 8px 32px rgba(192,38,211,0.18)",
          }}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:6}}>
              <div>
                <div className="eyebrow" style={{color:"#F0ABFC"}}>MANIFESTATION STRENGTH</div>
                <div style={{fontFamily:"var(--font-heading)",fontSize:22,fontWeight:600,color:"#FAF5FF",marginTop:6}}>
                  This week's reading
                </div>
              </div>
              <div style={{
                background:"rgba(240,171,252,0.12)",
                border:"1px solid rgba(240,171,252,0.3)",
                borderRadius:999, padding:"4px 10px",
                fontFamily:"var(--font-body)", fontSize:10, fontWeight:600,
                color:"#F0ABFC", letterSpacing:1,
              }}>↑ STRONG</div>
            </div>

            <div style={{display:"flex",flexDirection:"column",gap:18, marginTop:24}}>
              {goals.map((g,i)=>(
                <ProbabilityBar key={g.name} g={g} index={i}/>
              ))}
            </div>

            <div style={{
              marginTop:24, paddingTop:20,
              borderTop:"1px solid rgba(192,38,211,0.2)",
              display:"flex", justifyContent:"space-between", alignItems:"center",
            }}>
              <div style={{fontFamily:"var(--font-body)",fontSize:11,color:"#C4B5FD",letterSpacing:1,textTransform:"uppercase"}}>
                Composite Index
              </div>
              <div style={{
                fontFamily:"var(--font-heading)", fontSize:32, fontWeight:700,
                background:"linear-gradient(90deg, #F0ABFC, #C026D3)",
                WebkitBackgroundClip:"text",
                WebkitTextFillColor:"transparent",
              }}>72%</div>
            </div>
          </div>

          {/* CENTER — Mascot Orb */}
          <div style={{
            background:"linear-gradient(180deg, rgba(192,38,211,0.06), rgba(10,6,18,0.4))",
            border:"1px solid rgba(192,38,211,0.25)",
            borderRadius:24,
            padding:"40px 28px",
            backdropFilter:"blur(20px)",
            display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center",
            position:"relative", overflow:"hidden",
          }}>
            {/* Rotating outer ring */}
            <div style={{
              position:"absolute", top:"50%", left:"50%", transform:"translate(-50%,-50%)",
              width:380, height:380, borderRadius:"50%",
              border:"1px dashed rgba(240,171,252,0.25)",
              animation:"spin-slow 30s linear infinite",
            }}/>
            <div style={{
              position:"absolute", top:"50%", left:"50%", transform:"translate(-50%,-50%)",
              width:280, height:280, borderRadius:"50%",
              border:"1px dashed rgba(240,171,252,0.2)",
              animation:"spin-slow 50s linear infinite reverse",
            }}/>

            {/* Orb */}
            <div style={{
              width:200, height:200, borderRadius:"50%",
              background:"radial-gradient(circle at 35% 30%, #F0ABFC 0%, #C026D3 35%, #7C3AED 75%, #4A1D78 100%)",
              boxShadow:"0 0 60px rgba(192,38,211,0.6), 0 0 120px rgba(192,38,211,0.35), inset 0 -20px 60px rgba(74,29,120,0.5), inset 20px 20px 40px rgba(255,255,255,0.2)",
              animation:"orb-pulse 4s ease-in-out infinite",
              position:"relative",
              display:"grid", placeItems:"center",
            }}>
              {/* Inner glow */}
              <div style={{
                width:80, height:80, borderRadius:"50%",
                background:"radial-gradient(circle, rgba(255,255,255,0.7), transparent 70%)",
                position:"absolute", top:30, left:40,
                filter:"blur(20px)",
              }}/>
              {/* Sparkle */}
              <svg width="60" height="60" viewBox="0 0 24 24" fill="rgba(255,255,255,0.9)"
                style={{position:"relative",animation:"twinkle 3s ease-in-out infinite"}}>
                <path d="M12 2l1.5 8L22 12l-8.5 1.5L12 22l-1.5-8.5L2 12l8.5-1.5z"/>
              </svg>
            </div>

            {/* Mascot label */}
            <div style={{
              marginTop:32, textAlign:"center", position:"relative", zIndex:2,
            }}>
              <div className="eyebrow" style={{color:"#F0ABFC", marginBottom:8}}>THE ORACLE IS LISTENING</div>
              <div style={{
                fontFamily:"var(--font-heading)", fontSize:22, fontStyle:"italic",
                color:"#FAF5FF", fontWeight:500, lineHeight:1.35, maxWidth:260,
                textWrap:"balance",
              }}>
                "Trust the quiet wisdom within you, what you seek is already on its way."
              </div>
              <div style={{
                marginTop:14, width:40, height:1, margin:"14px auto",
                background:"rgba(240,171,252,0.5)",
              }}/>
            </div>

            {/* Floating particle */}
            <div style={{
              position:"absolute", top:30, right:40,
              width:8, height:8, borderRadius:"50%",
              background:"#F0ABFC",
              boxShadow:"0 0 12px #F0ABFC",
              animation:"twinkle 2s ease-in-out infinite",
            }}/>
            <div style={{
              position:"absolute", bottom:60, left:30,
              width:6, height:6, borderRadius:"50%",
              background:"#EC4899",
              boxShadow:"0 0 10px #EC4899",
              animation:"twinkle 2.5s ease-in-out 0.5s infinite",
            }}/>
          </div>

          {/* RIGHT — Chat UI */}
          <div style={{
            background:"linear-gradient(180deg, rgba(124,58,237,0.10), rgba(192,38,211,0.04))",
            border:"1px solid rgba(192,38,211,0.25)",
            borderRadius:24, padding:24,
            backdropFilter:"blur(20px)",
            boxShadow:"0 8px 32px rgba(124,58,237,0.18)",
            display:"flex", flexDirection:"column",
          }}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:18}}>
              <div style={{
                width:36, height:36, borderRadius:18,
                background:"radial-gradient(circle, #F0ABFC, #C026D3)",
                boxShadow:"0 0 16px rgba(192,38,211,0.5)",
              }}/>
              <div>
                <div style={{fontFamily:"var(--font-heading)",fontSize:15,fontWeight:600,color:"#FAF5FF"}}>Destiny</div>
                <div style={{fontFamily:"var(--font-body)",fontSize:10,color:"#C4B5FD",letterSpacing:1,textTransform:"uppercase"}}>● Online · Listening</div>
              </div>
            </div>

            <div style={{display:"flex",flexDirection:"column",gap:12,flex:1}}>
              {messages.map((m,i)=>(
                <div key={i} style={{
                  display:"flex",
                  justifyContent: m.role === "you" ? "flex-end" : "flex-start",
                }}>
                  <div style={{
                    maxWidth:"82%",
                    background: m.role === "you"
                      ? "linear-gradient(135deg, rgba(192,38,211,0.30), rgba(124,58,237,0.20))"
                      : "rgba(255,255,255,0.06)",
                    border: m.role === "you"
                      ? "1px solid rgba(240,171,252,0.3)"
                      : "1px solid rgba(255,255,255,0.10)",
                    borderRadius:18,
                    borderBottomRightRadius: m.role === "you" ? 6 : 18,
                    borderBottomLeftRadius:  m.role === "you" ? 18 : 6,
                    padding:"12px 14px",
                    fontFamily: m.role === "oracle" ? "var(--font-heading)" : "var(--font-body)",
                    fontSize: m.role === "oracle" ? 14 : 13,
                    fontStyle: m.role === "oracle" ? "italic" : "normal",
                    color: m.role === "you" ? "#FAF5FF" : "#FAF5FF",
                    lineHeight:1.5,
                  }}>
                    {m.text}
                  </div>
                </div>
              ))}

              {/* Typing dots */}
              <div style={{display:"flex",justifyContent:"flex-start"}}>
                <div style={{
                  background:"rgba(255,255,255,0.06)",
                  border:"1px solid rgba(255,255,255,0.10)",
                  borderRadius:18, borderBottomLeftRadius:6,
                  padding:"14px 16px",
                  display:"flex", gap:5,
                }}>
                  {[0,1,2].map(i=>(
                    <span key={i} style={{
                      width:7, height:7, borderRadius:"50%",
                      background:"#F0ABFC",
                      animation:`typing-dot 1.4s ease-in-out ${i*0.15}s infinite`,
                    }}/>
                  ))}
                </div>
              </div>
            </div>

            {/* Suggested prompts */}
            <div style={{
              marginTop:20, paddingTop:16,
              borderTop:"1px solid rgba(192,38,211,0.2)",
            }}>
              <div style={{fontFamily:"var(--font-body)",fontSize:9,color:"#C4B5FD",letterSpacing:1.5,textTransform:"uppercase",marginBottom:10}}>
                Suggested
              </div>
              <div style={{display:"flex",flexDirection:"column",gap:6}}>
                {["What energy should I focus on today?", "How can I align with my purpose?"].map((q,i)=>(
                  <div key={i} style={{
                    background:"rgba(192,38,211,0.08)",
                    border:"1px solid rgba(192,38,211,0.2)",
                    borderRadius:12,
                    padding:"9px 12px",
                    fontFamily:"var(--font-body)",
                    fontSize:11,
                    color:"#C4B5FD",
                  }}>{q}</div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProbabilityBar({ g, index }) {
  return (
    <div>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:6}}>
        <div style={{fontFamily:"var(--font-body)",fontSize:13,fontWeight:500,color:"#FAF5FF"}}>{g.name}</div>
        <div style={{fontFamily:"var(--font-heading)",fontSize:14,fontWeight:600,color:g.color}}>{g.p}%</div>
      </div>
      <div style={{
        height:8, borderRadius:4,
        background:"rgba(255,255,255,0.06)",
        overflow:"hidden",
        position:"relative",
      }}>
        <div style={{
          height:"100%",
          width:`${g.p}%`,
          background:`linear-gradient(90deg, ${g.color}, ${g.color}cc, #F0ABFC)`,
          borderRadius:4,
          transformOrigin:"left center",
          animation:`bar-fill 1.2s cubic-bezier(0.4,0,0.2,1) ${index*0.15}s both`,
          boxShadow:`0 0 12px ${g.color}88`,
        }}/>
        {/* shimmer */}
        <div style={{
          position:"absolute", top:0, bottom:0,
          width:40,
          background:"linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)",
          left:`${g.p}%`,
          transform:"translateX(-50%)",
          animation:`twinkle 3s ease-in-out ${index*0.3}s infinite`,
        }}/>
      </div>
    </div>
  );
}

function DestinyStars() {
  const stars = React.useMemo(() => Array.from({length:50}, (_,i)=>({
    id:i,
    left:Math.random()*100, top:Math.random()*100,
    size:Math.random()*2+1,
    opacity:Math.random()*0.6+0.2,
    delay:Math.random()*4, dur:2+Math.random()*3,
  })), []);
  return (
    <div style={{position:"absolute",inset:0,pointerEvents:"none"}}>
      {stars.map(s=>(
        <div key={s.id} style={{
          position:"absolute",
          left:`${s.left}%`, top:`${s.top}%`,
          width:s.size, height:s.size,
          borderRadius:"50%",
          background:"#F0ABFC",
          opacity:s.opacity,
          boxShadow:`0 0 ${s.size*3}px #F0ABFC`,
          animation:`twinkle ${s.dur}s ease-in-out ${s.delay}s infinite`,
        }}/>
      ))}
    </div>
  );
}

Object.assign(window, { HowItWorks, MascotSection, ProbabilityBar, DestinyStars });