/* global React, Icon, BrandMark */
const { useState: useStateS } = React;

// ---------- Product screenshots ----------

function ShotFrame({ src, alt, aspect = "3420 / 1970" }) {
  return (
    <div className="shot-frame" style={{aspectRatio: aspect}}>
      <img src={src} alt={alt} loading="lazy"/>
    </div>
  );
}

function ShotMobile({ src, alt }) {
  return (
    <div className="shot-mobile">
      <img src={src} alt={alt} loading="lazy"/>
    </div>
  );
}

function MockTime() {
  return <ShotMobile src="src/assets/zeiterfassung-mobile.png" alt="Zeiterfassung am Smartphone — Zeiteinträge mit Pausen und Speichern"/>;
}
function MockShift() {
  return <ShotFrame src="src/assets/dienstplan.png" alt="Dienstplan — Wochenansicht mit Ärzt:innen und MFAs"/>;
}
function MockRufbereitschaft() {
  // Portrait screenshot — render in a constrained portrait frame so full content is visible.
  return (
    <div style={{display:"flex", justifyContent:"center", padding:"8px 0"}}>
      <div style={{maxWidth:380, width:"100%", border:"1px solid var(--bd)", borderRadius:14, overflow:"hidden", background:"white", boxShadow:"0 28px 60px -32px rgba(20,14,4,0.22), 0 2px 6px rgba(20,14,4,0.04)"}}>
        <img src="src/assets/rufbereitschaft.png" alt="Rufbereitschaft konfigurieren — Vergütungsregeln, Pauschalen, Zuschläge" loading="lazy" style={{width:"100%", height:"auto", display:"block"}}/>
      </div>
    </div>
  );
}
function MockAbsence() {
  return <ShotFrame src="src/assets/abwesenheiten.png" alt="Abwesenheiten 2026 — Jahresheatmap mit Hover-Detail pro Tag"/>;
}
function MockReport() {
  return <ShotFrame src="src/assets/monatsbericht.png" alt="Monatsbericht — Iststunden, Sollstunden, Saldo, Bezuschlagte Zeit"/>;
}

// Real screenshots for the Geräteplanung carousel + KI-Vorschlag still shot.
const PLAN_MOCK_STYLES = [
  '.plan-carousel { position: relative; width: 100%; display: flex; flex-direction: column; gap: 14px; }',
  '.plan-carousel-frame { position: relative; width: 100%; aspect-ratio: 3420 / 1970; border: 1px solid var(--bd); border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 28px 60px -32px rgba(20,14,4,0.22), 0 2px 6px rgba(20,14,4,0.04); }',
  '.plan-carousel-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 280ms ease; }',
  '.plan-carousel-frame img.is-active { opacity: 1; }',
  '.plan-carousel-caption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--mut-fg); line-height: 1.4; }',
  '.plan-carousel-caption .step { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pri); background: hsl(239 84% 67% / 0.1); padding: 4px 10px; border-radius: 99px; border: 1px solid hsl(239 84% 67% / 0.25); }',
  '.plan-carousel-caption .label { font-weight: 600; color: hsl(20 14% 22%); font-size: 13.5px; }',
  '.plan-carousel-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; }',
  '.plan-carousel-arrow { width: 32px; height: 32px; border-radius: 50%; background: white; border: 1px solid var(--bd); display: inline-flex; align-items: center; justify-content: center; color: hsl(20 14% 32%); cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }',
  '.plan-carousel-arrow:hover { background: hsl(60 5% 96%); border-color: hsl(20 6% 70%); color: var(--fg); }',
  '.plan-carousel-arrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }',
  '.plan-carousel-dots { display: inline-flex; gap: 6px; }',
  '.plan-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(20 6% 80%); border: 0; padding: 0; cursor: pointer; transition: background 120ms ease, transform 120ms ease; }',
  '.plan-carousel-dot.is-active { background: var(--pri); transform: scale(1.4); }',
  '.plan-carousel-dot:hover { background: hsl(20 6% 60%); }',
  '.plan-carousel-dot.is-active:hover { background: var(--pri); }',
  '.plan-single { width: 100%; display: flex; justify-content: center; padding: 4px 0; }',
  '.plan-single-frame { max-width: 420px; width: 100%; border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; background: white; box-shadow: 0 28px 60px -32px rgba(20,14,4,0.22), 0 2px 6px rgba(20,14,4,0.04); }',
  '.plan-single-frame img { width: 100%; height: auto; display: block; }',
].join('\n');

function MockDevices() {
  const slides = [
    { src: 'src/assets/einsatzplanung.png',                 step: 'Wochenplan',      label: 'Einsatzplanung — Wochenansicht mit Belegung pro Gerät' },
    { src: 'src/assets/einsatzplanung-einstellungen-1.png', step: 'Einstellung 1/3', label: 'Eigene Gerätekategorien und Geräte je Standort' },
    { src: 'src/assets/einsatzplanung-einstellungen-2.png', step: 'Einstellung 2/3', label: 'Bearbeitungszeiten je Standort und Geräteart' },
    { src: 'src/assets/einsatzplanung-einstellungen-3.png', step: 'Einstellung 3/3', label: 'Mitarbeiter-Qualifikationen pro Gerätetyp' },
  ];
  const [i, setI] = useStateS(0);
  const n = slides.length;
  const go = (delta) => setI((p) => (p + delta + n) % n);
  return (
    <div className="plan-carousel" role="region" aria-roledescription="Karussell" aria-label="Geräteplanung — Übersicht und Einstellungen">
      <div className="plan-carousel-frame">
        {slides.map((s, idx) => (
          <img key={idx} src={s.src} alt={s.label} loading={idx === 0 ? 'eager' : 'lazy'} className={idx === i ? 'is-active' : ''} aria-hidden={idx !== i}/>
        ))}
      </div>
      <div className="plan-carousel-caption">
        <span className="step">{slides[i].step}</span>
        <span className="label">{slides[i].label}</span>
        <div className="plan-carousel-nav">
          <div className="plan-carousel-dots" role="tablist" aria-label="Folie auswählen">
            {slides.map((_, idx) => (
              <button key={idx} type="button" role="tab" aria-selected={idx === i} aria-label={'Folie ' + (idx + 1) + ' von ' + n} className={'plan-carousel-dot' + (idx === i ? ' is-active' : '')} onClick={() => setI(idx)}/>
            ))}
          </div>
          <button type="button" className="plan-carousel-arrow" aria-label="Vorherige Folie" onClick={() => go(-1)}>
            <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>
          </button>
          <button type="button" className="plan-carousel-arrow" aria-label="Nächste Folie" onClick={() => go(1)}>
            <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>
      <style>{PLAN_MOCK_STYLES}</style>
    </div>
  );
}

function MockAI() {
  return (
    <div className="plan-single" aria-label="KI-Vorschlag — Dialog zur Wochenplanung">
      <div className="plan-single-frame">
        <img src="src/assets/einsatzplanung-ki-vorschlag.png" alt="KI-Vorschlag — Standort, Basis, Hinweise und automatisch berücksichtigte Kriterien" loading="lazy"/>
      </div>
      <style>{PLAN_MOCK_STYLES}</style>
    </div>
  );
}

// ---------- Sections ----------

function VerticalFit({ t }) {
  return (
    <section className="section" id="warum">
      <div className="wrap">
        <div style={{maxWidth:780, marginBottom:48}}>
          <div className="eyebrow"><span className="dot"/>{t.fit.eyebrow}</div>
          <h2 style={{marginTop:14}}>{t.fit.h2}</h2>
          <p className="lede" style={{marginTop:16}}>{t.fit.sub}</p>
        </div>
        <div style={{display:"grid", gap:16, gridTemplateColumns:"repeat(auto-fit, minmax(260px, 1fr))"}}>
          {t.fit.cards.map((c,i)=>(
            <div className="card" key={i}>
              <div style={{width:36, height:36, borderRadius:8, background:"hsl(239 84% 67% / 0.1)", color:"var(--pri)", display:"flex", alignItems:"center", justifyContent:"center", marginBottom:18}}>
                <Icon name={c.icon} size={18}/>
              </div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureTour({ t }) {
  const [active, setActive] = useStateS("time");
  const map = { time: <MockTime/>, shift: <MockShift/>, devices: <MockDevices/>, ai: <MockAI/>, oncall: <MockRufbereitschaft/>, absence: <MockAbsence/>, report: <MockReport/> };
  return (
    <section className="section" id="funktionen" style={{background:"hsl(60 5% 98%)"}}>
      <div className="wrap">
        <div style={{maxWidth:780, marginBottom:40}}>
          <div className="eyebrow"><span className="dot"/>{t.tour.eyebrow}</div>
          <h2 style={{marginTop:14}}>{t.tour.h2}</h2>
        </div>
        <div className="tour">
          <div className="tour-tabs" role="tablist">
            {t.tour.tabs.map(tab=>(
              <button key={tab.id} role="tab" aria-selected={active===tab.id} className={`tour-tab ${active===tab.id?"active":""}`} onClick={()=>setActive(tab.id)}>
                <span className="ico"><Icon name={tab.icon} size={18}/></span>
                <span>{tab.title}<small>{tab.caption}</small></span>
              </button>
            ))}
          </div>
          <div className="tour-stage">{map[active]}</div>
        </div>
      </div>
    </section>
  );
}

function SetupSteps({ t }) {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{display:"grid", gap:32, gridTemplateColumns:"1fr", marginBottom:36}}>
          <div style={{maxWidth:780}}>
            <div className="eyebrow"><span className="dot"/>{t.setup.eyebrow}</div>
            <h2 style={{marginTop:14}}>{t.setup.h2}</h2>
            <p className="lede" style={{marginTop:16}}>{t.setup.sub}</p>
          </div>
        </div>
        <div className="steps">
          {t.setup.steps.map((s,i)=>(
            <div className="step" key={i}>
              <div className="step-num">{s.n} / {String(t.setup.steps.length).padStart(2,"0")}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Persona({ t }) {
  const [tab, setTab] = useStateS("manager");
  const cur = t.persona.tabs.find(x=>x.id===tab);
  // Pick a contextual screenshot per persona
  const shotFor = {
    manager: { src: "src/assets/dienstplan.png", alt: "Dienstplan-Wochenansicht mit Ärzt:innen und MFAs" },
    owner: { src: "src/assets/monatsbericht.png", alt: "Monatsbericht mit Iststunden, Sollstunden und Monatssaldo" },
    team: { src: "src/assets/abwesenheiten.png", alt: "Abwesenheiten-Jahresheatmap" },
    inhaber: { src: "src/assets/monatsbericht.png", alt: "Monatsbericht mit Iststunden, Sollstunden und Monatssaldo" },
  };
  const shot = shotFor[tab] || shotFor.manager;
  return (
    <section className="section" style={{background:"hsl(60 5% 98%)"}}>
      <div className="wrap">
        <div style={{display:"flex", justifyContent:"space-between", flexWrap:"wrap", gap:24, alignItems:"flex-end", marginBottom:36}}>
          <div style={{maxWidth:680}}>
            <div className="eyebrow"><span className="dot"/>{t.persona.eyebrow}</div>
            <h2 style={{marginTop:14}}>{t.persona.h2}</h2>
          </div>
          <div className="persona" role="tablist">
            {t.persona.tabs.map(x=>(
              <button key={x.id} className={tab===x.id?"active":""} onClick={()=>setTab(x.id)}>{x.title}</button>
            ))}
          </div>
        </div>
        <div style={{display:"grid", gap:24, gridTemplateColumns:"1fr"}}>
          <div style={{display:"grid", gap:24, gridTemplateColumns:"1fr", alignItems:"stretch"}}>
            <div style={{display:"grid", gap:24, gridTemplateColumns:"1fr 1.3fr", alignItems:"stretch"}} className="persona-grid">
              <div style={{display:"grid", gap:12, alignContent:"start"}}>
                {cur.bullets.map((b,i)=>(
                  <div key={i} style={{display:"flex", gap:10, alignItems:"flex-start", padding:"14px 16px", background:"white", border:"1px solid var(--bd)", borderRadius:10}}>
                    <span style={{color:"var(--pri)", marginTop:1, flexShrink:0}}><Icon name="check" size={16}/></span>
                    <span style={{fontSize:14}}>{b}</span>
                  </div>
                ))}
                <a href="#" style={{color:"var(--pri)", fontSize:14, fontWeight:500, marginTop:6, padding:"4px 4px"}}>{cur.cta}</a>
              </div>
              <ShotFrame src={shot.src} alt={shot.alt}/>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .persona-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function InsightsTeaser({ t }) {
  return (
    <section className="section-tight">
      <div className="wrap">
        <div className="insights-teaser">
          <div>
            <span className="tag" style={{color:"hsl(28 80% 32%)", background:"hsl(38 92% 50% / 0.1)", borderColor:"hsl(38 92% 50% / 0.3)"}}>{t.insights.tag}</span>
            <h2 style={{marginTop:14}}>{t.insights.h2}</h2>
            <p className="lede" style={{marginTop:16}}>{t.insights.sub}</p>
            <p style={{marginTop:18, fontSize:13, color:"var(--mut-fg)", maxWidth:"60ch"}}>{t.insights.note}</p>
            <div style={{marginTop:22, display:"flex", gap:10}}>
              <a className="btn btn-outline" href="demo-buchen.html"><Icon name="arrow-right" size={14}/> {t.insights.cta}</a>
            </div>
          </div>
          <ShotFrame src="src/assets/abwesenheiten.png" alt="Datenfundament — Abwesenheiten und Auslastung über das Jahr"/>
        </div>
      </div>
    </section>
  );
}

function Pricing({ t }) {
  const [yearly, setYearly] = useStateS(false);
  return (
    <section className="section" id="preise">
      <div className="wrap">
        <div style={{maxWidth:780, marginBottom:24}}>
          <div className="eyebrow"><span className="dot"/>{t.pricing.eyebrow}</div>
          <h2 style={{marginTop:14}}>{t.pricing.h2}</h2>
          <p className="lede" style={{marginTop:16}}>{t.pricing.sub}</p>
        </div>
        <div style={{display:"flex", justifyContent:"flex-start", marginBottom:32}}>
          <div role="tablist" aria-label="Abrechnung" style={{display:"inline-flex", padding:4, background:"hsl(60 5% 96%)", border:"1px solid var(--bd)", borderRadius:99, gap:2}}>
            <button role="tab" aria-selected={!yearly} onClick={()=>setYearly(false)} style={{border:0, background: !yearly?"white":"transparent", color: !yearly?"var(--fg)":"var(--mut-fg)", padding:"8px 16px", borderRadius:99, fontSize:13, fontWeight:500, cursor:"pointer", boxShadow: !yearly?"0 1px 2px rgba(0,0,0,0.06)":"none"}}>{t.pricing.billingMonthly || "Monatlich"}</button>
            <button role="tab" aria-selected={yearly} onClick={()=>setYearly(true)} style={{border:0, background: yearly?"white":"transparent", color: yearly?"var(--fg)":"var(--mut-fg)", padding:"8px 16px", borderRadius:99, fontSize:13, fontWeight:500, cursor:"pointer", boxShadow: yearly?"0 1px 2px rgba(0,0,0,0.06)":"none", display:"inline-flex", alignItems:"center", gap:8}}>
              {t.pricing.billingYearly || "Jährlich · −10 %"}
            </button>
          </div>
        </div>
        <div className="price-grid">
          {t.pricing.tiers.map((tier,i)=>{
            const price = yearly ? (tier.priceYearly ?? tier.price) : (tier.priceMonthly ?? tier.price);
            return (
              <div className={`price-card ${tier.featured?"featured":""}`} key={i}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <span className="price-name">{tier.name}</span>
                  {tier.featured && <span className="tag" style={{background:"hsl(239 84% 67% / 0.1)", borderColor:"hsl(239 84% 67% / 0.3)", color:"var(--pri)"}}>Beliebt</span>}
                </div>
                <div>
                  {tier.custom ? (
                    <div className="price-amount" style={{fontSize:30, lineHeight:1.1, paddingTop:6}}>{tier.priceLabel}</div>
                  ) : (
                    <div className="price-amount"><sup>€</sup>{price}<small>{tier.suffix}</small></div>
                  )}
                  <div style={{marginTop:8, fontSize:13, color:"var(--mut-fg)"}}>{tier.target}{yearly && !tier.custom && <span style={{color:"var(--pri)", marginLeft:6, fontWeight:500}}>· jährlich abgerechnet</span>}</div>
                </div>
                <ul className="price-list">
                  {tier.features.map((f,j)=>(
                    <li key={j}><span className="ico"><Icon name="check" size={16}/></span><span>{f}</span></li>
                  ))}
                </ul>
                <a href="demo-buchen.html" className={`btn ${tier.featured?"btn-primary":"btn-outline"}`} style={{width:"100%"}}>{tier.cta}</a>
              </div>
            );
          })}
        </div>
        <div style={{marginTop:20, fontSize:13, color:"var(--mut-fg)"}}>{t.pricing.footnote}</div>
      </div>
    </section>
  );
}

function FAQ({ t }) {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="section" id="faq" style={{background:"hsl(60 5% 98%)"}}>
      <div className="wrap">
        <div style={{textAlign:"center", maxWidth:680, margin:"0 auto 40px"}}>
          <div className="eyebrow" style={{justifyContent:"center"}}><span className="dot"/>{t.faq.eyebrow}</div>
          <h2 style={{marginTop:14}}>{t.faq.h2}</h2>
        </div>
        <div className="faq">
          {t.faq.items.map((it,i)=>(
            <div className={`faq-item ${open===i?"open":""}`} key={i}>
              <button className="faq-q" onClick={()=>setOpen(open===i?-1:i)}>
                <span>{it.q}</span>
                <span className="chev"><Icon name="plus" size={18}/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTABanner({ t }) {
  return (
    <section className="section-tight">
      <div className="wrap">
        <div className="cta-banner">
          <div>
            <h2>{t.cta.h2}</h2>
            <div className="sub">{t.cta.sub}</div>
          </div>
          <div className="actions">
            <a className="btn btn-lg btn-on-pri" href="demo-buchen.html">{t.cta.cta1}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="brand" style={{color:"var(--fg)"}}>
              <BrandMark variant="wordmark" tone="white" size={24}/>
            </div>
            <p style={{marginTop:14, maxWidth:32+"ch"}}>{t.footer.tagline}</p>
          </div>
          {[t.footer.offering, t.footer.product, t.footer.practice, t.footer.legal].filter(Boolean).map((sec,i)=>(
            <div key={i}>
              <h4>{sec.title}</h4>
              <ul>
                {sec.links.map((l,j)=>(
                  <li key={j}><a href={l[1]} {...(l[2] ? {target:"_blank", rel:"noopener"} : {})}>{l[0]}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copy}</span>
          <span>Wönnichstraße 3 · 10317 Berlin</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ShotFrame, VerticalFit, FeatureTour, SetupSteps, Persona, InsightsTeaser, Pricing, FAQ, CTABanner, Footer, MockTime, MockShift, MockDevices, MockAI, MockAbsence, MockReport, MockRufbereitschaft });