// Apricus — homepage composition
function Citation() {
  const ref = useReveal();
  if (typeof window !== 'undefined' && window.APRICUS_HERO_VARIANT === 'photo') {
    return (
      <section ref={ref} style={{ padding: '96px 40px' }}>
        <div className="apr-fade riviera-stripes" style={{ maxWidth: 1060, margin: '0 auto',
          borderRadius: 'var(--radius-xl)', padding: 12, boxShadow: 'var(--shadow-md)' }}>
          <div style={{ background: 'var(--apr-linen)', borderRadius: 'calc(var(--radius-xl) - 8px)',
            padding: 'clamp(40px,6vw,68px) clamp(28px,5vw,60px)', textAlign: 'center' }}>
            <img src="assets/sun-motif.svg" alt="" style={{ width: 50, opacity: 0.6, marginBottom: 16 }} />
            <p style={{ fontFamily: 'var(--font-script)', fontWeight: 400, fontSize: 'clamp(26px,3.4vw,40px)',
              lineHeight: 1.4, color: 'var(--apr-terracotta)', margin: 0 }}>« APRICUS » est un mot latin signifiant ensoleillé, réchauffé par le soleil, se prélassant au soleil, grandissant sous le soleil.</p>
            <div style={{ marginTop: 22, fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 12,
              letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--apr-sky-deep)' }}>Provence · Toscana</div>
          </div>
        </div>
      </section>);
  }
  return (
    <section ref={ref} style={{ padding: '120px 40px 72px' }}>
      <div className="apr-fade" style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <img src="assets/sun-motif.svg" alt="" style={{ width: 52, opacity: 0.55, marginBottom: 14 }} />
        <p style={{ fontFamily: 'var(--font-script)', fontWeight: 400, fontStyle: 'normal',
          fontSize: 'clamp(26px,3.4vw,40px)', lineHeight: 1.4, letterSpacing: '0',
          color: 'var(--apr-terracotta)', margin: 0 }}>« APRICUS » est un mot latin signifiant ensoleillé, réchauffé par le soleil, se prélassant au soleil, grandissant sous le soleil.

        </p>
        <img src="assets/sun-motif.svg" alt="" style={{ width: 44, opacity: 0.55, marginTop: 20 }} />
      </div>
    </section>);

}

function SejoursLink({ variant = 'fusilli' }) {
  // petite pâte décorative : relie les blocs « séjours » (pasta dolce vita)
  const shapes = {
    fusilli:
    <svg width="42" height="88" viewBox="0 0 42 88" style={{ overflow: 'visible', filter: 'url(#paperEdge)' }}
    fill="none" stroke="#D7BC66" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M21 7 C 7 15, 7 23, 21 29 C 35 35, 35 43, 21 49 C 7 55, 7 63, 21 69 C 29 73, 31 79, 24 83" />
        <path d="M13 17 L 28 23" opacity="0.7" /><path d="M13 37 L 28 43" opacity="0.7" /><path d="M13 57 L 28 63" opacity="0.7" />
      </svg>,

    penne:
    <svg width="42" height="88" viewBox="0 0 42 88" style={{ overflow: 'visible', filter: 'url(#paperEdge)' }}
    fill="none" stroke="#D7BC66" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 28 L 30 18 L 30 68 L 14 78 Z" />
        <path d="M14 30 C 19 34, 25 33, 30 21" opacity="0.7" />
        <path d="M19 28 L 19 74" opacity="0.5" /><path d="M25 23 L 25 69" opacity="0.5" />
      </svg>

  };
  return (
    <div aria-hidden="true" style={{ display: 'flex', justifyContent: 'center', padding: '6px 0' }}>
      {shapes[variant] || shapes.fusilli}
    </div>);

}

function App() {
  const [modal, setModal] = React.useState(false);
  const onBook = () => setModal(true);
  return (
    <>
      <Nav onBook={onBook} />
      <Hero onBook={onBook} />
      {(typeof window !== 'undefined' && window.APRICUS_HERO_VARIANT === 'photo')
        ? <div aria-hidden="true" style={{ height: 72 }}></div> : null}
      <Menopause onBook={onBook} />
      <Citation />
      <NextRetreat onBook={onBook} />
      <SejoursLink variant="fusilli" />
      <Team />
      <SejoursLink variant="penne" />
      <Retreats onBook={onBook} />
      <div aria-hidden="true" style={{ height: 88 }} />
      <Ateliers onBook={onBook} />
      <Story />
      <Testimonials />
      <Accompagnement onBook={onBook} />
      <FAQ />
      <Contact />
      <Footer onBook={onBook} />
      <WaitlistModal open={modal} onClose={() => setModal(false)} />
    </>);

}
window.App = App;