/* Motion · feature-page shell components.
   Each /funkcje/<slug>.html assembles its page from these blocks plus
   the shared Header + Footer. Pattern lifted from Rachunkowy CRM but
   adapted to Motion's clean blue palette.

   Components:
     · FeatureHero      — top of page: breadcrumb-ish eyebrow + headline + sub + CTA + product panel visual
     · FeatureSection   — alternating image+text block ("section + visual")
     · FeatureSteps     — 3-step "How it works"
     · FeatureBenefits  — 4-up grid of benefit tiles
     · FeatureCTA       — banner-style CTA (blue)
     · FeatureRelated   — "Powiązane funkcje" strip with 3 cards */

function FeatureHero({ moduleName, title, subtitle, bullets, primaryCta = "Bezpłatna prezentacja", secondaryCta = "Zobacz cennik", children }) {
  return (
    <section className="mpos-fhero">
      <Container>
        <div className="mpos-fhero-inner">
          <div>
            <p className="mpos-fhero-eyebrow">
              <a href={url("index.html")}>Funkcje</a>
              {moduleName && <><span>·</span><span>{moduleName}</span></>}
            </p>
            <h1 className="mpos-fhero-headline">{title}</h1>
            <p className="mpos-fhero-sub">{subtitle}</p>
            {bullets && (
              <ul className="mpos-fhero-bullets">
                {bullets.map((b) => (
                  <li key={b}><Icon name="checkCircle" size={18} /><span>{b}</span></li>
                ))}
              </ul>
            )}
            <div className="mpos-fhero-cta">
              <Button variant="primary" size="md" as="a" href={url("kontakt.html")}>{primaryCta}</Button>
              <Button variant="outline" size="md" as="a" href={url("cennik.html")}>{secondaryCta}</Button>
            </div>
          </div>
          <Reveal delay={120}>
            <div className="mpos-fhero-visual">{children}</div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

function FeatureSection({ eyebrow, title, text, list, reverse = false, alt = false, visual }) {
  return (
    <section className={`mpos-fsection${alt ? " mpos-fsection-alt" : ""}${reverse ? " mpos-fsection-reverse" : ""}`}>
      <Container>
        <div className="mpos-fsection-inner">
          <div className="mpos-fsection-body">
            {eyebrow && <div className="mpos-fsection-eyebrow">{eyebrow}</div>}
            <h2 className="mpos-fsection-title">{title}</h2>
            {text && <p className="mpos-fsection-text">{text}</p>}
            {list && (
              <ul className="mpos-fsection-list">
                {list.map((item) => (
                  <li key={item.title || item}>
                    <Icon name="check" size={20} />
                    {typeof item === "string"
                      ? <div>{item}</div>
                      : <div><strong>{item.title}</strong><span>{item.desc}</span></div>}
                  </li>
                ))}
              </ul>
            )}
          </div>
          <Reveal>
            <div className="mpos-fsection-visual">{visual}</div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
}

function FeatureSteps({ eyebrow, title, subtitle, steps }) {
  return (
    <section className="mpos-fsteps">
      <Container>
        <div className="mpos-fsteps-head">
          {eyebrow && <div className="mpos-fsection-eyebrow">{eyebrow}</div>}
          <h2 style={{ marginTop: eyebrow ? 12 : 0 }}>{title}</h2>
          {subtitle && <p>{subtitle}</p>}
        </div>
        <div className="mpos-fsteps-grid">
          {steps.map((s, i) => (
            <Reveal key={s.title} delay={i * 60}>
              <div className="mpos-fstep">
                <div className="mpos-fstep-num">{String(i + 1).padStart(2, "0")}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

function FeatureBenefits({ eyebrow, title, subtitle, benefits }) {
  return (
    <section className="mpos-fbenefits">
      <Container>
        <div className="mpos-fbenefits-head">
          {eyebrow && <div className="mpos-fsection-eyebrow">{eyebrow}</div>}
          <h2 style={{ marginTop: eyebrow ? 12 : 0 }}>{title}</h2>
          {subtitle && <p>{subtitle}</p>}
        </div>
        <div className="mpos-fbenefits-grid">
          {benefits.map((b, i) => (
            <Reveal key={b.title} delay={i * 40}>
              <div className="mpos-fbenefit">
                <div className="mpos-fbenefit-icon"><Icon name={b.icon} size={20} /></div>
                <h4>{b.title}</h4>
                <p>{b.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

function FeatureCTA({ title, subtitle, primary = "Bezpłatna prezentacja", secondary = "Porozmawiaj z nami" }) {
  return (
    <section className="mpos-cta">
      <Container>
        <div className="mpos-cta-inner">
          <h2 className="mpos-cta-title">{title}</h2>
          <p className="mpos-cta-sub">{subtitle}</p>
          <div className="mpos-cta-actions">
            <Button variant="white" size="lg" as="a" href={url("kontakt.html")}>{primary}</Button>
            <Button variant="outline-dark" size="lg" as="a" href={url("kontakt.html")}>{secondary}</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}

function FeatureRelated({ currentSlug, slugs }) {
  // If no explicit list, pick 3 features from the same module (excluding current).
  let picks = [];
  if (slugs && slugs.length) {
    picks = slugs.map(feature).filter(Boolean);
  } else if (currentSlug) {
    const cur = feature(currentSlug);
    picks = FEATURES.filter((f) => f.module === cur.module && f.slug !== currentSlug).slice(0, 3);
  }
  if (!picks.length) return null;
  return (
    <section className="mpos-frelated">
      <Container>
        <h3>Powiązane funkcje</h3>
        <div className="mpos-frelated-grid">
          {picks.map((f) => (
            <a key={f.slug} href={featureHref(f.slug)} className="mpos-frelated-card">
              <div className="mpos-module-icon"><Icon name={f.icon} size={18} /></div>
              <div className="mpos-frelated-card-name">{f.name}</div>
              <div className="mpos-frelated-card-desc">{f.desc}</div>
              <div className="mpos-frelated-card-arrow">
                {f.built ? "Zobacz" : "Wkrótce"} <Icon name="arrowRight" size={14} />
              </div>
            </a>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* Helper: wraps a feature page so every page has identical chrome
   (Header + Footer + ScreenLabel). Pass `slug` for nav highlighting + related. */
function FeaturePage({ slug, children }) {
  const f = feature(slug);
  return (
    <div className="mpos-app mpos-fpage" data-screen-label={`Funkcje · ${f ? f.name : slug}`}>
      <Header activeFeature={slug} />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

Object.assign(window, {
  FeatureHero, FeatureSection, FeatureSteps, FeatureBenefits, FeatureCTA, FeatureRelated, FeaturePage,
});