// ============================================================
// Cacyli — Nav, Hero, Performance band
// ============================================================

const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className={`nav glass ${scrolled ? 'scrolled' : ''}`} aria-label="Navigation principale">
      <a href="#hero" className="nav-brand" aria-label="Cacyli — Accueil">
        <img src="assets/cacyli-logo.png" alt="Cacyli" />
      </a>
      <ul className="nav-links" role="list">
        <li><a href="#villas">Nos villas</a></li>
        <li><a href="#performance">Performance</a></li>
        <li><a href="#airbnb">Modèle locatif</a></li>
      </ul>
      <a href="#contact" className="nav-cta">
        Nous contacter
        <Icon name="arrow-right" size={16} />
      </a>
    </nav>
  );
};

const Hero = () => {
  return (
    <header className="hero" id="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text reveal">
            <span className="eyebrow">SCI Cacyli — Patrimoine immobilier locatif</span>
            <h1 style={{ marginTop: 18 }}>
              Un patrimoine d’<em>exception</em>,<br/>
              une rentabilité cultivée.
            </h1>
            <p className="hero-sub">
              Cacyli détient et opère un portefeuille de villas haut de gamme en location saisonnière sur Airbnb,
              en Martinique. Découvrez nos biens et réservez votre séjour d’exception aux Antilles.
            </p>
            <div className="hero-actions">
              <a href="#villas" className="btn btn-primary">
                Découvrir les villas
                <Icon name="arrow-right" size={18} />
              </a>
              <a href="#performance" className="btn btn-ghost">
                Voir la performance
              </a>
            </div>
            <div className="hero-meta" role="list">
              <div className="hero-meta-item" role="listitem">
                <span className="num">4</span>
                <span className="lab">Villas en gestion</span>
              </div>
              <div className="hero-meta-item" role="listitem">
                <span className="num">138+</span>
                <span className="lab">Avis voyageurs</span>
              </div>
              <div className="hero-meta-item" role="listitem">
                <span className="num">★ 5,0</span>
                <span className="lab">Note moyenne Airbnb</span>
              </div>
            </div>
          </div>

          <div className="hero-visual reveal" style={{ '--reveal-delay': '0.2s' }}>
            {/* Background photo card (rotated, behind) */}
            <div className="hero-card hero-card-back" style={{ backgroundImage: 'url(assets/villa-1.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }} aria-hidden="true"></div>

            {/* Main photo card */}
            <div className="hero-card hero-card-main" style={{ backgroundImage: 'url(assets/villa-3.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }} role="img" aria-label="Villa d'Exception Cacyli — Le Vauclin, Martinique"></div>

            {/* Floating stat */}
            <div className="hero-card hero-card-stat glass-strong" aria-hidden="true">
              <span className="big">★ 5,0</span>
              <span className="small">Note Airbnb</span>
            </div>

            {/* Floating villa label */}
            <div className="hero-card hero-card-overlay glass-strong" aria-hidden="true">
              <span style={{ fontSize: "0.74rem", color: "var(--c-ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                À l’affiche
              </span>
              <span style={{ fontFamily: "var(--font-serif)", fontSize: "1.3rem", lineHeight: 1.1, marginTop: 4 }}>
                Villa d’Exception Cacyli
              </span>
              <span style={{ fontSize: "0.85rem", color: "var(--c-ink-2)", marginTop: 2 }}>
                Le Vauclin · Piscine & Jacuzzi · Vue mer
              </span>
            </div>

            {/* Floating mini-thumb */}
            <div className="hero-card hero-card-thumb" style={{ backgroundImage: 'url(assets/villa-4.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }} aria-hidden="true">
              <span className="hero-thumb-tag">+ 3 villas</span>
            </div>

            {/* Decorative ring */}
            <svg className="hero-ring" viewBox="0 0 200 200" aria-hidden="true" focusable="false">
              <defs>
                <linearGradient id="heroRingGrad" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor="#4AA3E0" stopOpacity="0.6"/>
                  <stop offset="100%" stopColor="#1565C0" stopOpacity="0.2"/>
                </linearGradient>
              </defs>
              <circle cx="100" cy="100" r="92" fill="none" stroke="url(#heroRingGrad)" strokeWidth="1.5" strokeDasharray="2 6"/>
            </svg>
          </div>
        </div>
      </div>
    </header>
  );
};

const Performance = () => {
  const [yieldVal, yieldRef] = useCounter(8.6);
  const [occVal, occRef] = useCounter(82);
  const [revVal, revRef] = useCounter(1048);
  const [nightsVal, nightsRef] = useCounter(1430);

  const fmt = (n, d = 1) => n.toLocaleString('fr-FR', { minimumFractionDigits: d, maximumFractionDigits: d });

  return (
    <section className="perf-band" id="performance" aria-labelledby="perf-title">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Performance globale</span>
          <h2 id="perf-title">Le portefeuille en <em className="script-accent">chiffres</em></h2>
          <p>Données consolidées des biens en exploitation sur l’exercice glissant. Chiffres net de charges d’exploitation, hors fiscalité.</p>
        </div>

        <div className="perf-grid glass reveal">
          <div className="perf-cell" ref={yieldRef}>
            <span className="perf-num" aria-label={`${fmt(yieldVal)} pour cent`}>
              {fmt(yieldVal)}<span className="unit">%</span>
            </span>
            <span className="perf-lab">Rendement locatif brut moyen</span>
          </div>
          <div className="perf-cell" ref={occRef}>
            <span className="perf-num">
              {fmt(occVal, 0)}<span className="unit">%</span>
            </span>
            <span className="perf-lab">Taux d’occupation Airbnb annuel</span>
          </div>
          <div className="perf-cell" ref={revRef}>
            <span className="perf-num">
              {fmt(revVal, 0)}<span className="unit"> k€</span>
            </span>
            <span className="perf-lab">Revenus locatifs 2025</span>
          </div>
          <div className="perf-cell" ref={nightsRef}>
            <span className="perf-num">
              {fmt(nightsVal, 0)}
            </span>
            <span className="perf-lab">Nuits réservées sur l’année</span>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Nav = Nav;
window.Hero = Hero;
window.Performance = Performance;