// js/landing2.jsx — Process, Testimonials, DiagnosticCTA, FAQ, FinalCTA, Footer
// All cross-file window lookups are inside component functions (lazy)

// ─── Services Section ─────────────────────────────────────────────────
const ServicesSection = () => {
  const { useInView, GlowOrb, useTweaks } = window;
  const [ref, inView] = useInView(0.05);
  const { accent } = useTweaks();
  const services = [
  { img: 'img/sync.png', title: 'Multi-platform & PMS Setup', desc: "Vos annonces synchronisées sur Airbnb, Booking.com, VRBO et + via un PMS centralisé. Zéro double réservation et un maximum de visibilité." },
  { img: 'img/website.png', title: 'Site de réservation directe', desc: "Votre propre site de réservation, synchronisé avec votre PMS. Plus de commissions OTA sur les voyageurs fidèles." },
  { img: 'img/automations.png', title: 'Automatisations & Workflows', desc: "Messages automatiques, coordination d'équipe, rappels voyageurs — tout tourne en arrière-plan." },
  { img: 'img/portal.png', title: 'Guidebook digital & Upsells', desc: "Portail d'accueil avec WiFi, règles, recommandations locales et services additionnels réservables en un clic." },
  { img: 'img/payments.png', title: 'Intégration paiements', desc: "Stripe connecté à votre PMS pour les réservations directes — paiements automatisés et sécurisés." },
  { img: 'img/pricing.png', title: 'Dynamic Pricing', desc: "PriceLabs connecté et configuré. Vos tarifs s'ajustent automatiquement à la demande et aux événements." },
  { img: 'img/onboard.png', title: 'Training & Onboarding', desc: "Autant d'appels que nécessaire pour maîtriser chaque outil en confiance — à votre rythme." },
  { img: 'img/support.png', title: 'Support technique dédié', desc: "Une nouvelle plateforme, un bug de sync, un outil à explorer — on est joignables et on règle ça." }];

  return (
    <section id="services" data-screen-label="services" className="sp" style={{ background: 'linear-gradient(180deg,#0A1628 0%,#0D1E38 100%)', position: 'relative', overflow: 'hidden' }}>
      <GlowOrb size={500} opacity={0.08} top={0} right={-100} />
      <GlowOrb size={400} opacity={0.06} bottom={100} left={-80} />
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 14 }}>Ce qu'on fait pour vous</div>
          <h2 className="h-lg" style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, letterSpacing: '-1px', color: '#fff', lineHeight: 1.2, textWrap: 'balance', marginBottom: 16 }}>
            Un système complet.<br /><span className="grad">Fait pour vous, pas par vous.</span>
          </h2>
          <p style={{ fontSize: 16, color: '#94A3B8', maxWidth: 600, margin: '0 auto 48px' }}>
            Chaque service est sélectionné et personnalisé selon votre situation — découverts ensemble lors de l'audit. On construit votre setup sur-mesure, pas depuis un catalogue.
          </p>
        </div>
        <div className="grid-4" style={{}}>
          {services.map((s, i) =>
          <div key={i} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.07)', borderRadius: 16, overflow: 'hidden', opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(24px)', transition: `opacity .5s ${i * .07}s, transform .5s ${i * .07}s, border-color .2s, transform .2s` }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = `${accent}55`;e.currentTarget.style.transform = 'translateY(-4px)';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(255,255,255,.07)';e.currentTarget.style.transform = 'translateY(0)';}}>
            
              <div style={{ height: 156, overflow: 'hidden', background: 'rgba(255,255,255,.03)' }}>
                <img src={s.img} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ padding: '16px 18px 20px' }}>
                <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 14, color: '#fff', marginBottom: 7, lineHeight: 1.35 }}>{s.title}</div>
                <p style={{ fontSize: 12.5, color: '#94A3B8', lineHeight: 1.65, margin: 0 }}>{s.desc}</p>
              </div>
            </div>
          )}
        </div>
        <div style={{ marginTop: 36, background: `${accent}0E`, border: `1px solid ${accent}30`, borderRadius: 16, padding: '20px 28px', display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontSize: 26, flexShrink: 0 }}>🤝</span>
          <div>
            <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 15, color: '#fff', marginBottom: 3 }}>Ces services font partie de nos prestations personnalisées</div>
            <p style={{ fontSize: 14, color: '#94A3B8', margin: 0, lineHeight: 1.6 }}>L'audit GoRently permet d'identifier précisément ce dont vous avez besoin et de construire ensemble la solution la plus adaptée à votre activité, votre budget et vos objectifs.</p>
          </div>
        </div>
      </div>
    </section>);

};

// ─── Contact Section ──────────────────────────────────────────────────
const ContactSection = () => {
  const { useInView, GlowOrb, useTweaks } = window;
  const [ref, inView] = useInView(0.2);
  const { accent } = useTweaks();
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const inputStyle = { width: '100%', background: 'rgba(255,255,255,.06)', border: '1.5px solid rgba(255,255,255,.1)', borderRadius: 12, padding: '14px 18px', fontSize: 14, color: '#fff', fontFamily: 'Inter,sans-serif', outline: 'none', transition: 'border-color .2s' };
  return (
    <section id="contact" data-screen-label="contact" className="sp" style={{ background: '#0F2040', position: 'relative', overflow: 'hidden' }}>
      <GlowOrb size={400} opacity={0.08} top={-60} right={100} />
      <div ref={ref} style={{ maxWidth: 900, margin: '0 auto', opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(24px)', transition: 'opacity .6s, transform .6s' }}>
        <div className="grid-2" style={{}}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 16 }}>Vous avez une idée précise ?</div>
            <h2 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 34, color: '#fff', lineHeight: 1.2, marginBottom: 20, textWrap: 'balance', letterSpacing: '-0.8px' }}>
              Parlons directement de<br /><span className="grad">votre projet.</span>
            </h2>
            <p style={{ fontSize: 15, color: '#94A3B8', lineHeight: 1.75, marginBottom: 28 }}>Des besoins spécifiques, plusieurs propriétés, une situation particulière — ou simplement l'envie d'échanger avant de commencer. On s'adapte à votre cas.</p>
            {[{ icon: '💬', text: 'Réponse sous 24h ouvrées' }, { icon: '🎯', text: 'Pas de script commercial, une vraie conversation' }, { icon: '🔒', text: 'Vos informations restent confidentielles' }].map((item, i) =>
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14, color: '#CBD5E1', marginBottom: 12 }}>
                <span>{item.icon}</span><span>{item.text}</span>
              </div>
            )}
          </div>
          <div>
            {sent ?
            <div style={{ background: `${accent}12`, border: `1px solid ${accent}40`, borderRadius: 16, padding: '36px 28px', textAlign: 'center', animation: 'fadeInUp .4s ease' }}>
                <div style={{ fontSize: 40, marginBottom: 16 }}>✅</div>
                <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 20, color: '#fff', marginBottom: 8 }}>Message reçu !</div>
                <p style={{ fontSize: 14, color: '#94A3B8', lineHeight: 1.65 }}>On revient vers vous sous 24h. À très vite.</p>
              </div> :

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <input type="text" placeholder="Votre prénom" value={name} onChange={(e) => setName(e.target.value)} style={inputStyle} onFocus={(e) => e.target.style.borderColor = accent} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,.1)'} />
                <input type="email" placeholder="Votre email" value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} onFocus={(e) => e.target.style.borderColor = accent} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,.1)'} />
                <textarea placeholder="Parlez-nous de votre situation, vos besoins, vos questions..." value={msg} onChange={(e) => setMsg(e.target.value)} rows={5} style={{ ...inputStyle, resize: 'vertical', minHeight: 120 }} onFocus={(e) => e.target.style.borderColor = accent} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,.1)'} />
                <button onClick={() => {if (name && email && msg) setSent(true);}} style={{ background: `linear-gradient(135deg,${accent},#e08a00)`, color: '#0A1628', border: 'none', borderRadius: 12, padding: '15px 24px', fontSize: 15, fontWeight: 800, fontFamily: 'Plus Jakarta Sans,sans-serif', cursor: name && email && msg ? 'pointer' : 'not-allowed', opacity: name && email && msg ? 1 : 0.5, transition: 'all .2s' }}
              onMouseEnter={(e) => {if (name && email && msg) {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = `0 8px 30px ${accent}55`;}}}
              onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';}}>
                Envoyer mon message →</button>
                <p style={{ fontSize: 12, color: '#4A6080', textAlign: 'center' }}>Sans engagement · Réponse sous 24h</p>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

};

// ─── Process Section ──────────────────────────────────────────────────
const ProcessSection = () => {
  const { useInView, IPhoneMockup, PortalScreen, PDFCard, GlowOrb, useTweaks } = window;
  const [ref, inView] = useInView(0.05);
  const { accent } = useTweaks();

  const steps = [
  {
    n: '1', title: 'Vous nous parlez de votre situation',
    text: '8 questions sur votre location, vos plateformes, votre expérience voyageur. 3 minutes. On identifie précisément où vous en êtes.',
    visual:
    <div style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 12, padding: 16, width: 200 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#fff', marginBottom: 12 }}>📋 Votre situation</div>
          {['Nombre de logements', 'Plateformes actives', 'Stratégie de prix'].map((q, i) =>
      <div key={i} style={{ background: 'rgba(255,255,255,.06)', borderRadius: 8, padding: '8px 12px', marginBottom: 7, fontSize: 11, color: '#94A3B8', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 14, height: 14, borderRadius: '50%', border: `1.5px solid ${accent}66`, flexShrink: 0 }} />{q}
            </div>
      )}
        </div>

  },
  {
    n: '2', title: 'Vous recevez un diagnostic immédiat',
    text: 'On vous présente les leviers les plus impactants pour votre type de propriété — sans promesses vagues, sans chiffres inventés.',
    visual:
    <div style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 12, padding: 16, width: 200 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#fff', marginBottom: 12 }}>Diagnostic résultats</div>
          {[['Distribution', 30], ['Pricing', 15], ['Expérience', 20], ['Upsells', 5]].map(([label, pct], i) =>
      <div key={i} style={{ marginBottom: 8 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#94A3B8', marginBottom: 3 }}><span>{label}</span><span style={{ color: '#EF4444' }}>⚠</span></div>
              <div style={{ height: 5, background: 'rgba(255,255,255,.08)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: pct + '%', background: 'linear-gradient(90deg,#EF4444,#EF444499)', borderRadius: 3 }} />
              </div>
            </div>
      )}
        </div>

  },
  {
    n: '3', title: 'On met en place votre Starter Pack',
    text: 'Portal créé, upsells intégrés, templates prêts. Votre propriété est équipée. Et vous obtenez un point de contact direct dans notre équipe.',
    visual:
    <div style={{ animation: 'float 4s ease-in-out infinite' }}>
          <img src="img/mckp-portal.png" alt="Portal GoRently" style={{ height: 200, width: 'auto', borderRadius: 16, objectFit: 'contain', filter: 'drop-shadow(0 16px 40px rgba(59,123,246,0.3))' }} />
        </div>

  },
  {
    n: '4', title: "L'audit ouvre la suite", special: true,
    text: "Notre équipe analyse votre setup en profondeur et vous remet un plan d'action personnalisé. Pricing dynamique, distribution, optimisation continue.",
    visual:
    <div style={{ position: 'relative' }}>
          <PDFCard rotation={-4} width={190} />
          <div style={{ position: 'absolute', bottom: -8, right: -12, background: 'linear-gradient(135deg,#F59E0B,#FBBF24)', color: '#0A1628', borderRadius: 8, padding: '4px 10px', fontSize: 10, fontWeight: 800, transform: 'rotate(3deg)', boxShadow: '0 4px 16px rgba(245,158,11,.4)' }}>🎁 BONUS INCLUS</div>
        </div>

  }];


  return (
    <section id="process" data-screen-label="process" className="sp" style={{ background: '#0A1628', position: 'relative', overflow: 'hidden' }}>
      <GlowOrb size={500} opacity={0.07} top={100} right={-100} />
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 70 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 14 }}>Le processus</div>
          <h2 className="h-lg" style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, letterSpacing: '-1px', color: '#fff', lineHeight: 1.2, textWrap: 'balance' }}>
            Ce n'est pas un simple achat.<br />C'est le début d'une <span className="grad">collaboration.</span>
          </h2>
        </div>
        <div style={{ position: 'relative' }}>
          <div className="hide-mobile" style={{ position: 'absolute', top: 36, left: '12.5%', right: '12.5%', height: 2, background: 'rgba(255,255,255,.07)', zIndex: 0 }}>
            <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(90deg,${accent},${accent}66)`, transformOrigin: 'left', transform: inView ? 'scaleX(1)' : 'scaleX(0)', transition: 'transform 1.2s .5s cubic-bezier(.4,0,.2,1)' }} />
          </div>
          <div className="grid-4 process-steps" style={{ gap: 24 }}>
            {steps.map((step, i) => {
              const delay = .2 + i * .15;
              return (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative', zIndex: 1, opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(24px)', transition: `opacity .5s ${delay}s, transform .5s ${delay}s` }}>
                  <div style={{ width: step.special ? 80 : 72, height: step.special ? 80 : 72, borderRadius: '50%', background: step.special ? 'linear-gradient(135deg,#F59E0B,#3B7BF6)' : `linear-gradient(135deg,${accent},#1a4fd6)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: step.special ? 24 : 22, color: '#fff', boxShadow: step.special ? '0 0 40px rgba(245,158,11,.5), 0 0 20px rgba(59,123,246,.4)' : `0 0 30px ${accent}55`, marginBottom: 24, flexShrink: 0, animation: step.special ? 'pulseGlow 2s ease-in-out infinite' : 'none' }}>{step.n}</div>
                  <div style={{ marginBottom: 20, minHeight: 140, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{step.visual}</div>
                  <h3 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 16, color: '#fff', textAlign: 'center', marginBottom: 8, lineHeight: 1.35 }}>{step.title}</h3>
                  <p style={{ fontSize: 13, color: '#94A3B8', textAlign: 'center', lineHeight: 1.65 }}>{step.text}</p>
                  {step.special && <div style={{ marginTop: 14, background: `linear-gradient(135deg,${accent}22,rgba(245,158,11,.15))`, border: `1px solid ${accent}44`, borderRadius: 8, padding: '6px 14px', fontSize: 12, color: accent, fontWeight: 600, fontStyle: 'italic' }}>C'est ici que tout commence vraiment</div>}
                </div>);

            })}
          </div>
        </div>
      </div>
    </section>);

};

// ─── Testimonials Section ─────────────────────────────────────────────
const TestimonialsSection = () => {
  const { useInView, GlowOrb, useTweaks } = window;
  const [ref, inView] = useInView(0.1);
  const { accent } = useTweaks();
  const testimonials = [
  { quote: "Je pensais que mon appartement était déjà bien optimisé. Le diagnostic m'a montré 3 choses que je ne faisais pas. Le portal, c'est maintenant ce que mes voyageurs mentionnent en premier dans leurs avis.", name: 'Sophie M.', location: 'Lyon', props: '3 propriétés', initials: 'SM', color: '#3B7BF6' },
  { quote: "Le pricing dynamique seul a changé la donne pour mes deux appartements en Bretagne. Je ne pensais pas que des événements locaux avaient autant d'impact sur mes réservations.", name: 'Thomas R.', location: 'Vannes', props: '2 propriétés', initials: 'TR', color: '#8B5CF6' },
  { quote: "J'avais essayé de faire un guestbook moi-même sur Notion. Ça prenait trop de temps et le résultat était banal. Avec GoRently, c'est professionnel et mes voyageurs le mentionnent systématiquement.", name: 'Camille D.', location: 'Bordeaux', props: '1 propriété', initials: 'CD', color: '#10B981' }];

  return (
    <section id="testimonials" data-screen-label="testimonials" className="sp" style={{ background: 'linear-gradient(180deg,#0A1628 0%,#0F2040 100%)', position: 'relative', overflow: 'hidden' }}>
      <GlowOrb size={500} opacity={0.08} bottom={-50} left={100} />
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{ fontSize: 26, marginBottom: 12 }}>⭐⭐⭐⭐⭐</div>
          <div style={{ fontSize: 12, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 10 }}>Ce qu'ils en disent</div>
          <div style={{ fontSize: 18, fontWeight: 600, color: '#fff' }}>Déjà 40+ hôtes optimisent avec GoRently</div>
        </div>
        <div className="grid-3" style={{ gap: 24 }}>
          {testimonials.map((t, i) =>
          <div key={i} style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 16, padding: 28, position: 'relative', opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(24px)', transition: `opacity .5s ${.1 + i * .15}s, transform .5s ${.1 + i * .15}s` }}>
              <div style={{ position: 'absolute', top: 16, left: 20, fontSize: 80, fontFamily: 'Georgia,serif', color: `${accent}14`, lineHeight: 1, userSelect: 'none' }}>"</div>
              <p style={{ fontSize: 15, lineHeight: 1.75, color: '#CBD5E1', fontStyle: 'italic', marginBottom: 24, position: 'relative', zIndex: 1 }}>"{t.quote}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%', background: `linear-gradient(135deg,${t.color},${t.color}88)`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 800, color: '#fff', flexShrink: 0 }}>{t.initials}</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14, color: '#fff' }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: '#94A3B8' }}>{t.location} · {t.props}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ─── Diagnostic CTA Section ───────────────────────────────────────────
const DiagnosticCTASection = ({ onCTA }) => {
  const { useInView, CTAButton, RadarIcon, useTweaks } = window;
  const [ref, inView] = useInView(0.2);
  const { accent } = useTweaks();
  return (
    <section id="diagnostic-cta" data-screen-label="diagnostic-cta" className="sp" style={{ background: '#0F2040', position: 'relative', overflow: 'hidden' }}>
      <div ref={ref} style={{ maxWidth: 700, margin: '0 auto' }}>
        <div style={{ background: 'rgba(10,22,40,.8)', border: `1px solid ${accent}33`, borderRadius: 24, padding: 'clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px)', textAlign: 'center', boxShadow: `0 0 80px ${accent}20`, opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(24px)', transition: 'opacity .6s, transform .6s' }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>🏠</div>
          <h2 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 32, color: '#fff', marginBottom: 12, textWrap: 'balance', lineHeight: 1.25 }}>Où en êtes-vous vraiment<br />avec votre location ?</h2>
          <p style={{ fontSize: 15, color: '#94A3B8', marginBottom: 32 }}>8 questions · 3 minutes · Diagnostic personnalisé</p>
          <CTAButton size="large" onClick={onCTA}>Commencer mon diagnostic gratuit →</CTAButton>
          <p style={{ fontSize: 13, color: '#4A6080', marginTop: 16 }}>Sans engagement · Aucune carte bancaire</p>
        </div>
      </div>
    </section>);

};

// ─── FAQ Section ──────────────────────────────────────────────────────
const FAQSection = () => {
  const { useTweaks } = window;
  const [open, setOpen] = React.useState(null);
  const { accent } = useTweaks();
  const faqs = [
  { q: "Est-ce que je dois être très présent sur l'informatique pour utiliser GoRently ?", a: "Non. Tout est créé et configuré par notre équipe. Vous recevez un lien et une plaque NFC. Vos voyageurs accèdent à tout, vous ne gérez rien techniquement." },
  { q: "Comment se passe la mise en place après l'achat ?", a: "Après votre achat, vous remplissez un formulaire simple avec les informations sur votre propriété. Notre équipe prend en charge le setup complet et vous tient informé à chaque étape. Vous avez un point de contact direct tout au long du processus." },
  { q: "J'ai déjà un guestbook sur une autre plateforme. Ça vaut quand même le coup ?", a: "Si votre guestbook ne génère pas de revenus supplémentaires (upsells), n'est pas lié à une plaque NFC physique et n'est pas intégré à votre stratégie globale, oui. GoRently n'est pas juste un guestbook — c'est un système complet." },
  { q: "Est-ce que GoRently fonctionne si je suis sur Booking.com et pas seulement Airbnb ?", a: "Oui. GoRently est compatible avec toutes les plateformes. Le portal fonctionne indépendamment de la plateforme de réservation." },
  { q: "Que se passe-t-il si je ne suis pas satisfait ?", a: "Garantie satisfaction 14 jours. Si vous estimez que le setup ne correspond pas à vos attentes, nous le modifions ou vous remboursons. Sans question." },
  { q: "Et si j'ai plusieurs propriétés ?", a: "Le Starter Pack inclut jusqu'à 1 portal. Des offres multi-propriétés sont disponibles — elles vous seront présentées après le diagnostic." }];

  return (
    <section id="faq" data-screen-label="faq" className="sp" style={{ background: '#0A1628', position: 'relative' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 52 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 14 }}>Questions fréquentes</div>
          <h2 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 38, color: '#fff', letterSpacing: '-1px' }}>On répond à tout</h2>
        </div>
        {faqs.map((faq, i) =>
        <div key={i} style={{ borderBottom: '1px solid rgba(255,255,255,.07)' }}>
            <button onClick={() => setOpen(open === i ? null : i)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '22px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', gap: 20 }}>
              <span style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 600, fontSize: 16, color: open === i ? accent : '#fff', transition: 'color .2s', lineHeight: 1.4 }}>{faq.q}</span>
              <span style={{ color: accent, fontSize: 22, fontWeight: 300, flexShrink: 0, transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .3s ease' }}>+</span>
            </button>
            <div style={{ overflow: 'hidden', maxHeight: open === i ? '300px' : '0', transition: 'max-height .35s cubic-bezier(.4,0,.2,1)' }}>
              <p style={{ fontSize: 15, lineHeight: 1.75, color: '#94A3B8', paddingBottom: 22 }}>{faq.a}</p>
            </div>
          </div>
        )}
      </div>
    </section>);

};

// ─── Final CTA Section ────────────────────────────────────────────────
const FinalCTASection = ({ onCTA }) => {
  const { useInView, CTAButton, GlowOrb, useTweaks } = window;
  const [ref, inView] = useInView(0.2);
  const { accent } = useTweaks();
  return (
    <section id="final-cta" data-screen-label="final-cta" className="sp--hero" style={{ background: 'radial-gradient(ellipse 80% 60% at 50% 50%,#162B52 0%,#0A1628 80%)', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <GlowOrb size={600} opacity={0.14} top={-100} left={'calc(50% - 300px)'} />
      <div ref={ref} style={{ maxWidth: 700, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <h2 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 48, color: '#fff', letterSpacing: '-1.5px', lineHeight: 1.15, marginBottom: 20, textWrap: 'balance', opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(24px)', transition: 'opacity .6s, transform .6s' }}>
          Votre location a du potentiel.<br />La question c'est : est-ce que vous<br /><span className="grad">l'exploitez ?</span>
        </h2>
        <p style={{ fontSize: 18, color: '#94A3B8', marginBottom: 40, opacity: inView ? 1 : 0, transition: 'opacity .6s .15s' }}>3 minutes pour le savoir.</p>
        <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(16px)', transition: 'opacity .6s .25s, transform .6s .25s' }}>
          <CTAButton size="large" onClick={onCTA} style={{ animation: 'pulseGlow 2.5s ease-in-out infinite' }}>→ Analyser gratuitement ma location</CTAButton>
          <p style={{ fontSize: 13, color: '#4A6080', marginTop: 18 }}>Sans engagement · Diagnostic personnalisé immédiat · Rejoignez les hôtes qui optimisent avec GoRently</p>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginTop: 24, color: '#4A6080', fontSize: 13 }}>
            <span>🔒 Garantie satisfaction 14 jours</span>
            <span style={{ color: 'rgba(255,255,255,.15)' }}>|</span>
            <span style={{ fontWeight: 700, color: '#6B7FBF', letterSpacing: '.5px' }}>stripe</span>
          </div>
        </div>
      </div>
    </section>);

};

// ─── Footer ───────────────────────────────────────────────────────────
const FooterSection = () => {
  const { useTweaks } = window;
  const { accent } = useTweaks();
  return (
    <footer style={{ background: '#060e1a', borderTop: '1px solid rgba(255,255,255,.06)', padding: '36px clamp(16px,4vw,80px)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <div>
          <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 18, color: '#fff', marginBottom: 4 }}>Go<span style={{ color: accent }}>Rently</span></div>
          <div style={{ fontSize: 12, color: '#4A6080' }}>Consulting en optimisation de locations courte durée</div>
        </div>
        <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
          {['Mentions légales', 'CGV', 'Politique de confidentialité'].map((l) =>
          <a key={l} href="#" style={{ color: '#4A6080', fontSize: 12, textDecoration: 'none' }} onMouseEnter={(e) => e.target.style.color = '#94A3B8'} onMouseLeave={(e) => e.target.style.color = '#4A6080'}>{l}</a>
          )}
        </div>
        <div style={{ fontSize: 12, color: '#4A6080' }}>hello@gorently.co · Paiement sécurisé par <span style={{ fontWeight: 700, color: '#6B7FBF' }}>stripe</span></div>
      </div>
    </footer>);

};

// ─── Reassurance Band ─────────────────────────────────────────────────
const ReassuranceBand = () => {
  const { useTweaks } = window;
  const { accent } = useTweaks();
  return (
    <div style={{ background: 'rgba(255,255,255,.03)', borderTop: '1px solid rgba(255,255,255,.06)', borderBottom: '1px solid rgba(255,255,255,.06)', padding: '16px clamp(16px,4vw,80px)' }}>
      <div className="reassurance-items" style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', justifyContent: 'center', gap: 40, flexWrap: 'wrap' }}>
        {['Un interlocuteur dédié, toujours disponible', 'Sans compétences techniques', 'Paiement sécurisé par Stripe'].map((item) =>
        <span key={item} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: '#94A3B8' }}>
            <span style={{ color: '#10B981', fontWeight: 700 }}>✓</span> {item}
          </span>
        )}
      </div>
    </div>);

};

// ─── Full Landing Page ────────────────────────────────────────────────
const LandingPage = ({ onCTA }) => {
  const NavBar = window.NavBar;
  const HeroSection = window.HeroSection;
  const PortalSection = window.PortalSection;
  const ProblemSection = window.ProblemSection;
  const TransformSection = window.TransformSection;
  const SS = ServicesSection;
  const CS = ContactSection;
  return (
    <div>
      <NavBar onCTA={onCTA} />
      <HeroSection onCTA={onCTA} />
      <ReassuranceBand />
      <PortalSection />
      <ProblemSection onCTA={onCTA} />
      <TransformSection />
      <SS />
      <ProcessSection />
      <TestimonialsSection />
      <DiagnosticCTASection onCTA={onCTA} />
      <CS />
      <FAQSection />
      <FinalCTASection onCTA={onCTA} />
      <FooterSection />
    </div>);

};

Object.assign(window, {
  ProcessSection, TestimonialsSection, DiagnosticCTASection,
  FAQSection, FinalCTASection, FooterSection, ReassuranceBand,
  ServicesSection, ContactSection, LandingPage
});