/* global React, window */

/* =========================================================
   WhatThis — 3-column numbered cards
   ========================================================= */
function WhatThis() {
  const { L } = useLang();
  return (
    <section className="section" id="role">
      <div className="container">
        <Reveal><div className="section-eyebrow">{L.whatThis.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {L.whatThis.headline[0]}<br/>{L.whatThis.headline[1]}
          </h2>
        </Reveal>
        <Reveal delay={120}><p className="lead">{L.whatThis.sub}</p></Reveal>
        <div className="three-col">
          {L.whatThis.cards.map((c, i) => (
            <Reveal key={i} delay={180 + i * 60} className="card numbered-card">
              <div className="num">{c.n}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </Reveal>
          ))}
        </div>
        <div style={{ marginTop: 96 }}><DividerLine /></div>
      </div>
    </section>
  );
}

/* =========================================================
   Tracks — 2 cards, slide in from opposite sides
   ========================================================= */
function Tracks() {
  const { L } = useLang();
  const { dir } = useLang();
  const setterRef = React.useRef(null);
  const closerRef = React.useRef(null);
  const reduced = useReducedMotion();

  React.useEffect(() => {
    if (reduced) {
      setterRef.current?.classList.add("in");
      closerRef.current?.classList.add("in");
      return;
    }
    const io = new IntersectionObserver(es => es.forEach(e => {
      if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
    }), { threshold: 0.2 });
    setterRef.current && io.observe(setterRef.current);
    closerRef.current && io.observe(closerRef.current);
    return () => io.disconnect();
  }, [reduced, dir]);

  const T = L.tracks;

  return (
    <section className="section">
      <div className="container">
        <Reveal><div className="section-eyebrow">{T.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {T.headline[0]}<br/>{T.headline[1]}
          </h2>
        </Reveal>
        <div className="tracks-grid">
          <div ref={setterRef} className="track-card left">
            <div className="track-tag">{T.setter.tag}</div>
            <h3>
              {T.setter.title}
              <span className="sub">— {T.setter.sub}</span>
            </h3>
            <ul className="track-list">
              {T.setter.items.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
          <div ref={closerRef} className="track-card right">
            <div className="track-tag">{T.closer.tag}</div>
            <h3>
              {T.closer.title}
              <span className="sub">— {T.closer.sub}</span>
            </h3>
            <ul className="track-list">
              {T.closer.items.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================================================
   How You Earn — base draws + ramp scenario cards w/ tilt
   ========================================================= */
function RampCard({ tag, desc, value, unit, delay = 0 }) {
  const ref = useTilt(6);
  return (
    <Reveal delay={delay} className="ramp-card">
      <div ref={ref} style={{ display: "contents" }}>
        <div className="tag">{tag}</div>
        <div className="desc">{desc}</div>
        <div className="out mono">{value}<span className="unit"> {unit}</span></div>
      </div>
    </Reveal>
  );
}
// Actually contents-display can break tilt — let's not use display:contents.
// Replace with a wrapper that captures the whole card.
function RampCard2({ tag, desc, value, unit, delay = 0 }) {
  const ref = useTilt(6);
  return (
    <Reveal delay={delay}>
      <div ref={ref} className="ramp-card">
        <div className="tag">{tag}</div>
        <div className="desc">{desc}</div>
        <div className="out mono">{value}<span className="unit"> {unit}</span></div>
      </div>
    </Reveal>
  );
}

function HowYouEarn() {
  const { L } = useLang();
  const C = L.comp;
  return (
    <section className="section" id="earn">
      <div className="container">
        <Reveal><div className="section-eyebrow">{C.eyebrow}</div></Reveal>
        <Reveal delay={60}>
          <h2 className="h-section">
            {C.headline[0]}<br/>{C.headline[1]}
          </h2>
        </Reveal>

        {/* Setter block */}
        <div style={{ marginTop: 32 }}>
          <Reveal>
            <div className="earn-base">
              <h4>{C.setter.tag}</h4>
              <div className="earn-rows">
                {C.setter.rows.map((r, i) => (
                  <div className="earn-row" key={i}>
                    <span className="lbl">{r.label}</span>
                    <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                      <span className="val">{r.value}</span>
                      <span className="unit">{r.unit}</span>
                    </span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24 }}>
                <RampCard2 tag={C.setter.ramp.tag}
                           desc={C.setter.ramp.desc}
                           value={C.setter.ramp.value}
                           unit={C.setter.ramp.unit} />
              </div>
            </div>
          </Reveal>
        </div>

        {/* Closer block */}
        <div style={{ marginTop: 32 }}>
          <Reveal>
            <div className="earn-base">
              <h4>{C.closer.tag}</h4>
              <div className="earn-rows">
                {C.closer.rows.map((r, i) => (
                  <div className="earn-row" key={i}>
                    <span className="lbl">{r.label}</span>
                    <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                      <span className="val">{r.value}</span>
                      <span className="unit">{r.unit}</span>
                    </span>
                  </div>
                ))}
              </div>
              <div className="ramps" style={{ marginTop: 24 }}>
                {C.closer.ramps.map((r, i) => (
                  <RampCard2 key={i} tag={r.tag} desc={r.desc} value={r.value} unit={r.unit} delay={i * 60} />
                ))}
              </div>
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <div className="earn-tagline">
            <em>{C.tagline}</em>
          </div>
        </Reveal>
        <div style={{ marginTop: 64 }}><DividerLine /></div>
      </div>
    </section>
  );
}

Object.assign(window, { WhatThis, Tracks, HowYouEarn, RampCard2 });