// sections.jsx — Problem / Solution / Process / Testimonials / CTA / Footer
const { useEffect: _useEffect, useRef: _useRef, useState: _useState } = React;

function useReveal() {
  const ref = _useRef(null);
  _useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    el.querySelectorAll('.fade-in').forEach(n => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

function ProblemSection({ t }) {
  const ref = useReveal();
  return (
    <section className="section" id="probleme" ref={ref}>
      <div className="container">
        <div className="section-head fade-in">
          <div className="section-num">{t.label}</div>
          <h2 className="section-title">{t.title}</h2>
        </div>
        <div className="problems-grid fade-in">
          {t.cards.map((c, i) => (
            <div className="problem-card" key={i}>
              <div>
                <div className="err">{c.err}</div>
                <h3>{c.h}</h3>
                <p>{c.p}</p>
              </div>
              <div className="stat" dangerouslySetInnerHTML={{ __html: c.s }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SolutionSection({ t }) {
  const ref = useReveal();
  return (
    <section className="section" id="solution" ref={ref}>
      <div className="container">
        <div className="section-head fade-in">
          <div className="section-num">{t.label}</div>
          <h2 className="section-title" dangerouslySetInnerHTML={{ __html: t.title }} />
        </div>
        <div className="solution">
          <div className="solution-list fade-in">
            {t.items.map((it, i) => (
              <div className="solution-item" key={i}>
                <div className="idx">0{i + 1}</div>
                <div>
                  <h4>{it.t}</h4>
                  <p>{it.p}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="solution-visual fade-in">
            <div className="browser">
              <div className="browser-bar"><i></i><i></i><i></i></div>
              <div className="browser-body">
                <div className="skel h l"></div>
                <div className="skel h m"></div>
                <div className="bb-stats">
                  <div className="bb-stat"><b>98</b><span>Lighthouse</span></div>
                  <div className="bb-stat"><b>0.4s</b><span>LCP</span></div>
                </div>
                <div className="skel box"></div>
                <div className="skel h m"></div>
              </div>
            </div>
            <div className="floating">
              <div className="lbl">CONVERSION</div>
              <div className="num">+187<small>%</small></div>
            </div>
            <div className="floating floating-2">
              <div className="lbl">VISITEURS</div>
              <div className="num">48,2<small>k</small></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessSection({ t }) {
  const ref = useReveal();
  return (
    <section className="section" id="processus" ref={ref}>
      <div className="container">
        <div className="section-head fade-in">
          <div className="section-num">{t.label}</div>
          <h2 className="section-title">{t.title}</h2>
        </div>
        <div className="process fade-in">
          {t.steps.map((s, i) => (
            <div className="process-step" key={i}>
              <span className="num">{s.n}</span>
              <h4>{s.t}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection({ t }) {
  const ref = useReveal();
  const initials = (name) => name.split(' ').map(p => p[0]).join('').slice(0, 2);
  return (
    <section className="section" id="avis" ref={ref}>
      <div className="container">
        <div className="section-head fade-in">
          <div className="section-num">{t.label}</div>
          <h2 className="section-title">{t.title}</h2>
        </div>
        <div className="testimonials fade-in">
          {t.items.map((it, i) => (
            <div className="testimonial" key={i}>
              <p className="quote">{it.q}</p>
              <div className="author">
                <div className="avatar">{initials(it.a)}</div>
                <div>
                  <b>{it.a}</b>
                  <small>{it.r}</small>
                </div>
              </div>
              <div className="metric"><span>{it.m[0]}</span><b>{it.m[1]}</b></div>
            </div>
          ))}
        </div>
        <div className="proof-stats fade-in">
          {t.stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="num" dangerouslySetInnerHTML={{ __html: s.n }} />
              <div className="lbl">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaFinal({ t }) {
  const ref = useReveal();
  return (
    <section className="cta-final" id="contact" ref={ref}>
      <div className="container cta-final-inner">
        <h2 className="fade-in">
          <span dangerouslySetInnerHTML={{ __html: t.title[0] }} /> <br />
          <span dangerouslySetInnerHTML={{ __html: t.title[1] }} />
        </h2>
        <p className="fade-in">{t.sub}</p>
        <div className="hero-cta-row fade-in" style={{ justifyContent: 'center' }}>
          <button className="btn-primary">{t.btn} <span>→</span></button>
          <a className="btn-ghost" href={`mailto:${t.ghost}`}>{t.ghost}</a>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <h4>VDS<span style={{ color: 'var(--accent)' }}>.</span></h4>
          <p>{t.tag}</p>
        </div>
        {t.sections.map((s, i) => (
          <div key={i}>
            <h5>{s.h}</h5>
            <ul>
              {s.items.map((it, j) => {
                const label = typeof it === 'string' ? it : it.l;
                const href = typeof it === 'string' ? '#' : it.href;
                const ext = typeof it === 'object' && it.ext;
                return (
                  <li key={j}>
                    <a href={href} {...(ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
                      {label}
                    </a>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </div>
      <div className="footer-bottom">
        <span>{t.legal}</span>
        <span>{t.built}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { ProblemSection, SolutionSection, ProcessSection, TestimonialsSection, CtaFinal, Footer });