/* Other pages: Team, News (full), Downloads, Resources, Contact, FAQ, Region, About, Accessibility */

function PPPageHeader({ eyebrow, title, lede }) {
  return (
    <section className="pp-section pp-section--tight" style={{ paddingTop: 64, paddingBottom: 24 }}>
      <div className="pp-container">
        <span className="pp-eyebrow">{eyebrow}</span>
        <h1 className="pp-h1" style={{ marginTop: 16, maxWidth: "16ch" }}>{title}</h1>
        {lede && <p className="pp-lede" style={{ marginTop: 18 }}>{lede}</p>}
      </div>
    </section>
  );
}

/* -------- TEAM -------- */
function PPTeamPage({ t }) {
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.team.eyebrow} title={t.team.title} lede={t.team.lede} />
      <section className="pp-section pp-section--tight" style={{ paddingTop: 32 }}>
        <div className="pp-container">
          <div className="pp-team-grid">
            {t.team.members.map((m, i) => (
              <article key={i} className="pp-team-card">
                <div className="pp-team-avatar pp-hide-simple">
                  <PPAvatar hue={m.hue} name={m.name} />
                </div>
                <div className="pp-team-body">
                  <span className="pp-team-role">{m.role}</span>
                  <h3 className="pp-team-name">{m.name}</h3>
                  <p className="pp-team-spec">{m.spec}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* -------- NEWS FULL -------- */
function PPNewsPage({ t }) {
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.news.eyebrow} title={t.news.title} />
      <section className="pp-section pp-section--tight" style={{ paddingTop: 24 }}>
        <div className="pp-container">
          <div className="pp-news-list">
            {t.news.items.map((n, i) => (
              <a key={i} href="#" className="pp-news-item" onClick={(e) => e.preventDefault()}>
                <span className="pp-news-date">{n.date}</span>
                <div>
                  <h3 className="pp-news-title">{n.title}</h3>
                  <p className="pp-news-excerpt">{n.excerpt}</p>
                </div>
                <span className="pp-chip pp-news-tag">{n.tag}</span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* -------- DOWNLOADS -------- */
function PPDownloadsPage({ t }) {
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.downloads.eyebrow} title={t.downloads.title} lede={t.downloads.lede} />
      <section className="pp-section pp-section--tight" style={{ paddingTop: 32 }}>
        <div className="pp-container">
          <div className="pp-download-list">
            {t.downloads.items.map((d, i) => (
              <a key={i} href="#" className="pp-download" onClick={(e) => e.preventDefault()}>
                <span className="pp-download-icon">{d.ext}</span>
                <span>
                  <div className="pp-download-title">{d.name}</div>
                  <div className="pp-download-sub">{d.sub}</div>
                </span>
                <span className="pp-download-size">{d.size}</span>
                <span className="pp-chip">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                    <polyline points="7 10 12 15 17 10" />
                    <line x1="12" y1="15" x2="12" y2="3" />
                  </svg>
                  {t.common.download}
                </span>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* -------- RESOURCES (Strefa rodzica) -------- */
function PPResourcesPage({ t }) {
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.resources.eyebrow} title={t.resources.title} lede={t.resources.lede} />
      <section className="pp-section pp-section--tight" style={{ paddingTop: 32 }}>
        <div className="pp-container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="pp-resources-grid">
            {t.resources.categories.map((r, i) => (
              <a key={i} href="#" className="pp-card pp-card-hover" onClick={(e) => e.preventDefault()} style={{ textDecoration: "none", display: "flex", flexDirection: "column", minHeight: 220 }}>
                <span className="pp-chip pp-chip-hot" style={{ alignSelf: "start" }}>{r.tag}</span>
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.2, margin: "20px 0 auto" }}>{r.title}</h3>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--rule-soft)" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-mute)" }}>{r.read}</span>
                  <span style={{ color: "var(--accent)" }}>→</span>
                </div>
              </a>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .pp-resources-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </div>
  );
}

/* -------- CONTACT -------- */
function PPContactPage({ t }) {
  const today = new Date().getDay(); // 0..6, Sun=0
  const todayIdx = today === 0 ? 6 : today - 1; // map to Mon=0..Sun=6
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.contact.eyebrow} title={t.contact.title} lede={t.contact.lede} />

      <section className="pp-section pp-section--tight" style={{ paddingTop: 32 }}>
        <div className="pp-container">
          <div className="pp-contact-grid">
            <div className="pp-contact-info">
              <dl style={{ margin: 0, display: "grid", gap: 18, borderTop: "1px solid var(--rule)", paddingTop: 24 }}>
                {t.contact.rows.map((r, i) => (
                  <div key={i} className="pp-contact-row" style={{ borderBottom: "1px solid var(--rule-soft)", paddingBottom: 16 }}>
                    <dt>{r.k}</dt>
                    <dd>{r.href ? <a href={r.href}>{r.v}</a> : <span style={{ fontFamily: "var(--font-serif)", fontSize: 22 }}>{r.v}</span>}</dd>
                  </div>
                ))}
              </dl>

              <div style={{ marginTop: 24 }}>
                <h3 style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 18 }}>Godziny pracy / Office hours</h3>
                <table className="pp-hours-table">
                  <tbody>
                    {t.contact.hours.map(([day, hrs], i) => (
                      <tr key={i} className={i === todayIdx ? "is-today" : ""}>
                        <td>{day}</td>
                        <td>{hrs}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            <div>
              <div className="pp-map pp-hide-simple">
                <PPMapArt />
              </div>
              <p style={{ marginTop: 12, fontSize: 13, color: "var(--ink-mute)", fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
                Plac Dr. Mariana Szulca 4 · 87‑890 Lubraniec · powiat włocławski · woj. kujawsko‑pomorskie
              </p>

              <form className="pp-form" style={{ marginTop: 28 }} onSubmit={(e) => { e.preventDefault(); alert("Formularz demonstracyjny — dziękujemy!"); }}>
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 26, lineHeight: 1.1, marginBottom: 8 }}>Napisz do nas</h3>
                <p style={{ color: "var(--ink-soft)", fontSize: 14, marginBottom: 8 }}>Pole obowiązkowe oznaczone *</p>
                <div className="pp-field">
                  <label htmlFor="f-name">Imię i nazwisko *</label>
                  <input id="f-name" className="pp-input" required />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                  <div className="pp-field">
                    <label htmlFor="f-email">E‑mail *</label>
                    <input id="f-email" type="email" className="pp-input" required />
                  </div>
                  <div className="pp-field">
                    <label htmlFor="f-phone">Telefon</label>
                    <input id="f-phone" type="tel" className="pp-input" />
                  </div>
                </div>
                <div className="pp-field">
                  <label htmlFor="f-topic">Czego dotyczy?</label>
                  <select id="f-topic" className="pp-select">
                    <option>Pierwsza wizyta / diagnoza</option>
                    <option>Terapia psychologiczna</option>
                    <option>Logopedia</option>
                    <option>Wczesne wspomaganie (WWR)</option>
                    <option>Inne</option>
                  </select>
                </div>
                <div className="pp-field">
                  <label htmlFor="f-msg">Wiadomość *</label>
                  <textarea id="f-msg" className="pp-textarea" required />
                </div>
                <label style={{ display: "flex", gap: 10, alignItems: "start", fontSize: 13, color: "var(--ink-soft)" }}>
                  <input type="checkbox" required style={{ marginTop: 4 }} />
                  Wyrażam zgodę na przetwarzanie danych w celu kontaktu zwrotnego. RODO →
                </label>
                <button type="submit" className="pp-btn pp-btn-primary" style={{ justifySelf: "start", marginTop: 8 }}>
                  Wyślij wiadomość
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      <PPCrisisCTA t={t} />
    </div>
  );
}

/* -------- FAQ -------- */
function PPFaqBlock({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="pp-section">
      <div className="pp-container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "start" }} className="pp-faq-grid">
          <div>
            <span className="pp-eyebrow">{t.faq.eyebrow}</span>
            <h2 className="pp-h2" style={{ marginTop: 18 }}>{t.faq.title}</h2>
          </div>
          <div className="pp-faq">
            {t.faq.items.map((f, i) => (
              <div key={i} className="pp-faq-item" data-open={open === i}>
                <button className="pp-faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{f.q}</span>
                  <span className="pp-faq-toggle" aria-hidden="true">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                      <line x1="12" y1="5" x2="12" y2="19" />
                      <line x1="5" y1="12" x2="19" y2="12" />
                    </svg>
                  </span>
                </button>
                <div className="pp-faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .pp-faq-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }
      `}</style>
    </section>
  );
}

/* -------- REGION -------- */
function PPRegion({ t }) {
  return (
    <section className="pp-section" style={{ background: "var(--bg-card)" }}>
      <div className="pp-container">
        <div style={{ maxWidth: 720 }}>
          <span className="pp-eyebrow">{t.region.eyebrow}</span>
          <h2 className="pp-h2" style={{ marginTop: 18 }}>{t.region.title}</h2>
          <p className="pp-lede" style={{ marginTop: 16 }}>{t.region.lede}</p>
        </div>
        <div className="pp-region-grid" style={{ marginTop: 40, background: "var(--bg-elev)", borderRadius: "var(--r-lg)", overflow: "hidden", border: "1px solid var(--rule)" }}>
          {t.region.cols.map((c, i) => (
            <div key={i} className="pp-region-col">
              <span className="pp-eyebrow" style={{ fontSize: 11 }}>{String(i + 1).padStart(2, "0")}</span>
              <h4 style={{ fontFamily: "var(--font-serif)", marginTop: 12 }}>{c.title}</h4>
              <ul style={{ marginTop: 12 }}>
                {c.items.map((it, j) => <li key={j}>· {it}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* -------- ACCESSIBILITY DECLARATION -------- */
function PPAccessibilityPage({ t }) {
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.accessibility.eyebrow} title={t.accessibility.title} lede={t.accessibility.lede} />
      <section className="pp-section pp-section--tight" style={{ paddingTop: 32 }}>
        <div className="pp-container" style={{ maxWidth: 860 }}>
          <div style={{ display: "grid", gap: 0, borderTop: "1px solid var(--rule)" }}>
            {t.accessibility.sections.map((s, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 32, padding: "28px 0", borderBottom: "1px solid var(--rule)" }} className="pp-acc-row-page">
                <div>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-mute)" }}>§ {String(i + 1).padStart(2, "0")}</span>
                  <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.2, marginTop: 8 }}>{s.h}</h3>
                </div>
                <p style={{ fontSize: 17, color: "var(--ink-soft)", maxWidth: "62ch" }}>{s.p}</p>
              </div>
            ))}
          </div>
          <p style={{ fontSize: 13, color: "var(--ink-mute)", marginTop: 32, fontFamily: "var(--font-mono)", letterSpacing: "0.04em" }}>
            Data publikacji: 02.01.2026 · Ostatnia aktualizacja: 02.04.2026
          </p>
        </div>
      </section>
      <style>{`
        @media (max-width: 700px) { .pp-acc-row-page { grid-template-columns: 1fr !important; gap: 8px !important; } }
      `}</style>
    </div>
  );
}

/* -------- ABOUT PAGE -------- */
function PPAboutPage({ t }) {
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.mission.eyebrow} title={t.mission.title} />
      <section className="pp-section pp-section--tight" style={{ paddingTop: 24 }}>
        <div className="pp-container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }} className="pp-about-grid">
            <div>
              <p style={{ fontSize: 19, marginBottom: 20 }}>{t.mission.body1}</p>
              <p style={{ fontSize: 17, color: "var(--ink-soft)" }}>{t.mission.body2}</p>
            </div>
            <div className="pp-card pp-hide-simple" style={{ padding: 0, overflow: "hidden", borderRadius: "var(--r-lg)" }}>
              <PPBanner />
              <div style={{ padding: 28 }}>
                <h3 style={{ fontFamily: "var(--font-serif)", fontSize: 24, lineHeight: 1.2, marginBottom: 8 }}>Działamy nieprzerwanie od 1989 roku.</h3>
                <p style={{ color: "var(--ink-soft)" }}>Przez 36 lat pomogliśmy tysiącom rodzin z regionu. Pracujemy w oparciu o sprawdzone metody i ciągły rozwój zespołu — m.in. diagnoza ADOS‑2, Metoda Tomatisa, integracja sensoryczna.</p>
              </div>
            </div>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            marginTop: 64,
            borderTop: "1px solid var(--rule)",
            borderLeft: "1px solid var(--rule)",
          }} className="pp-about-points">
            {t.mission.points.map((p, i) => (
              <div key={i} style={{
                padding: 28,
                borderRight: "1px solid var(--rule)",
                borderBottom: "1px solid var(--rule)",
              }}>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
                  color: "var(--hot)", marginBottom: 12,
                }}>{String(i + 1).padStart(2, "0")} / {p.k}</div>
                <p style={{ color: "var(--ink-soft)" }}>{p.v}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <PPRegion t={t} />
      <style>{`
        @media (max-width: 900px) {
          .pp-about-grid { grid-template-columns: 1fr !important; }
          .pp-about-points { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .pp-about-points { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

/* -------- SERVICES FULL PAGE -------- */
function PPServicesPage({ t, setRoute }) {
  return (
    <div className="pp-page">
      <PPPageHeader eyebrow={t.services.eyebrow} title={t.services.title} lede={t.services.lede} />
      <section className="pp-section pp-section--tight" style={{ paddingTop: 24 }}>
        <div className="pp-container">
          <div className="pp-services">
            {t.services.items.map((s, i) => (
              <article key={i} className="pp-service" tabIndex={0}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
                  <span className="pp-service-num">— {s.n}</span>
                  <span className="pp-hide-simple"><PPServiceIcon idx={i} /></span>
                </div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="pp-service-tags">
                  {s.tags.map((tag, j) => <span key={j} className="pp-chip">{tag}</span>)}
                </div>
                <button className="pp-service-arrow" aria-label={t.common.learnMore}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                    <line x1="5" y1="12" x2="19" y2="12" />
                    <polyline points="12 5 19 12 12 19" />
                  </svg>
                </button>
              </article>
            ))}
          </div>
        </div>
      </section>
      <PPHowTo t={t} />
      <PPFaqBlock t={t} />
    </div>
  );
}

Object.assign(window, {
  PPPageHeader,
  PPTeamPage,
  PPNewsPage,
  PPDownloadsPage,
  PPResourcesPage,
  PPContactPage,
  PPFaqBlock,
  PPRegion,
  PPAccessibilityPage,
  PPAboutPage,
  PPServicesPage,
});