// Features section — "Toutes les réponses, en un seul outil."
// 3x2 grid of question cards + 1 bordeaux CTA card.
function FeaturesSection({ mobile = false }) {
const [visible, setVisible] = React.useState(false);
const [openIdx, setOpenIdx] = React.useState(-1); // mobile accordion — toutes fermées par défaut
const ref = React.useRef(null);
React.useEffect(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) setVisible(true); });
}, { threshold: 0.15 });
if (ref.current) io.observe(ref.current);
return () => io.disconnect();
}, []);
const reveal = (i) => ({
opacity: visible ? 1 : 0,
transform: visible ? 'translateY(0)' : 'translateY(14px)',
transition: `opacity .7s cubic-bezier(.2,.7,.2,1) ${i * 80}ms, transform .7s cubic-bezier(.2,.7,.2,1) ${i * 80}ms`,
});
// Icons
const IconTrend = (
);
const IconEuro = (
);
const IconBank = (
);
const IconStar = (
);
const IconDoc = (
);
const questions = [
{
q: 'Mon projet est-il vraiment rentable ?',
a: <>Simulez votre rentabilité réelle et identifiez vos leviers d'optimisation. Projection à 5, 10, 15 ans.,
icon: IconTrend, iconBg: TOKENS.blue,
},
{
q: 'Ce bien sera-t-il cashflow positif ?',
a: <>Projetez vos flux mensuels et testez plusieurs stratégies de financement pour optimiser votre cashflow.,
icon: IconEuro, iconBg: TOKENS.green,
},
{
q: 'La banque va-t-elle me suivre ?',
a: <>Calculez votre capacité d'emprunt réelle et testez l'impact de l'apport et du taux.,
icon: IconBank, iconBg: TOKENS.bordeaux,
},
{
q: 'Comment savoir si je prends la bonne décision ?',
a: <>Comparez vos scénarios côte à côte, détectez les red flags et validez avec nos Moneyshapers si besoin.,
icon: IconStar, iconBg: TOKENS.coral,
},
{
q: 'Comment penser à tout avant d\'acheter ?',
a: <>Une roadmap complète vous guide jusqu'à l'achat final. Rien n'est laissé au hasard.,
icon: IconDoc, iconBg: TOKENS.ink,
},
];
const Card = ({ q, a, icon, iconBg, i }) => (
{ e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 18px 40px -14px rgba(29,29,29,0.12)'; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
>
{a}
{/* avatars en haut à droite — signal "experts" */}
Nos Moneyshapers répondent à vos questions.
{[
{ src: 'assets/expert-homme.jpg', pos: '50% 28%' },
{ src: 'assets/expert-femme.jpg', pos: '50% 28%' },
].map((a, i) => (
))}
Des experts immobilier, fiscalité et financement, disponibles à la demande.
Fonctionnalités
Toutes les réponses,
en un seul outil.
{/* grid (desktop) / accordion (mobile) */}
{mobile ? (
{questions.map((item, i) => {
const isOpen = openIdx === i;
return (
{/* row header — always visible, tappable */}
{/* body — collapsible */}
);
})}
{CTACard}
{questions.slice(0, 3).map((item, i) => (
))}
{questions.slice(3).map((item, i) => (
))}
{CTACard}
)}
);
}
window.FeaturesSection = FeaturesSection;