/* global React, ReactDOM, COPY, Icon, BrandMark,
   VerticalFit, FeatureTour, SetupSteps, Persona, InsightsTeaser, Pricing, FAQ, CTABanner, Footer,
   MockShift, ShotFrame, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brand": "MedTime",
  "lang": "de",
  "accent": "#5B5BF5",
  "heroLayout": "split",
  "showInsights": true,
  "showPersonas": true
}/*EDITMODE-END*/;

function applyAccent(hex) {
  // Convert hex to HSL approximation by setting --primary
  // Easier: set CSS variable as raw color and override hsl() composition
  const root = document.documentElement;
  if (!hex) return;
  const r = parseInt(hex.slice(1,3),16)/255, g = parseInt(hex.slice(3,5),16)/255, b = parseInt(hex.slice(5,7),16)/255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h=0, s=0, l=(max+min)/2;
  if (max!==min){
    const d = max-min;
    s = l>0.5 ? d/(2-max-min) : d/(max+min);
    switch(max){
      case r: h=(g-b)/d + (g<b?6:0); break;
      case g: h=(b-r)/d + 2; break;
      case b: h=(r-g)/d + 4; break;
    }
    h*=60;
  }
  root.style.setProperty("--primary", `${Math.round(h)} ${Math.round(s*100)}% ${Math.round(l*100)}%`);
}

function Nav({ brand, lang, setLang, t }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <header className="nav">
      <div className="wrap nav-row">
        <a href="index.html" className="brand" aria-label={brand}>
          {brand === "MedTime"
            ? <BrandMark variant="wordmark" tone="white" size={64}/>
            : <span style={{fontWeight:700, fontSize:28}}>{brand}</span>}
        </a>
        <nav className="nav-links" aria-label="Hauptnavigation">
          <a href="analyse.html" className="nav-link optional">Analyse</a>
          <a href="software.html" className="nav-link optional" style={{color:"var(--pri)", fontWeight:500}}>Software</a>
          <a href="#funktionen" className="nav-link optional">{t.nav.product}</a>
          <a href="#preise" className="nav-link optional">{t.nav.pricing}</a>
          <a href="#faq" className="nav-link optional">{t.nav.faq}</a>
          <span style={{width:8}} className="optional"/>
          <div className="lang" role="group" aria-label="Language">
            <button className={lang==="de"?"active":""} onClick={()=>setLang("de")}>DE</button>
            <button className={lang==="en"?"active":""} onClick={()=>setLang("en")}>EN</button>
          </div>
          <span style={{width:8}} className="optional"/>
          <a href="https://app.medtime.de/login" target="_blank" rel="noopener" className="nav-link optional">{t.nav.login}</a>
          <a href="demo-buchen.html" className="btn btn-primary btn-sm nav-cta-desktop" style={{height:36}}>{t.nav.demo}</a>
          <button
            type="button"
            className="nav-burger"
            aria-label={open ? "Menü schließen" : "Menü öffnen"}
            aria-expanded={open}
            onClick={()=>setOpen(o=>!o)}
          >
            <span className={"burger-icon" + (open ? " is-open" : "")}>
              <span/><span/><span/>
            </span>
          </button>
        </nav>
      </div>
      <div className={"mobile-menu" + (open ? " is-open" : "")} aria-hidden={!open}>
        <div className="mobile-menu-inner">
          <a href="analyse.html" onClick={close}>MedTime Analyse</a>
          <a href="software.html" onClick={close} style={{color:"var(--pri)"}}>MedTime Software</a>
          <div className="mobile-menu-sep"/>
          <a href="#funktionen" onClick={close}>{t.nav.product}</a>
          <a href="#preise" onClick={close}>{t.nav.pricing}</a>
          <a href="#faq" onClick={close}>{t.nav.faq}</a>
          <a href="https://app.medtime.de/login" target="_blank" rel="noopener" onClick={close}>{t.nav.login}</a>
          <a href="demo-buchen.html" className="btn btn-primary" onClick={close} style={{marginTop:12, justifyContent:"center"}}>{t.nav.demo}</a>
        </div>
      </div>
    </header>
  );
}

function Hero({ t, brand, layout }) {
  return (
    <section className="hero">
      <div className="hero-bg-blob"/>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="eyebrow"><span className="dot"/>{t.hero.eyebrow}</div>
            <h1 style={{marginTop:18}}>
              {t.hero.h1Pre} <span className="pri">{t.hero.h1Hi}</span>
            </h1>
            <p className="lede hero-sub">{t.hero.sub}</p>
            <div className="hero-cta">
              <a className="btn btn-lg btn-primary" href="demo-buchen.html">{t.hero.cta1}</a>
              <a className="btn btn-lg btn-outline" href="#funktionen">
                <Icon name="arrow-right" size={14}/> {t.hero.cta2}
              </a>
            </div>
            <div className="hero-meta">
              {t.hero.meta.map((m,i)=>(
                <span key={i}><Icon name="check" size={14} stroke={2}/> {m}</span>
              ))}
            </div>
          </div>
          <div>
            {layout === "split" ? (
              <div style={{position:"relative"}}>
                <div style={{borderRadius:18, overflow:"hidden"}}>
                  <img src="src/assets/header-dienstplanung-cropped.png" alt="MedTime Dienstplanung — Mac-Mockup mit Wochenansicht" style={{width:"100%", height:"auto", display:"block"}}/>
                </div>
                <div style={{
                  position:"absolute", right:-28, bottom:-36, width:280,
                  aspectRatio: "1352 / 614",
                  background: "white",
                  border: "1px solid var(--bd)",
                  borderRadius: 14,
                  boxShadow: "0 18px 48px -16px rgba(20,14,4,0.18)",
                  overflow:"hidden",
                  display:"block",
                }}>
                  <img src="src/assets/logo-wordmark-white.png" alt="MedTime" style={{width:"100%", height:"100%", display:"block", objectFit:"contain"}}/>
                </div>
              </div>
            ) : (
              <div style={{
                minHeight:480, borderRadius:16, overflow:"hidden",
                background: "white",
                border: "1px solid var(--bd)",
                display:"flex", alignItems:"center", justifyContent:"center", padding:48,
                boxShadow:"0 24px 60px -20px rgba(20,14,4,0.18)",
              }}>
                <img src="src/assets/logo-wordmark-white.png" alt="MedTime" style={{width:"min(420px, 80%)", height:"auto"}}/>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Avatar({ variant }) {
  // Three illustrated portraits — soft, line-art style, no photos required.
  // variant: "bun" | "wavy" | "blonde"
  const skin = "#F4D6BD";
  const skinShade = "#E5BFA0";
  const lip = "#C97A6E";
  const cheek = "#F0A89B";
  const eye = "#2A1F1A";
  if (variant === "bun") {
    return (
      <svg className="avatar-svg" viewBox="0 0 96 112" aria-hidden="true">
        <rect width="96" height="112" rx="10" fill="#F6F4EF"/>
        {/* hair bun */}
        <ellipse cx="48" cy="22" rx="11" ry="9" fill="#3B2A22"/>
        {/* shoulders / shirt */}
        <path d="M14 112 C 18 86, 30 78, 48 78 C 66 78, 78 86, 82 112 Z" fill="#2A2722"/>
        {/* neck */}
        <rect x="42" y="68" width="12" height="14" fill={skinShade}/>
        {/* head */}
        <ellipse cx="48" cy="48" rx="20" ry="22" fill={skin}/>
        {/* hair front */}
        <path d="M28 40 C 28 26, 38 20, 48 20 C 58 20, 68 26, 68 40 C 64 34, 58 32, 52 33 C 46 28, 38 30, 32 38 Z" fill="#3B2A22"/>
        {/* side hair */}
        <path d="M28 42 Q 26 52, 30 60 L 32 52 Z" fill="#3B2A22"/>
        <path d="M68 42 Q 70 52, 66 60 L 64 52 Z" fill="#3B2A22"/>
        {/* eyes */}
        <ellipse cx="40" cy="50" rx="1.6" ry="2" fill={eye}/>
        <ellipse cx="56" cy="50" rx="1.6" ry="2" fill={eye}/>
        {/* brows */}
        <path d="M37 46 Q 40 44, 43 46" stroke="#3B2A22" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
        <path d="M53 46 Q 56 44, 59 46" stroke="#3B2A22" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
        {/* cheek */}
        <ellipse cx="36" cy="56" rx="2.5" ry="1.6" fill={cheek} opacity="0.5"/>
        <ellipse cx="60" cy="56" rx="2.5" ry="1.6" fill={cheek} opacity="0.5"/>
        {/* smile */}
        <path d="M42 60 Q 48 64, 54 60" stroke={lip} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      </svg>
    );
  }
  if (variant === "wavy") {
    return (
      <svg className="avatar-svg" viewBox="0 0 96 112" aria-hidden="true">
        <rect width="96" height="112" rx="10" fill="#F6F4EF"/>
        {/* shirt rust */}
        <path d="M14 112 C 18 84, 30 76, 48 76 C 66 76, 78 84, 82 112 Z" fill="#A14A2A"/>
        <rect x="42" y="66" width="12" height="14" fill={skinShade}/>
        {/* hair back */}
        <path d="M22 50 C 22 28, 36 18, 48 18 C 60 18, 74 28, 74 52 C 74 64, 70 76, 64 80 L 62 70 C 60 60, 56 56, 48 56 C 40 56, 36 60, 34 70 L 32 80 C 26 76, 22 64, 22 50 Z" fill="#5A3A28"/>
        {/* head */}
        <ellipse cx="48" cy="48" rx="19" ry="21" fill={skin}/>
        {/* fringe waves */}
        <path d="M30 38 Q 36 28, 44 32 Q 50 24, 58 32 Q 64 28, 68 38 Q 60 34, 54 38 Q 48 32, 42 38 Q 36 34, 30 38 Z" fill="#5A3A28"/>
        {/* eyes */}
        <ellipse cx="40" cy="50" rx="1.6" ry="2" fill={eye}/>
        <ellipse cx="56" cy="50" rx="1.6" ry="2" fill={eye}/>
        <path d="M37 46 Q 40 44, 43 46" stroke="#3B2A22" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
        <path d="M53 46 Q 56 44, 59 46" stroke="#3B2A22" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
        <ellipse cx="36" cy="56" rx="2.5" ry="1.6" fill={cheek} opacity="0.5"/>
        <ellipse cx="60" cy="56" rx="2.5" ry="1.6" fill={cheek} opacity="0.5"/>
        <path d="M42 61 Q 48 65, 54 61" stroke={lip} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      </svg>
    );
  }
  // blonde
  return (
    <svg className="avatar-svg" viewBox="0 0 96 112" aria-hidden="true">
      <rect width="96" height="112" rx="10" fill="#F6F4EF"/>
      <path d="M14 112 C 18 86, 30 78, 48 78 C 66 78, 78 86, 82 112 Z" fill="#2A2722"/>
      <rect x="42" y="68" width="12" height="14" fill={skinShade}/>
      {/* blonde bob */}
      <path d="M24 50 C 24 28, 36 18, 48 18 C 60 18, 72 28, 72 52 C 72 66, 68 74, 64 78 L 62 64 C 60 58, 56 56, 48 56 C 40 56, 36 58, 34 64 L 32 78 C 28 74, 24 66, 24 50 Z" fill="#D9B775"/>
      {/* head */}
      <ellipse cx="48" cy="48" rx="19" ry="21" fill={skin}/>
      {/* fringe sweep */}
      <path d="M28 36 C 34 26, 50 22, 64 30 C 60 34, 56 36, 52 36 C 44 36, 36 36, 28 42 Z" fill="#D9B775"/>
      <ellipse cx="40" cy="50" rx="1.6" ry="2" fill={eye}/>
      <ellipse cx="56" cy="50" rx="1.6" ry="2" fill={eye}/>
      <path d="M37 46 Q 40 44, 43 46" stroke="#7A5A2E" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
      <path d="M53 46 Q 56 44, 59 46" stroke="#7A5A2E" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
      <ellipse cx="36" cy="56" rx="2.5" ry="1.6" fill={cheek} opacity="0.5"/>
      <ellipse cx="60" cy="56" rx="2.5" ry="1.6" fill={cheek} opacity="0.5"/>
      <path d="M42 60 Q 48 64, 54 60" stroke={lip} strokeWidth="1.4" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

function TrustBar({ t }) {
  const variants = ["bun", "wavy", "blonde"];
  return (
    <section className="testimonials">
      <div className="wrap">
        <div className="testimonials-head">
          <span className="testimonials-eyebrow"><span className="dot"></span>{t.trust.label}</span>
        </div>
        <div className="testimonials-grid">
          {t.trust.items.map((it, i) => (
            <figure key={i} className="testimonial-card">
              <svg className="quote-mark" viewBox="0 0 32 24" aria-hidden="true">
                <path d="M0 24 L0 12 C0 5, 4 0, 12 0 L12 6 C8 6, 6 8, 6 12 L12 12 L12 24 Z M20 24 L20 12 C20 5, 24 0, 32 0 L32 6 C28 6, 26 8, 26 12 L32 12 L32 24 Z" fill="currentColor"/>
              </svg>
              <blockquote className="testimonial-quote">{it.quote}</blockquote>
              <figcaption className="testimonial-cite">
                <span className="testimonial-avatar"><Avatar variant={variants[i % variants.length]}/></span>
                <span className="testimonial-meta">
                  <span className="testimonial-name">{it.name}</span>
                  <span className="testimonial-role">{it.role}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(t.lang);
  useEffect(()=>{ applyAccent(t.accent); }, [t.accent]);
  useEffect(()=>{ setLang(t.lang); }, [t.lang]);

  const copy = COPY[lang] || COPY.de;
  const brand = t.brand;
  const c = copy;

  return (
    <>
      <Nav brand={brand} lang={lang} setLang={(l)=>{ setLang(l); setTweak("lang", l); }} t={c}/>
      <Hero t={c} brand={brand} layout={t.heroLayout}/>
      <VerticalFit t={c}/>
      <FeatureTour t={c}/>
      <SetupSteps t={c}/>
      {t.showPersonas && <Persona t={c}/>}
      <Pricing t={c}/>
      <FAQ t={c}/>
      <CTABanner t={c}/>
      <Footer t={c}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Sprache"/>
        <TweakRadio label="Sprache" value={t.lang} options={["de","en"]} onChange={v=>setTweak("lang", v)}/>
        <TweakSection label="Look & Feel"/>
        <TweakColor label="Accent" value={t.accent} options={["#5B5BF5","#0F766E","#D97757","#1F2937"]} onChange={v=>setTweak("accent", v)}/>
        <TweakRadio label="Hero" value={t.heroLayout} options={["split","placeholder"]} onChange={v=>setTweak("heroLayout", v)}/>
        <TweakSection label="Sektionen"/>
        <TweakToggle label="Persona" value={t.showPersonas} onChange={v=>setTweak("showPersonas", v)}/>
        <TweakToggle label="Insights" value={t.showInsights} onChange={v=>setTweak("showInsights", v)}/>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);