/* I Know My Skin — Home page */

const Hero = () => {
  const [lang] = useLang();
  const h = I18N[lang].home;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--deep-teal)', marginTop: 'calc(-1 * var(--header-h))' }}>
      <SkinMap size={760} color="light" opacity={0.16} style={{ position: 'absolute', right: -150, top: -120 }} />
      <SkinMap size={300} color="light" opacity={0.1} style={{ position: 'absolute', left: -70, bottom: -90 }} />
      <div className="wrap hero-grid" style={{ paddingTop: 168, paddingBottom: 104, display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal><Eyebrow light>{h.heroEyebrow}</Eyebrow></Reveal>
          <Reveal delay={70}><h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(33px, 8.6vw, 60px)', lineHeight: 1.05, letterSpacing: '-0.01em', color: 'var(--off-white)', margin: '0 0 22px', textWrap: 'balance' }}>{h.heroTitleA}<br />{h.heroTitleB}</h1></Reveal>
          <Reveal delay={140}><p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 4.6vw, 19px)', lineHeight: 1.65, color: 'var(--teal-300)', maxWidth: 480, margin: '0 0 34px' }}>{h.heroLead}</p></Reveal>
          <Reveal delay={210}><div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="light" as="a" href="book.html">{h.heroBook}</Button>
            <Button variant="ghostLight" as="a" href="#method">{h.heroHow}</Button>
          </div></Reveal>
        </div>
        <Reveal delay={160}><HeroPortrait /></Reveal>
      </div>
    </section>
  );
};

const HeroPortrait = () => {
  const [lang] = useLang();
  return (
    <div style={{ position: 'relative', aspectRatio: '1/1', borderRadius: 24, overflow: 'hidden', boxShadow: 'var(--shadow-lg)' }}>
      <img src="assets/hero-mirror.png" alt={I18N[lang].tagline} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'contrast(0.93) saturate(0.88) brightness(1.03)' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(155deg, rgba(242,221,217,0.22) 0%, rgba(242,221,217,0) 42%, rgba(197,135,154,0.12) 100%)', mixBlendMode: 'soft-light', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', inset: 0, boxShadow: 'inset 0 0 60px 8px rgba(242,221,217,0.28)', pointerEvents: 'none' }} />
    </div>
  );
};

const Method = () => {
  const [lang] = useLang();
  const h = I18N[lang].home;
  return (
    <section id="method" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="wrap" style={{ paddingTop: 96, paddingBottom: 96, position: 'relative' }}>
        <SkinMap size={420} color="teal" opacity={0.06} style={{ position: 'absolute', left: -130, top: 30 }} />
        <div style={{ marginBottom: 48, position: 'relative', maxWidth: 720 }}>
          <Reveal><Eyebrow>{h.methodEyebrow}</Eyebrow></Reveal>
          <Reveal delay={70}><h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(28px, 6.6vw, 40px)', color: 'var(--deep-teal)', margin: '0 0 16px', letterSpacing: '-0.01em', textWrap: 'balance' }}>{h.methodTitle}</h2></Reveal>
          <Reveal delay={130}><p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.6, color: 'var(--slate-teal)', margin: 0, maxWidth: 560 }}>{h.methodIntro}</p></Reveal>
        </div>
        <div className="method-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 16, alignItems: 'stretch' }}>
          {h.steps.map((s, i) => {
            const dark = i === 3;
            return (
              <Reveal key={i} delay={i * 80} style={{ height: '100%' }}>
                <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', borderRadius: 18, padding: 'clamp(22px, 5.5vw, 26px) clamp(20px, 5vw, 24px) clamp(26px, 6vw, 30px)',
                  background: dark ? 'var(--deep-teal)' : 'var(--bg-raised)', border: `1px solid ${dark ? 'var(--deep-teal)' : 'var(--line)'}`, boxShadow: dark ? 'var(--shadow-md)' : 'var(--shadow-sm)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 18 }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 34, lineHeight: 1, color: dark ? 'rgba(242,221,217,0.5)' : 'var(--blush-200)' }}>{'0' + (i + 1)}</span>
                    <span style={{ flex: 'none', fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '5px 11px', borderRadius: 999, background: dark ? 'rgba(255,255,255,0.12)' : 'var(--blush-100)', color: dark ? 'var(--blush)' : 'var(--rose-700)', whiteSpace: 'nowrap' }}>{s.time}</span>
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 21, lineHeight: 1.15, color: dark ? 'var(--off-white)' : 'var(--deep-teal)', margin: '0 0 12px', textWrap: 'balance' }}>{s.title}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: dark ? 'var(--teal-300)' : 'var(--fg3)', margin: 0 }}>{s.body}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const ServicesTeaser = () => {
  const [lang] = useLang();
  const h = I18N[lang].home;
  const items = I18N[lang].services.items;
  return (
    <section style={{ background: 'var(--bg-sunken)' }}>
      <div className="wrap" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 46, gap: 24, flexWrap: 'wrap' }}>
          <div>
            <Reveal><Eyebrow>{h.svcEyebrow}</Eyebrow></Reveal>
            <Reveal delay={60}><h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(28px, 6.6vw, 40px)', color: 'var(--deep-teal)', margin: 0 }}>{h.svcTitle}</h2></Reveal>
          </div>
          <Reveal delay={120}><p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--fg3)', maxWidth: 300, margin: 0, lineHeight: 1.6 }}>{h.svcIntro}</p></Reveal>
        </div>
        <div>
          {items.filter(s => s.id === 'initial').map((s, i) => (
            <Reveal key={s.id} delay={i * 90}><TeaserCard s={s} dark={true} /></Reveal>
          ))}
        </div>
        <Reveal delay={120}><div style={{ marginTop: 30 }}>
          <a href="services.html" style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--rose-700)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--rose-200)', paddingBottom: 3 }}>{h.svcViewAll} <Icon name="arrow-right" size={16} color="var(--rose-700)" /></a>
        </div></Reveal>
      </div>
    </section>
  );
};

const TeaserCard = ({ s, dark }) => {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: 'relative', overflow: 'hidden', borderRadius: 20, padding: 'clamp(26px, 6vw, 40px) clamp(22px, 6vw, 44px)', transition: 'transform 240ms var(--ease-soft), box-shadow 240ms', transform: h ? 'translateY(-4px)' : 'none',
        background: dark ? 'var(--deep-teal)' : 'var(--bg-raised)', border: dark ? '1px solid var(--deep-teal)' : '1px solid var(--line)', boxShadow: h ? 'var(--shadow-md)' : 'var(--shadow-xs)' }}>
      {dark && <SkinMap size={260} color="light" opacity={0.12} style={{ position: 'absolute', right: -50, bottom: -60 }} />}
      <div className="teaser-row" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <span style={{ display: 'inline-block', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 700, padding: '5px 12px', borderRadius: 999, marginBottom: 18, background: dark ? 'rgba(255,255,255,0.12)' : 'var(--blush-100)', color: dark ? 'var(--blush)' : 'var(--rose-700)' }}>{s.tag}</span>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(24px, 5.6vw, 30px)', margin: '0 0 8px', lineHeight: 1.12, color: dark ? 'var(--off-white)' : 'var(--deep-teal)' }}>{s.title}</h3>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, letterSpacing: '0.03em', color: dark ? 'var(--blush)' : 'var(--rose-700)' }}>{s.dur} · CHF {s.price}</div>
        </div>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.7, margin: 0, color: dark ? 'var(--teal-300)' : 'var(--fg3)' }}>{s.body}</p>
      </div>
    </div>
  );
};

const LocationSection = () => {
  const [lang] = useLang();
  const h = I18N[lang].home;
  return (
    <section id="location">
      <div className="wrap" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 56, alignItems: 'center' }}>
          <div>
            <Reveal><Eyebrow>{h.locEyebrow}</Eyebrow></Reveal>
            <Reveal delay={60}><h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(27px, 6.2vw, 38px)', color: 'var(--deep-teal)', margin: '0 0 20px', lineHeight: 1.12 }}>{h.locTitle}</h2></Reveal>
            <Reveal delay={120}><p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.7, color: 'var(--slate-teal)', margin: '0 0 22px', maxWidth: 440 }}>{h.locBody}</p></Reveal>
            <Reveal delay={180}><div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg3)' }}>
              <Icon name="map-pin" size={18} color="var(--rose-700)" /> {h.locNear}
            </div></Reveal>
          </div>
          <Reveal delay={120}><ZurichMap pinLabel={h.locPin} nearLabel="Zürich HB" /></Reveal>
        </div>
      </div>
    </section>
  );
};

const HomeCTA = () => {
  const [lang] = useLang();
  const h = I18N[lang].home;
  return (
    <section style={{ background: 'var(--deep-teal)', position: 'relative', overflow: 'hidden' }}>
      <SkinMap size={460} color="light" opacity={0.1} style={{ position: 'absolute', left: -120, bottom: -160 }} />
      <div className="wrap" style={{ paddingTop: 88, paddingBottom: 88, position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <Reveal><Eyebrow light>{h.ctaEyebrow}</Eyebrow></Reveal>
        <Reveal delay={70}><h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(30px, 7vw, 46px)', lineHeight: 1.1, color: 'var(--off-white)', margin: '0 0 18px', maxWidth: 620, textWrap: 'balance' }}>{h.ctaTitle}</h2></Reveal>
        <Reveal delay={140}><p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--teal-300)', margin: '0 0 32px', maxWidth: 460 }}>{h.ctaBody}</p></Reveal>
        <Reveal delay={210}><Button variant="light" as="a" href="book.html">{h.ctaButton}</Button></Reveal>
      </div>
    </section>
  );
};

const HomePage = () => {
  useReveal();
  return (
    <React.Fragment>
      <Header active="home" overHero={true} />
      <main>
        <Hero />
        <Method />
        <ServicesTeaser />
        <LocationSection />
        <HomeCTA />
      </main>
      <Footer />
      <SiteTweaks />
    </React.Fragment>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<HomePage />);