// 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}}>
                  {s.title}
                </div>
                <div style={{fontFamily:"var(--font-body)",fontSize:13,color:"var(--ink-2)",lineHeight:1.55,maxWidth:200}}>
                  {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"}}>
            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:280,
              }}>
                "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 });