// sections.jsx — Offerings, Services, Journey, Team, Testimonials, Location, Footer
function Offerings({ lang }) {
  const t = COPY[lang].offerings;
  return (
    <section className="offerings" id="offerings">
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <h2 className="sec-title">{t.title}</h2>
        <p className="sec-subtitle">{t.subtitle}</p>
        <div className="offerings-list">
          {t.areas.map((a, i) => (
            <div className="offering-row" key={i}>
              <div className="num">{a.n}</div>
              <h3 className="name">{a.head}</h3>
              <div className="body">
                <p className="lead">{a.lead}</p>
                <ul className="off-list">
                  {a.items.map((it, j) => <li key={j}>{it}</li>)}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services({ lang }) {
  const t = COPY[lang].services;
  const [open, setOpen] = React.useState(null);
  return (
    <section className="services-section" id="services">
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <h2 className="sec-title" style={{ whiteSpace: "pre-line" }}>{t.title}</h2>
        <p className="sec-subtitle">{t.subtitle}</p>
        <div className="services-list">
          {t.rows.map((r, i) => (
            <div key={i} className={"service-row " + (open === i ? "open" : "")}
                 onClick={() => setOpen(open === i ? null : i)}>
              <div className="num">{r.n}</div>
              <div className="name">{r.name}</div>
              <div className="desc">{r.desc}</div>
              <div className="thumb">
                {r.img && (
                  <div className="thumb-frame">
                    <img src={window.resolveAsset ? window.resolveAsset(r.img) : r.img} alt={r.name} loading="lazy" />
                  </div>
                )}
              </div>
              <div className="expand">
                <div className="expand-inner">
                  <div className="meta">
                    {r.meta.map(([dt, dd], j) => (
                      <div key={j}>
                        <dt>{dt}</dt>
                        {Array.isArray(dd) ? (
                          <ul className="meta-indication-list">
                            {dd.map((item, k) => <li key={k}>{item}</li>)}
                          </ul>
                        ) : (
                          <dd>{dd}</dd>
                        )}
                      </div>
                    ))}
                  </div>
                  <a className="svc-more"
                     href={(window.__methodeUrl || "methode.html") + "?m=" + r.n + "&lang=" + lang}
                     onClick={(e) => e.stopPropagation()}>
                    {t.readMore} <span className="svc-more-arrow">&rarr;</span>
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Journey({ lang }) {
  const t = COPY[lang].journey;
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      // active = progress through the journey section
      const total = r.height - vh * 0.3;
      const p = Math.max(0, Math.min(1, (vh * 0.5 - r.top) / total));
      setActive(Math.min(4, Math.floor(p * 5)));
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <section className="journey" id="journey" ref={ref}>
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <h2 className="sec-title">{t.title}</h2>
        <div className="journey-track">
          {t.steps.map((s, i) => (
            <div key={i} className={"j-step " + (i <= active ? "active" : "")}>
              <div className="dot" />
              <span className="mono">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ lang }) {
  const t = COPY[lang].about;
  return (
    <section id="about">
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <div className="about-top" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "var(--gutter)", alignItems: "start" }}>
          <div>
            <div className="team-card" style={{ aspectRatio: "3/4", maxWidth: 480 }}>
              <img className="portrait-img" src={window.__resources && window.__resources.yehiaPortrait || "assets/yehia.png"} alt="Yehia Hassan" />
              <div className="info">
                <h4>Yehia Hassan</h4>
                <div className="role">{lang === "de" ? "Dipl. Physiotherapeut" : "Physiotherapist"} · Winterthur</div>
              </div>
            </div>
          </div>
          <div>
            <h2 className="sec-title" style={{ marginBottom: 28 }}>{t.title}</h2>
            <p className="sec-subtitle" style={{ marginBottom: 36 }}>{t.subtitle}</p>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--ink-soft)", margin: "0 0 20px", maxWidth: "52ch" }}>{t.intro}</p>
            <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 20px", maxWidth: "52ch" }}>{t.p2}</p>
            <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--ink-soft)", margin: "0 0 32px", maxWidth: "52ch" }}>{t.p3}</p>
            <div style={{ paddingTop: 20, borderTop: "1px solid var(--line)" }}>
              <div className="mono" style={{ color: "var(--ink-mute)", marginBottom: 10 }}>{t.langsLabel}</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {t.langs.map((l, i) => <span key={i} className="bm-therapy">{l}</span>)}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 100, paddingTop: 40, borderTop: "1px solid var(--ink)" }}>
          <div className="mono" style={{ color: "var(--ink-mute)", marginBottom: 30 }}>{t.cvLabel}</div>
          <div>
            {t.cv.map((row, i) => (
              <div key={i} className="cv-row" style={{ display: "grid", gridTemplateColumns: "180px 1fr 1.3fr", gap: 20, padding: "22px 0", borderBottom: "1px solid var(--line)", alignItems: "baseline" }}>
                <div className="mono" style={{ color: "var(--ink-mute)" }}>{row.y}</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 26, lineHeight: 1.1 }}>{row.t}</div>
                <div style={{ fontSize: 14.5, color: "var(--ink-soft)" }}>{row.p}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });

function Testimonials({ lang }) {
  const t = COPY[lang].testim;
  return (
    <section className="testim" id="testim">
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <h2 className="sec-title" style={{ whiteSpace: "pre-line" }}>{t.title}</h2>
        <div className="testim-cards">
          {t.items.map((item, i) => (
            <div key={i} className="testim-card">
              <div className="q">{item.q}</div>
              <div className="meta">
                <div className="who"><b>{item.who}</b><span>{item.ctx}</span></div>
                <div className="stars">
                  {[0,1,2,3,4].map((s) => <Star key={s} />)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Location({ lang }) {
  const t = COPY[lang].location;
  const ct = COPY[lang].contact || {};
  const _day = (new Date().getDay() + 6) % 7; // Mon=0…Sun=6
  // condensed rows: 0=Mo–Do, 1=Fr, 2=Sa/So
  const todayIdx = _day <= 3 ? 0 : _day === 4 ? 1 : 2;
  const [form, setForm] = React.useState({ firstname: "", lastname: "", email: "", message: "" });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [imgModal, setImgModal] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSending(true);
    fetch("https://formspree.io/f/xkolgdwa", {
      method: "POST",
      headers: { "Accept": "application/json", "Content-Type": "application/json" },
      body: JSON.stringify({
        firstname: form.firstname,
        lastname: form.lastname,
        email: form.email,
        message: form.message,
      }),
    })
      .then(r => r.json())
      .then(data => {
        setSending(false);
        if (data.ok) { setSent(true); setForm({ firstname: "", lastname: "", email: "", message: "" }); }
        else { alert("Fehler beim Senden. Bitte versuchen Sie es erneut."); }
      })
      .catch(() => { setSending(false); alert("Fehler beim Senden. Bitte versuchen Sie es erneut."); });
  };

  return (
    <section id="location">
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <h2 className="sec-title" style={{ whiteSpace: "pre-line" }}>{t.title}</h2>
        <p className="sec-subtitle">{t.subtitle}</p>

        {/* Map + Info grid */}
        <div className="location-grid">
          <div className="map-card">
            <iframe
              className="gmap-host"
              title="New Motion Physio — Gertrudstrasse 12, 8400 Winterthur"
              src="https://www.google.com/maps?q=Gertrudstrasse+12,+8400+Winterthur,+Switzerland&z=17&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
          </div>
          <div className="info-col">
            <div className="info-block">
              <h5>{t.addressLabel}</h5>
              <address>
                {t.addressLines.map((l, i) => (
                  <div key={i} style={{ fontSize: i === 0 ? 28 : 22 }}>{l}</div>
                ))}
              </address>
            </div>
            <div className="info-block">
              <h5>{t.contactLabel}</h5>
              <div>
                {t.contact.map((c, i) => (
                  <div key={i} style={{ fontFamily: "var(--f-display)", fontSize: 24 }}>{c}</div>
                ))}
              </div>
            </div>
            <div className="info-block">
              <h5>{t.hoursLabel}</h5>
              <table className="hours-table">
                <tbody>
                  {t.hours.map(([d, h], i) => (
                    <tr key={i} className={i === todayIdx ? "today" : ""}>
                      <td className="day">{d}</td>
                      <td className="time">{h}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* Photos + Access instructions */}
        <div className="location-lower">
          <div className="access-block">
            <div className="access-block-head">
              <div className="sec-eyebrow" style={{ margin: 0 }}>{t.accessLabel}</div>
              <p className="access-transit">{t.transitInfo}</p>
            </div>
            <ul className="access-steps">
              {(t.accessSteps || []).map((s, i) => (
                <li key={i}>
                  <span className="step-icon">{s.icon}</span>
                  <span>{s.text}</span>
                  {s.img && (
                    <button className="step-thumb" onClick={() => setImgModal(s.img)} aria-label="Vergrössern">
                      <img src={s.img} alt={s.text} />
                    </button>
                  )}
                </li>
              ))}
            </ul>
          </div>
          <div className="location-photos">
            <div className="loc-photo loc-photo--wide loc-photo--contain">
              <img
                src={window.__resources && window.__resources.buildingExterior || "assets/building-exterior.avif"}
                alt={t.photoAlt1} loading="lazy" />
            </div>
          </div>
        </div>

        {/* Contact form */}
        <div className="contact-block">
          <div className="contact-block-left">
            <div className="sec-eyebrow" style={{ margin: "0 0 20px" }}>{ct.eyebrow}</div>
            <h3 className="contact-block-title">{ct.title}</h3>
            <p className="contact-block-sub">{ct.subtitle}</p>
          </div>
          <div className="contact-block-right">
            {sent ? (
              <div className="contact-success">
                <div className="success-check">✓</div>
                <h4>{ct.success}</h4>
                <p>{ct.successSub}</p>
              </div>
            ) : (
              <form className="contact-form" onSubmit={handleSubmit}>
                <div className="form-row">
                  <div className="form-field">
                    <label>{ct.firstname}</label>
                    <input type="text" required placeholder={ct.firstname}
                      value={form.firstname}
                      onChange={e => setForm({ ...form, firstname: e.target.value })} />
                  </div>
                  <div className="form-field">
                    <label>{ct.lastname}</label>
                    <input type="text" required placeholder={ct.lastname}
                      value={form.lastname}
                      onChange={e => setForm({ ...form, lastname: e.target.value })} />
                  </div>
                </div>
                <div className="form-field">
                  <label>{ct.email}</label>
                  <input type="email" required placeholder="you@email.com"
                    value={form.email}
                    onChange={e => setForm({ ...form, email: e.target.value })} />
                </div>
                <div className="form-field">
                  <label>{ct.message}</label>
                  <textarea required rows={5} placeholder={ct.messagePlaceholder}
                    value={form.message}
                    onChange={e => setForm({ ...form, message: e.target.value })} />
                </div>
                <button type="submit" className="btn" disabled={sending}
                  style={{ alignSelf: "flex-start", minWidth: 140 }}>
                  {sending ? "…" : ct.send}
                </button>
              </form>
            )}
          </div>
        </div>

      </div>

      {imgModal && (
        <div className="img-modal-overlay" onClick={() => setImgModal(null)}>
          <img className="img-modal-img" src={imgModal} alt="" onClick={e => e.stopPropagation()} />
        </div>
      )}
    </section>
  );
}

function Footer({ lang }) {
  const t = COPY[lang].foot;
  return (
    <footer>
      <div style={{ maxWidth: 1600, margin: "0 auto" }}>
        <h2 className="foot-big">
          {t.big[0]} <em className="italic">{t.big[1]}</em>
        </h2>
        <div className="foot-cols">
          <div className="foot-col">
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 20 }}>
              <img src={(window.__resources && window.__resources.navLogo) || "assets/logo.avif"} alt="New Motion" width="24" height="24" style={{ display: "block", flexShrink: 0 }} />
              <span style={{ fontFamily: "var(--f-display)", fontSize: 22 }}>New Motion</span>
            </div>
            <div style={{ display: "flex", gap: 10 }}>
              {[
                { label: "Google", href: "https://www.google.com/maps/place/New+Motion+Physiotherapie/@47.500088,8.7206851,610m/data=!3m2!1e3!4b1!4m6!3m5!1s0x479a99cb8e349fe9:0x67892b5f7da7003!8m2!3d47.500088!4d8.7206851!16s%2Fg%2F11xcvng03c?entry=ttu&g_ep=EgoyMDI2MDYxNi4wIKXMDSoASAFQAw%3D%3D", svg: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M21.805 10.023H12v3.977h5.617C16.923 16.24 14.7 17.5 12 17.5a5.5 5.5 0 1 1 3.536-9.727l2.828-2.828A9.5 9.5 0 1 0 12 21.5c5.247 0 9.5-3.753 9.5-9.5 0-.66-.064-1.305-.195-1.977Z"/></svg> },
                { label: "Instagram", href: "https://www.instagram.com/newmotion_physio/", svg: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.334 3.608 1.308.975.975 1.246 2.242 1.308 3.608.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.062 1.366-.334 2.633-1.308 3.608-.975.975-2.242 1.246-3.608 1.308-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.366-.062-2.633-.334-3.608-1.308-.975-.975-1.246-2.242-1.308-3.608C2.175 15.584 2.163 15.204 2.163 12s.012-3.584.07-4.85c.062-1.366.334-2.633 1.308-3.608C4.516 2.497 5.783 2.225 7.15 2.233 8.416 2.175 8.796 2.163 12 2.163Zm0-2.163C8.741 0 8.332.014 7.052.072 5.197.157 3.355.745 2.014 2.086.673 3.427.085 5.269 0 7.124-.014 8.404 0 8.813 0 12c0 3.187.014 3.596.072 4.876.085 1.855.673 3.697 2.014 5.038 1.341 1.341 3.183 1.929 5.038 2.014C8.404 23.986 8.813 24 12 24s3.596-.014 4.876-.072c1.855-.085 3.697-.673 5.038-2.014 1.341-1.341 1.929-3.183 2.014-5.038.058-1.28.072-1.689.072-4.876s-.014-3.596-.072-4.876c-.085-1.855-.673-3.697-2.014-5.038C20.573.673 18.731.085 16.876 0 15.596-.014 15.187 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324Zm0 10.162a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z"/></svg> },
                { label: "Facebook", href: "https://www.facebook.com/profile.php?id=61588619251468", svg: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.931-1.956 1.887v2.267h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073Z"/></svg> },
              ].map(({ label, href, svg }) => (
                <a key={label} href={href} target="_blank" rel="noopener noreferrer"
                   aria-label={label} className="social-icon-btn">
                  {svg}
                </a>
              ))}
            </div>
          </div>
          <div className="foot-col">
            <h6>Practice</h6>
            <ul>{t.cols.about.map((a, i) => {
              const hrefs = ["#about", "#gallery", "#booking", (window.__datenschutzUrl || "datenschutz.html") + "?lang=" + lang];
              return <li key={i}><a href={hrefs[i]}>{a}</a></li>;
            })}</ul>
          </div>
          <div className="foot-col">
            <h6>Treatments</h6>
            <ul>{t.cols.treat.map((a, i) => <li key={i}><a href={(window.__methodeUrl || "methode.html") + "?m=" + t.cols.treatN[i] + "&lang=" + lang}>{a}</a></li>)}</ul>
          </div>
          <div className="foot-col">
            <h6>Help</h6>
            <ul>{t.cols.help.map((a, i) => {
              const hrefs = ["#booking", "#location", "#location", "#booking"];
              return <li key={i}><a href={hrefs[i]}>{a}</a></li>;
            })}</ul>
          </div>
        </div>
        <div className="foot-legal">
          {t.legal.map((l, i) => (
            i === 2
              ? <a key={i} href={(window.__datenschutzUrl || "datenschutz.html") + "?lang=" + lang}>{l}</a>
              : <span key={i}>{l}</span>
          ))}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Offerings, Services, Journey, Testimonials, Location, Footer });