// HERO + AFFIRMATION TICKER + PROBLEM SECTION

function Hero() {
  const t = useT();
  return (
    <section className="section-padding" style={{position:"relative", padding:"60px 0 120px", overflow:"hidden"}}>
      {/* Cloud blobs */}
      <CloudBlobs />

      <div className="container" style={{position:"relative", zIndex:2}}>
        <div className="hero-grid">
          {/* LEFT — Copy */}
          <div>
            <h1 className="hero-title" style={{
              fontFamily:"var(--font-heading)",
              fontSize:"clamp(46px, 5.6vw, 78px)",
              fontWeight:700,
              lineHeight:1.05,
              letterSpacing:"-1.5px",
              color:"var(--ink)",
              margin:0,
              textWrap:"balance",
              maxWidth:560,
            }}>
              {t("heroTitleA")}{" "}
              <span style={{
                background:"linear-gradient(90deg,#7EB8F7,#C5B4F0,#E8C5D8)",
                WebkitBackgroundClip:"text",
                WebkitTextFillColor:"transparent",
                backgroundClip:"text",
                fontStyle:"italic",
                fontWeight:500,
              }}>{t("heroTitleB")}</span>{" "}
              {t("heroTitleC")}{" "}
              <span style={{fontStyle:"italic",fontWeight:500,color:"var(--accent)"}}>{t("heroTitleD")}</span>
            </h1>

            <p className="hero-body" style={{
              fontFamily:"var(--font-body)",
              fontSize:18, fontWeight:400, lineHeight:1.6,
              color:"var(--ink-2)",
              maxWidth:480,
              margin:"24px 0 32px",
            }}>
              {t("heroBody")}
            </p>

            {/* CTAs */}
            <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
              <button className="btn btn-primary">
                {t("heroCtaPrimary")}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M13 5l7 7-7 7"/>
                </svg>
              </button>
              <button className="btn btn-ghost">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <polygon points="5 3 19 12 5 21 5 3"/>
                </svg>
                {t("heroCtaSecondary")}
              </button>
            </div>
          </div>

          {/* RIGHT — Phones */}
          <div className="hero-phones">
            <div className="hero-phones-inner" style={{position:"relative", width:"100%", height:"100%", display:"flex", justifyContent:"center"}}>
            {/* Iridescent halo */}
            <div style={{
              position:"absolute", top:"50%", left:"50%",
              transform:"translate(-50%, -50%)",
              width:580, height:580,
              borderRadius:"50%",
              background:"radial-gradient(circle, rgba(232,197,216,0.5), rgba(197,180,240,0.3) 30%, rgba(168,216,234,0.15) 60%, transparent 75%)",
              filter:"blur(20px)",
              zIndex:0,
            }}/>

            {/* Floating stars */}
            <FloatingStars />

            {/* Phones — back-left, center, back-right */}
            <div style={{position:"absolute", left:"-2%", top:50, transform:"rotate(-8deg)", zIndex:1}} className="float" data-screen-label="01 hero-journal">
              <PhoneFrame scale={0.78}>
                <PhoneAppScreen screen="journal" />
              </PhoneFrame>
            </div>

            <div style={{position:"absolute", right:"-2%", top:80, transform:"rotate(8deg)", zIndex:1, animationDelay:"1s"}} className="float" data-screen-label="01 hero-vision">
              <PhoneFrame scale={0.78}>
                <PhoneAppScreen screen="vision" />
              </PhoneFrame>
            </div>

            <div style={{position:"absolute", left:"50%", top:0, transform:"translateX(-50%)", zIndex:2}}  data-screen-label="01 hero-home">
              <PhoneFrame scale={0.92}>
                <PhoneAppScreen screen="home" />
              </PhoneFrame>
            </div>

            {/* Floating affirmation chip */}
            <div style={{
              position:"absolute", bottom:60, left:-20, zIndex:3,
              background:"rgba(255,255,255,0.92)",
              backdropFilter:"blur(20px)",
              borderRadius:18, padding:"12px 16px",
              border:"1px solid rgba(180,210,255,0.5)",
              boxShadow:"0 12px 32px rgba(126,184,247,0.20)",
              maxWidth:200,
            }} className="float hero-affirm">
              <div style={{fontFamily:"var(--font-body)",fontSize:10,fontWeight:600,letterSpacing:1.3,color:"#7EB8F7",marginBottom:4}}>
                ✦ {t("heroAffirmLabel")}
              </div>
              <div style={{fontFamily:"var(--font-heading)",fontSize:13,fontStyle:"italic",color:"var(--ink)",lineHeight:1.4}}>
                "{t("heroAffirmText")}"
              </div>
            </div>

            {/* Floating streak badge */}
            <div style={{
              position:"absolute", top:30, right:-10, zIndex:3,
              background:"linear-gradient(135deg,#F5D78E,#F5A623)",
              borderRadius:16, padding:"10px 14px",
              boxShadow:"0 10px 24px rgba(245,166,35,0.30)",
              display:"flex",alignItems:"center",gap:8,
              animationDelay:"2s",
            }} className="float hero-streak">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
                <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
              </svg>
              <div>
                <div style={{fontFamily:"var(--font-heading)",fontSize:18,fontWeight:700,color:"#fff",lineHeight:1}}>42</div>
                <div style={{fontFamily:"var(--font-body)",fontSize:9,color:"#fff",opacity:0.9,letterSpacing:1}}>{t("heroStreak")}</div>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CloudBlobs() {
  return (
    <>
      <div style={{
        position:"absolute", top:-120, right:-180,
        width:520, height:520,
        borderRadius:"50%",
        background:"radial-gradient(circle, rgba(168,216,234,0.55), transparent 65%)",
        filter:"blur(40px)",
        zIndex:0,
      }}/>
      <div style={{
        position:"absolute", bottom:-100, left:-180,
        width:460, height:460,
        borderRadius:"50%",
        background:"radial-gradient(circle, rgba(197,180,240,0.45), transparent 65%)",
        filter:"blur(50px)",
        zIndex:0,
      }}/>
    </>
  );
}

function FloatingStars() {
  const stars = React.useMemo(() => Array.from({length:24}, (_,i)=>({
    id:i,
    left:Math.random()*100, top:Math.random()*100,
    size:Math.random()*5+3,
    delay:Math.random()*3, dur:2+Math.random()*3,
    color: ["#C5B4F0","#7EB8F7","#F5D78E","#E8C5D8"][Math.floor(Math.random()*4)],
  })), []);
  return (
    <>
      {stars.map(s => (
        <svg key={s.id} width={s.size*2} height={s.size*2} viewBox="0 0 24 24" fill={s.color}
          style={{
            position:"absolute",
            left:`${s.left}%`, top:`${s.top}%`,
            opacity:0.7,
            animation:`twinkle ${s.dur}s ease-in-out ${s.delay}s infinite`,
            filter:`drop-shadow(0 0 6px ${s.color})`,
            zIndex:0,
          }}>
          <path d="M12 2l1.5 7L20 10l-6.5 1L12 18l-1.5-7L4 10l6.5-1z"/>
        </svg>
      ))}
    </>
  );
}

// ─── AFFIRMATION TICKER ────────────────────────────────────────
function AffirmationTicker() {
  const { lang } = useLang();
  const linesByLang = {
    en: [
      "I am worthy of everything I desire",
      "Abundance flows to me effortlessly",
      "I trust the journey of my soul",
      "Every day I grow closer to my dreams",
      "The universe is conspiring in my favor",
      "I am the author of my own becoming",
      "My intentions ripple outward as reality",
    ],
    es: [
      "Soy digna de todo lo que deseo",
      "La abundancia fluye hacia mí sin esfuerzo",
      "Confío en el camino de mi alma",
      "Cada día me acerco más a mis sueños",
      "El universo conspira a mi favor",
      "Soy la autora de mi propia evolución",
      "Mis intenciones se vuelven realidad",
    ],
  };
  const lines = linesByLang[lang] || linesByLang.en;
  // Double for seamless loop
  const stream = [...lines, ...lines];
  return (
    <section style={{
      position:"relative",
      padding:"6px 0",
      background:"var(--ticker-grad)",
      backgroundSize:"200% 100%",
      animation:"shimmer 12s linear infinite",
      borderTop:"1px solid rgba(255,255,255,0.5)",
      borderBottom:"1px solid rgba(255,255,255,0.5)",
      overflow:"hidden",
    }}>
      <div style={{
        position:"absolute", inset:0,
        background:"linear-gradient(180deg,rgba(255,255,255,0.20),rgba(255,255,255,0) 50%, rgba(255,255,255,0.20))",
        pointerEvents:"none",
      }}/>
      {/* fade edges */}
      <div style={{position:"absolute",left:0,top:0,bottom:0,width:120,background:"linear-gradient(90deg,var(--ticker-edge),transparent)",zIndex:2,pointerEvents:"none"}}/>
      <div style={{position:"absolute",right:0,top:0,bottom:0,width:120,background:"linear-gradient(-90deg,var(--ticker-edge),transparent)",zIndex:2,pointerEvents:"none"}}/>

      <div style={{
        display:"flex", gap:48, padding:"22px 0",
        whiteSpace:"nowrap",
        animation:"drift 60s linear infinite",
        width:"max-content",
      }}>
        {stream.map((l,i)=>(
          <div key={i} style={{display:"flex",alignItems:"center",gap:48}}>
            <span className="ticker-text" style={{
              fontFamily:"'Playfair Display',serif",
              fontSize:30, fontStyle:"italic", fontWeight:400,
              color:"#fff",
              textShadow:"0 1px 12px rgba(44,62,107,0.18)",
              letterSpacing:0.2,
            }}>
              {l}
            </span>
            <span style={{
              fontFamily:"'Playfair Display',serif",
              fontSize:24, color:"rgba(255,255,255,0.7)",
            }}>✦</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── PROBLEM SECTION ───────────────────────────────────────────
function ProblemSection() {
  const t = useT();
  const problems = [
    {
      icon: <PathIcon d="M12 2v20M2 12h20M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07" color="#7EB8F7"/>,
      title: t("p1Title"), body: t("p1Body"), tint: "#7EB8F7",
    },
    {
      icon: <PathIcon d="M21 12a9 9 0 1 1-9-9c2 0 4 .8 5.5 2L12 12" color="#9B7FE0"/>,
      title: t("p2Title"), body: t("p2Body"), tint: "#9B7FE0",
    },
    {
      icon: <PathIcon d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z" color="#F5A623"/>,
      title: t("p3Title"), body: t("p3Body"), tint: "#F5A623",
    },
    {
      icon: <PathIcon d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" color="#EC4899"/>,
      title: t("p4Title"), body: t("p4Body"), tint: "#EC4899",
    },
  ];

  return (
    <section className="section-padding" style={{padding:"120px 0 100px"}}>
      <div className="container">
        <div style={{textAlign:"center", marginBottom:60}}>
          <h2 className="section-title">
            {t("problemTitleA")}<br/>
            {t("problemTitleB")} <em>{t("problemTitleC")}</em>{t("problemTitleD") === "." ? "." : " " + t("problemTitleD")}
          </h2>
          <p className="section-sub" style={{margin:"22px auto 0"}}>
            {t("problemSub")}
          </p>
        </div>

        <div className="problem-grid">
          {problems.map((p,i)=>(
            <div key={i} className="glass" style={{padding:28, position:"relative", overflow:"hidden"}}>
              <div style={{
                position:"absolute", top:-30, right:-30,
                width:120, height:120, borderRadius:"50%",
                background:`radial-gradient(circle, ${p.tint}33, transparent 70%)`,
              }}/>
              <div style={{
                width:54, height:54, borderRadius:14,
                background:`linear-gradient(135deg, ${p.tint}22, ${p.tint}11)`,
                display:"grid", placeItems:"center",
                marginBottom:18,
                position:"relative",
              }}>
                {p.icon}
              </div>
              <div style={{fontFamily:"var(--font-heading)",fontSize:20,fontWeight:600,color:"var(--ink)",lineHeight:1.25,marginBottom:8}}>
                {p.title}
              </div>
              <div style={{fontFamily:"var(--font-body)",fontSize:14,color:"var(--ink-2)",lineHeight:1.55}}>
                {p.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PathIcon({ d, color = "#7EB8F7", size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d={d}/>
    </svg>
  );
}

Object.assign(window, { Hero, AffirmationTicker, ProblemSection, FloatingStars, CloudBlobs, PathIcon });
