// MOOD SECTION — uses the 3D pastel mood PNGs as decoration

function MoodSection() {
  const t = useT();
  const moods = [
    { img: "design/assets/moods/happy.png", label: t("moodHappy"), desc: t("moodHappyD"), tint:"#E8C5D8", rotate:-6 },
    { img: "design/assets/moods/meh.png",   label: t("moodMeh"),   desc: t("moodMehD"),   tint:"#A8D8EA", rotate: 4 },
    { img: "design/assets/moods/sad.png",   label: t("moodSad"),   desc: t("moodSadD"),   tint:"#C5B4F0", rotate:-4 },
    { img: "design/assets/moods/mad.png",   label: t("moodMad"),   desc: t("moodMadD"),   tint:"#F5A623", rotate: 6 },
  ];

  return (
    <section className="section-padding" style={{padding:"120px 0 100px", position:"relative", overflow:"hidden"}}>
      {/* Soft halo behind */}
      <div style={{
        position:"absolute", top:"40%", left:"50%", transform:"translate(-50%,-50%)",
        width:900, height:600, borderRadius:"50%",
        background:"radial-gradient(ellipse, var(--halo-2), transparent 65%)",
        filter:"blur(40px)", zIndex:0, pointerEvents:"none",
      }}/>

      <div className="container" style={{position:"relative", zIndex:2}}>
        <div style={{textAlign:"center", marginBottom:64, maxWidth:720, margin:"0 auto 64px"}}>
          <h2 className="section-title">
            {t("moodTitleA")}<br/>
            <em>{t("moodTitleB")}</em>
          </h2>
          <p className="section-sub" style={{margin:"22px auto 0"}}>
            {t("moodSub")}
          </p>
        </div>

        {/* Moods row */}
        <div className="mood-grid">
          {moods.map((m, i) => (
            <MoodCard key={i} m={m} index={i}/>
          ))}
        </div>

        {/* Footnote */}
        <div style={{
          textAlign:"center", marginTop:48,
          fontFamily:"var(--font-heading)",
          fontStyle:"italic", fontSize:17,
          color:"var(--ink-2)",
          maxWidth:560, margin:"48px auto 0",
        }}>
          ✦ {t("moodFootnote")}
        </div>
      </div>
    </section>
  );
}

function MoodCard({ m, index }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display:"flex", flexDirection:"column", alignItems:"center",
        textAlign:"center",
        cursor:"default",
        animation:`float-y ${5 + index*0.6}s ease-in-out ${index*0.4}s infinite`,
      }}
    >
      {/* Mood orb with halo */}
      <div style={{
        position:"relative",
        width:180, height:180,
        marginBottom:24,
        transform: `rotate(${m.rotate}deg) scale(${hover ? 1.05 : 1})`,
        transition:"transform 400ms cubic-bezier(0.22, 1, 0.36, 1)",
      }}>
        {/* Soft tint halo */}
        <div style={{
          position:"absolute", inset:-20,
          borderRadius:"50%",
          background:`radial-gradient(circle, ${m.tint}55, transparent 65%)`,
          filter:"blur(20px)",
          opacity: hover ? 1 : 0.7,
          transition:"opacity 400ms",
        }}/>
        <img src={m.img} alt={m.label} style={{
          position:"relative",
          width:"100%", height:"100%",
          objectFit:"contain",
          filter: `drop-shadow(0 12px 24px ${m.tint}55) drop-shadow(0 4px 12px rgba(0,0,0,0.10))`,
        }}/>
      </div>
      <div style={{
        fontFamily:"var(--font-heading)",
        fontSize:22, fontWeight:600, fontStyle:"italic",
        color:"var(--ink)", marginBottom:6,
        letterSpacing:"-0.2px",
      }}>
        {m.label}
      </div>
      <div style={{
        fontFamily:"var(--font-body)",
        fontSize:13, color:"var(--ink-2)",
        lineHeight:1.5, maxWidth:200,
      }}>
        {m.desc}
      </div>
    </div>
  );
}

Object.assign(window, { MoodSection });