// Mobile (375 wide) version of the site, condensed.

const MOBILE_W = 390;
const MOBILE_PAD = 24;

function MobileNav() {
  const { t } = useLang();
  const [isOpen, setIsOpen] = React.useState(false);

  const links = [
    { label: t.nav.about,       href: '#m-a-propos' },
    { label: t.nav.soins,       href: '#m-soins' },
    { label: t.nav.tarifs,      href: '#m-tarifs' },
    { label: t.nav.temoignages, href: '#m-temoignages' },
    { label: t.nav.contact,     href: '#m-contact' },
    { label: t.nav.lieu,        href: '#m-lieu' },
  ];

  React.useEffect(() => {
    document.body.style.overflow = isOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);

  return (
    <React.Fragment>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        padding: `20px ${MOBILE_PAD}px`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        zIndex: 5,
      }}>
        <div style={{
          fontFamily: SITE_TYPE.sans,
          fontSize: 9.5,
          letterSpacing: '0.36em',
          color: SITE_PALETTE.cream,
          opacity: 0.9,
          fontWeight: 500,
        }}>{t.nav.brand.replace(' ', ' ')}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <LangSwitch onCream={false} size="sm" />
          <button
            onClick={() => setIsOpen(true)}
            aria-label={t.nav.ariaOpen}
            style={{
              background: 'transparent',
              border: 'none',
              padding: 8,
              margin: -8,
              cursor: 'pointer',
              display: 'flex', flexDirection: 'column', gap: 4,
            }}>
            <div style={{ width: 22, height: 1, background: SITE_PALETTE.cream, opacity: 0.85 }} />
            <div style={{ width: 22, height: 1, background: SITE_PALETTE.cream, opacity: 0.85 }} />
          </button>
        </div>
      </div>

      {isOpen && (
        <div
          onClick={() => setIsOpen(false)}
          style={{
            position: 'fixed', inset: 0,
            background: SITE_PALETTE.accent,
            color: SITE_PALETTE.cream,
            zIndex: 100,
            padding: `${MOBILE_PAD}px ${MOBILE_PAD}px`,
            display: 'flex', flexDirection: 'column',
          }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '20px 0',
            marginBottom: 32,
          }}>
            <div style={{
              fontFamily: SITE_TYPE.sans,
              fontSize: 9.5,
              letterSpacing: '0.36em',
              color: SITE_PALETTE.cream,
              opacity: 0.9,
              fontWeight: 500,
            }}>{t.nav.brand.replace(' ', ' ')}</div>
            <button
              onClick={(e) => { e.stopPropagation(); setIsOpen(false); }}
              aria-label={t.nav.ariaClose}
              style={{
                background: 'transparent',
                border: 'none',
                padding: 8,
                margin: -8,
                cursor: 'pointer',
                color: SITE_PALETTE.cream,
                fontFamily: SITE_TYPE.serif,
                fontSize: 32,
                lineHeight: 1,
                opacity: 0.85,
              }}>×</button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column' }}>
            {links.map(l => (
              <a
                key={l.href}
                href={l.href}
                onClick={() => setIsOpen(false)}
                style={{
                  fontFamily: SITE_TYPE.serif,
                  fontSize: 32,
                  color: SITE_PALETTE.cream,
                  textDecoration: 'none',
                  padding: '20px 0',
                  borderBottom: `1px solid ${SITE_PALETTE.cream}22`,
                }}>{l.label}</a>
            ))}
          </nav>
        </div>
      )}
    </React.Fragment>
  );
}

function MobileHero() {
  const { lang, t } = useLang();
  const H = 720;
  return (
    <section style={{
      position: 'relative', width: '100%', height: H,
      background: SITE_PALETTE.accent,
      color: SITE_PALETTE.cream,
      overflow: 'hidden',
    }}>
      <svg width="100%" height="100%" viewBox={`0 0 ${MOBILE_W} ${H}`}
        style={{ position: 'absolute', inset: 0 }}
        preserveAspectRatio="xMidYMid slice">
        <FlowerOfLife
          cx={MOBILE_W * 0.85} cy={H * 0.55}
          r={90}
          stroke={SITE_PALETTE.cream}
          opacity={0.13} sw={0.8}
        />
      </svg>

      <MobileNav />

      <div style={{
        position: 'absolute', inset: 0,
        padding: `100px ${MOBILE_PAD}px 40px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div>
          <Eyebrow color={SITE_PALETTE.cream} style={{ fontSize: 9.5, letterSpacing: '0.32em', opacity: 0.85, marginBottom: 28 }}>
            {t.hero.eyebrow}
          </Eyebrow>
          <h1 style={{
            fontFamily: SITE_TYPE.serif,
            fontWeight: 400,
            fontSize: 76,
            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>

        <div>
          <div style={{
            fontFamily: SITE_TYPE.serif,
            fontStyle: 'italic',
            fontSize: 17,
            lineHeight: 1.45,
            color: SITE_PALETTE.cream,
            opacity: 0.92,
            marginBottom: 32,
          }}>
            {t.hero.taglineMobileL1}<br/>
            {t.hero.taglineMobileL2}<br/>
            {t.hero.taglineMobileL3}
          </div>
          <SiteButton variant="creamFill" size="md" href={whatsappHref(lang)} icon={<IconArrow size={12} color={SITE_PALETTE.accent} />}
            style={{ width: '100%', justifyContent: 'center' }}>
            {t.hero.cta}
          </SiteButton>
          <div style={{
            marginTop: 14, textAlign: 'center',
            fontFamily: SITE_TYPE.sans, fontSize: 10, letterSpacing: '0.28em',
            color: SITE_PALETTE.cream, opacity: 0.6, textTransform: 'uppercase',
          }}>{t.hero.hours}</div>
        </div>
      </div>
    </section>
  );
}

function MobileAbout() {
  const { t } = useLang();
  return (
    <section id="m-a-propos" style={{
      background: SITE_PALETTE.cream,
      padding: `64px ${MOBILE_PAD}px`,
    }}>
      <Eyebrow style={{ fontSize: 10, marginBottom: 20 }}>{t.about.eyebrow}</Eyebrow>
      <SectionTitle size={36} style={{ marginBottom: 28 }}>
        {t.about.mobileTitleA}<br/>
        <span style={{ fontStyle: 'italic' }}>{t.about.mobileTitleBItalic}</span>
      </SectionTitle>

      <div style={{
        width: '100%', height: 380,
        backgroundImage: `url(assets/thomas-portrait.jpg)`,
        backgroundSize: 'cover', backgroundPosition: '38% 30%',
        marginBottom: 28,
      }} />

      <p style={{
        fontFamily: SITE_TYPE.sans, fontSize: 14.5, lineHeight: 1.65,
        color: SITE_PALETTE.fg, opacity: 0.85, margin: 0, marginBottom: 16,
      }}>
        {t.about.p1}
      </p>
      <p style={{
        fontFamily: SITE_TYPE.sans, fontSize: 14.5, lineHeight: 1.65,
        color: SITE_PALETTE.fg, opacity: 0.85, margin: 0,
      }}>
        {t.about.mobileP2}
      </p>
    </section>
  );
}

function MobileSoins() {
  const { t } = useLang();
  const pillars = [
    { icon: <IconHand size={22} />,  title: t.soins.pillarBodyTitle,     desc: t.soins.pillarBodyMobile },
    { icon: <IconHeart size={22} />, title: t.soins.pillarEmotionsTitle, desc: t.soins.pillarEmotionsMobile },
    { icon: <IconSun size={22} />,   title: t.soins.pillarMindTitle,     desc: t.soins.pillarMindMobile },
  ];
  return (
    <section id="m-soins" style={{
      background: SITE_PALETTE.creamAlt,
      padding: `64px ${MOBILE_PAD}px`,
    }}>
      <Eyebrow style={{ fontSize: 10, marginBottom: 20 }}>{t.soins.eyebrow}</Eyebrow>
      <SectionTitle size={42} style={{ marginBottom: 32 }}>
        {t.soins.titleA}<br/>
        <span style={{ fontStyle: 'italic' }}>{t.soins.titleBItalic}</span><br/>
        {t.soins.titleC}
      </SectionTitle>

      <p style={{
        fontFamily: SITE_TYPE.sans, fontSize: 14, lineHeight: 1.6,
        color: SITE_PALETTE.fg, opacity: 0.82, margin: 0, marginBottom: 32,
      }}>
        {t.soins.mobileIntro}
      </p>

      <div style={{
        display: 'flex', flexDirection: 'column',
        borderTop: `1px solid ${SITE_PALETTE.hairline}`,
      }}>
        {pillars.map(p => (
          <div key={p.title} style={{
            padding: '20px 0',
            borderBottom: `1px solid ${SITE_PALETTE.hairline}`,
            display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16, alignItems: 'start',
          }}>
            <div style={{ paddingTop: 4 }}>{p.icon}</div>
            <div>
              <SectionTitle size={22} italic style={{ marginBottom: 4 }}>{p.title}</SectionTitle>
              <div style={{
                fontFamily: SITE_TYPE.sans, fontSize: 13.5, lineHeight: 1.55,
                color: SITE_PALETTE.fg, opacity: 0.78,
              }}>{p.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function MobileTarifs() {
  const { t } = useLang();
  const rows = [
    { name: t.tarifs.row1Name, dur: '2h',         price: 'Rs 4 500' },
    { name: t.tarifs.row2Name, dur: '1h30 – 2h',  price: 'Rs 3 500' },
  ];
  return (
    <section id="m-tarifs" style={{
      background: SITE_PALETTE.cream,
      padding: `64px ${MOBILE_PAD}px`,
    }}>
      <Eyebrow style={{ fontSize: 10, marginBottom: 20 }}>{t.tarifs.eyebrow}</Eyebrow>
      <SectionTitle size={42} style={{ marginBottom: 32 }}>
        {t.tarifs.mobileTitleA}<br/>
        <span style={{ fontStyle: 'italic' }}>{t.tarifs.mobileTitleBItalic}</span>
      </SectionTitle>

      <div style={{
        display: 'flex', flexDirection: 'column',
        borderTop: `1px solid ${SITE_PALETTE.hairline}`,
      }}>
        {rows.map(r => (
          <div key={r.name} style={{
            padding: '24px 0',
            borderBottom: `1px solid ${SITE_PALETTE.hairline}`,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
              <SectionTitle size={22}>{r.name}</SectionTitle>
              <div style={{
                fontFamily: SITE_TYPE.serif, fontWeight: 500, fontSize: 24,
                color: SITE_PALETTE.accent, whiteSpace: 'nowrap',
              }}>{r.price}</div>
            </div>
            <div style={{
              fontFamily: SITE_TYPE.sans, fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', color: SITE_PALETTE.fg, opacity: 0.6,
              marginTop: 6,
            }}>{r.dur}</div>
          </div>
        ))}
      </div>

      <p style={{
        fontFamily: SITE_TYPE.serif, fontStyle: 'italic',
        fontSize: 14, lineHeight: 1.5,
        color: SITE_PALETTE.fg, opacity: 0.7, margin: '24px 0 0 0',
      }}>
        {t.tarifs.mobileIntro}
      </p>
    </section>
  );
}

function MobileTemoignages() {
  const { t } = useLang();
  const quotes = [
    {
      quote: t.temoignages.elodieMobile,
      author: 'Élodie El Kouhi',
      loc: '★★★★★ · Google',
    },
    {
      quote: t.temoignages.placeholderQuoteMobile,
      author: t.temoignages.placeholderAuthor,
      loc: t.temoignages.placeholderLoc,
    },
  ];
  return (
    <section id="m-temoignages" style={{
      position: 'relative',
      background: SITE_PALETTE.accent,
      color: SITE_PALETTE.cream,
      padding: `64px ${MOBILE_PAD}px`,
      overflow: 'hidden',
    }}>
      <svg width="320" height="320" viewBox="0 0 320 320"
        style={{ position: 'absolute', right: -60, top: 40, opacity: 1 }}>
        <FlowerOfLife cx={160} cy={160} r={70} stroke={SITE_PALETTE.cream} opacity={0.09} sw={0.8} />
      </svg>

      <div style={{ position: 'relative', zIndex: 1 }}>
        <Eyebrow color={SITE_PALETTE.cream} style={{ fontSize: 10, opacity: 0.85, marginBottom: 20 }}>
          {t.temoignages.eyebrow}
        </Eyebrow>
        <SectionTitle size={36} color={SITE_PALETTE.cream} style={{ marginBottom: 36 }}>
          {t.temoignages.titleA} <span style={{ fontStyle: 'italic' }}>{t.temoignages.titleAItalic}</span><br/>
          {t.temoignages.mobileTitleB}
        </SectionTitle>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          {quotes.map((q, i) => (
            <div key={i} style={{
              paddingLeft: 20,
              borderLeft: `1px solid ${SITE_PALETTE.cream}33`,
            }}>
              <div style={{
                fontFamily: SITE_TYPE.serif, fontStyle: 'italic',
                fontSize: 18, lineHeight: 1.45, opacity: 0.95, marginBottom: 16,
              }}>« {q.quote} »</div>
              <div style={{
                fontFamily: SITE_TYPE.sans, fontSize: 10,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                opacity: 0.75, fontWeight: 500,
              }}>{q.author}<br/><span style={{ whiteSpace: 'nowrap' }}>{q.loc}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MobileContact() {
  const { lang, t } = useLang();
  return (
    <section id="m-contact" style={{
      background: SITE_PALETTE.cream,
      padding: `64px ${MOBILE_PAD}px`,
    }}>
      <Eyebrow style={{ fontSize: 10, marginBottom: 20 }}>{t.contact.eyebrow}</Eyebrow>
      <SectionTitle size={42} style={{ marginBottom: 28 }}>
        {t.contact.titleA}<br/>
        <span style={{ fontStyle: 'italic' }}>{t.contact.titleBItalic}</span>
      </SectionTitle>

      <p style={{
        fontFamily: SITE_TYPE.sans, fontSize: 14.5, lineHeight: 1.6,
        color: SITE_PALETTE.fg, opacity: 0.85, margin: '0 0 32px 0',
      }}>
        {t.contact.mobileIntro}
      </p>

      <div style={{
        display: 'flex', flexDirection: 'column',
        borderTop: `1px solid ${SITE_PALETTE.hairline}`,
        marginBottom: 28,
      }}>
        {[
          { icon: <IconWhatsapp size={16} />, label: t.contact.labelWhatsapp, value: SITE_CONTACT.whatsappNumber, href: whatsappHref(lang) },
          { icon: <IconMail size={16} />,     label: t.contact.labelEmail,    value: SITE_CONTACT.email,           href: emailHref(lang) },
          { icon: <IconClock size={16} />,    label: t.contact.labelHours,    value: t.contact.hours },
          { icon: <IconPin size={16} />,      label: t.contact.labelLocation, value: t.contact.locationValueMobile, 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: '14px 0',
              borderBottom: `1px solid ${SITE_PALETTE.hairline}`,
              display: 'grid', gridTemplateColumns: '24px 80px 1fr', gap: 12, alignItems: 'center',
              textDecoration: 'none', color: 'inherit',
            }}>
            <div>{row.icon}</div>
            <div style={{
              fontFamily: SITE_TYPE.sans, fontSize: 9.5, letterSpacing: '0.24em',
              textTransform: 'uppercase', color: SITE_PALETTE.accent,
              fontWeight: 600, opacity: 0.9,
            }}>{row.label}</div>
            <div style={{
              fontFamily: SITE_TYPE.serif, fontSize: 16,
              color: SITE_PALETTE.fg,
            }}>{row.value}</div>
          </Tag>
        );
        })}
      </div>

      <SiteButton variant="primary" size="md" href={whatsappHref(lang)} icon={<IconWhatsapp size={12} color={SITE_PALETTE.cream} />}
        style={{ width: '100%', justifyContent: 'center' }}>
        {t.contact.labelWhatsapp}
      </SiteButton>
    </section>
  );
}

function MobileLieu() {
  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 id="m-lieu" style={{
      background: SITE_PALETTE.creamAlt,
      padding: `64px ${MOBILE_PAD}px`,
    }}>
      <Eyebrow style={{ fontSize: 10, marginBottom: 20 }}>{t.lieu.eyebrow}</Eyebrow>
      <SectionTitle size={36} style={{ marginBottom: 24 }}>
        {t.lieu.titleA}<br/>
        <span style={{ fontStyle: 'italic' }}>{t.lieu.titleBItalic}</span>
      </SectionTitle>

      <p style={{
        fontFamily: SITE_TYPE.sans, fontSize: 14.5, lineHeight: 1.6,
        color: SITE_PALETTE.fg, opacity: 0.82, margin: '0 0 24px 0',
      }}>
        {t.lieu.mobileIntro}
      </p>

      <div style={{
        position: 'relative', width: '100%', height: 280,
        background: SITE_PALETTE.cream,
        border: `1px solid ${SITE_PALETTE.hairline}`,
        overflow: 'hidden', marginBottom: 24,
      }}>
        <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
        />
      </div>

      <div style={{
        display: 'flex', flexDirection: 'column',
        borderTop: `1px solid ${SITE_PALETTE.hairline}`,
        marginBottom: 24,
      }}>
        {[
          { label: t.lieu.labelAddress,  value: t.lieu.addressValueMobile },
          { label: t.lieu.labelRoad,     value: t.lieu.roadValueMobile },
          { label: t.lieu.labelPlusCode, value: t.lieu.plusCodeValueMobile },
        ].map(row => (
          <div key={row.label} style={{
            padding: '14px 0',
            borderBottom: `1px solid ${SITE_PALETTE.hairline}`,
            display: 'grid', gridTemplateColumns: '90px 1fr', gap: 12, alignItems: 'baseline',
          }}>
            <div style={{
              fontFamily: SITE_TYPE.sans, fontSize: 9.5, letterSpacing: '0.24em',
              textTransform: 'uppercase', color: SITE_PALETTE.accent,
              fontWeight: 600, opacity: 0.9,
            }}>{row.label}</div>
            <div style={{
              fontFamily: SITE_TYPE.serif, fontSize: 15,
              color: SITE_PALETTE.fg,
            }}>{row.value}</div>
          </div>
        ))}
      </div>

      <SiteButton variant="primary" size="md" href={SITE_CONTACT.mapsDirections} icon={<IconArrow size={12} color={SITE_PALETTE.cream} />}
        style={{ width: '100%', justifyContent: 'center' }}>
        {t.lieu.cta}
      </SiteButton>
    </section>
  );
}

function MobileFooter() {
  const { t } = useLang();
  return (
    <footer style={{
      background: SITE_PALETTE.fg,
      color: SITE_PALETTE.cream,
      padding: `40px ${MOBILE_PAD}px 28px`,
    }}>
      <div style={{
        fontFamily: SITE_TYPE.sans, fontSize: 9.5, letterSpacing: '0.36em',
        opacity: 0.85, fontWeight: 500, marginBottom: 12,
      }}>{t.nav.brand.replace(' ', ' ')}</div>
      <div style={{
        fontFamily: SITE_TYPE.serif, fontStyle: 'italic',
        fontSize: 16, opacity: 0.8, lineHeight: 1.4, marginBottom: 28,
      }}>{t.footer.tagline}</div>

      <div style={{
        fontFamily: SITE_TYPE.sans, fontSize: 11, lineHeight: 1.6,
        opacity: 0.55, paddingTop: 24,
        borderTop: `1px solid ${SITE_PALETTE.cream}22`,
        marginBottom: 16,
      }}>
        {t.footer.disclaimerMobile}
      </div>
      <div style={{
        fontFamily: SITE_TYPE.sans, fontSize: 9.5, letterSpacing: '0.22em',
        opacity: 0.5, textTransform: 'uppercase',
      }}>{t.footer.copyright}</div>
    </footer>
  );
}

function MobileSite() {
  return (
    <div style={{
      width: '100%',
      maxWidth: 600,
      margin: '0 auto',
      background: SITE_PALETTE.cream,
      fontFamily: SITE_TYPE.sans,
      color: SITE_PALETTE.fg,
      overflow: 'hidden',
    }}>
      <MobileHero />
      <MobileAbout />
      <MobileSoins />
      <MobileTarifs />
      <MobileTemoignages />
      <MobileContact />
      <MobileLieu />
      <MobileFooter />
    </div>
  );
}

Object.assign(window, { MOBILE_W, MobileSite, MobileLieu });