// Desktop sections for the Soins Énergétiques website.
// Each section assumes it sits in a 1440-wide artboard.

const SITE_W = 1440;
const SITE_PAD_X = 96; // horizontal padding inside content blocks

// ---------------------------------------------------------------------------
// NAV — top bar, transparent over hero
// ---------------------------------------------------------------------------
function SiteNav({ onCream = false }) {
  const { lang, t } = useLang();
  const fg = onCream ? SITE_PALETTE.fg : SITE_PALETTE.cream;
  const links = [
    { label: t.nav.about,       href: '#a-propos' },
    { label: t.nav.soins,       href: '#soins' },
    { label: t.nav.tarifs,      href: '#tarifs' },
    { label: t.nav.temoignages, href: '#temoignages' },
    { label: t.nav.contact,     href: '#contact' },
  ];
  return (
    <nav style={{
      position: 'absolute', top: 0, left: 0, right: 0,
      padding: `28px ${SITE_PAD_X}px`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      zIndex: 5,
    }}>
      <div style={{
        fontFamily: SITE_TYPE.sans,
        fontSize: 11,
        letterSpacing: '0.42em',
        color: fg,
        opacity: 0.9,
        fontWeight: 500,
      }}>
        {t.nav.brand.replace(' ', ' ')}
      </div>
      <div style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
        {links.map(l => (
          <a key={l.href} href={l.href} style={{
            fontFamily: SITE_TYPE.sans,
            fontSize: 12,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: fg,
            opacity: 0.85,
            fontWeight: 400,
            textDecoration: 'none',
          }}>{l.label}</a>
        ))}
        <LangSwitch onCream={onCream} size="md" />
        <SiteButton variant={onCream ? 'outline' : 'ghost'} size="sm" href={whatsappHref(lang)}>
          {t.nav.cta}
        </SiteButton>
      </div>
    </nav>
  );
}

// ---------------------------------------------------------------------------
// HERO — full bleed dark brown bandeau, like recto + A5 poster
// ---------------------------------------------------------------------------
function HeroSection() {
  const { lang, t } = useLang();
  const H = 820;
  return (
    <section data-screen-label="01 Hero" style={{
      position: 'relative',
      width: '100%', height: H,
      background: SITE_PALETTE.accent,
      color: SITE_PALETTE.cream,
      overflow: 'hidden',
    }}>
      {/* Flower of life filigree, large, off to the right */}
      <svg width="100%" height="100%" viewBox={`0 0 ${SITE_W} ${H}`}
        style={{ position: 'absolute', inset: 0 }}
        preserveAspectRatio="xMidYMid slice">
        <FlowerOfLife
          cx={SITE_W * 0.78} cy={H * 0.55}
          r={140}
          stroke={SITE_PALETTE.cream}
          opacity={0.13}
          sw={0.9}
        />
      </svg>

      <SiteNav onCream={false} />

      <div style={{
        position: 'absolute', inset: 0,
        padding: `180px ${SITE_PAD_X}px 96px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div style={{ maxWidth: 880 }}>
          <Eyebrow color={SITE_PALETTE.cream} style={{ opacity: 0.85, marginBottom: 32 }}>
            {t.hero.eyebrow}
          </Eyebrow>
          <h1 style={{
            fontFamily: SITE_TYPE.serif,
            fontWeight: 400,
            fontSize: 156,
            lineHeight: 0.92,
            letterSpacing: '0.005em',
            margin: 0,
            color: SITE_PALETTE.cream,
          }}>
            {t.hero.titleA}<br/>
            <span style={{ fontStyle: 'italic' }}>{t.hero.titleB}</span>
          </h1>
        </div>

        {/* Bottom band: tagline + CTA */}
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          gap: 48,
        }}>
          <div style={{
            fontFamily: SITE_TYPE.serif,
            fontStyle: 'italic',
            fontSize: 30,
            lineHeight: 1.4,
            color: SITE_PALETTE.cream,
            opacity: 0.92,
            fontWeight: 400,
            maxWidth: 620,
          }}>
            {t.hero.taglineL1}<br/>
            {t.hero.taglineL2}<br/>
            {t.hero.taglineL3}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 18 }}>
            <SiteButton variant="creamFill" size="lg" href={whatsappHref(lang)} icon={<IconArrow size={14} color={SITE_PALETTE.accent} />}>
              {t.hero.cta}
            </SiteButton>
            <div style={{
              fontFamily: SITE_TYPE.sans,
              fontSize: 11,
              letterSpacing: '0.3em',
              color: SITE_PALETTE.cream,
              opacity: 0.6,
              textTransform: 'uppercase',
            }}>
              {t.hero.hours}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// ABOUT — photo + biographical text
// ---------------------------------------------------------------------------
function AboutSection() {
  const { t } = useLang();
  return (
    <section data-screen-label="02 About" id="a-propos" style={{
      position: 'relative',
      width: '100%',
      background: SITE_PALETTE.cream,
      color: SITE_PALETTE.fg,
      padding: `140px ${SITE_PAD_X}px 140px`,
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '460px 1fr',
        gap: 96,
        alignItems: 'start',
      }}>
        {/* Photo */}
        <div style={{ position: 'relative' }}>
          <div style={{
            width: 460, height: 580,
            backgroundImage: `url(assets/thomas-portrait.jpg)`,
            backgroundSize: 'cover',
            backgroundPosition: '38% 30%',
          }} />
          {/* Caption underneath */}
          <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', gap: 12 }}>
            <Hairline width={32} />
            <div style={{
              fontFamily: SITE_TYPE.serif,
              fontStyle: 'italic',
              fontSize: 16,
              color: SITE_PALETTE.fg,
              opacity: 0.7,
            }}>
              {t.about.caption}
            </div>
          </div>
        </div>

        {/* Text */}
        <div style={{ paddingTop: 24 }}>
          <Eyebrow style={{ marginBottom: 28 }}>{t.about.eyebrow}</Eyebrow>
          <SectionTitle size={64} style={{ marginBottom: 40 }}>
            {t.about.titleA} <span style={{ fontStyle: 'italic' }}>{t.about.titleAItalic}</span><br/>
            {t.about.titleB}<br/>
            {t.about.titleC} <span style={{ fontStyle: 'italic' }}>{t.about.titleCItalic}</span>
          </SectionTitle>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22, maxWidth: 560 }}>
            <p style={{
              fontFamily: SITE_TYPE.sans,
              fontSize: 17,
              lineHeight: 1.65,
              color: SITE_PALETTE.fg,
              opacity: 0.85,
              fontWeight: 400,
              margin: 0,
            }}>
              {t.about.p1}
            </p>
            <p style={{
              fontFamily: SITE_TYPE.sans,
              fontSize: 17,
              lineHeight: 1.65,
              color: SITE_PALETTE.fg,
              opacity: 0.85,
              fontWeight: 400,
              margin: 0,
            }}>
              {t.about.p2}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// SOINS — what a session is, three-pillar layout (corps · émotions · esprit)
// ---------------------------------------------------------------------------
function SoinsSection() {
  const { t } = useLang();
  const pillars = [
    {
      icon: <IconHand size={28} color={SITE_PALETTE.accent} />,
      title: t.soins.pillarBodyTitle,
      text: <>{t.soins.pillarBodyText}</>,
    },
    {
      icon: <IconHeart size={28} color={SITE_PALETTE.accent} />,
      title: t.soins.pillarEmotionsTitle,
      text: <>{t.soins.pillarEmotionsText}</>,
    },
    {
      icon: <IconSun size={28} color={SITE_PALETTE.accent} />,
      title: t.soins.pillarMindTitle,
      text: <>{t.soins.pillarMindLines[0]}<br/>{t.soins.pillarMindLines[1]}<br/>{t.soins.pillarMindLines[2]}</>,
    },
  ];

  return (
    <section data-screen-label="03 Soins" id="soins" style={{
      position: 'relative',
      width: '100%',
      background: SITE_PALETTE.creamAlt,
      color: SITE_PALETTE.fg,
      padding: `140px ${SITE_PAD_X}px 140px`,
    }}>
      {/* Subtle filigree on the right */}
      <svg width="640" height="640" viewBox="0 0 640 640"
        style={{ position: 'absolute', right: -160, top: 80, opacity: 0.6 }}>
        <FlowerOfLife cx={320} cy={320} r={110} stroke={SITE_PALETTE.accent} opacity={0.1} sw={0.7} />
      </svg>

      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* Header — same grid as the déroulé below for visual alignment */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr',
          gap: 80,
          marginBottom: 88,
          alignItems: 'end',
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 28 }}>{t.soins.eyebrow}</Eyebrow>
            <SectionTitle size={72}>
              {t.soins.titleA}<br/>
              <span style={{ fontStyle: 'italic' }}>{t.soins.titleBItalic}</span><br/>
              {t.soins.titleC}
            </SectionTitle>
          </div>
          <div>
            <p style={{
              fontFamily: SITE_TYPE.sans,
              fontSize: 17,
              lineHeight: 1.65,
              color: SITE_PALETTE.fg,
              opacity: 0.85,
              fontWeight: 400,
              margin: 0,
              maxWidth: 640,
            }}>
              {t.soins.introL1}<br/>
              {t.soins.introL2}<br/>
              {t.soins.introL3}
            </p>
            <Hairline width={64} style={{ marginTop: 32 }} />
          </div>
        </div>

        {/* Three pillars */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 0,
          borderTop: `1px solid ${SITE_PALETTE.hairline}`,
          borderBottom: `1px solid ${SITE_PALETTE.hairline}`,
        }}>
          {pillars.map((p, i) => (
            <div key={p.title} style={{
              padding: '56px 48px',
              borderRight: i < 2 ? `1px solid ${SITE_PALETTE.hairline}` : 'none',
              display: 'flex',
              flexDirection: 'column',
              gap: 24,
            }}>
              {p.icon}
              <SectionTitle size={36} italic>{p.title}</SectionTitle>
              <p style={{
                fontFamily: SITE_TYPE.sans,
                fontSize: 16,
                lineHeight: 1.6,
                color: SITE_PALETTE.fg,
                opacity: 0.78,
                fontWeight: 400,
                margin: 0,
                maxWidth: 300,
              }}>{p.text}</p>
            </div>
          ))}
        </div>

        {/* Session flow */}
        <div style={{
          marginTop: 96,
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr',
          gap: 80,
          alignItems: 'start',
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 24 }}>{t.soins.flowEyebrow}</Eyebrow>
            <SectionTitle size={40}>
              {t.soins.flowTitleA}<br/>{t.soins.flowTitleB} <span style={{ fontStyle: 'italic' }}>{t.soins.flowTitleBItalic}</span>
            </SectionTitle>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {[
              { n: '01', t: t.soins.step1Title, d: t.soins.step1Desc },
              { n: '02', t: t.soins.step2Title, d: t.soins.step2Desc },
              { n: '03', t: t.soins.step3Title, d: t.soins.step3Desc },
            ].map((step, i) => (
              <div key={step.n} style={{
                display: 'grid',
                gridTemplateColumns: '64px 180px 1fr',
                gap: 24,
                padding: '28px 0',
                borderTop: `1px solid ${SITE_PALETTE.hairline}`,
                borderBottom: i === 2 ? `1px solid ${SITE_PALETTE.hairline}` : 'none',
                alignItems: 'baseline',
              }}>
                <div style={{
                  fontFamily: SITE_TYPE.serif,
                  fontStyle: 'italic',
                  fontSize: 28,
                  color: SITE_PALETTE.accent,
                  opacity: 0.7,
                }}>{step.n}</div>
                <SectionTitle size={26}>{step.t}</SectionTitle>
                <p style={{
                  fontFamily: SITE_TYPE.sans,
                  fontSize: 15.5,
                  lineHeight: 1.6,
                  color: SITE_PALETTE.fg,
                  opacity: 0.8,
                  margin: 0,
                  maxWidth: 440,
                }}>{step.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  SITE_W, SITE_PAD_X, SiteNav, HeroSection, AboutSection, SoinsSection,
});