const {useState,useEffect,useRef} = React;
const P=window.MG_P, W=window.MG_W;
/* Echte Studiofotos, lokal eingebunden (frueher von lavie-wirdschoener.de geladen). */
const STUDIO=['5352','5375','5379','5383','5397','5401','5410','5417','5418','5420'];
const src=s=>P+'studio-'+s+'.jpg';
const fb=s=>undefined;

function AHero(){
  return <section style={{background:'var(--paper-2)'}}>
    <div className="mg-split" style={{minHeight:'clamp(400px,56vh,600px)'}}>
      <div style={{display:'flex',alignItems:'center',padding:'clamp(44px,6vw,90px) clamp(28px,6vw,84px)'}}>
        <div style={{maxWidth:460}}>
          <div className="mg-eyebrow">Das Studio</div>
          <h1 className="mg-h1" style={{margin:'18px 0 0'}}>Über uns</h1>
          <p className="mg-p" style={{margin:'20px 0 0'}}>Stress und Alltag hinterlassen Spuren. Wir haben es uns zur Aufgabe gemacht, dir Gelassenheit zurückzugeben – innerlich und äußerlich.</p>
          <div style={{marginTop:30,display:'flex',gap:12,flexWrap:'wrap'}}>
            <a href="buchen.html" className="mg-btn">Termin vereinbaren</a>
            <a href="#team" className="mg-btn mg-btn--ghost">Team kennenlernen</a>
          </div>
        </div>
      </div>
      <div style={{position:'relative',overflow:'hidden',minHeight:300}}>
        <img fetchpriority="high" decoding="async" src={P+'duo.jpg'} alt="Kosmetikstudio La Vie" style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 40%'}}/>
      </div>
    </div>
  </section>;
}

function AFacts(){
  const F=[['2004','im Beruf tätig'],['2017','als Team vereint'],['20+','Jahre Studio-Erfahrung'],['2','Kosmetikerinnen']];
  return <section className="mg-sec">
    <div className="mg-wrap mg-grid4 rv">
      {F.map(([n,l])=><div key={l} style={{borderTop:'1px solid var(--ink)',paddingTop:20}}>
        <div style={{fontSize:'clamp(30px,3.4vw,44px)',fontWeight:200,lineHeight:1}}>{n}</div>
        <div className="mg-p" style={{fontSize:14,marginTop:10}}>{l}</div>
      </div>)}
    </div>
  </section>;
}

const TEAM=[
 {img:'svetlana.jpg',pos:'center 38%',name:'Svetlana Wollenberg',role:'Inhaberin · Kosmetikerin',qual:['Kosmetikerin seit 2004','Visagistin seit 2004','Nageldesignerin seit 2005','Zertifikat Great Lashes','Zertifikat Manuelle Lymphdrainage Gesicht']},
 {img:'eugenia.jpg',pos:'center 18%',name:'Eugenia Michel',role:'Kosmetikerin',qual:['Kosmetikschule 2002','Kosmetikerin seit 2006','Visagistin seit 2006','Bei La Vie seit 2017','Nageldesignerin seit 2018','Zertifikat Great Lashes','Fußpflege-Spezialistin']}];

function ATeam(){
  return <section id="team" className="mg-sec" style={{background:'var(--paper-2)'}}>
    <div className="mg-wrap">
      <div className="rv" style={{textAlign:'center',marginBottom:'clamp(30px,4vw,56px)'}}>
        <div className="mg-eyebrow">Dein 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(22px,3vw,46px)'}}>
        {TEAM.map(m=><div key={m.name} className="mg-card rv" style={{background:'#fff'}}>
          <div className="mg-card-img" style={{aspectRatio:'16/10'}}><img loading="lazy" decoding="async" src={P+m.img} alt={m.name} style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:m.pos||'center 18%'}}/></div>
          <div style={{padding:'26px 28px 30px'}}>
            <h3 className="mg-h3" style={{fontSize:21}}>{m.name}</h3>
            <div className="mg-p" style={{fontSize:13.5,marginTop:5}}>{m.role}</div>
            <div className="mg-eyebrow" style={{fontSize:10.5,marginTop:22}}>Qualifikationen</div>
            <div style={{marginTop:10,borderTop:'1px solid var(--line)'}}>
              {m.qual.map(q=><div key={q} style={{fontSize:14,color:'var(--ink-soft)',padding:'10px 0',borderBottom:'1px solid var(--line)'}}>{q}</div>)}
            </div>
          </div>
        </div>)}
      </div>
    </div>
  </section>;
}

function APhil(){
  return <section>
    <div className="mg-split">
      <div style={{minHeight:'clamp(300px,42vw,560px)',overflow:'hidden'}}><img loading="lazy" decoding="async" src={P+'duo3.jpg'} alt="Svetlana Wollenberg und Eugenia Michel" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
      <div style={{display:'flex',alignItems:'center',justifyContent:'center',padding:'clamp(44px,6vw,90px) clamp(28px,5vw,80px)'}}>
        <div className="rv" style={{maxWidth:430,textAlign:'center'}}>
          <div className="mg-eyebrow">Philosophie</div>
          <h2 className="mg-h2" style={{margin:'16px 0 0',fontSize:'clamp(24px,2.6vw,34px)'}}>Natürlich schön fühlen.</h2>
          <p className="mg-p" style={{margin:'18px 0 0'}}>Wir glauben daran, dass Schönheit von innen kommt und sich in jedem von uns widerspiegelt. Unsere Aufgabe ist es, deine natürliche Schönheit zu unterstreichen und zu fördern.</p>
          <p className="mg-p" style={{margin:'14px 0 0'}}>Dafür arbeiten wir mit hochwertigen Produkten von Maria Galland Paris und Gertraud Gruber – in einer entspannten Atmosphäre, in der du dich von Kopf bis Fuß verwöhnen lassen kannst.</p>
          <div style={{marginTop:28}}><a href="index.html#behandlungen" className="mg-btn">Behandlungen ansehen</a></div>
        </div>
      </div>
    </div>
  </section>;
}

function AGal(){
  const [lb,setLb]=useState(null);
  window.useScrollLock(lb!==null);   /* Galerie-Grossansicht: Seite dahinter festhalten */
  return <section className="mg-sec">
    <div className="mg-wrap">
      <div className="rv" style={{textAlign:'center',marginBottom:'clamp(28px,3.4vw,50px)'}}>
        <div className="mg-eyebrow">Eindrücke</div>
        <h2 className="mg-h2" style={{margin:'16px 0 0'}}>Ein Blick ins Studio</h2>
      </div>
      <div className="mg-gal2 rv">
        {STUDIO.map((s,i)=><a key={s} onClick={()=>setLb(i)} className="mg-card" style={{display:'block',overflow:'hidden',cursor:'zoom-in',background:'var(--paper-2)'}}>
          <div className="mg-card-img" style={{width:'100%',height:'100%'}}><img loading="lazy" decoding="async" src={src(s)} onError={fb(s)} alt="La Vie Studio" style={{width:'100%',height:'100%',objectFit:'cover'}}/></div>
        </a>)}
      </div>
    </div>
    {lb!==null&&<div onClick={()=>setLb(null)} style={{position:'fixed',inset:0,zIndex:120,background:'rgba(20,18,17,.86)',display:'flex',alignItems:'center',justifyContent:'center',padding:24,animation:'mg-fade .3s var(--ease) both'}}>
      <img src={src(STUDIO[lb])} onError={fb(STUDIO[lb])} decoding="async" alt="" style={{maxWidth:'92vw',maxHeight:'88vh',objectFit:'contain'}}/>
      <button onClick={()=>setLb(null)} aria-label="Schließen" style={{position:'absolute',top:20,right:24,background:'none',border:'none',color:'#fff',fontSize:28,cursor:'pointer',lineHeight:1}}>×</button>
    </div>}
  </section>;
}

function ACta(){
  return <section style={{position:'relative',minHeight:'clamp(340px,42vw,500px)',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',textAlign:'center'}}>
    <img loading="lazy" decoding="async" src={P+'svetlana-verkaufsraum.jpg'} alt="" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
    <div style={{position:'absolute',inset:0,background:'rgba(20,18,17,.44)'}}></div>
    <div className="rv" style={{position:'relative',color:'#fff',padding:'0 24px'}}>
      <div className="mg-eyebrow" style={{color:'rgba(255,255,255,.8)'}}>Besuche uns</div>
      <h2 className="mg-h2" style={{margin:'18px 0 0',color:'#fff'}}>Burgstraße 7, Wildeshausen</h2>
      <p className="mg-p" style={{color:'rgba(255,255,255,.86)',marginTop:14}}>Termine ausschließlich nach Vereinbarung.</p>
      <div style={{marginTop:30,display:'flex',gap:14,justifyContent:'center',flexWrap:'wrap'}}>
        <a href="buchen.html" className="mg-btn mg-btn--light">Termin vereinbaren</a>
        <a href="kontakt.html" className="mg-btn" style={{background:'transparent',borderColor:'rgba(255,255,255,.7)',color:'#fff'}}>Kontakt</a>
      </div>
    </div>
  </section>;
}

function MgAbout(){
  window.useRv();
  return <div><window.MgNav/><AHero/><AFacts/><ATeam/><APhil/><AGal/><ACta/><window.MgFooter/><window.MgCookie/></div>;
}
window.MgAbout=MgAbout;