// landing-sections.jsx — Wasner Performance One-Page Landingpage (finalisiert).
// Consumes WP, MarkSerif, Wordmark (logo-monograms.jsx) and Icon (icons.jsx).

const { useState, useEffect } = React;

// ── Links · echte URLs ─────────────────────────────────────────
const BOOKING  = 'https://zeeg.me/wasnerperformance/40';            // Erstgespräch buchen
const COACHING = 'https://wasnerperformance.de/coaching';           // Coaching-Seite
const IG       = 'https://www.instagram.com/simon_wasner/';
const YT       = 'https://www.youtube.com/@simon_wasner';

// ── YouTube-Videos ─────────────────────────────────────────────
const VIDEO_INTRO     = '-ZbNRl4VB3w';   // "Warum sollte der Typ mir helfen können?" (Version 2.0)
const VIDEO_MAX       = '9tIbawG9TU8';   // Maximilian K.
const VIDEO_KEVIN     = 'Nzf3xvC1FbA';   // Kevin C.
const ytUrl = (id) => `https://www.youtube-nocookie.com/embed/${id}?rel=0&showinfo=0&modestbranding=1`;

const L = {
  burgundy: '#64303d', deep: '#4a232e', rose: '#a8707c',
  cream: '#f5efe7', creamDeep: '#ece2d4', ink: '#241318', gold: '#b08a5a',
};

function scrollToId(e, id) {
  e.preventDefault();
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.offsetTop - 76, behavior: 'smooth' });
}

// Primary booking button — single repeated CTA.
function BookBtn({ label = 'Erstgespräch buchen', cls = 'btn btn-primary', icon = true }) {
  return (
    <a className={cls} href={BOOKING} target="_blank" rel="noopener">
      {label}{icon && <Icon name="arrowRight" size={17} stroke={2} />}
    </a>
  );
}

// ── Sticky header ───────────────────────────────────────────────
function Header() {
  const [open, setOpen] = useState(false);
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const nav = [
    ['Klienten', 'klienten'],
    ['Über mich', 'about'],
    ['Angebot', 'angebot'],
    ['Kontakt', 'kontakt'],
  ];
  return (
    <header className={'lp-header' + (solid ? ' is-solid' : '')}>
      <div className="lp-bar">
        <a href="#top" className="lp-logo" onClick={(e) => scrollToId(e, 'top')} aria-label="Wasner Performance — Start">
          <span className="lp-logo-mark">WP</span>
          <span className="lp-logo-word">Wasner Performance</span>
        </a>
        <nav className="lp-navlinks" aria-label="Hauptnavigation">
          {nav.map(([label, id]) => (
            <a key={id} href={'#' + id} onClick={(e) => scrollToId(e, id)}>{label}</a>
          ))}
        </nav>
        <div className="lp-bar-actions">
          <BookBtn label="Hier starten" cls="btn btn-primary btn-sm lp-header-cta" />
          <button className="lp-burger" aria-label="Menü" aria-expanded={open}
            onClick={() => setOpen((v) => !v)}>
            <Icon name={open ? 'close' : 'menu'} size={24} stroke={1.8} />
          </button>
        </div>
      </div>
      {open && (
        <div className="lp-mobile-menu">
          {nav.map(([label, id]) => (
            <a key={id} href={'#' + id} onClick={(e) => { setOpen(false); scrollToId(e, id); }}>{label}</a>
          ))}
          <BookBtn label="Hier starten" cls="btn btn-primary" />
        </div>
      )}
    </header>
  );
}

// ── 1 · Hero ────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">Schmerzfrei · Stark · Anders</div>
          <h1 className="display">Schmerzfreies Training mit den Physio-Regeln</h1>
          <p className="lead">Den nervigen Schmerz beim Training loswerden — mit Wissen vom
            Physiotherapeut, nicht vom Fitness-Guru.</p>
          <div className="hero-actions">
            <BookBtn label="Lass uns hier starten" cls="btn btn-primary btn-lg" />
            <a className="btn btn-outline btn-lg" href="#klienten" onClick={(e) => scrollToId(e, 'klienten')}>
              <Icon name="play" size={18} stroke={2} />Stories ansehen
            </a>
          </div>
          <a className="hero-meta" href="#about" onClick={(e) => scrollToId(e, 'about')}>
            <span className="hero-meta-dot"></span>Aufgebaut auf den Physio-Regeln
          </a>
          <div className="hero-trust">
            <a href={IG} target="_blank" rel="noopener"><Icon name="instagram" size={18} />@simon_wasner</a>
            <a href={YT} target="_blank" rel="noopener"><Icon name="play" size={18} />YouTube</a>
          </div>
        </div>
        <div className="hero-visual">
          <div className="video-frame">
            <iframe src={ytUrl(VIDEO_INTRO)} title="Vorstellungsvideo — Warum Wasner Performance"
              loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen></iframe>
          </div>
          <div className="hero-badge">
            <Icon name="check" size={20} stroke={2} color={L.burgundy} />
            <div><strong>Physiotherapeut</strong><span>&amp; Performance-Coach</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 2 · Klienten / Testimonials ────────────────────────────────
function Stars() {
  return (
    <div className="testimonial-stars" aria-label="5 von 5 Sternen">
      {[0, 1, 2, 3, 4].map((i) => (
        <svg key={i} width="17" height="17" viewBox="0 0 24 24" fill={L.gold} stroke="none">
          <path d="M12 4l2.3 4.8 5.2.7-3.8 3.7.9 5.2L12 16.6 7.2 19.1l.9-5.2-3.8-3.7 5.2-.7z" />
        </svg>
      ))}
    </div>
  );
}

function Testimonials() {
  const cards = [
    {
      id: VIDEO_MAX, name: 'Maximilian K.', role: 'Klient · Coaching',
      quote: 'Ich bin gekommen mit einer relativ hartnäckigen BWS-Verspannung und dem Gefühl, ' +
        'dass ich mich nicht bewegen kann und die Schläge beim Kickboxen oft nur aus den Armen ' +
        'kommen — ich konnte mich nicht „reindrehen". Du hast mir am 1. Tag schon eine kleine ' +
        'Morning-Routine geschrieben. Die habe ich mir in die Küche gehängt und jeden Morgen ' +
        'abgearbeitet — und bin dadurch sehr viel beweglicher geworden.',
    },
    {
      id: VIDEO_KEVIN, name: 'Kevin C.', role: 'Klient · Coaching',
      quote: 'Leider hatte ich mir 2 kleinere Verletzungen zugezogen, in der Schulter und im ' +
        'Finger. Das war jedoch kein Problem: Ich habe sofort angepasste Trainingspläne und ' +
        'hilfreiche Tipps bekommen, wie ich damit umgehe. So haben wir es geschafft, trotzdem ' +
        'effektiv zu trainieren und gleichzeitig zu schonen. Ich bin sehr zufrieden und würde ' +
        'sagen: Es lohnt sich.',
    },
  ];
  return (
    <section className="section section-dark" id="klienten">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Klienten</div>
          <h2 className="h2">Deswegen arbeiten meine Klienten mit mir</h2>
          <p className="lead">Echte Stimmen, echte Ergebnisse — hör direkt von Maximilian und Kevin,
            wie sich ihr Training verändert hat</p>
        </div>
        <div className="testimonials-grid">
          {cards.map((c) => (
            <article className="testimonial-card" key={c.id}>
              <div className="testimonial-video">
                <iframe src={ytUrl(c.id)} title={`Testimonial · ${c.name}`}
                  loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen></iframe>
              </div>
              <div className="testimonial-body">
                <Stars />
                <p className="testimonial-quote">{c.quote}</p>
                <div className="testimonial-name">{c.name}</div>
                <div className="testimonial-role">{c.role}</div>
              </div>
            </article>
          ))}
        </div>
        <div className="testimonials-cta">
          <BookBtn label="Auch starten" cls="btn btn-light btn-lg" />
        </div>
      </div>
    </section>
  );
}

// ── 4 · Credentials / Über mich ────────────────────────────────
function Credentials() {
  const creds = [
    ['medal',    'Physio-Ausbildung', 'Wissen mit Tiefe'],
    ['dumbbell', 'Training',          'Ich lebe, was ich lehre'],
    ['target',   'Coachingsession',   'Ergebnisse mit System'],
  ];
  return (
    <section className="section section-alt" id="about">
      <div className="container">
        <div className="about-head">
          <div className="eyebrow">Über mich</div>
          <h2>Ich bin Simon Wasner, Physiotherapeut &amp; Performance-Coach</h2>
        </div>
        <div className="about-photo">
          <img src="photos/simon-vorstellung.jpg"
            alt="Simon Wasner in der Praxis — Physiotherapeut & Performance-Coach" />
        </div>
        <div className="about-copy">
          <p className="body-lg">Meine Mission ist, dir dabei zu helfen, verletzungsfrei und
            maximal effizient zu trainieren. Genau so, wie ich es mir gewünscht hätte, jemanden
            zu haben, der mich diese Lektionen früher lehrt.</p>
          <p className="body-lg">Wenn du Schmerzen beim Training hast, dich aber davon nicht
            aufhalten lassen willst, brauchst du nicht nur Motivation. Du brauchst einen, der
            sein Handwerk wirklich versteht.</p>
          <p className="body-lg"><strong>Damit dein Körper kein Hindernis, sondern deine
            Waffe wird.</strong></p>
        </div>
        <div className="creds-grid">
          {creds.map(([icon, title, sub]) => (
            <div className="cred-card" key={title}>
              <div className="cred-icon"><Icon name={icon} size={26} stroke={1.7} /></div>
              <h3>{title}</h3>
              <p>{sub}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 5 · Problem ────────────────────────────────────────────────
function Problem() {
  const items = [
    ['flame',    'Dein Körper bremst dich',     'Rücken, Schulter oder Knie melden sich bei jedem schweren Satz.'],
    ['calendar', 'Verlorene Trainingstage',     'Du verlierst Trainingstage durch Schmerzen, die du eigentlich vermeiden könntest.'],
    ['search',   'Generische Tipps passen nicht','YouTube-Ratschläge passen nicht zu deinem Körper und deinem Ziel.'],
  ];
  return (
    <section className="section section-alt" id="problem">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Das Problem</div>
          <h2 className="h2">Du trainierst hart — aber dein Körper bremst dich aus</h2>
        </div>
        <div className="problem-grid">
          {items.map(([icon, title, text]) => (
            <div className="problem-card" key={title}>
              <div className="problem-icon"><Icon name={icon} size={24} stroke={1.7} /></div>
              <h3 className="card-title">{title}</h3>
              <p className="card-text">{text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 6 · Story ──────────────────────────────────────────────────
function Story() {
  return (
    <section className="section" id="story">
      <div className="container story-grid">
        <div className="story-visual">
          <img className="story-img" src="photos/simon-physio.jpg" alt="Simon Wasner — Physiotherapie-Urkunde & Praxis" />
        </div>
        <div className="story-copy">
          <div className="eyebrow">Warum Wasner Performance?</div>
          <h2 className="h2">Ein Fundament, das schwere Lasten aushält</h2>
          <p className="body-lg">Ich bin Physiotherapeut und Performance-Coach. Statt Schmerzen
            wegzutrainieren oder zu ignorieren, baust du mit den <strong>Physio-Regeln</strong> ein
            Fundament, das schwere Lasten und hohes Volumen aushält — nachhaltig, sicher, effektiv.</p>
          <ul className="story-list">
            {['Schmerz verstehen statt überspielen',
              'Technik, die deine Gelenke schont',
              'Belastbarkeit, die mitwächst'].map((t) => (
              <li key={t}><Icon name="check" size={18} stroke={2.2} color={L.burgundy} />{t}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ── 7 · Angebot ────────────────────────────────────────────────
function Features() {
  const cards = [
    ['dumbbell', 'Schmerzfreies Krafttraining', 'Technik & Programmierung, die deine Gelenke schont.'],
    ['target',   'Verletzungs­prävention', 'Schwachstellen finden, bevor sie dich stoppen.'],
    ['pulse',    'Mobility & Physio-Checks',    'Gezielte Diagnostik statt Rätselraten.'],
    ['chart',    'Individueller Trainingsplan', 'Auf dich, dein Ziel und deinen Körper zugeschnitten.'],
  ];
  return (
    <section className="section section-alt" id="angebot">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Das Angebot</div>
          <h2 className="h2">Das bekommst du</h2>
        </div>
        <div className="features-grid">
          {cards.map(([icon, title, text]) => (
            <article className="feature-card" key={title}>
              <div className="feature-body">
                <div className="feature-icon"><Icon name={icon} size={24} stroke={1.7} /></div>
                <h3 className="card-title">{title}</h3>
                <p className="card-text">{text}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 8 · Final CTA ──────────────────────────────────────────────
function FinalCTA() {
  return (
    <section className="section final-wrap" id="kontakt">
      <div className="container">
        <div className="final-cta">
          <div className="final-glow" aria-hidden="true">
            <MarkSerif fg={L.cream} accent={L.cream} size={260} />
          </div>
          <div className="final-inner">
            <div className="eyebrow gold">Bereit?</div>
            <h2 className="final-h">Lass uns deinen stärksten, schmerzfreien Körper bauen</h2>
            <p className="final-trust">Die Körperanalyse ist kostenlos &amp; unverbindlich.
              Keine versteckten Kosten. Kein Spam. Du entscheidest — ohne Druck, ohne Risiko.</p>
            <BookBtn label="Jetzt Erstgespräch buchen" cls="btn btn-light btn-lg" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="lp-footer">
      <div className="container lp-footer-grid">
        <div>
          <Wordmark fg={L.cream} accent={L.gold} font="'Bodoni Moda', serif" weight={600}
            track="0.4em" size={15} />
          <p className="lp-footer-tag">Physio Performance by Wasner Performance — Simon Wasner.
            Schmerzfrei auf Top-Niveau, mit den Physio-Regeln.</p>
        </div>
        <div className="lp-footer-social">
          <a href={IG} target="_blank" rel="noopener" aria-label="Instagram"><Icon name="instagram" size={20} /></a>
          <a href={YT} target="_blank" rel="noopener" aria-label="YouTube"><Icon name="play" size={20} /></a>
          <BookBtn label="Hier starten" cls="btn btn-light btn-sm" />
        </div>
      </div>
      <div className="container lp-footer-legal">
        <span className="disclaimer">Meine Leistungen sind performance- und präventionsorientiert
          und basieren auf meinem physiotherapeutischen Hintergrund und Fachwissen, jedoch außerhalb
          medizinischer Heilbehandlungen.</span>
        <span className="lp-footer-links">
          <a href="impressum.html">Impressum</a>
          <a href="datenschutz.html">Datenschutz</a>
          <a href="datenschutz.html#cookies">Cookies</a>
        </span>
      </div>
    </footer>
  );
}

function Landing() {
  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <Problem />
        <Story />
        <Credentials />
        <Testimonials />
        <Features />
        <FinalCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
}

Object.assign(window, { Landing });