// js/portal.jsx — GoRently Portal flagship product section (Variant B only)
// Centered product showcase + clickable feature gallery (lightbox) + 3-step how-it-works
// with a dashboard ("Pilotez vos portals") step. Accent is locked to amber site-wide.

// ─── Pillar card (mix card + stat) ───────────────────────────────────
const PortalPillar = ({ pillar, accent, inView, delay }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: hov ? 'rgba(255,255,255,.055)' : 'rgba(255,255,255,.035)',
        border: `1px solid ${hov ? accent + '55' : 'rgba(255,255,255,.08)'}`,
        borderRadius: 18, padding: '26px 26px 24px',
        display: 'flex', flexDirection: 'column', gap: 12,
        transform: inView ? (hov ? 'translateY(-4px)' : 'translateY(0)') : 'translateY(22px)',
        opacity: inView ? 1 : 0,
        transition: `opacity .55s ${delay}s, transform .35s ${hov ? '0s' : delay + 's'}, border-color .25s, background .25s`,
        position: 'relative', overflow: 'hidden'
      }}>
      <div style={{ position: 'absolute', top: -40, right: -40, width: 120, height: 120, borderRadius: '50%', background: `radial-gradient(circle, ${accent}22, transparent 70%)`, opacity: hov ? 1 : 0, transition: 'opacity .3s', pointerEvents: 'none' }} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ width: 44, height: 44, borderRadius: 12, background: `linear-gradient(135deg, ${accent}33, ${accent}14)`, border: `1px solid ${accent}44`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 21 }}>{pillar.icon}</div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 30, color: accent, letterSpacing: '-1px', lineHeight: 1 }}>{pillar.stat}</div>
          <div style={{ fontSize: 10.5, color: '#7C8DA8', marginTop: 3, maxWidth: 150 }}>{pillar.statLabel}</div>
        </div>
      </div>
      <div>
        <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 16.5, color: '#fff', marginBottom: 6 }}>{pillar.title}</div>
        <p style={{ fontSize: 13.5, lineHeight: 1.6, color: '#94A3B8', margin: 0 }}>{pillar.desc}</p>
      </div>
    </div>
  );
};

// ─── Plaque visual (image + glow) ────────────────────────────────────
const PortalPlaque = ({ accent, inView, height = 500 }) => (
  <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
    <div style={{ position: 'absolute', width: height * 0.85, height: height * 0.85, borderRadius: '50%', background: `radial-gradient(circle, ${accent}38 0%, ${accent}10 45%, transparent 70%)`, filter: 'blur(30px)', zIndex: 0, top: '42%', left: '50%', transform: 'translate(-50%,-50%)' }} />
    <div style={{ position: 'absolute', bottom: height * 0.04, width: height * 0.5, height: 28, borderRadius: '50%', background: 'radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%)', filter: 'blur(10px)', zIndex: 0 }} />
    <img src="img/portal-plaque.png" alt="Plaque GoRently Portal avec QR Code et NFC"
      style={{
        height, width: 'auto', maxWidth: '100%', position: 'relative', zIndex: 2,
        filter: 'drop-shadow(0 40px 70px rgba(0,0,0,.55))',
        animation: 'float 5s ease-in-out infinite',
        opacity: inView ? 1 : 0,
        transform: inView ? 'translateY(0) scale(1)' : 'translateY(28px) scale(.96)',
        transition: 'opacity .8s .1s, transform .8s .1s cubic-bezier(.34,1.2,.64,1)'
      }} />
  </div>
);

// ─── Feature card (chip + screenshot thumbnail, opens lightbox) ──────
const FeatureCard = ({ feature, accent, inView, delay, onOpen }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onClick={() => onOpen(feature)}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        width: 196, cursor: 'pointer',
        background: hov ? 'rgba(255,255,255,.06)' : 'rgba(255,255,255,.035)',
        border: `1px solid ${hov ? accent + '66' : 'rgba(255,255,255,.09)'}`,
        borderRadius: 16, padding: 12,
        display: 'flex', flexDirection: 'column', gap: 11,
        opacity: inView ? 1 : 0,
        transform: inView ? (hov ? 'translateY(-4px)' : 'translateY(0)') : 'translateY(18px)',
        transition: `opacity .5s ${delay}s, transform .3s ${hov ? '0s' : delay + 's'}, border-color .2s, background .2s`,
        boxShadow: hov ? `0 18px 44px rgba(0,0,0,.4)` : 'none'
      }}>
      {/* screenshot thumbnail framed on white */}
      <div style={{ position: 'relative', height: 132, borderRadius: 11, overflow: 'hidden', background: '#fff', border: '1px solid rgba(255,255,255,.14)', boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.03)' }}>
        <img src={feature.img} alt={feature.label} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block', transform: hov ? 'scale(1.04)' : 'scale(1)', transition: 'transform .4s ease' }} />
        {/* magnify hint */}
        <div style={{ position: 'absolute', top: 8, right: 8, width: 26, height: 26, borderRadius: 8, background: 'rgba(10,22,40,.78)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 13, opacity: hov ? 1 : 0.75, transform: hov ? 'scale(1.08)' : 'scale(1)', transition: 'all .2s', border: `1px solid ${accent}55` }}>⤢</div>
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, transparent 60%, ${accent}10)`, opacity: hov ? 1 : 0, transition: 'opacity .25s', pointerEvents: 'none' }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <span style={{ fontSize: 17, flexShrink: 0 }}>{feature.icon}</span>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 13.5, color: '#fff', lineHeight: 1.2 }}>{feature.label}</div>
          <div style={{ fontSize: 11, color: hov ? accent : '#7C8DA8', transition: 'color .2s', marginTop: 2 }}>{hov ? 'Cliquer pour agrandir' : feature.note}</div>
        </div>
      </div>
    </div>
  );
};

// ─── Step pill ───────────────────────────────────────────────────────
const StepPill = ({ n, title, sub, accent, highlight, inView, delay }) => (
  <div style={{
    flex: 1, minWidth: 200,
    background: highlight ? `linear-gradient(135deg, ${accent}1f, ${accent}0a)` : 'rgba(255,255,255,.04)',
    border: `1px solid ${highlight ? accent + '55' : 'rgba(255,255,255,.09)'}`,
    borderRadius: 16, padding: '18px 20px',
    display: 'flex', alignItems: 'center', gap: 14,
    opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(16px)',
    transition: `opacity .5s ${delay}s, transform .5s ${delay}s`
  }}>
    <div style={{ width: 40, height: 40, flexShrink: 0, borderRadius: '50%', background: highlight ? `linear-gradient(135deg, ${accent}, #e08a00)` : 'rgba(255,255,255,.06)', border: highlight ? 'none' : `1px solid ${accent}44`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 16, color: highlight ? '#0A1628' : accent, boxShadow: highlight ? `0 0 26px ${accent}66` : 'none' }}>{n}</div>
    <div>
      <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 14.5, color: '#fff', lineHeight: 1.25 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: '#94A3B8', marginTop: 2 }}>{sub}</div>
    </div>
  </div>
);

// ─── Dashboard card (screenshot, opens lightbox) ─────────────────────
const DashCard = ({ item, accent, inView, delay, onOpen }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div onClick={() => onOpen(item)} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        flex: 1, minWidth: 180, cursor: 'pointer',
        background: hov ? 'rgba(255,255,255,.06)' : 'rgba(255,255,255,.035)',
        border: `1px solid ${hov ? accent + '66' : 'rgba(255,255,255,.09)'}`,
        borderRadius: 18, padding: 12,
        opacity: inView ? 1 : 0, transform: inView ? (hov ? 'translateY(-4px)' : 'translateY(0)') : 'translateY(18px)',
        transition: `opacity .55s ${delay}s, transform .3s ${hov ? '0s' : delay + 's'}, border-color .2s, background .2s`,
        boxShadow: hov ? '0 22px 50px rgba(0,0,0,.45)' : 'none'
      }}>
      <div style={{ position: 'relative', height: 150, borderRadius: 12, overflow: 'hidden', background: '#fff', border: '1px solid rgba(255,255,255,.14)' }}>
        <img src={item.img} alt={item.label} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block', transform: hov ? 'scale(1.03)' : 'scale(1)', transition: 'transform .4s ease' }} />
        <div style={{ position: 'absolute', top: 10, right: 10, width: 28, height: 28, borderRadius: 8, background: 'rgba(10,22,40,.8)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 14, opacity: hov ? 1 : 0.8, transition: 'all .2s', border: `1px solid ${accent}55` }}>⤢</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
        <span style={{ fontSize: 18 }}>{item.icon}</span>
        <div>
          <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 14, color: '#fff' }}>{item.label}</div>
          <div style={{ fontSize: 11.5, color: hov ? accent : '#7C8DA8', transition: 'color .2s', marginTop: 1 }}>{hov ? 'Cliquer pour agrandir' : item.note}</div>
        </div>
      </div>
    </div>
  );
};

// ─── Lightbox overlay ────────────────────────────────────────────────
const Lightbox = ({ item, accent, onClose }) => {
  React.useEffect(() => {
    if (!item) return;
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [item]);
  if (!item) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 10000,
      background: 'rgba(5,11,22,.86)', backdropFilter: 'blur(10px)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: '48px 24px', animation: 'fadeIn .22s ease'
    }}>
      <button onClick={onClose} aria-label="Fermer" style={{ position: 'absolute', top: 24, right: 28, width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,.08)', border: '1px solid rgba(255,255,255,.18)', color: '#fff', fontSize: 22, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1 }}>×</button>
      <img src={item.img} alt={item.label} onClick={e => e.stopPropagation()} style={{
        maxWidth: 'min(92vw, 560px)', maxHeight: '80vh', width: 'auto', objectFit: 'contain',
        borderRadius: 18, border: '1px solid rgba(255,255,255,.16)', background: '#fff',
        boxShadow: '0 40px 120px rgba(0,0,0,.7)', animation: 'fadeInUp .3s cubic-bezier(.34,1.2,.64,1)'
      }} />
      <div onClick={e => e.stopPropagation()} style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,.06)', border: `1px solid ${accent}44`, borderRadius: 100, padding: '8px 18px' }}>
        <span style={{ fontSize: 16 }}>{item.icon}</span>
        <span style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 14, color: '#fff' }}>{item.label}</span>
        <span style={{ fontSize: 12.5, color: '#94A3B8' }}>· {item.note}</span>
      </div>
    </div>
  );
};

// ─── Section sub-heading ─────────────────────────────────────────────
const SubHead = ({ kicker, title, accent, inView, delay = 0 }) => (
  <div style={{ textAlign: 'center', marginBottom: 30, opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(14px)', transition: `opacity .5s ${delay}s, transform .5s ${delay}s` }}>
    <div style={{ fontSize: 11.5, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 10 }}>{kicker}</div>
    <h3 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 27, color: '#fff', letterSpacing: '-0.6px', lineHeight: 1.25, textWrap: 'balance', margin: 0 }}>{title}</h3>
  </div>
);

// ─── Width hook (orbit vs grid fallback) ─────────────────────────────
const useWidth = () => {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
  React.useEffect(() => {
    const fn = () => setW(window.innerWidth);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, []);
  return w;
};

// ─── Orbit chip (feature pill orbiting the plaque) ───────────────────
const OrbitChip = ({ feature, accent, inView, pos, delay, dur, onOpen }) => {
  const [hov, setHov] = React.useState(false);
  return (
    <div style={{ position: 'absolute', width: 296, zIndex: hov ? 6 : 4, ...pos }}>
      <div
        onClick={() => onOpen(feature)}
        onMouseEnter={() => setHov(true)}
        onMouseLeave={() => setHov(false)}
        style={{
          cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 15, padding: 13,
          background: hov ? 'rgba(17,31,55,.97)' : 'rgba(13,25,46,.9)', backdropFilter: 'blur(14px)',
          border: `1px solid ${hov ? accent + '99' : accent + '33'}`, borderRadius: 18,
          boxShadow: hov ? `0 24px 56px rgba(0,0,0,.6)` : '0 14px 38px rgba(0,0,0,.45)',
          animation: `float ${dur}s ease-in-out ${delay}s infinite`,
          opacity: inView ? 1 : 0,
          transition: 'opacity .6s, border-color .2s, background .2s, box-shadow .2s'
        }}>
        <div style={{ width: 76, height: 76, borderRadius: 13, overflow: 'hidden', background: '#fff', flexShrink: 0, border: '1px solid rgba(255,255,255,.18)', position: 'relative' }}>
          <img src={feature.chipImg || feature.img} alt={feature.label} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: `${accent}14`, opacity: hov ? 1 : 0, transition: 'opacity .2s' }} />
        </div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 16, color: '#fff', lineHeight: 1.22, display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{ fontSize: 18 }}>{feature.icon}</span>{feature.label}
          </div>
          <div style={{ fontSize: 13, color: hov ? accent : '#7C8DA8', marginTop: 4, transition: 'color .2s', fontWeight: hov ? 600 : 400 }}>{hov ? 'Agrandir ⤢' : feature.note}</div>
        </div>
      </div>
    </div>
  );
};

// ─── Orbit stage (plaque centered + chips around it) ─────────────────
const OrbitStage = ({ features, accent, inView, onOpen }) => {
  const positions = [
    { top: '2%', left: '7%' },
    { top: '2%', right: '7%' },
    { top: '38%', left: '6%' },
    { top: '38%', right: '6%' },
    { top: '75%', left: '7%' },
    { top: '75%', right: '7%' },
    { bottom: '-2%', left: '50%', marginLeft: -148 }
  ];
  return (
    <div style={{ position: 'relative', maxWidth: 1060, height: 700, margin: '0 auto' }}>
      {/* orbit rings */}
      <div style={{ position: 'absolute', top: '47%', left: '50%', width: 660, height: 540, transform: 'translate(-50%,-50%)', border: `1px dashed ${accent}26`, borderRadius: '50%', pointerEvents: 'none', zIndex: 1 }} />
      <div style={{ position: 'absolute', top: '47%', left: '50%', width: 470, height: 380, transform: 'translate(-50%,-50%)', border: `1px dashed ${accent}1a`, borderRadius: '50%', pointerEvents: 'none', zIndex: 1 }} />
      {/* plaque center */}
      <div style={{ position: 'absolute', top: '47%', left: '50%', transform: 'translate(-50%,-50%)', zIndex: 3 }}>
        <PortalPlaque accent={accent} inView={inView} height={500} />
      </div>
      {/* orbiting feature chips */}
      {features.map((f, i) => (
        <OrbitChip key={i} feature={f} accent={accent} inView={inView} pos={positions[i % positions.length]} delay={0.3 + i * 0.1} dur={4 + (i % 3) * 0.7} onOpen={onOpen} />
      ))}
    </div>
  );
};

// ─── Portal Section ──────────────────────────────────────────────────
const PortalSection = () => {
  const { useInView, GlowOrb, DotGrid, useTweaks } = window;
  const [ref, inView] = useInView(0.05);
  const tw = useTweaks();
  const accent = tw.accent;
  const [lb, setLb] = React.useState(null);
  const wide = useWidth() >= 1000;

  const pillars = [
    { icon: '🗺️', stat: '24/7', statLabel: 'à disposition, sans vous déranger', title: 'Guides & infos du séjour', desc: "WiFi, règlement, horaires, recommandations locales et contact, réunis sur une page élégante. Vos voyageurs trouvent tout, vous récoltez de meilleurs avis." },
    { icon: '✨', stat: '+47€', statLabel: 'de revenus en moyenne / réservation', title: 'Upsells réservables', desc: "Transferts, ménage, paniers d'arrivée, late check-out… présentés au bon moment et réservables en un tap. Du revenu additionnel, en pilote automatique." },
    { icon: '🏷️', stat: '−15%', statLabel: 'de commissions OTA récupérées', title: 'Conversion en direct', desc: "Une réduction exclusive incite le voyageur à réserver son prochain séjour sur votre propre site. Vous transformez un client de plateforme en client direct." }
  ];

  const features = [
    { icon: '✨', label: 'Upsells réservables', img: 'img/portal/upsells.jpg', chipImg: 'img/portal/chip-upsells.jpg', note: 'Transferts, courses, extras' },
    { icon: '🗺️', label: 'Guides locaux', img: 'img/portal/guides.jpg', chipImg: 'img/portal/chip-guides.jpg', note: 'Recommandations triées' },
    { icon: '🏷️', label: 'Réduction direct', img: 'img/portal/discount.jpg', chipImg: 'img/portal/chip-discount.jpg', note: 'Code promo, réservation directe' },
    { icon: '🌐', label: 'Multilangue', img: 'img/portal/multilang.jpg', chipImg: 'img/portal/chip-multilang.jpg', note: '8 langues, détection auto' },
    { icon: '📇', label: 'Infos & contact', img: 'img/portal/contact.jpg', chipImg: 'img/portal/chip-contact.jpg', note: 'Email, téléphone, WhatsApp' },
    { icon: '📋', label: 'Règlement intérieur', img: 'img/portal/house-rules.jpg', chipImg: 'img/portal/chip-house-rules.jpg', note: 'Règles claires, sans malentendu' },
    { icon: '🕑', label: 'Horaires & services', img: 'img/portal/hours.jpg', chipImg: 'img/portal/chip-hours.jpg', note: 'Piscine, gym, bar, sécurité' }
  ];

  const dashboards = [
    { icon: '🏠', label: 'Vos portals', img: 'img/portal/dash-portals.jpg', note: 'Créez, publiez, dupliquez' },
    { icon: '🔖', label: 'Plaques & QR', img: 'img/portal/dash-plates.jpg', note: 'Assignez chaque plaque' },
    { icon: '💳', label: 'Paiements', img: 'img/portal/dash-payments.jpg', note: 'Suivi Stripe & upsells' }
  ];

  return (
    <section id="portal" data-screen-label="portal" className="sp" style={{ background: 'radial-gradient(ellipse 90% 70% at 50% 30%, #15305c 0%, #0A1628 62%)', position: 'relative', overflow: 'hidden' }}>
      <DotGrid />
      <GlowOrb size={620} opacity={0.10} top={-120} left={'calc(50% - 310px)'} color={accent} />
      <div ref={ref} style={{ maxWidth: 1180, margin: '0 auto', position: 'relative', zIndex: 2 }}>

        {/* Intro */}
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{ opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(18px)', transition: 'opacity .6s, transform .6s' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, background: `${accent}18`, border: `1px solid ${accent}44`, borderRadius: 100, padding: '7px 16px', marginBottom: 22 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: accent, animation: 'pulseDot 2s ease-in-out infinite' }} />
              <span style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 700, fontSize: 12.5, color: '#fff', letterSpacing: '.3px' }}>GoRently <span style={{ color: accent }}>Portal</span></span>
              <span style={{ fontSize: 11, color: '#7C8DA8' }}>· Plaque QR &amp; NFC</span>
            </div>
          </div>
          <h2 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 44, lineHeight: 1.12, letterSpacing: '-1.4px', color: '#fff', marginBottom: 20, textWrap: 'balance', opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : 'translateY(18px)', transition: 'opacity .6s .08s, transform .6s .08s' }}>
            Une plaque sur la table.<br />Tout un séjour <span className="grad">qui rapporte.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: '#94A3B8', marginBottom: 10, maxWidth: 680, opacity: inView ? 1 : 0, transition: 'opacity .6s .16s' }}>
            Le voyageur scanne le QR ou tape la plaque NFC, et accède instantanément à une page dédiée à votre logement&nbsp;: WiFi, guides, infos pratiques, services à réserver et offre directe. Le même objet qui informe vos voyageurs <strong style={{ color: '#CBD5E1' }}>génère du revenu</strong> et <strong style={{ color: '#CBD5E1' }}>vous appartient</strong>.
          </p>
        </div>

        {/* Orbit showcase — every Portal feature orbiting the plaque */}
        <div style={{ textAlign: 'center', marginTop: 6, marginBottom: 4, opacity: inView ? 1 : 0, transition: 'opacity .6s .2s' }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: accent, letterSpacing: '2px', textTransform: 'uppercase' }}>Ce que contient le Portal</div>
        </div>
        {wide
          ? <OrbitStage features={features} accent={accent} inView={inView} onOpen={setLb} />
          : (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 14 }}>
              <PortalPlaque accent={accent} inView={inView} height={420} />
              <div className="feature-cards-mobile" style={{ display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: 'center', marginTop: 28 }}>
                {features.map((f, i) => <FeatureCard key={i} feature={f} accent={accent} inView={inView} delay={0.15 + i * 0.06} onOpen={setLb} />)}
              </div>
            </div>
          )
        }
        <p style={{ textAlign: 'center', fontSize: 12.5, color: '#7C8DA8', margin: '6px 0 90px' }}>👆 Cliquez une fonction pour agrandir son aperçu</p>

        {/* Pillars */}
        <div className="grid-3" style={{ gap: 22, marginBottom: 96 }}>
          {pillars.map((p, i) => <PortalPillar key={i} pillar={p} accent={accent} inView={inView} delay={0.2 + i * 0.12} />)}
        </div>

        {/* How it works — 3 steps */}
        <SubHead kicker="Comment ça marche" title="Du scan voyageur au pilotage de vos portals" accent={accent} inView={inView} delay={0.05} />
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 32 }}>
          <StepPill n="1" title="Scan QR · Tap NFC" sub="Le voyageur scanne ou tape la plaque" accent={accent} inView={inView} delay={0.12} />
          <StepPill n="2" title="Le Portal s'ouvre" sub="Page dédiée, aucune app à installer" accent={accent} inView={inView} delay={0.22} />
          <StepPill n="3" title="Pilotez vos portals" sub="Tout se gère depuis votre dashboard" accent={accent} highlight inView={inView} delay={0.32} />
        </div>

        {/* Step 3 detail — dashboard showcase */}
        <div style={{ background: 'rgba(255,255,255,.025)', border: `1px solid ${accent}26`, borderRadius: 22, padding: '26px 26px 28px', position: 'relative', overflow: 'hidden' }}>
          <GlowOrb size={360} opacity={0.08} top={-120} right={-80} color={accent} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6, position: 'relative', zIndex: 1 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: '50%', background: `linear-gradient(135deg, ${accent}, #e08a00)`, color: '#0A1628', fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 13 }}>3</span>
            <h4 style={{ fontFamily: 'Plus Jakarta Sans,sans-serif', fontWeight: 800, fontSize: 19, color: '#fff', margin: 0 }}>Pilotez vos portals depuis un seul dashboard</h4>
          </div>
          <p style={{ fontSize: 13.5, color: '#94A3B8', margin: '0 0 22px', maxWidth: 620, position: 'relative', zIndex: 1 }}>
            Contenu, plaques physiques, upsells et paiements&nbsp;: tout se gère au même endroit. Vous gardez le contrôle, GoRently s'occupe du reste.
          </p>
          <div className="dashcards-row" style={{ display: 'flex', gap: 16, flexWrap: 'wrap', position: 'relative', zIndex: 1 }}>
            {dashboards.map((d, i) => <DashCard key={i} item={d} accent={accent} inView={inView} delay={0.15 + i * 0.1} onOpen={setLb} />)}
          </div>
        </div>

      </div>

      <Lightbox item={lb} accent={accent} onClose={() => setLb(null)} />
    </section>
  );
};

Object.assign(window, { PortalSection, PortalPlaque, PortalPillar, FeatureCard, DashCard, StepPill, Lightbox, SubHead, OrbitChip, OrbitStage, useWidth });