const {useState,useEffect,useRef} = React;
const P=window.MG_P, W=window.MG_W;

function MgHero(){
  const [i,setI]=useState(0);
  const [vidOk,setVidOk]=useState(true);
  const [vidOn,setVidOn]=useState(false);
  const vid=useRef(null);
  const S=[
   {video:true,img:P+'hf-hero.jpg',eyebrow:'Kosmetikstudio Wildeshausen',title:'Zeit für deine Haut.',text:'Ganzheitliche Gesichts- und Körperbehandlungen mit Maria Galland Paris – seit über 20 Jahren.',cta:['Termin vereinbaren','buchen.html']},
   {img:P+'duo.jpg',eyebrow:'Behandlungen',title:'Sichtbare Ergebnisse,\nspürbare Ruhe.',text:'Jede Behandlung beginnt mit einer persönlichen Hautanalyse – abgestimmt auf dich und deinen Hauttyp.',cta:['Behandlungen entdecken','index.html#behandlungen']},
   {img:P+'studio-5420.jpg',eyebrow:'Das Studio',title:'Ein Ort, der\nzur Ruhe bringt.',text:'Burgstraße 7, mitten in Wildeshausen. Termine ausschließlich nach Vereinbarung.',cta:['Studio ansehen','ueber-uns.html']}];
  useEffect(()=>{const t=setInterval(()=>setI(v=>(v+1)%S.length),7000);return()=>clearInterval(t)},[]);
  useEffect(()=>{
    const v=vid.current;if(!v)return;
    const fail=()=>{setVidOk(false);setVidOn(false)};
    v.addEventListener('error',fail);
    const t=setTimeout(()=>{v.preload='auto';v.load();v.play().then(()=>setVidOn(true)).catch(fail)},1200);
    const g=setInterval(()=>{if(!v)return;if(v.error)fail();else if(v.paused&&!v.ended)v.play().catch(fail)},2000);
    return()=>{clearTimeout(t);clearInterval(g);v.removeEventListener('error',fail)};
  },[]);
  const showVid=vidOk&&i===0;
  const s=S[i];
  return <section style={{position:'relative',background:'var(--paper-2)'}}>
    <div className="mg-split" style={{minHeight:'clamp(460px,74vh,720px)'}}>
      <div style={{display:'flex',alignItems:'center',padding:'clamp(48px,6vw,96px) clamp(28px,6vw,90px)'}}>
        <div key={i} style={{maxWidth:460,animation:'none'}}>
          <div className="mg-eyebrow">{s.eyebrow}</div>
          <h1 className="mg-h1" style={{margin:'20px 0 0',whiteSpace:'pre-line'}}>{s.title}</h1>
          <p className="mg-p" style={{margin:'22px 0 0',maxWidth:400}}>{s.text}</p>
          <div style={{marginTop:34,display:'flex',gap:14,flexWrap:'wrap'}}>
            <a href={s.cta[1]} className="mg-btn">{s.cta[0]}</a>
            <a href="tel:+4944317209569" className="mg-btn mg-btn--ghost">04431 720 95 69</a>
          </div>
          <div style={{display:'flex',gap:8,marginTop:44}}>
            {S.map((_,n)=><button key={n} onClick={()=>setI(n)} aria-label={'Slide '+(n+1)} style={{width:n===i?34:8,height:8,borderRadius:99,border:'none',padding:0,cursor:'pointer',background:n===i?'var(--ink)':'var(--paper-3)',transition:'width .5s var(--ease),background .5s var(--ease)'}}></button>)}
          </div>
        </div>
      </div>
      <div style={{position:'relative',overflow:'hidden',minHeight:340}}>
        {S.map((x,n)=><img key={n} src={x.img} alt="" fetchpriority={n===0?'high':undefined} loading={n===0?undefined:'lazy'} decoding="async" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',opacity:n===i?1:0,transition:'opacity 1.2s var(--ease)'}}/>)}
        {vidOk&&<video ref={vid} muted loop playsInline preload="none" aria-hidden="true" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',opacity:showVid&&vidOn?1:0,transition:'opacity 1.4s var(--ease)',pointerEvents:'none'}}>{/* Imagefilm: lag frueher im alten WordPress (/wp-content/...) — mit dem
    Domain-Umzug weg. Sobald die Datei wieder da ist, einfach als
    assets/video/imagefilm.mp4 ablegen; bis dahin traegt die Foto-Slideshow
    den Hero (fail-Handler blendet das Video-Element sauber aus). */}
<source src="assets/video/imagefilm.mp4" type="video/mp4"/></video>}
        <div style={{position:'absolute',right:0,bottom:0,display:'flex',alignItems:'center',gap:16,background:'#fff',padding:'18px 26px',maxWidth:'min(92%,380px)'}}>
          <div style={{fontSize:26,fontWeight:300,letterSpacing:'-0.01em',lineHeight:1,flexShrink:0}}>10 %</div>
          <div style={{borderLeft:'1px solid var(--line)',paddingLeft:16}}>
            <div style={{fontSize:14.5,lineHeight:1.35}}>auf deine erste Online-Buchung</div>
            <div className="mg-eyebrow" style={{fontSize:11,marginTop:5}}>Nur für Neukunden</div>
          </div>
        </div>
      </div>
    </div>
  </section>;
}

function MgIntro(){
  return <section className="mg-sec">
    <div className="mg-narrow rv" style={{textAlign:'center',maxWidth:760}}>
      <div className="mg-eyebrow">Willkommen bei La Vie</div>
      <h2 className="mg-h2" style={{margin:'18px 0 0'}}>Professionelle Hautpflege.<br/>Persönlich seit 2004.</h2>
      <p className="mg-p" style={{margin:'22px auto 0',maxWidth:600}}>Wir kombinieren jahrzehntelange kosmetische Erfahrung mit den Wirkstoffkonzepten von Maria Galland Paris und Gertraud Gruber. Jede Behandlung beginnt mit einer sorgfältigen Hautanalyse – für ein Ergebnis, das zu dir passt.</p>
      <div style={{marginTop:30}}><a href="ueber-uns.html" className="mg-link">Unsere Geschichte</a></div>
    </div>
  </section>;
}

const NEEDS=[
 ['Reife Haut','hf-reife-haut.jpg','behandlung.html?b=gesichtsbehandlungen'],
 ['Trockene Haut','hf-gesichtsbehandlung.jpg','behandlung.html?b=microdermabrasion'],
 ['Fahler Teint','hf-beratung.jpg','behandlung.html?b=microneedling'],
 ['Unreine Haut','hf-microdermabrasion.jpg','behandlung.html?b=bb-glow'],
 ['Empfindliche Haut','hf-empfindliche-haut.jpg','behandlung.html?b=gesichtsbehandlungen']];

function MgNeeds(){
  const ref=useRef(null);
  const page=d=>ref.current&&ref.current.scrollBy({left:d*340,behavior:'smooth'});
  return <section className="mg-sec" style={{background:'var(--paper-2)'}}>
    <div className="mg-wrap" style={{display:'flex',alignItems:'flex-start',gap:'clamp(24px,4vw,64px)'}}>
      <div className="mg-hide-m" style={{width:280,flexShrink:0,paddingTop:8}}>
        <h2 className="mg-h2">Nach Haut&shy;bedürfnis</h2>
        <div style={{display:'flex',gap:10,marginTop:28}}>
          <button className="mg-arrow" onClick={()=>page(-1)} aria-label="Zurück">‹</button>
          <button className="mg-arrow" onClick={()=>page(1)} aria-label="Weiter">›</button>
        </div>
      </div>
      <div className="mg-rail" ref={ref} style={{flex:1,minWidth:0}}>
        {NEEDS.map(([t,img,href])=><a key={t} href={href} className="mg-card" style={{width:320,flexShrink:0,scrollSnapAlign:'start',textDecoration:'none',color:'inherit'}}>
          <div className="mg-card-img" style={{height:330}}><img loading="lazy" decoding="async" src={P+img} alt={t} style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
          <div style={{background:'#fff',display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,padding:'20px 22px'}}>
            <span style={{fontSize:16.5}}>{t}</span>
            <span className="mg-arrow" style={{width:38,height:38,flexShrink:0}}>↗</span>
          </div>
        </a>)}
      </div>
    </div>
  </section>;
}

const FACE=[
 ['Kosmetische Grundbehandlung','Die klassische Tiefenreinigung mit Peeling, Ampulle und Spezialmaske – unsere meistgebuchte Behandlung.','ab 85 €','beh-gesicht.jpg','behandlung.html?b=gesichtsbehandlungen'],
 ['Soin Mille Lumière','Die luxuriöse Anti-Aging-Behandlung von Maria Galland mit zwei Massagen und zwei Masken.','155 €','hf-luxus.jpg','behandlung.html?b=gesichtsbehandlungen'],
 ['Microneedling','Feinste Mikroimpulse aktivieren die Zellerneuerung – für sichtbar glattere, straffere Haut.','150 €','beh-microneedling.jpg','behandlung.html?b=microneedling'],
 ['Mikrodermabrasion','Sanfte Abtragung der obersten Hautschicht für einen ebenmäßigen, frischen Teint.','ab 75 €','beh-microderm.jpg','behandlung.html?b=microdermabrasion'],
 ['Wimpern & Brauen','Wimpernverlängerung, Lifting und Brauengestaltung für einen wachen Blick.','ab 14 €','beh-wimpern-hero.jpg','behandlung.html?b=wimpern-brauen']];

function MgTreatments(){
  return <section id="behandlungen" className="mg-sec">
    <div className="mg-wrap">
      <div className="rv" style={{textAlign:'center',marginBottom:'clamp(34px,4vw,62px)'}}>
        <div className="mg-eyebrow">Unsere Behandlungen</div>
        <h2 className="mg-h2" style={{margin:'16px 0 0'}}>Gesicht &amp; Körper</h2>
        <p className="mg-p" style={{margin:'18px auto 0',maxWidth:620}}>Jede unserer Behandlungen beginnt mit einer Hautdiagnose. Durch präzise Handgriffe und gezielt abgestimmte Wirkstoffe entsteht ein ganzheitliches Pflegeerlebnis für Haut und Sinne.</p>
      </div>
      <div className="mg-grid3">
        {FACE.map(([t,d,pr,img,href])=><div key={t} className="mg-card rv" style={{display:'flex',flexDirection:'column'}}>
          <div className="mg-card-img" style={{aspectRatio:'4/3'}}><img loading="lazy" decoding="async" src={P+img} alt={t} style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
          <div style={{padding:'26px 4px 0',textAlign:'center',display:'flex',flexDirection:'column',flex:1}}>
            <h3 className="mg-h3">{t}</h3>
            <p className="mg-p" style={{fontSize:14.5,margin:'12px auto 0',maxWidth:380,flex:1}}>{d}</p>
            <div style={{fontSize:13,letterSpacing:'.08em',textTransform:'uppercase',color:'var(--ink-mute)',margin:'14px 0 18px'}}>{pr}</div>
            <div><a href={href} className="mg-btn">Entdecken</a></div>
          </div>
        </div>)}
      </div>
    </div>
  </section>;
}

function MgEditorial(){
  const Block=({img,eyebrow,title,text,cta,href,flip})=><div className="mg-split">
    <div style={{order:flip?2:1,minHeight:'clamp(300px,42vw,560px)',overflow:'hidden'}}><img loading="lazy" decoding="async" src={img} alt="" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
    <div style={{order:flip?1:2,display:'flex',alignItems:'center',justifyContent:'center',padding:'clamp(44px,6vw,90px) clamp(28px,5vw,80px)',background:'#fff'}}>
      <div className="rv" style={{maxWidth:420,textAlign:'center'}}>
        <div className="mg-eyebrow">{eyebrow}</div>
        <h2 className="mg-h2" style={{margin:'16px 0 0',fontSize:'clamp(24px,2.6vw,34px)'}}>{title}</h2>
        <p className="mg-p" style={{margin:'18px 0 0'}}>{text}</p>
        <div style={{marginTop:28}}><a href={href} className="mg-btn">{cta}</a></div>
      </div>
    </div>
  </div>;
  return <section>
    <Block img={P+'studio-5397.jpg'} eyebrow="Maria Galland Paris" title="Ikonische Pflege seit 1962." text="Als Partnerinstitut arbeiten wir mit den nummerierten Wirkstoffkonzepten von Maria Galland Paris – personalisierte, professionelle Hautpflege aus der Pariser Maison." cta="Mehr erfahren" href="ueber-uns.html"/>
    <Block flip img={P+'studio-empfang.jpg'} eyebrow="Deine Hautanalyse" title="Erst verstehen, dann behandeln." text="Wir analysieren deine Hautzonen sorgfältig und bestimmen die individuellen Bedürfnisse – die Grundlage für jede Behandlung bei uns im Studio." cta="Termin vereinbaren" href="buchen.html"/>
  </section>;
}

function MgResults(){
  /* Echte Aufnahmen aus dem Studio. Eine Vorher/Nachher-Galerie kommt zurueck,
     sobald echte Kundenfotos mit schriftlicher Einwilligung vorliegen. */
  const R=[['beh-manikuere2.jpg','Hand in Hand','Zeit, die wir uns nehmen'],['hf-wirkstoffe.jpg','Unsere Wirkstoffe','Maria Galland & Gertraud Gruber'],['studio-5401.jpg','Unsere Kabine','Ruhe ab dem ersten Schritt']];
  return <section id="ergebnisse" className="mg-sec" style={{background:'var(--paper-2)'}}>
    <div className="mg-wrap">
      <div className="rv" style={{textAlign:'center',marginBottom:'clamp(30px,4vw,54px)'}}>
        <div className="mg-eyebrow">Einblicke</div>
        <h2 className="mg-h2" style={{margin:'16px 0 0'}}>So arbeiten wir</h2>
      </div>
      <div className="mg-grid3">
        {R.map(([img,t,m])=><div key={t} className="mg-card rv">
          <div className="mg-card-img" style={{aspectRatio:'3/2',background:'#fff'}}><img loading="lazy" decoding="async" src={P+img} alt={t} style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
          <div style={{background:'#fff',padding:'20px 22px'}}>
            <div style={{fontSize:16.5}}>{t}</div>
            <div className="mg-p" style={{fontSize:13.5,marginTop:4}}>{m}</div>
          </div>
        </div>)}
      </div>
    </div>
  </section>;
}

function MgQuote(){
  return <section className="mg-sec">
    <div className="mg-narrow rv" style={{textAlign:'center',maxWidth:800}}>
      <div className="mg-eyebrow">Kundenstimme</div>
      <blockquote className="mg-h2" style={{margin:'22px 0 0',fontSize:'clamp(22px,2.6vw,34px)',lineHeight:1.4,fontWeight:200}}>„Ich gehe seit Jahren zu Svetlana und komme jedes Mal strahlend wieder heraus. Man merkt sofort: Hier steckt Erfahrung und echtes Herzblut drin."</blockquote>
      <div className="mg-p" style={{marginTop:24,fontSize:13.5,letterSpacing:'.06em',textTransform:'uppercase'}}>Google-Rezension · Wildeshausen</div>
    </div>
  </section>;
}

function MgTeam(){
  const M=[['svetlana.jpg','Svetlana Wollenberg','Inhaberin · Kosmetikerin','center 38%'],['eugenia.jpg','Eugenia Michel','Kosmetikerin','center 18%']];
  return <section id="team" className="mg-sec" style={{paddingTop:0}}>
    <div className="mg-wrap">
      <div className="rv" style={{textAlign:'center',marginBottom:'clamp(30px,4vw,54px)'}}>
        <div className="mg-eyebrow">Das Team</div>
        <h2 className="mg-h2" style={{margin:'16px 0 0'}}>Die Frauen hinter La Vie</h2>
      </div>
      <div className="mg-split" style={{gap:'clamp(20px,3vw,40px)'}}>
        {M.map(([img,n,r,pos])=><div key={n} className="mg-card rv">
          <div className="mg-card-img" style={{aspectRatio:'16/10'}}><img loading="lazy" decoding="async" src={P+img} alt={n} style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:pos||'center 18%'}}/></div>
          <div style={{padding:'22px 2px 0'}}>
            <div style={{fontSize:19}}>{n}</div>
            <div className="mg-p" style={{fontSize:14,marginTop:5}}>{r}</div>
          </div>
        </div>)}
      </div>
    </div>
  </section>;
}

function MgFaq(){
  const Q=[['Wie läuft mein erster Besuch ab?','Wir starten mit einer persönlichen Hautanalyse und besprechen deine Wünsche in Ruhe. Danach empfehlen wir die passende Behandlung – ohne Druck, ohne Verkaufsgespräch.'],
   ['Warum wird bei Luxusbehandlungen eine Anzahlung fällig?','Bei Behandlungen ab 100 € bitten wir um eine Anzahlung von 25 €. So können wir uns die volle Behandlungszeit exklusiv für dich reservieren. Sie wird selbstverständlich verrechnet.'],
   ['Kann ich meinen Termin umbuchen oder stornieren?','Bis 24 Stunden vor deinem Termin kostenlos – telefonisch oder online.'],
   ['Gibt es Gutscheine?','Ja, für jede Behandlung oder als Wertgutschein – direkt im Studio oder telefonisch.']];
  const [o,setO]=useState(-1);
  return <section id="faq" className="mg-sec" style={{background:'var(--paper-2)'}}>
    <div className="mg-narrow" style={{maxWidth:860}}>
      <div className="rv" style={{textAlign:'center',marginBottom:'clamp(28px,3.4vw,48px)'}}>
        <div className="mg-eyebrow">Fragen</div>
        <h2 className="mg-h2" style={{margin:'16px 0 0'}}>Gut zu wissen</h2>
      </div>
      <div className="rv">
        {Q.map(([q,a],i)=><div key={q} style={{borderBottom:'1px solid var(--line)'}}>
          <button onClick={()=>setO(o===i?-1:i)} style={{width:'100%',display:'flex',alignItems:'center',justifyContent:'space-between',gap:20,background:'none',border:'none',cursor:'pointer',padding:'24px 4px',textAlign:'left',fontFamily:'Jost,sans-serif',fontSize:17,fontWeight:300,color:'var(--ink)'}}>
            {q}<span style={{fontSize:20,lineHeight:1,transform:o===i?'rotate(45deg)':'none',transition:'transform .35s var(--ease)'}}>+</span>
          </button>
          <div style={{display:'grid',gridTemplateRows:o===i?'1fr':'0fr',transition:'grid-template-rows .4s var(--ease)'}}>
            <div style={{overflow:'hidden'}}><p className="mg-p" style={{padding:'0 4px 24px',maxWidth:640,opacity:o===i?1:0,transition:'opacity .35s var(--ease)'}}>{a}</p></div>
          </div>
        </div>)}
      </div>
    </div>
  </section>;
}

function MgMap(){
  const [show,setShow]=React.useState(false);
  const MAP='https://www.openstreetmap.org/export/embed.html?bbox=8.4247%2C52.8896%2C8.4447%2C52.8996&layer=mapnik&marker=52.8946%2C8.4347';
  const ROUTE='https://www.google.com/maps/search/?api=1&query=Burgstra%C3%9Fe%207%2C%2027793%20Wildeshausen';
  return <section className="mg-sec" style={{background:'var(--paper-2)'}}>
    <div className="mg-wrap">
      <div className="rv" style={{textAlign:'center',marginBottom:'clamp(30px,4vw,54px)'}}>
        <div className="mg-eyebrow">Anfahrt</div>
        <h2 className="mg-h2" style={{margin:'16px 0 0'}}>Wo du uns findest</h2>
        <p className="mg-p" style={{maxWidth:560,margin:'18px auto 0'}}>Burgstraße 7, mitten in Wildeshausen. Am besten parkst du auf dem Parkplatz der Sparkasse – von dort sind es nur wenige Schritte zu uns.</p>
      </div>
      <div className="rv" style={{position:'relative',minHeight:'clamp(300px,38vw,460px)',border:'1px solid var(--line)',overflow:'hidden',background:'var(--paper)'}}>
        {show
          ? <iframe title="Karte Burgstraße 7 Wildeshausen" src={MAP} style={{position:'absolute',inset:0,width:'100%',height:'100%',border:'none'}}></iframe>
          : <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:18,padding:24,textAlign:'center'}}>
              <img loading="lazy" decoding="async" src={P+'studio-5352.jpg'} alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',opacity:.22}}/>
              <div style={{position:'relative'}}>
                <div className="mg-h3" style={{marginBottom:6}}>Burgstraße 7 · 27793 Wildeshausen</div>
                <p className="mg-p" style={{fontSize:13.5,margin:'0 0 18px'}}>Die Karte lädt erst, wenn du sie öffnest – so bleiben deine Daten bei dir.</p>
                <button onClick={()=>setShow(true)} className="mg-btn">Die Karte anzeigen</button>
              </div>
            </div>}
      </div>
      <div className="rv" style={{marginTop:22,textAlign:'center'}}>
        <a href={ROUTE} className="mg-link" style={{fontSize:12}}>Route planen</a>
      </div>
    </div>
  </section>;
}

function MgCta(){
  return <section style={{position:'relative',minHeight:'clamp(360px,46vw,540px)',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',textAlign:'center'}}>
    <img loading="lazy" decoding="async" src={P+'studio-5410.jpg'} alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
    <div style={{position:'absolute',inset:0,background:'rgba(20,18,17,.42)'}}></div>
    <div className="rv" style={{position:'relative',color:'#fff',padding:'0 24px'}}>
      <div className="mg-eyebrow" style={{color:'rgba(255,255,255,.8)'}}>Termin vereinbaren</div>
      <h2 className="mg-h2" style={{margin:'18px 0 0',color:'#fff'}}>Nimm dir die Zeit,<br/>die deine Haut verdient.</h2>
      <div style={{marginTop:32,display:'flex',gap:14,justifyContent:'center',flexWrap:'wrap'}}>
        <a href="buchen.html" className="mg-btn mg-btn--light">Online buchen</a>
        <a href="tel:+4944317209569" className="mg-btn" style={{background:'transparent',borderColor:'rgba(255,255,255,.7)',color:'#fff'}}>Anrufen</a>
      </div>
    </div>
  </section>;
}

function MgHome(){
  window.useRv();
  return <div>
    <window.MgNav/>
    <MgHero/><MgIntro/><MgNeeds/><MgTreatments/><MgEditorial/><MgResults/><MgQuote/><MgTeam/><MgFaq/><MgMap/><MgCta/>
    <window.MgFooter/>
    <window.MgPopup/>
    <window.MgCookie/>
  </div>;
}
window.MgHome=MgHome;