/* Home page sections — hero, ticker, mission, services preview, how-to, news preview, CTA */

function PPHero({ t, setRoute }) {
  return (
    <section className="pp-hero" aria-labelledby="hero-title">
      <div className="pp-container">
        <div className="pp-hero-grid">
          <div>
            <span className="pp-eyebrow">{t.hero.eyebrow}</span>
            <h1 className="pp-h1" id="hero-title">
              {t.hero.titleA} <em>{t.hero.titleEm}</em><br />
              {t.hero.titleB}
            </h1>
            <p className="pp-lede">{t.hero.lede}</p>
            <div className="pp-hero-actions">
              <button
                className="pp-btn pp-btn-primary"
                onClick={() => { setRoute("/kontakt"); window.scrollTo({top:0}); }}
              >
                {t.hero.cta1}
                <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>
              <button
                className="pp-btn pp-btn-ghost"
                onClick={() => {
                  document.getElementById("how-to")?.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
              >
                {t.hero.cta2}
              </button>
            </div>

            <dl className="pp-hero-meta" aria-label="Key facts">
              {[t.hero.metaA, t.hero.metaB, t.hero.metaC].map((m, i) => (
                <div key={i} className="pp-hero-meta-item">
                  <dt className="pp-hero-meta-num">{m.num}</dt>
                  <dd className="pp-hero-meta-label">{m.label}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="pp-hero-art pp-hide-simple" aria-hidden="true">
            <PPHeroArt />
          </div>
        </div>
      </div>
    </section>
  );
}

function PPTicker({ t }) {
  const items = [...t.ticker, ...t.ticker];
  return (
    <div className="pp-ticker pp-hide-simple" aria-hidden="true">
      <div className="pp-ticker-track">
        {items.map((s, i) => <span key={i}>{s}</span>)}
      </div>
    </div>
  );
}

function PPMission({ t }) {
  return (
    <section className="pp-section" id="o-poradni">
      <div className="pp-container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "start" }} className="pp-mission-grid">
          <div>
            <span className="pp-eyebrow">{t.mission.eyebrow}</span>
            <h2 className="pp-h2" style={{ marginTop: 18 }}>{t.mission.title}</h2>
          </div>
          <div>
            <p style={{ fontSize: 18, marginBottom: 20 }}>{t.mission.body1}</p>
            <p style={{ fontSize: 18, color: "var(--ink-soft)" }}>{t.mission.body2}</p>

            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 0,
              marginTop: 40,
              borderTop: "1px solid var(--rule)",
              borderLeft: "1px solid var(--rule)",
            }}>
              {t.mission.points.map((p, i) => (
                <div key={i} style={{
                  padding: "24px 24px 24px",
                  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: 8,
                  }}>{String(i + 1).padStart(2, "0")} / {p.k}</div>
                  <p style={{ fontSize: 15, color: "var(--ink-soft)" }}>{p.v}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .pp-mission-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </section>
  );
}

function PPServicesGrid({ t, setRoute, limit }) {
  const items = limit ? t.services.items.slice(0, limit) : t.services.items;
  return (
    <section className="pp-section" id="oferta" style={{ background: "var(--bg-card)" }}>
      <div className="pp-container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", gap: 32, marginBottom: 40, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 640 }}>
            <span className="pp-eyebrow">{t.services.eyebrow}</span>
            <h2 className="pp-h2" style={{ marginTop: 18 }}>{t.services.title}</h2>
            <p className="pp-lede" style={{ marginTop: 16 }}>{t.services.lede}</p>
          </div>
          {limit && (
            <button className="pp-btn pp-btn-ghost" onClick={() => { setRoute("/oferta"); window.scrollTo({top:0}); }}>
              {t.common.seeAll}
              <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>
          )}
        </div>

        <div className="pp-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>
  );
}

function PPHowTo({ t }) {
  return (
    <section className="pp-section" id="how-to">
      <div className="pp-container">
        <div style={{ maxWidth: 740 }}>
          <span className="pp-eyebrow">{t.howTo.eyebrow}</span>
          <h2 className="pp-h2" style={{ marginTop: 18 }}>{t.howTo.title}</h2>
          <p className="pp-lede" style={{ marginTop: 16 }}>{t.howTo.lede}</p>
        </div>
        <div className="pp-steps">
          {t.howTo.steps.map((step, i) => (
            <div key={i} className="pp-step">
              <span className="pp-step-num">{step.n}</span>
              <h4>{step.t}</h4>
              <p>{step.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PPNewsPreview({ t, setRoute, limit = 3 }) {
  return (
    <section className="pp-section" style={{ background: "var(--bg-card)" }}>
      <div className="pp-container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", gap: 32, marginBottom: 24, flexWrap: "wrap" }}>
          <div>
            <span className="pp-eyebrow">{t.news.eyebrow}</span>
            <h2 className="pp-h2" style={{ marginTop: 18 }}>{t.news.title}</h2>
          </div>
          <button className="pp-btn pp-btn-ghost" onClick={() => { setRoute("/aktualnosci"); window.scrollTo({top:0}); }}>
            {t.common.seeAll}
            <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>
        </div>

        <div className="pp-news-list">
          {t.news.items.slice(0, limit).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>
  );
}

function PPCrisisCTA({ t }) {
  return (
    <section className="pp-section pp-section--tight">
      <div className="pp-container">
        <div className="pp-section-card" style={{ background: "var(--ink)", color: "var(--bg)", border: "none" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1.5fr", gap: 48, alignItems: "center" }} className="pp-crisis-grid">
            <div>
              <span className="pp-eyebrow" style={{ color: "var(--hot-soft)" }}>
                <style>{`.pp-crisis-eyebrow::before { background: var(--hot-soft) !important; }`}</style>
                {t.contact.crisis.title}
              </span>
              <h2 className="pp-h2" style={{ marginTop: 18, color: "var(--bg)" }}>{t.contact.crisis.title}</h2>
              <p style={{ marginTop: 14, opacity: 0.8, fontSize: 17 }}>{t.contact.crisis.body}</p>
            </div>
            <div style={{ display: "grid", gap: 12 }}>
              {t.contact.crisis.lines.map((l, i) => (
                <a
                  key={i}
                  href={`tel:${l.num.replace(/\s/g, "")}`}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "1fr auto",
                    alignItems: "center",
                    padding: "18px 24px",
                    background: "rgba(255,255,255,0.06)",
                    borderRadius: "var(--r-md)",
                    border: "1px solid rgba(255,255,255,0.12)",
                    color: "var(--bg)",
                    textDecoration: "none",
                    gap: 16,
                  }}
                >
                  <span style={{ fontSize: 14, opacity: 0.75 }}>{l.name}</span>
                  <span style={{ fontFamily: "var(--font-serif)", fontSize: 28, letterSpacing: "0.02em" }}>{l.num}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .pp-crisis-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { PPHero, PPTicker, PPMission, PPServicesGrid, PPHowTo, PPNewsPreview, PPCrisisCTA });
