// Sections 2 — Tarifs, Témoignages, Contact, Footer
// Continues sections 1, same design tokens.

// ---------------------------------------------------------------------------
// TARIFS
// ---------------------------------------------------------------------------
function TarifsSection() {
  const { lang, t } = useLang();
  const rows = [
    { name: t.tarifs.row1Name,  duration: '2h',         price: 'Rs 4 500', note: t.tarifs.row1Note },
    { name: t.tarifs.row2Name,  duration: '1h30 – 2h',  price: 'Rs 3 500', note: t.tarifs.row2Note },
  ];

  return (
    <section data-screen-label="04 Tarifs" id="tarifs" 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: '1fr 1.5fr',
        gap: 96,
        alignItems: 'start',
      }}>
        <div>
          <Eyebrow style={{ marginBottom: 28 }}>{t.tarifs.eyebrow}</Eyebrow>
          <SectionTitle size={72}>
            {t.tarifs.titleA}<br/>
            <span style={{ fontStyle: 'italic' }}>{t.tarifs.titleBItalic}</span><br/>
            {t.tarifs.titleC}
          </SectionTitle>
          <p style={{
            fontFamily: SITE_TYPE.sans,
            fontSize: 14.5,
            lineHeight: 1.6,
            color: SITE_PALETTE.fg,
            opacity: 0.7,
            marginTop: 32,
            maxWidth: 360,
          }}>
            {t.tarifs.intro}
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {rows.map((r, i) => (
            <div key={r.name} style={{
              padding: '48px 0',
              borderTop: `1px solid ${SITE_PALETTE.hairline}`,
              borderBottom: i === rows.length - 1 ? `1px solid ${SITE_PALETTE.hairline}` : 'none',
              display: 'grid',
              gridTemplateColumns: '1.3fr 0.7fr 0.7fr',
              gap: 24,
              alignItems: 'baseline',
            }}>
              <div>
                <SectionTitle size={36}>{r.name}</SectionTitle>
                <p style={{
                  fontFamily: SITE_TYPE.serif,
                  fontStyle: 'italic',
                  fontSize: 17,
                  color: SITE_PALETTE.fg,
                  opacity: 0.7,
                  marginTop: 12,
                  marginBottom: 0,
                  maxWidth: 360,
                }}>{r.note}</p>
              </div>
              <div style={{
                fontFamily: SITE_TYPE.sans,
                fontSize: 13,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: SITE_PALETTE.fg,
                opacity: 0.7,
              }}>{r.duration}</div>
              <div style={{
                fontFamily: SITE_TYPE.serif,
                fontWeight: 500,
                fontSize: 40,
                color: SITE_PALETTE.accent,
                textAlign: 'right',
              }}>{r.price}</div>
            </div>
          ))}

          <div style={{
            marginTop: 40,
            display: 'flex',
            alignItems: 'center',
            gap: 24,
          }}>
            <SiteButton variant="primary" size="lg" href={whatsappHref(lang)} icon={<IconArrow size={14} color={SITE_PALETTE.cream} />}>
              {t.tarifs.bookCta}
            </SiteButton>
            <div style={{
              fontFamily: SITE_TYPE.sans,
              fontSize: 12.5,
              color: SITE_PALETTE.fg,
              opacity: 0.6,
            }}>
              {t.tarifs.replyNote}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// TÉMOIGNAGES — placeholders, composed in editorial 3-column layout
// ---------------------------------------------------------------------------
function TemoignagesSection() {
  const { t } = useLang();
  const quotes = [
    {
      quote: t.temoignages.elodieQuote,
      author: 'Élodie El Kouhi',
      loc: '★★★★★ · Google',
    },
    {
      quote: t.temoignages.placeholderQuote,
      author: t.temoignages.placeholderAuthor,
      loc: t.temoignages.placeholderLoc,
    },
    {
      quote: t.temoignages.lekshailee,
      author: 'Lekshailee Elliah',
      loc: '★★★★★ · Google',
    },
  ];

  return (
    <section data-screen-label="05 Témoignages" id="temoignages" style={{
      position: 'relative',
      width: '100%',
      background: SITE_PALETTE.accent,
      color: SITE_PALETTE.cream,
      padding: `140px ${SITE_PAD_X}px 140px`,
      overflow: 'hidden',
    }}>
      <svg width="100%" height="100%" viewBox={`0 0 ${SITE_W} 800`}
        style={{ position: 'absolute', inset: 0, opacity: 1 }}
        preserveAspectRatio="xMidYMid slice">
        <FlowerOfLife
          cx={SITE_W * 0.18} cy={400}
          r={130}
          stroke={SITE_PALETTE.cream}
          opacity={0.09}
          sw={0.8}
        />
      </svg>

      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ textAlign: 'center', marginBottom: 88 }}>
          <Eyebrow color={SITE_PALETTE.cream} style={{ opacity: 0.85, marginBottom: 28 }}>
            {t.temoignages.eyebrow}
          </Eyebrow>
          <SectionTitle size={64} color={SITE_PALETTE.cream} align="center">
            {t.temoignages.titleA} <span style={{ fontStyle: 'italic' }}>{t.temoignages.titleAItalic}</span><br/>
            {t.temoignages.titleB}
          </SectionTitle>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 48,
        }}>
          {quotes.map((q, i) => (
            <div key={i} style={{
              padding: '48px 36px',
              borderLeft: `1px solid ${SITE_PALETTE.cream}33`,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              gap: 36,
              minHeight: 320,
            }}>
              <div style={{
                fontFamily: SITE_TYPE.serif,
                fontStyle: 'italic',
                fontSize: 24,
                lineHeight: 1.45,
                color: SITE_PALETTE.cream,
                opacity: 0.95,
                fontWeight: 400,
              }}>
                « {q.quote} »
              </div>
              <div>
                <Hairline width={28} color={SITE_PALETTE.cream} opacity={0.5} style={{ marginBottom: 14 }} />
                <div style={{
                  fontFamily: SITE_TYPE.sans,
                  fontSize: 12,
                  letterSpacing: '0.22em',
                  textTransform: 'uppercase',
                  color: SITE_PALETTE.cream,
                  opacity: 0.75,
                  fontWeight: 500,
                }}>
                  {q.author}<br/><span style={{ whiteSpace: 'nowrap' }}>{q.loc}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// CONTACT — full-width contact block, info-dense
// ---------------------------------------------------------------------------
function ContactSection() {
  const { lang, t } = useLang();
  return (
    <section data-screen-label="06 Contact" id="contact" style={{
      position: 'relative',
      width: '100%',
      background: SITE_PALETTE.cream,
      color: SITE_PALETTE.fg,
      padding: `140px ${SITE_PAD_X}px 120px`,
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1.2fr',
        gap: 96,
        alignItems: 'start',
      }}>
        <div>
          <Eyebrow style={{ marginBottom: 28 }}>{t.contact.eyebrow}</Eyebrow>
          <SectionTitle size={72} style={{ marginBottom: 40 }}>
            {t.contact.titleA}<br/>
            <span style={{ fontStyle: 'italic' }}>{t.contact.titleBItalic}</span>
          </SectionTitle>
          <p style={{
            fontFamily: SITE_TYPE.sans,
            fontSize: 17,
            lineHeight: 1.65,
            color: SITE_PALETTE.fg,
            opacity: 0.85,
            margin: 0,
            maxWidth: 440,
          }}>
            {t.contact.intro}
          </p>
          <div style={{ marginTop: 40, display: 'flex', gap: 16 }}>
            <SiteButton variant="primary" size="lg" href={whatsappHref(lang)} icon={<IconWhatsapp size={14} color={SITE_PALETTE.cream} />}>
              {t.contact.labelWhatsapp}
            </SiteButton>
            <SiteButton variant="primary" size="lg" href={emailHref(lang)} icon={<IconMail size={14} color={SITE_PALETTE.cream} />}>
              {t.contact.labelEmail}
            </SiteButton>
          </div>
        </div>

        <div style={{
          display: 'flex', flexDirection: 'column',
          borderTop: `1px solid ${SITE_PALETTE.hairline}`,
        }}>
          {[
            { icon: <IconWhatsapp size={20} />, label: t.contact.labelWhatsapp, value: SITE_CONTACT.whatsappNumber, href: whatsappHref(lang) },
            { icon: <IconMail size={20} />,     label: t.contact.labelEmail,    value: SITE_CONTACT.email,           href: emailHref(lang) },
            { icon: <IconClock size={20} />,    label: t.contact.labelHours,    value: t.contact.hours },
            { icon: <IconPin size={20} />,      label: t.contact.labelLocation, value: t.contact.locationValue,      href: SITE_CONTACT.mapsDirections },
          ].map((row) => {
            const isExternal = row.href && /^https?:/i.test(row.href);
            const Tag = row.href ? 'a' : 'div';
            return (
            <Tag key={row.label}
              {...(row.href ? {
                href: row.href,
                target: isExternal ? '_blank' : undefined,
                rel: isExternal ? 'noopener noreferrer' : undefined,
              } : {})}
              style={{
                padding: '24px 0',
                borderBottom: `1px solid ${SITE_PALETTE.hairline}`,
                display: 'grid',
                gridTemplateColumns: '32px 140px 1fr',
                gap: 20,
                alignItems: 'center',
                textDecoration: 'none',
                color: 'inherit',
                cursor: row.href ? 'pointer' : 'default',
              }}>
              <div>{row.icon}</div>
              <div style={{
                fontFamily: SITE_TYPE.sans,
                fontSize: 11,
                letterSpacing: '0.28em',
                textTransform: 'uppercase',
                color: SITE_PALETTE.accent,
                fontWeight: 600,
                opacity: 0.9,
              }}>{row.label}</div>
              <div style={{
                fontFamily: SITE_TYPE.serif,
                fontSize: 24,
                color: SITE_PALETTE.fg,
              }}>{row.value}</div>
            </Tag>
          );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// LIEU — dedicated section with embedded Google Map
// ---------------------------------------------------------------------------
function LieuSection() {
  const { t, lang } = useLang();
  const mapSrc = `https://maps.google.com/maps?q=Soins+Energetic+Healing+Thomas+Gabry+Grand+Baie&hl=${lang}&output=embed`;

  return (
    <section data-screen-label="07 Lieu" id="lieu" style={{
      position: 'relative',
      width: '100%',
      background: SITE_PALETTE.creamAlt,
      color: SITE_PALETTE.fg,
      padding: `140px ${SITE_PAD_X}px 140px`,
      overflow: 'hidden',
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1.4fr',
        gap: 72,
        alignItems: 'start',
      }}>
        <div style={{ paddingTop: 12 }}>
          <Eyebrow style={{ marginBottom: 28 }}>{t.lieu.eyebrow}</Eyebrow>
          <SectionTitle size={64} style={{ marginBottom: 40 }}>
            {t.lieu.titleA}<br/>
            <span style={{ fontStyle: 'italic' }}>{t.lieu.titleBItalic}</span>
          </SectionTitle>

          <p style={{
            fontFamily: SITE_TYPE.sans,
            fontSize: 16.5,
            lineHeight: 1.65,
            color: SITE_PALETTE.fg,
            opacity: 0.82,
            margin: 0,
            marginBottom: 40,
            maxWidth: 440,
          }}>
            {t.lieu.intro}
          </p>

          <div style={{
            display: 'flex', flexDirection: 'column',
            borderTop: `1px solid ${SITE_PALETTE.hairline}`,
            marginBottom: 32,
          }}>
            {[
              { label: t.lieu.labelAddress,  value: t.lieu.addressValue },
              { label: t.lieu.labelRoad,     value: t.lieu.roadValue },
              { label: t.lieu.labelPlusCode, value: t.lieu.plusCodeValue },
            ].map(row => (
              <div key={row.label} style={{
                padding: '18px 0',
                borderBottom: `1px solid ${SITE_PALETTE.hairline}`,
                display: 'grid',
                gridTemplateColumns: '120px 1fr',
                gap: 16,
                alignItems: 'baseline',
              }}>
                <div style={{
                  fontFamily: SITE_TYPE.sans,
                  fontSize: 10,
                  letterSpacing: '0.28em',
                  textTransform: 'uppercase',
                  color: SITE_PALETTE.accent,
                  fontWeight: 600,
                  opacity: 0.9,
                }}>{row.label}</div>
                <div style={{
                  fontFamily: SITE_TYPE.serif,
                  fontSize: 19,
                  color: SITE_PALETTE.fg,
                }}>{row.value}</div>
              </div>
            ))}
          </div>

          <SiteButton variant="primary" size="lg" href={SITE_CONTACT.mapsDirections} icon={<IconArrow size={14} color={SITE_PALETTE.cream} />}>
            {t.lieu.cta}
          </SiteButton>
        </div>

        {/* Real Google Maps embed */}
        <div style={{
          position: 'relative',
          width: '100%',
          height: 560,
          background: SITE_PALETTE.cream,
          border: `1px solid ${SITE_PALETTE.hairline}`,
          overflow: 'hidden',
        }}>
          <iframe
            src={mapSrc}
            title={t.lieu.mapTitle}
            width="100%" height="100%"
            style={{ border: 0, display: 'block', filter: 'sepia(8%) saturate(85%)' }}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen
          />
          {/* Floating tag */}
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// FOOTER — small, includes legal note
// ---------------------------------------------------------------------------
function SiteFooter() {
  const { t } = useLang();
  return (
    <footer data-screen-label="07 Footer" style={{
      position: 'relative',
      width: '100%',
      background: SITE_PALETTE.fg,
      color: SITE_PALETTE.cream,
      padding: `64px ${SITE_PAD_X}px 40px`,
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1.5fr 1fr 1fr',
        gap: 56,
        paddingBottom: 48,
        borderBottom: `1px solid ${SITE_PALETTE.cream}22`,
      }}>
        <div>
          <div style={{
            fontFamily: SITE_TYPE.sans,
            fontSize: 11,
            letterSpacing: '0.42em',
            color: SITE_PALETTE.cream,
            opacity: 0.85,
            fontWeight: 500,
            marginBottom: 16,
          }}>
            {t.nav.brand.replace(' ', ' ')}
          </div>
          <div style={{
            fontFamily: SITE_TYPE.serif,
            fontStyle: 'italic',
            fontSize: 22,
            color: SITE_PALETTE.cream,
            opacity: 0.8,
            lineHeight: 1.4,
            maxWidth: 420,
          }}>
            {t.footer.tagline}
          </div>
        </div>
        <div>
          <div style={{
            fontFamily: SITE_TYPE.sans, fontSize: 10, letterSpacing: '0.28em',
            textTransform: 'uppercase', color: SITE_PALETTE.cream, opacity: 0.5,
            marginBottom: 16, fontWeight: 600,
          }}>{t.footer.navHeader}</div>
          {[t.nav.about, t.nav.soins, t.nav.tarifs, t.nav.temoignages, t.nav.contact].map(l => (
            <div key={l} style={{
              fontFamily: SITE_TYPE.sans, fontSize: 14,
              color: SITE_PALETTE.cream, opacity: 0.85,
              marginBottom: 8,
            }}>{l}</div>
          ))}
        </div>
        <div>
          <div style={{
            fontFamily: SITE_TYPE.sans, fontSize: 10, letterSpacing: '0.28em',
            textTransform: 'uppercase', color: SITE_PALETTE.cream, opacity: 0.5,
            marginBottom: 16, fontWeight: 600,
          }}>{t.footer.contactHeader}</div>
          <div style={{
            fontFamily: SITE_TYPE.sans, fontSize: 14,
            color: SITE_PALETTE.cream, opacity: 0.85, marginBottom: 6,
          }}>{SITE_CONTACT.whatsappNumber}</div>
          <div style={{
            fontFamily: SITE_TYPE.sans, fontSize: 14,
            color: SITE_PALETTE.cream, opacity: 0.85, marginBottom: 6,
          }}>{SITE_CONTACT.email}</div>
          <div style={{
            fontFamily: SITE_TYPE.sans, fontSize: 14,
            color: SITE_PALETTE.cream, opacity: 0.85,
          }}>{t.contact.locationValue}</div>
        </div>
      </div>

      <div style={{
        paddingTop: 32,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        gap: 48,
      }}>
        <div style={{
          fontFamily: SITE_TYPE.sans,
          fontSize: 11.5,
          lineHeight: 1.6,
          color: SITE_PALETTE.cream,
          opacity: 0.55,
          maxWidth: 720,
        }}>
          {t.footer.disclaimer}
        </div>
        <div style={{
          fontFamily: SITE_TYPE.sans,
          fontSize: 11,
          letterSpacing: '0.22em',
          color: SITE_PALETTE.cream,
          opacity: 0.5,
          textTransform: 'uppercase',
          whiteSpace: 'nowrap',
        }}>
          {t.footer.copyright}
        </div>
      </div>
    </footer>
  );
}

// ---------------------------------------------------------------------------
// FULL DESKTOP PAGE
// ---------------------------------------------------------------------------
function DesktopSite() {
  return (
    <div style={{
      width: SITE_W,
      background: SITE_PALETTE.cream,
      fontFamily: SITE_TYPE.sans,
      color: SITE_PALETTE.fg,
    }}>
      <HeroSection />
      <AboutSection />
      <SoinsSection />
      <TarifsSection />
      <TemoignagesSection />
      <ContactSection />
      <LieuSection />
      <SiteFooter />
    </div>
  );
}

Object.assign(window, {
  TarifsSection, TemoignagesSection, ContactSection, LieuSection, SiteFooter, DesktopSite,
});