/* =========================================================
   Página: ¿Por Qué Innovaria? + Quiero Vender (compartidos)
   ========================================================= */

/* ---------- Hero manifiesto (¿Por qué Innovaria?) ---------- */
function PorQueHero() {
  return (
    <section className="pq-hero" aria-label={t("vender.pqHero.aria")}>
      <div className="pq-hero__bg" />
      <div className="container">
        <div className="pq-hero__inner">
          <span className="pq-hero__eyebrow">{t("vender.pqHero.eyebrow")}</span>
          <h1 className="pq-hero__title" dangerouslySetInnerHTML={{ __html: t("vender.pqHero.h1_html") }} />
          <p className="pq-hero__sub">
            {t("vender.pqHero.sub")}
          </p>
          <div className="pq-hero__stats">
            <div>
              <span className="pq-hero__stat-num">{t("vender.pqHero.s1_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.pqHero.s1_lbl")}</span>
            </div>
            <div>
              <span className="pq-hero__stat-num">{t("vender.pqHero.s2_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.pqHero.s2_lbl")}</span>
            </div>
            <div>
              <span className="pq-hero__stat-num">{t("vender.pqHero.s3_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.pqHero.s3_lbl")}</span>
            </div>
            <div>
              <span className="pq-hero__stat-num">{t("vender.pqHero.s4_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.pqHero.s4_lbl")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Manifiesto editorial sobre fondo verde oscuro ---------- */
function PorQueManifesto() {
  const ideas = [
    { num: "01", key: "i1" },
    { num: "02", key: "i2" },
    { num: "03", key: "i3" }
  ];

  return (
    <section className="qv-manifesto" aria-label={t("vender.manifesto.aria")}>
      <div className="qv-manifesto__bg" aria-hidden="true" />
      <div className="container qv-manifesto__inner">
        <header className="qv-manifesto__head">
          <span className="qv-manifesto__eyebrow">{t("vender.manifesto.eyebrow")}</span>
          <h2 className="qv-manifesto__title" dangerouslySetInnerHTML={{ __html: t("vender.manifesto.h2_html") }} />
        </header>

        <ol className="qv-manifesto__list">
          {ideas.map((i) =>
          <li key={i.num} className="qv-manifesto__item">
              <span className="qv-manifesto__num" aria-hidden="true">{i.num}</span>
              <h3 className="qv-manifesto__item-title">{t(`vender.manifesto.${i.key}_title`)}</h3>
              <p className="qv-manifesto__item-text">{t(`vender.manifesto.${i.key}_text`)}</p>
            </li>
          )}
        </ol>

        <div className="qv-manifesto__seal">
          <Icon name="badge-check" size={20} />
          <span>{t("vender.manifesto.seal")}</span>
        </div>
      </div>
    </section>);

}

/* ---------- Comparativa Innovaria vs tradicional ---------- */
function PorQueVs() {
  const rows = [
    { key: "r1" }, { key: "r2" }, { key: "r3" }, { key: "r4" },
    { key: "r5" }, { key: "r6" }, { key: "r7" }, { key: "r8" }
  ];

  return (
    <section className="section pq-vs" aria-label={t("vender.vs.aria")} style={{ padding: "0px 0px 80px" }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--center">{t("vender.vs.eyebrow")}</span>
          <h2 dangerouslySetInnerHTML={{ __html: t("vender.vs.h2_html") }} />
          <p>{t("vender.vs.intro")}</p>
        </div>

        <div className="pq-vs__table">
          <div className="pq-vs__head">
            <span></span>
            <span className="pq-vs__col-trad">{t("vender.vs.col_trad")}</span>
            <span className="pq-vs__col-innov">
              <img src="/assets/innovaria-logo.png" alt={t("vender.vs.logo_alt")} />
            </span>
          </div>
          {rows.map((r, i) =>
          <div key={i} className="pq-vs__row">
              <span className="pq-vs__topic">{t(`vender.vs.${r.key}_topic`)}</span>
              <span className="pq-vs__trad">
                <Icon name="x" size={16} /> {t(`vender.vs.${r.key}_trad`)}
              </span>
              <span className="pq-vs__innov">
                <Icon name="check" size={16} strokeWidth={3} /> {t(`vender.vs.${r.key}_innov`)}
              </span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Método: timeline de 7 pasos ---------- */
function PorQueMethod() {
  const steps = [
    { n: "01", icon: "bar-chart-3",     key: "s1" },
    { n: "02", icon: "megaphone",       key: "s2" },
    { n: "03", icon: "user-check",      key: "s3" },
    { n: "04", icon: "wallet",          key: "s4" },
    { n: "05", icon: "handshake",       key: "s5" },
    { n: "06", icon: "clipboard-check", key: "s6" },
    { n: "07", icon: "shield-check",    key: "s7" }
  ];

  return (
    <section className="section pq-method" aria-label={t("vender.method.aria")}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--center">{t("vender.method.eyebrow")}</span>
          <h2 dangerouslySetInnerHTML={{ __html: t("vender.method.h2_html") }} />
          <p>{t("vender.method.intro")}</p>
        </div>

        <ol className="pq-method__timeline">
          {steps.map((s) =>
          <li key={s.n} className="pq-method__step">
              <span className="pq-method__step-n" style={{ fontWeight: "800", letterSpacing: "1.3px" }}>{s.n}</span>
              <div className="pq-method__step-body">
                <span className="pq-method__step-icon"><Icon name={s.icon} size={20} /></span>
                <h3>{t(`vender.method.${s.key}_title`)}</h3>
                <p>{t(`vender.method.${s.key}_text`)}</p>
              </div>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

/* ---------- IA en acción: 4 capacidades ---------- */
function PorQueAI() {
  const caps = [
    { icon: "image",          key: "c1" },
    { icon: "languages",      key: "c2" },
    { icon: "bar-chart-3",    key: "c3" },
    { icon: "message-circle", key: "c4" }
  ];

  return (
    <section className="section section--inverse pq-ai" aria-label={t("vender.ai.aria")} style={{ padding: "0px" }}>
      <div className="container" style={{ padding: "40px 80px" }}>
        <div className="pq-ai__intro" style={{ margin: "0px 88px" }}>
          <div className="pq-ai__intro-text">
            <span className="eyebrow eyebrow--inverse">{t("vender.ai.eyebrow")}</span>
            <h2 dangerouslySetInnerHTML={{ __html: t("vender.ai.h2_html") }} />
            <p>{t("vender.ai.intro")}</p>
          </div>
          <div className="pq-ai__intro-robot">
            <img src="/assets/robot-ia-pointing.png" alt={t("vender.ai.robot_alt")} style={{ width: "351px", height: "417px" }} />
          </div>
        </div>

        <div className="pq-ai__grid">
          {caps.map((c, i) =>
          <article key={i} className="pq-ai__card">
              <span className="pq-ai__icon"><Icon name={c.icon} size={24} /></span>
              <h3>{t(`vender.ai.${c.key}_title`)}</h3>
              <p>{t(`vender.ai.${c.key}_text`)}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Números clave ---------- */
function PorQueNumbers() {
  const stats = [
    { num: "18+",  key: "s1" },
    { num: "7+",   key: "s2" },
    { num: "5",    key: "s3" },
    { num: "100%", key: "s4" }
  ];

  return (
    <section className="section pq-numbers" aria-label={t("vender.numbers.aria")}>
      <div className="container">
        <div className="pq-numbers__grid">
          {stats.map((s, i) =>
          <div key={i} className="pq-numbers__cell">
              <span className="pq-numbers__num">{s.num}</span>
              <span className="pq-numbers__lbl">{t(`vender.numbers.${s.key}_lbl`)}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Founder / equipo ---------- */
function PorQueFounder() {
  return (
    <section className="section pq-founder" aria-label={t("vender.founder.aria")}>
      <div className="container">
        <div className="pq-founder__inner">
          <div className="pq-founder__media">
            <span className="pq-founder__bgcircle" aria-hidden="true" />
            <img src="/assets/ceo-isaac.webp" alt={t("vender.founder.photo_alt")} />
          </div>
          <div className="pq-founder__content">
            <span className="eyebrow">{t("vender.founder.eyebrow")}</span>
            <h2 dangerouslySetInnerHTML={{ __html: t("vender.founder.h2_html") }} />
            <p className="pq-founder__quote">
              {t("vender.founder.quote")}
            </p>
            <div className="pq-founder__author">
              <strong>Isaac Ruiz</strong>
              <span>{t("vender.founder.author_role")}</span>
            </div>
            <div className="pq-founder__credentials">
              <div className="pq-founder__credential">
                <Icon name="graduation-cap" size={16} />
                {t("vender.founder.cred_ua")}
              </div>
              <div className="pq-founder__credential">
                <Icon name="award" size={16} />
                {t("vender.founder.cred_crs")}
              </div>
              <div className="pq-founder__credential">
                <Icon name="badge-check" size={16} />
                {t("vender.founder.cred_apial")}
              </div>
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 24 }}>
              <Button variant="primary" iconRight="arrow-right" as="a" href="#contacto">{t("vender.founder.cta_talk")}</Button>
              <Button variant="ghost" icon="phone" as="a" href="tel:+34604494089">604 49 40 89</Button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Reconocimientos ---------- */
function PorQueAwards() {
  const badges = [
    { img: "/assets/badge-apial.png",            key: "b1" },
    { img: "/assets/badge-raicv.png",            key: "b2" },
    { img: "/assets/badge-ua.jpg",               key: "b3" },
    { img: "/assets/badge-crs.png",              key: "b4" },
    { img: "/assets/badge-happy-customers.webp", key: "b5" },
    { img: "/assets/badge-google-rating.webp",   key: "b6" }
  ];

  return (
    <section className="section pq-awards section--cream" aria-label={t("vender.awards.aria")}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--center">{t("vender.awards.eyebrow")}</span>
          <h2 dangerouslySetInnerHTML={{ __html: t("vender.awards.h2_html") }} />
          <p>{t("vender.awards.intro")}</p>
        </div>

        <div className="pq-awards__grid">
          {badges.map((b, i) => {
            const label = t(`vender.awards.${b.key}_label`);
            return (
              <div key={i} className="pq-awards__card">
                <img src={b.img} alt={label} />
                <span className="pq-awards__label">{label}</span>
              </div>);
          })}
        </div>
      </div>
    </section>);

}

/* ---------- CTA final ---------- */
function PorQueCTA() {
  return (
    <section className="section section--tight pq-cta" aria-label={t("vender.cta.aria")}>
      <div className="container">
        <div className="handhouse" style={{ width: "1700px", maxWidth: "100%", minHeight: "420px", margin: "0 auto" }}>
          <div className="handhouse__content" style={{ maxWidth: "920px" }}>
            <span className="handhouse__eyebrow">{t("vender.cta.eyebrow")}</span>
            <h2 dangerouslySetInnerHTML={{ __html: t("vender.cta.h2_html") }} />
            <p>
              {t("vender.cta.intro")}
            </p>
            <div className="handhouse__ctas">
              <Button variant="light" iconRight="arrow-right" as="a" href="valorar-mi-casa-gratis.html">
                {t("vender.cta.cta_request")}
              </Button>
              <Button variant="ghost-light" icon="phone" as="a" href="tel:+34604494089">
                604 49 40 89
              </Button>
            </div>
          </div>
          <img className="handhouse__img" src="/assets/hand-house.png" alt={t("vender.cta.img_alt")} />
        </div>
      </div>
    </section>);

}

/* ---------- (Movido desde por-que-innovaria) Marca cercana + profesional ---------- */
function PqiBrand() {
  return (
    <section className="section pqi-brand" aria-label={t("vender.brand.aria")} style={{ padding: "40px 0px 80px" }}>
      <div className="container">
        <div className="pqi-brand__layout" style={{ textAlign: "left" }}>
          <div className="pqi-brand__content">
            <span className="eyebrow">{t("vender.brand.eyebrow")}</span>
            <h2 dangerouslySetInnerHTML={{ __html: t("vender.brand.h2_html") }} />
            <p>{t("vender.brand.intro")}</p>

            <div className="pqi-brand__pillars">
              <div className="pqi-brand__pillar">
                <Icon name="map-pin" size={18} />
                <div>
                  <strong>{t("vender.brand.p1_strong")}</strong>
                  <span>{t("vender.brand.p1_text")}</span>
                </div>
              </div>
              <div className="pqi-brand__pillar">
                <Icon name="handshake" size={18} />
                <div>
                  <strong>{t("vender.brand.p2_strong")}</strong>
                  <span>{t("vender.brand.p2_text")}</span>
                </div>
              </div>
              <div className="pqi-brand__pillar">
                <Icon name="award" size={18} />
                <div>
                  <strong>{t("vender.brand.p3_strong")}</strong>
                  <span>{t("vender.brand.p3_text")}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="pqi-brand__visual" style={{ height: "305px", width: "471px" }}>
            <div className="pqi-brand__quote" style={{ padding: "36px 32px", width: "460px", height: "297px" }}>
              <Icon name="quote" size={28} />
              <p>{t("vender.brand.quote")}</p>
              <footer>
                <strong>Isaac Ruiz</strong>
                <span>{t("vender.brand.quote_author_role")}</span>
              </footer>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Quiero Vender · Hero manifiesto para vendedores ---------- */
function QuieroVenderHero() {
  return (
    <section className="pq-hero" aria-label={t("vender.qvHero.aria")}>
      <div className="pq-hero__bg" />
      <div className="container">
        <div className="pq-hero__inner">
          <span className="pq-hero__eyebrow">{t("vender.qvHero.eyebrow")}</span>
          <h1 className="pq-hero__title" dangerouslySetInnerHTML={{ __html: t("vender.qvHero.h1_html") }} />
          <p className="pq-hero__sub">
            {t("vender.qvHero.sub")}
          </p>
          <div className="pq-hero__stats">
            <div>
              <span className="pq-hero__stat-num">{t("vender.qvHero.s1_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.qvHero.s1_lbl")}</span>
            </div>
            <div>
              <span className="pq-hero__stat-num">{t("vender.qvHero.s2_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.qvHero.s2_lbl")}</span>
            </div>
            <div>
              <span className="pq-hero__stat-num">{t("vender.qvHero.s3_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.qvHero.s3_lbl")}</span>
            </div>
            <div>
              <span className="pq-hero__stat-num">{t("vender.qvHero.s4_num")}</span>
              <span className="pq-hero__stat-lbl">{t("vender.qvHero.s4_lbl")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Quiero Vender · Trato humano (agente local) ---------- */
function QvAgenteLocal() {
  const features = [
    { icon: "map-pin",        key: "f1" },
    { icon: "user",           key: "f2" },
    { icon: "calendar-check", key: "f3" },
    { icon: "languages",      key: "f4" }
  ];

  return (
    <section className="section qv-human" aria-label={t("vender.agente.aria")}>
      <div className="container">
        <div className="qv-human__layout">
          <div className="qv-human__media">
            <div className="qv-human__photo-wrap">
              <img className="qv-human__photo" src="/assets/agente-isaac-llaves.jpg" alt={t("vender.agente.photo_alt")} />
            </div>
          </div>

          <div className="qv-human__content">
            <span className="qv-human__eyebrow">{t("vender.agente.eyebrow")}</span>
            <h2 className="qv-human__title" dangerouslySetInnerHTML={{ __html: t("vender.agente.h2_html") }} />
            <p className="qv-human__intro">
              {t("vender.agente.intro")}
            </p>

            <div className="qv-human__features">
              {features.map((f, i) =>
              <article key={i} className="qv-human__feature">
                  <span className="qv-human__feature-icon"><Icon name={f.icon} size={20} /></span>
                  <h3>{t(`vender.agente.${f.key}_title`)}</h3>
                  <p>{t(`vender.agente.${f.key}_text`)}</p>
                </article>
              )}
            </div>

            <blockquote className="qv-human__quote">
              <Icon name="quote" size={24} />
              <p>{t("vender.agente.quote")}</p>
              <footer>
                <strong>Isaac Ruiz</strong>
                <span>{t("vender.agente.quote_author_role")}</span>
              </footer>
            </blockquote>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Breather 1 · Statement editorial (post-hero) ---------- */
function QvIntroStatement() {
  return (
    <section className="qv-statement" aria-label={t("vender.statement.aria")}>
      <div className="container">
        <div className="qv-statement__inner">
          <span className="qv-statement__label">{t("vender.statement.label")}</span>
          <h2 className="qv-statement__copy">
            <span className="qv-statement__lead">{t("vender.statement.lead")}</span>
            <span className="qv-statement__rest">{t("vender.statement.rest")}</span>
          </h2>
        </div>
      </div>
    </section>);

}

/* ---------- Breather 2 · Cifras editorial (entre secciones densas) ---------- */
function QvStats() {
  const stats = [
    { key: "s1" }, { key: "s2" }, { key: "s3" }, { key: "s4" }
  ];

  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el || visible) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setVisible(true);
          obs.disconnect();
        }
      });
    }, { threshold: 0.25 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [visible]);

  return (
    <section ref={ref} className={"qv-stats qv-stats--dark" + (visible ? " is-in" : "")} aria-label={t("vender.stats.aria")}>
      <div className="container">
        <div className="qv-stats__head">
          <span className="qv-stats__label">{t("vender.stats.label")}</span>
          <h2 className="qv-stats__title">{t("vender.stats.title")}</h2>
        </div>
        <div className="qv-stats__grid">
          {stats.map((s, i) =>
          <div key={i} className="qv-stats__cell" style={{ transitionDelay: visible ? `${i * 120}ms` : "0ms" }}>
              <span className="qv-stats__num">{t(`vender.stats.${s.key}_num`)}</span>
              <span className="qv-stats__lbl">{t(`vender.stats.${s.key}_lbl`)}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Breather 3 · Pull quote (entre secciones) ---------- */
function QvPullQuote() {
  return (
    <section className="qv-pullquote" aria-label={t("vender.pullquote.aria")}>
      <div className="container">
        <p className="qv-pullquote__text" dangerouslySetInnerHTML={{ __html: t("vender.pullquote.text_html") }} />
        <p className="qv-pullquote__source">{t("vender.pullquote.source")}</p>
      </div>
    </section>);

}

Object.assign(window, {
  PorQueHero, QuieroVenderHero, PorQueManifesto, PorQueVs, PorQueMethod, PorQueAI,
  PorQueNumbers, PorQueFounder, PorQueAwards, PorQueCTA, PqiBrand, QvAgenteLocal,
  QvIntroStatement, QvStats, QvPullQuote
});