/* global React, Reveal, SectionHead */
const { useState: useStateH, useEffect: useEffectH } = React;

function CountUp({ to, suffix = "", duration = 1400 }) {
  const [val, setVal] = useStateH(0);
  const ref = React.useRef(null);
  useEffectH(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(Math.round(to * eased));
            if (p < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{val}{suffix}</span>;
}

function Home({ onNav }) {
  return (
    <div className="vw-page">
      {/* HERO */}
      <section className="vw-hero">
        <div className="vw-hero__left">
          <div className="vw-hero__meta">
            <span>FR / 2026 — Studio indépendant</span>
            <span className="vw-hero__meta-coord">
              <span>● Disponible</span>
              <span>2 places ce trimestre</span>
            </span>
          </div>
          <Reveal>
            <h1 className="vw-hero__title">
              Sites web<br/>
              qui convertissent <span className="vw-tilde">~</span><br/>
              <em>vraiment.</em>
            </h1>
          </Reveal>
          <div>
            <Reveal>
              <p className="vw-hero__sub">
                Agence solo basée en France. Création, refonte, maintenance et SEO pour PME et commerces locaux. Livraison rapide. Prix accessibles. Résultats concrets.
              </p>
            </Reveal>
            <div className="vw-hero__ctas" style={{ marginTop: 28 }}>
              <a href="#contact" className="vw-btn vw-btn--accent" onClick={(e)=>{e.preventDefault(); onNav("contact");}}>
                <span className="vw-btn__dot" style={{ background: "var(--accent-ink)" }}></span>
                <span>Démarrer un projet</span>
              </a>
              <a href="#realisations" className="vw-btn vw-btn--ghost" onClick={(e)=>{e.preventDefault(); onNav("realisations");}}>
                <span>Voir les réalisations</span>
                <span>↗</span>
              </a>
            </div>
          </div>
        </div>

        <div className="vw-hero__art">
          <div className="vw-hero__art-letter vw-hero__art-letter--v">V</div>
          <div className="vw-hero__art-letter vw-hero__art-letter--w">w</div>

          <div className="vw-hero__art-ascii" aria-hidden="true">
{`/// velox.web // index
//
//  ██   ██
//   ██ ██
//    ███
//   ██ ██   ~ studio
//  ██   ██    indépendant
//
//  ─ live deploy
//  ─ rev 026.04
//  ─ uptime 99.9
`}
          </div>

          <div className="vw-hero__art-tag vw-hero__art-tag--1">▸ Brief → Live · 7 jours</div>
          <div className="vw-hero__art-tag vw-hero__art-tag--2">+178% conv.</div>
          <div className="vw-hero__art-tag vw-hero__art-tag--3">// Made in FR</div>

          <span className="vw-hero__art-dot vw-hero__art-dot--1"></span>
          <span className="vw-hero__art-dot vw-hero__art-dot--2"></span>

          <span className="vw-hero__art-cross" style={{ top: "8%", left: "8%" }}>+</span>
          <span className="vw-hero__art-cross" style={{ bottom: "10%", left: "10%" }}>+</span>
          <span className="vw-hero__art-cross" style={{ top: "44%", right: "8%" }}>+</span>
        </div>
      </section>

      {/* STATS */}
      <Reveal stagger className="vw-stats">
        <div className="vw-stat">
          <div className="vw-stat__num"><CountUp to={47} suffix="" /></div>
          <div className="vw-stat__label">Sites livrés</div>
        </div>
        <div className="vw-stat">
          <div className="vw-stat__num"><CountUp to={7} suffix="" /><em>j</em></div>
          <div className="vw-stat__label">Délai moyen vitrine</div>
        </div>
        <div className="vw-stat">
          <div className="vw-stat__num"><CountUp to={98} suffix="" /><em>%</em></div>
          <div className="vw-stat__label">Score performance</div>
        </div>
        <div className="vw-stat">
          <div className="vw-stat__num"><em>1</em></div>
          <div className="vw-stat__label">Interlocuteur unique</div>
        </div>
      </Reveal>

      {/* SERVICES TEASE */}
      <section className="vw-section">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 60 }}>
          <Reveal>
            <div className="vw-eyebrow" style={{ marginBottom: 24 }}>Services</div>
            <h2 className="vw-display" style={{ fontSize: "clamp(48px, 7vw, 100px)" }}>
              Quatre métiers,<br/><em>une seule</em> personne.
            </h2>
          </Reveal>
          <Reveal>
            <p style={{ color: "var(--fg-muted)", fontSize: 17, lineHeight: 1.55, maxWidth: 420, paddingBottom: 24 }}>
              Pas d'intermédiaire, pas de commercial. Vous parlez directement à la personne qui code, design et publie votre site.
            </p>
          </Reveal>
        </div>

        <div className="vw-services-list">
          {[
            ["01", "Création", "Sur-mesure", "Site vitrine, e-commerce léger ou refonte intégrale. Du brief à la mise en ligne en moins de deux semaines."],
            ["02", "Refonte", "Modernisée", "Votre site existant, repensé. Performance, accessibilité, SEO et conversion — sans perdre votre référencement."],
            ["03", "Maintenance", "Mensuelle", "Mises à jour, sauvegardes, sécurité, petits ajustements. Tranquille, à partir de 49€/mois."],
            ["04", "SEO", "Local", "Audit, optimisation technique, contenu et référencement local. Pour être trouvé là où vos clients cherchent."],
          ].map(([num, title, em, desc]) => (
            <a key={num} href="#services" onClick={(e)=>{e.preventDefault(); onNav("services");}} className="vw-service-row">
              <div className="vw-service-row__num">/ {num}</div>
              <div className="vw-service-row__title">{title} <em>{em}</em></div>
              <div className="vw-service-row__desc">{desc}</div>
              <div className="vw-service-row__arrow">→</div>
            </a>
          ))}
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="vw-final-cta">
        <div className="vw-final-cta__bg" aria-hidden="true">v</div>
        <div className="vw-final-cta__inner">
          <Reveal>
            <div className="vw-final-cta__sub">/ Vous avez un projet en tête</div>
            <h2 className="vw-final-cta__title">
              Parlons-en. <em>Réponse sous</em> <span className="accent">24h.</span>
            </h2>
          </Reveal>
          <Reveal>
            <a href="#contact" onClick={(e)=>{e.preventDefault(); onNav("contact");}} className="vw-final-cta__btn">
              <span>Démarrer →</span>
            </a>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

window.Home = Home;