/* WalletLab — landing sections */

function Marquee() {
  const c = window.CONTENT[window.LANG];
  const items = [...c.marquee, ...c.marquee];
  return (
    <div className="marquee-band">
      <div className="marquee-lead">{c.marqueeLead}</div>
      <div className="marquee">
        {items.map((m, i) => <span key={i}>{m}</span>)}
      </div>
    </div>
  );
}

function Stats() {
  const s = window.CONTENT[window.LANG].stats;
  return (
    <section className="section band-light">
      <div className="wrap">
        <div className="s-head reveal">
          <div className="eyebrow"><span className="dot"></span>{s.eyebrow}</div>
          <h2 className="s-title">{s.title}</h2>
          <p className="s-sub">{s.sub}</p>
        </div>
        <div className="stats">
          {s.items.map((it, i) => (
            <div className="stat reveal" data-d={i} key={i}>
              <div className="stat-num">
                <CountUp to={it.n} suffix={it.suffix} decimals={it.n % 1 !== 0 ? 1 : 0} />
              </div>
              <div className="stat-label">{it.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function How() {
  const h = window.CONTENT[window.LANG].how;
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="s-head reveal">
          <div className="eyebrow"><span className="dot"></span>{h.eyebrow}</div>
          <h2 className="s-title">{h.title}</h2>
          <p className="s-sub">{h.sub}</p>
        </div>
        <div className="steps">
          {h.steps.map((st, i) => (
            <div className="step reveal" data-d={i} key={i}>
              <div className="step-k">{h.stepLabel}<b>{st.k}</b></div>
              <h3>{st.title}</h3>
              <p>{st.body}</p>
              <div className="step-tag">{st.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  const f = window.CONTENT[window.LANG].features;
  return (
    <section className="section" id="features">
      <div className="wrap">
        <div className="s-head reveal">
          <div className="eyebrow"><span className="dot"></span>{f.eyebrow}</div>
          <h2 className="s-title">{f.title}</h2>
          <p className="s-sub">{f.sub}</p>
        </div>
        <div className="feats">
          {f.items.map((it, i) => (
            <div className="feat reveal" data-d={i % 3} key={i}>
              <div className="feat-ic"><Icon name={it.icon} size={24} /></div>
              <div className="feat-tag">{String(i + 1).padStart(2, "0")} — {it.tag}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Showcase() {
  const sc = window.CONTENT[window.LANG].showcase;
  const ref = useRef(null);
  useEffect(() => {
    const card = ref.current; if (!card) return;
    if (window.matchMedia("(pointer: coarse)").matches) return;
    const stage = card.closest(".showcase-visual");
    let raf, tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e) => {
      const r = stage.getBoundingClientRect();
      tx = ((e.clientX - r.left) / r.width - 0.5) * 2;
      ty = ((e.clientY - r.top) / r.height - 0.5) * 2;
    };
    const loop = () => {
      cx += (tx - cx) * 0.07; cy += (ty - cy) * 0.07;
      card.style.transform = `rotateY(${cx * 14}deg) rotateX(${-cy * 10}deg) translateZ(20px)`;
      raf = requestAnimationFrame(loop);
    };
    stage.addEventListener("mousemove", onMove);
    loop();
    return () => { stage.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf); };
  }, []);
  return (
    <section className="section band-dark on-dark">
      <div className="wrap">
        <div className="showcase-grid">
          <div className="reveal">
            <div className="eyebrow"><span className="dot"></span>{sc.eyebrow}</div>
            <h2 className="s-title">{sc.title}</h2>
            <p className="s-sub">{sc.sub}</p>
            <ul className="showcase-bullets">
              {sc.bullets.map((b, i) => (
                <li className="reveal" data-d={i} key={i}><span className="ck"><Icon name="check" size={14} sw={3} /></span>{b}</li>
              ))}
            </ul>
          </div>
          <div className="showcase-visual reveal">
            <div className="sc-orbit a"><i></i></div>
            <div className="sc-orbit b"><i></i></div>
            <div className="showcase-card" ref={ref}>
              <div className="loy-top">
                <div className="loy-brand">
                  <div className="loy-logo">Q</div>
                  <div>
                    <div className="loy-name">{sc.cardName}</div>
                    <div className="loy-sub">{sc.cardSub}</div>
                  </div>
                </div>
                <div className="loy-chip">&middot;4C1B</div>
              </div>
              <div className="loy-count">
                <span className="big">9<span className="of">/10</span></span>
                <span className="reward">{sc.cardReward}</span>
              </div>
              <div className="loy-stamps">
                {Array.from({ length: 10 }, (_, i) => (
                  <div key={i} className={"stamp " + (i < 9 ? "on" : "off")}>{i < 9 && <Icon name="check" size={13} sw={3} />}</div>
                ))}
              </div>
              <div className="loy-bar"><div className="loy-fill" style={{ width: "90%" }}></div></div>
              <div className="loy-foot"><span>Sarah Lemarchand</span><span><strong>1</strong> {sc.cardBefore}</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function UseCases() {
  const u = window.CONTENT[window.LANG].usecases;
  return (
    <section className="section" id="usecases">
      <div className="wrap">
        <div className="s-head reveal">
          <div className="eyebrow"><span className="dot"></span>{u.eyebrow}</div>
          <h2 className="s-title">{u.title}</h2>
          <p className="s-sub">{u.sub}</p>
        </div>
        <div className="cases">
          {u.items.map((it, i) => (
            <div className="case reveal" data-d={i % 4} key={i}>
              <div className="case-ic"><Icon name={it.icon} size={22} /></div>
              <div className="case-name">{it.name}</div>
              <div className="case-reward">{it.reward}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const cp = window.CONTENT[window.LANG].compare;
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head reveal">
          <div className="eyebrow"><span className="dot"></span>{cp.eyebrow}</div>
          <h2 className="s-title">{cp.title}</h2>
          <p className="s-sub">{cp.sub}</p>
        </div>
        <div className="compare">
          <div className="cmp paper reveal">
            <div className="cmp-tag">{cp.paper.tag}</div>
            <div className="cmp-title">{cp.paper.title}</div>
            <ul>
              {cp.paper.items.map((it, i) => <li key={i}><span className="ico-x">&times;</span><span>{it}</span></li>)}
            </ul>
          </div>
          <div className="cmp good on-dark reveal" data-d="1">
            <div className="cmp-tag">{cp.digital.tag}</div>
            <div className="cmp-title">{cp.digital.title}</div>
            <ul>
              {cp.digital.items.map((it, i) => <li key={i}><span className="ico-ck"><Icon name="check" size={13} sw={3} /></span><span>{it}</span></li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const t = window.CONTENT[window.LANG].testimonials;
  return (
    <section className="section">
      <div className="wrap">
        <div className="s-head reveal">
          <div className="eyebrow"><span className="dot"></span>{t.eyebrow}</div>
          <h2 className="s-title">{t.title}</h2>
        </div>
        <div className="quotes">
          {t.items.map((q, i) => (
            <div className="quote reveal" data-d={i} key={i}>
              <div className="quote-mark">"</div>
              <div className="quote-text">{q.quote}</div>
              <div className="quote-by">
                <div className="quote-av">{q.name.split(" ").map(n => n[0]).slice(0, 2).join("")}</div>
                <div>
                  <div className="quote-name">{q.name}</div>
                  <div className="quote-role">{q.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const p = window.CONTENT[window.LANG].pricing;
  const pl = p.plan;
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="s-head center reveal">
          <div className="eyebrow" style={{ justifyContent: "center" }}><span className="dot"></span>{p.eyebrow}</div>
          <h2 className="s-title">{p.title}</h2>
          <p className="s-sub">{p.sub}</p>
        </div>
        <div className="price-wrap reveal">
          <div className="price-card on-dark">
            <div className="price-badge"><Icon name="bolt" size={14} />{pl.name}</div>
            <div className="price-amt">
              <span className="cur">&euro;</span>
              <span className="val">{pl.price}</span>
            </div>
            <div className="price-period">{pl.period}</div>
            <div className="price-trial"><Icon name="shield" size={15} />{pl.trial}</div>
            <ul className="price-items">
              {pl.items.map((it, i) => <li key={i}><span className="ck"><Icon name="check" size={12} sw={3} /></span>{it}</li>)}
            </ul>
            <button className="btn green" data-mag>{pl.cta}<Icon name="arrow" size={17} /></button>
            <div className="price-note">{pl.note}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const f = window.CONTENT[window.LANG].faq;
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="s-head center reveal">
          <div className="eyebrow" style={{ justifyContent: "center" }}><span className="dot"></span>{f.eyebrow}</div>
          <h2 className="s-title">{f.title}</h2>
        </div>
        <div className="faq reveal">
          {f.items.map((q, i) => (
            <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q.q}</span>
                <span className="faq-plus"><Icon name="plus" size={16} sw={2.4} /></span>
              </button>
              <div className="faq-a">{q.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BigCTA() {
  const c = window.CONTENT[window.LANG].cta;
  return (
    <div className="cta-wrap">
      <div className="wrap">
        <div className="cta on-dark reveal">
          <h2>{c.title}</h2>
          <p>{c.sub}</p>
          <div className="cta-actions">
            <button className="btn green" data-mag>{c.primary}<Icon name="arrow" size={17} /></button>
            <button className="btn on-dark ghost" data-mag>{c.secondary}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  const f = window.CONTENT[window.LANG].footer;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <a className="brand" href="#top"><span className="brand-mark"><Icon name="wallet" size={16} /></span>WalletLab</a>
            <div className="footer-tag">{f.tag}</div>
          </div>
          {f.cols.map((col, i) => (
            <div className="footer-col" key={i}>
              <h4>{col.h}</h4>
              {col.links.map((l, j) => <a href={l.h || "#"} key={j}>{l.l || l}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>{f.bottom}</span>
          <span>{f.madeIn}</span>
        </div>
      </div>
      <div className="wordmark">WalletLab</div>
    </footer>
  );
}

Object.assign(window, { Marquee, Stats, How, Features, Showcase, UseCases, Compare, Testimonials, Pricing, FAQ, BigCTA, Footer });