/* 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 März 2026 — Wochenansicht mit Tierärzten und TFAs, Schichtfarben"/>;
}
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"/>;
}

// ---------- 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/>, 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 Tierärzten und TFAs" },
    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 }) {
  return (
    <section className="section" id="preise">
      <div className="wrap">
        <div style={{maxWidth:780, marginBottom:40}}>
          <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 className="price-grid">
          {t.pricing.tiers.map((tier,i)=>(
            <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>
                <div className="price-amount"><sup>€</sup>{tier.price}<small>{tier.suffix}</small></div>
                <div style={{marginTop:8, fontSize:13, color:"var(--mut-fg)"}}>{tier.target}</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.product, t.footer.practice, t.footer.legal].map((sec,i)=>(
            <div key={i}>
              <h4>{sec.title}</h4>
              <ul>
                {sec.links.map((l,j)=>(
                  <li key={j}><a href={l[1]}>{l[0]}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>{t.footer.copy}</span>
          <span>VetTime GbR · Wönnichstraße 3 · 10317 Berlin</span>
        </div>
      </div>
    </footer>
  );
}

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