// ============================================================
// Cacyli — Airbnb model, FAQ, CTA, Footer
// ============================================================

const AirbnbModel = () => {
  const [val, valRef] = useCounter(82, 1800);
  return (
    <section className="airbnb" id="airbnb" aria-labelledby="airbnb-title">
      <div className="container">
        <div className="airbnb-grid">
          <div className="reveal">
            <span className="eyebrow">Modèle locatif</span>
            <h2 id="airbnb-title" style={{ marginTop: 14 }}>
              Tout l’écosystème <em className="script-accent">Airbnb</em><br/>opéré pour vous.
            </h2>
            <p style={{ color: 'var(--c-ink-2)', marginTop: 18, maxWidth: 520 }}>
              Chaque villa Cacyli est mise en location saisonnière premium sur Airbnb. Notre équipe gère la totalité de la chaîne :
              tarification dynamique, accueil voyageur, ménage, maintenance et reporting financier mensuel.
            </p>

            <ol className="airbnb-list">
              <li>
                <div>
                  <h4>Acquisition & rénovation</h4>
                  <p>Sourcing de biens à fort potentiel locatif, rénovation par notre studio d’architecture intérieure.</p>
                </div>
              </li>
              <li>
                <div>
                  <h4>Mise en location Airbnb</h4>
                  <p>Annonces optimisées, photographie professionnelle, tarification dynamique selon la saison et la demande.</p>
                </div>
              </li>
              <li>
                <div>
                  <h4>Gestion opérationnelle 24/7</h4>
                  <p>Conciergerie, ménage hôtelier, maintenance préventive, support voyageur en 4 langues.</p>
                </div>
              </li>
              <li>
                <div>
                  <h4>Reporting & distribution</h4>
                  <p>Tableau de bord investisseur en temps réel, distribution trimestrielle des revenus locatifs nets.</p>
                </div>
              </li>
            </ol>
          </div>

          <div className="airbnb-card glass-deep reveal" ref={valRef} style={{ '--reveal-delay': '0.15s' }}>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>Taux d’occupation</span>
            <div style={{ marginTop: 18 }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(3.4rem, 6vw, 5rem)', color: '#fff', lineHeight: 1, letterSpacing: '-0.025em' }}>
                {Math.round(val)}<span style={{ fontSize: '0.45em', color: '#B6E0F8', marginLeft: 6 }}>%</span>
              </span>
            </div>
            <p style={{ color: 'rgba(255,255,255,0.78)', marginTop: 14 }}>
              Moyenne portefeuille — bien au-dessus du benchmark Airbnb de 65% sur les biens premium en France.
            </p>

            {/* SVG bars */}
            <div style={{ marginTop: 32 }} aria-hidden="true">
              {[
                { lab: 'Cacyli', v: 82, hl: true },
                { lab: 'Premium France', v: 65 },
                { lab: 'Marché global', v: 51 },
              ].map((b, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                  <span style={{ width: 130, fontSize: '0.85rem', color: b.hl ? '#fff' : 'rgba(255,255,255,0.7)', fontWeight: b.hl ? 600 : 400 }}>
                    {b.lab}
                  </span>
                  <div style={{ flex: 1, height: 10, borderRadius: 999, background: 'rgba(255,255,255,0.12)', overflow: 'hidden' }}>
                    <div
                      style={{
                        width: `${(val / 82) * b.v}%`,
                        height: '100%',
                        background: b.hl ? 'linear-gradient(90deg, #B6E0F8, #fff)' : 'rgba(255,255,255,0.45)',
                        borderRadius: 999,
                        transition: 'width 0.4s ease',
                      }}
                    />
                  </div>
                  <span style={{ width: 40, fontSize: '0.85rem', color: '#fff', fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>
                    {b.v}%
                  </span>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 28, padding: 18, background: 'rgba(255,255,255,0.08)', borderRadius: 14, fontSize: '0.88rem', color: 'rgba(255,255,255,0.85)' }}>
              <strong style={{ color: '#fff', fontWeight: 600 }}>Note · </strong>
              Données consolidées 2024–2025. Le taux d’occupation est calculé sur les nuits disponibles à la location, hors blocages propriétaire.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: 'Comment investir dans la SCI Cacyli ?',
      a: 'L’entrée au capital de la SCI se fait par souscription de parts sociales. Notre équipe d’investissement vous accompagne sur l’ensemble du processus : présentation du portefeuille, signature des actes, intégration au reporting investisseur. Le ticket d’entrée minimum est de 50 000 €.'
    },
    {
      q: 'Quel rendement annuel puis-je espérer ?',
      a: 'Le rendement brut moyen du portefeuille s’établit à 8,6% sur l’exercice 2025, avec une plage allant de 6,8% (Mas du Soleil) à 11,2% (Riad Andaloussi). Le rendement net distribuable, après charges et fiscalité de la SCI, s’établit autour de 5,5–6,5%.'
    },
    {
      q: 'Que se passe-t-il en cas de baisse de fréquentation Airbnb ?',
      a: 'Notre stratégie multi-destinations limite l’exposition à un marché unique. En cas de pression sur la location courte durée, nos biens peuvent basculer vers la location moyenne durée (1 à 6 mois) sans perte de rentabilité significative.'
    },
    {
      q: 'Puis-je séjourner dans les villas du portefeuille ?',
      a: 'Oui. Chaque associé bénéficie d’un quota de nuits annuelles à tarif préférentiel dans l’ensemble des villas du portefeuille, au prorata de sa quote-part. Réservation via votre tableau de bord investisseur.'
    },
    {
      q: 'La SCI est-elle soumise à l’IS ou à l’IR ?',
      a: 'Cacyli est une SCI à l’impôt sur les sociétés, ce qui permet l’amortissement des biens et une fiscalité maîtrisée sur les revenus locatifs. La distribution aux associés est ensuite traitée comme dividende.'
    },
  ];

  return (
    <section id="faq" aria-labelledby="faq-title">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Questions fréquentes</span>
          <h2 id="faq-title">Tout ce que vous voulez <em className="script-accent">savoir</em></h2>
        </div>
        <div className="faq-list reveal">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item glass ${isOpen ? 'is-open' : ''}`}>
                <button
                  type="button"
                  className="faq-q"
                  aria-expanded={isOpen}
                  aria-controls={`faq-a-${i}`}
                  id={`faq-q-${i}`}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span>{it.q}</span>
                  <span className="faq-icon"><Icon name="plus" size={16} /></span>
                </button>
                <div
                  id={`faq-a-${i}`}
                  role="region"
                  aria-labelledby={`faq-q-${i}`}
                  className="faq-a"
                >
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const CTABand = () => (
  <section className="cta-band" id="contact" aria-labelledby="cta-title">
    <div className="container">
      <div className="cta-card glass-deep reveal">
        <div style={{ position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none' }} aria-hidden="true">
          <div style={{ position: 'absolute', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, #fff, transparent 60%)', top: -100, right: -100, filter: 'blur(40px)' }} />
          <div style={{ position: 'absolute', width: 300, height: 300, borderRadius: '50%', background: 'radial-gradient(circle, #B6E0F8, transparent 65%)', bottom: -100, left: -50, filter: 'blur(40px)' }} />
        </div>
        <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>Devenir associé</span>
        <h2 id="cta-title" style={{ marginTop: 16 }}>
          Construisons ensemble<br/>votre <em className="script-accent" style={{ color: '#B6E0F8' }}>patrimoine locatif</em>.
        </h2>
        <p>
          Échangez avec notre équipe d’investissement pour découvrir le portefeuille en détail, recevoir notre note d’information et étudier les modalités d’entrée au capital.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="mailto:contact@cacyli.fr" className="btn btn-primary">
            <Icon name="mail" size={16} />
            Demander un rendez-vous
          </a>
          <a href="#villas" className="btn btn-ghost">
            Revoir les villas
          </a>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer" role="contentinfo">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <img src="assets/cacyli-logo.png" alt="Cacyli" />
          <p>SCI Cacyli — Acquisition et exploitation locative de villas haut de gamme. Capital social 1 200 000 €. RCS Paris 902 458 731.</p>
        </div>
        <div>
          <h4>Portefeuille</h4>
          <ul>
            {window.VILLAS.map((v) => (
              <li key={v.id}><a href="#villas">{v.name}</a></li>
            ))}
          </ul>
        </div>
        <div>
          <h4>Société</h4>
          <ul>
            <li><a href="#performance">Performance</a></li>
            <li><a href="#airbnb">Modèle locatif</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Légal</h4>
          <ul>
            <li><a href="#">Mentions légales</a></li>
            <li><a href="#">Politique de confidentialité</a></li>
            <li><a href="#">Accessibilité — RGAA</a></li>
            <li><a href="#">Note d’information</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 SCI Cacyli — Tous droits réservés</span>
        <span>contact@cacyli.fr · +33 1 84 60 12 47</span>
      </div>
    </div>
  </footer>
);

window.AirbnbModel = AirbnbModel;
window.FAQ = FAQ;
window.CTABand = CTABand;
window.Footer = Footer;