/* =========================================================
   Secciones bot (rev. usuario):
   - Sec 9: 4 herramientas (Tour 360, Dron, Video, Foto pro)
   - Sec 10: Opiniones de clientes
   - Sec 11: Blog y noticias
   - Sec 12: Preguntas y respuestas
   ========================================================= */

/* ---------- Sec 9: 4 herramientas de promoción ---------- */
const TOOLS = [
{ icon: "view",    key: "tour360", img: "/assets/tool-tour-360.webp" },
{ icon: "plane",   key: "drone",   img: "/assets/tool-drone.png" },
{ icon: "video",   key: "video",   img: "/assets/tool-video-comercial.png" },
{ icon: "camera",  key: "photo",   img: "/assets/tool-photo-pro.jpg" }];


function ToolsSection() {
  return (
    <section className="section qv-tools-luxe" id="como-vendemos" aria-label={t("home.tools.aria")}>
      <div className="container">
        <div className="qv-tools-luxe__head">
          <span className="qv-tools-luxe__eyebrow">{t("home.tools.eyebrow")}</span>
          <h2 className="qv-tools-luxe__title" dangerouslySetInnerHTML={{ __html: t("home.tools.title_html") }} />
          <p className="qv-tools-luxe__lead">
            {t("home.tools.intro")}
          </p>
        </div>

        <div className="qv-tools-luxe__grid">
          {TOOLS.map((tool, i) => {
            const badge = t(`home.tools.${tool.key}_badge`);
            const title = t(`home.tools.${tool.key}_title`);
            const desc  = t(`home.tools.${tool.key}_desc`);
            return (
              <article key={i} className="qv-tools-luxe__card">
                <div className={"qv-tools-luxe__media" + (tool.contain ? " qv-tools-luxe__media--contain" : "")}>
                  <img src={tool.img} alt={title} />
                  <span className="qv-tools-luxe__n">0{i + 1}</span>
                </div>
                <div className="qv-tools-luxe__body">
                  <span className="qv-tools-luxe__tag">{badge}</span>
                  <h3>{title}</h3>
                  <p>{desc}</p>
                  <span className="qv-tools-luxe__included">
                    <Icon name="check" size={12} strokeWidth={3} /> {t("home.tools.included")}
                  </span>
                </div>
              </article>);
          })}
        </div>
      </div>
    </section>);

}

/* ---------- Sec 10: Testimonios ---------- */
const TESTIMONIALS = [
{ key: "t1", name: "Carmen Zapata",          avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=160&q=80" },
{ key: "t2", name: "Javi Jauregui Apestegui", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=160&q=80" },
{ key: "t3", name: "Toni gca",                avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=160&q=80" },
{ key: "t4", name: "José Manre",              avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=160&q=80" }];


function Testimonials() {
  const VISIBLE = 2;
  const N = TESTIMONIALS.length;
  const items = [...TESTIMONIALS, ...TESTIMONIALS.slice(0, VISIBLE)];

  const [start, setStart] = useState(0);
  const [withTransition, setWithTransition] = useState(true);
  const viewportRef = useRef(null);
  const [cardW, setCardW] = useState(0);
  const gap = 60;

  useEffect(() => {
    const update = () => {
      if (!viewportRef.current) return;
      const style = window.getComputedStyle(viewportRef.current);
      const padL = parseFloat(style.paddingLeft) || 0;
      const padR = parseFloat(style.paddingRight) || 0;
      const w = viewportRef.current.clientWidth - padL - padR;
      const perView = window.innerWidth >= 880 ? VISIBLE : 1;
      setCardW((w - gap * (perView - 1)) / perView);
    };
    update();
    window.addEventListener("resize", update);
    return () => window.removeEventListener("resize", update);
  }, []);

  useEffect(() => {
    if (start === N) {
      const t = setTimeout(() => {
        setWithTransition(false);
        setStart(0);
      }, 500);
      return () => clearTimeout(t);
    }
    if (!withTransition) {
      const t = setTimeout(() => setWithTransition(true), 50);
      return () => clearTimeout(t);
    }
  }, [start, withTransition]);

  const next = () => {
    if (!withTransition) return;
    setStart((s) => Math.min(s + 1, N));
  };
  const prev = () => {
    if (!withTransition) return;
    if (start === 0) {
      setWithTransition(false);
      setStart(N);
      setTimeout(() => {
        setWithTransition(true);
        setStart(N - 1);
      }, 60);
    } else {
      setStart((s) => s - 1);
    }
  };

  const trackOffset = -start * (cardW + gap);
  const activeDot = start % N;

  return (
    <section className="section section--w1400" aria-label={t("home.testimonials.aria")}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--center">{t("home.testimonials.eyebrow")}</span>
          <h2 style={{ color: "rgb(20, 28, 20)" }} dangerouslySetInnerHTML={{ __html: t("home.testimonials.h2_html") }} />
        </div>

        <div className="testimonial-wrap">
          <button className="testimonial-arrow testimonial-arrow--left" onClick={prev} aria-label={t("common.action.prev")}>
            <Icon name="arrow-left" size={18} />
          </button>

          <div className="testimonial-viewport" ref={viewportRef}>
            <div
              className="testimonial-track"
              style={{
                transform: `translateX(${trackOffset}px)`,
                transition: withTransition ? "transform 480ms cubic-bezier(0.16, 1, 0.3, 1)" : "none"
              }}>

              {items.map((ti, i) =>
              <article key={i} className="testimonial-card" style={{ width: cardW > 0 ? cardW + "px" : "100%" }}>
                  <div className="testimonial-card__body">
                    <p className="testimonial-card__quote">{t(`home.testimonials.${ti.key}_quote`)}</p>
                    <div className="testimonial-card__stars" aria-label={t("home.testimonials.stars_aria")}>★ ★ ★ ★ ★</div>
                    <div className="testimonial-card__author">
                      <span className="testimonial-card__name" style={{ color: "rgb(20, 28, 20)" }}>{ti.name}</span>
                      <span className="testimonial-card__sep">|</span>
                      <span className="testimonial-card__role">{t(`home.testimonials.${ti.key}_role`)}</span>
                    </div>
                  </div>
                  <div className="testimonial-card__avatar-wrap">
                    <div className="testimonial-card__avatar" style={{ backgroundImage: `url(${ti.avatar})` }} />
                    <span className="testimonial-card__quote-icon" aria-hidden="true">
                      <Icon name="quote" size={16} strokeWidth={2.2} />
                    </span>
                  </div>
                </article>
              )}
            </div>
          </div>

          <button className="testimonial-arrow testimonial-arrow--right" onClick={next} aria-label={t("common.action.next")}>
            <Icon name="arrow-right" size={18} />
          </button>
        </div>

        <div className="carousel__dots">
          {TESTIMONIALS.map((_, i) =>
          <span key={i} className={"carousel__dot" + (i === activeDot ? " is-active" : "")} />
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Sec 11: Blog y noticias ---------- */
const POSTS = [
{ catKey: "cat_guide",  dateKey: "month_may", titleKey: "post1_title", img: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=900&q=80" },
{ catKey: "cat_market", dateKey: "month_apr", titleKey: "post2_title", img: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=80" },
{ catKey: "cat_ai",     dateKey: "month_apr", titleKey: "post3_title", img: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=900&q=80" }];


function Blog() {
  return (
    <section className="section section--cream" id="blog" aria-label={t("home.blogSec.aria")}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--center">{t("home.blogSec.eyebrow")}</span>
          <h2 dangerouslySetInnerHTML={{ __html: t("home.blogSec.h2_html") }} />
          <p>{t("home.blogSec.intro")}</p>
        </div>

        <div className="blog-grid">
          {POSTS.map((p, i) => {
            const title = t(`home.blogSec.${p.titleKey}`);
            return (
              <article key={i} className="blog-card">
                <div className="blog-card__media"><img src={p.img} alt={title} /></div>
                <div className="blog-card__body">
                  <div className="blog-card__meta">
                    <span>{t(`home.blogSec.${p.catKey}`)}</span>
                    <span className="dot" />
                    <span>{t(`home.blogSec.${p.dateKey}`)}</span>
                  </div>
                  <h3>{title}</h3>
                  <a className="blog-card__link" href="#">
                    {t("home.blogSec.read_article")} <Icon name="arrow-right" size={14} />
                  </a>
                </div>
              </article>);
          })}
        </div>

        <div className="center-cta">
          <Button variant="primary" iconRight="arrow-right" as="a" href="blog.html">
            {t("home.blogSec.cta_blog")}
          </Button>
        </div>
      </div>
    </section>);

}

/* ---------- Sec 12: FAQ ---------- */
const FAQ_KEYS = ["q1", "q2", "q3", "q4", "q5", "q6", "q7"];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" aria-label={t("home.faq.aria")}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow--center">{t("home.faq.eyebrow")}</span>
          <h2 dangerouslySetInnerHTML={{ __html: t("home.faq.h2_html") }} />
          <p>{t("home.faq.intro")}</p>
        </div>

        <div className="faq">
          {FAQ_KEYS.map((qkey, i) =>
          <FAQItem
            key={i}
            q={t(`home.faq.${qkey}`)}
            a={t(`home.faq.${qkey.replace("q", "a")}`)}
            open={open === i}
            onClick={() => setOpen(open === i ? -1 : i)} />

          )}
        </div>

        <div className="center-cta">
          <Button variant="primary" iconRight="arrow-right" as="a" href="#valoracion">
            {t("home.faq.cta_more")}
          </Button>
        </div>
      </div>
    </section>);

}

function AppPromo() {
  return (
    <section className="section section--split-cream-page" id="app" aria-label={t("home.appPromo.aria")} style={{ padding: "50px 0px" }}>
      <div className="container" style={{ padding: "0 30px" }}>
        <div className="apppromo" style={{ height: "420px", maxWidth: "100%", width: "1900px" }}>
          <div className="apppromo__content">
            <span className="apppromo__eyebrow">{t("home.appPromo.eyebrow")}</span>
            <h2 dangerouslySetInnerHTML={{ __html: t("home.appPromo.h2_html") }} />
            <p>{t("home.appPromo.intro")}</p>
            <div className="apppromo__stores">
              <a className="app-store-btn" href="#" aria-label={t("home.appPromo.apple_aria")}>
                <span className="app-store-btn__icon">
                  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M16.5 1.5c0 1.2-.5 2.3-1.2 3.1-.9.9-2.3 1.6-3.4 1.5-.1-1.2.5-2.4 1.2-3.1.8-.9 2.2-1.5 3.4-1.5zM20.4 17.2c-.5 1.1-.7 1.6-1.4 2.6-.9 1.4-2.2 3.2-3.9 3.2-1.5 0-1.9-1-3.9-1-2 0-2.4 1-3.9 1-1.7 0-2.9-1.6-3.8-3.1C1 16.9.7 12 2.1 9.4 3.1 7.6 4.7 6.5 6.3 6.5c1.6 0 2.6 1 3.9 1 1.3 0 2.1-1 3.9-1 1.4 0 2.9.8 3.9 2.1-3.4 1.9-2.8 6.8 2.4 8.6z" />
                  </svg>
                </span>
                <span className="app-store-btn__text">
                  <span className="app-store-btn__small">{t("home.appPromo.apple_small")}</span>
                  <span className="app-store-btn__big">{t("home.appPromo.apple_big")}</span>
                </span>
              </a>
              <a className="app-store-btn app-store-btn--green" href="#" aria-label={t("home.appPromo.google_aria")}>
                <span className="app-store-btn__icon">
                  <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path fill="#fff" d="M3.6 1.7C3.2 2.1 3 2.6 3 3.4v17.2c0 .8.2 1.3.6 1.7l.1.1L13.3 13l.1-.1-9.7-11.3-.1.1z" />
                    <path fill="#fff" d="M16.6 16.2L13.5 13l3-3 .1.1 3.7 2.1c1.1.6 1.1 1.6 0 2.2l-3.7 2-.1.1z" opacity=".85" />
                    <path fill="#fff" d="M16.7 16.1L13.4 12.8 3.6 22.4c.4.4 1 .4 1.8 0l11.3-6.3z" opacity=".8" />
                    <path fill="#fff" d="M16.7 9.6L5.4 3.3c-.8-.4-1.4-.4-1.8 0l9.8 9.5 3.3-3.2z" opacity=".95" />
                  </svg>
                </span>
                <span className="app-store-btn__text">
                  <span className="app-store-btn__small">{t("home.appPromo.google_small")}</span>
                  <span className="app-store-btn__big">{t("home.appPromo.google_big")}</span>
                </span>
              </a>
            </div>
          </div>

          <div className="apppromo__phones">
            <img className="apppromo__phones-img" src="/assets/app-phones.png" alt={t("home.appPromo.phones_alt")} />
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- HOME · Sección SEO con Inno (asistente IA 24/7) ---------- */
function HomeInnoSEO() {
  return (
    <section className="section pqi-assistant section--inverse" id="asistente" aria-label={t("home.innoSeo.aria")}>
      <div className="container">
        <div className="pqi-assistant__layout">
          <div className="pqi-assistant__robot">
            <img src="/assets/robot-ia-pointing.png" alt={t("home.innoSeo.robot_alt")} />
          </div>
          <div className="pqi-assistant__content">
            <span className="eyebrow eyebrow--inverse">{t("home.innoSeo.eyebrow")}</span>
            <h2 dangerouslySetInnerHTML={{ __html: t("home.innoSeo.h2_html") }} />
            <p dangerouslySetInnerHTML={{ __html: t("home.innoSeo.intro_html") }} />

            <div className="pqi-assistant__features">
              <div className="pqi-assistant__feature">
                <span className="pqi-assistant__feature-icon"><Icon name="message-circle" size={18} /></span>
                <div>
                  <strong>{t("home.innoSeo.f1_title")}</strong>
                  <p>{t("home.innoSeo.f1_desc")}</p>
                </div>
              </div>
              <div className="pqi-assistant__feature">
                <span className="pqi-assistant__feature-icon"><Icon name="zap" size={18} /></span>
                <div>
                  <strong>{t("home.innoSeo.f2_title")}</strong>
                  <p>{t("home.innoSeo.f2_desc")}</p>
                </div>
              </div>
              <div className="pqi-assistant__feature">
                <span className="pqi-assistant__feature-icon"><Icon name="languages" size={18} /></span>
                <div>
                  <strong>{t("home.innoSeo.f3_title")}</strong>
                  <p>{t("home.innoSeo.f3_desc")}</p>
                </div>
              </div>
              <div className="pqi-assistant__feature">
                <span className="pqi-assistant__feature-icon"><Icon name="user-check" size={18} /></span>
                <div>
                  <strong>{t("home.innoSeo.f4_title")}</strong>
                  <p>{t("home.innoSeo.f4_desc")}</p>
                </div>
              </div>
            </div>

            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 32 }}>
              <Button variant="primary" iconRight="arrow-right" as="a" href="#asistente">
                {t("home.innoSeo.cta_talk")}
              </Button>
              <Button variant="ghost-light" icon="phone" as="a" href="tel:+34604494089">
                604 49 40 89
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- HOME · Bienvenida al mundo Innovaria ---------- */
function HomeWelcome() {
  const tiles = [
  { icon: "sparkles",   key: "t1", href: "#asistente" },
  { icon: "smartphone", key: "t2", href: "#app" },
  { icon: "calculator", key: "t3", href: "valorar-mi-casa-gratis.html" },
  { icon: "search",     key: "t4", href: "quiero-comprar.html" }];

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

        <div className="home-welcome__grid">
          {tiles.map((tile, i) =>
          <a key={i} className="home-welcome__tile" href={tile.href}>
              <span className="home-welcome__icon"><Icon name={tile.icon} size={24} /></span>
              <span className="home-welcome__label">{t(`home.welcome.${tile.key}_label`)}</span>
              <h3>{t(`home.welcome.${tile.key}_title`)}</h3>
              <p>{t(`home.welcome.${tile.key}_text`)}</p>
              <span className="home-welcome__arrow">
                <Icon name="arrow-up-right" size={16} />
              </span>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- HOME · Servicios (estilo findrealestate.com — Comprar / Vender) ---------- */
function HomeServicios() {
  const rows = [
  { n: "1", key: "row1", href: "quiero-comprar.html", img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1800&q=80" },
  { n: "2", key: "row2", href: "quiero-vender.html",  img: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=80" }];

  return (
    <section className="home-servicios" aria-label={t("home.servicios.aria")}>
      <div className="home-servicios__head">
        <span className="home-servicios__eyebrow" style={{ color: "rgb(168, 220, 178)" }}>{t("home.servicios.eyebrow")}</span>
        <h2 className="home-servicios__title">
          <span dangerouslySetInnerHTML={{ __html: t("home.servicios.title_html_part1") }} /><br />
          <span className="home-servicios__title-sub" style={{ color: "rgb(168, 220, 178)" }}>{t("home.servicios.title_html_part2")}</span>
        </h2>
      </div>

      {rows.map((r, i) => {
        const label = t(`home.servicios.${r.key}_label`);
        const text  = t(`home.servicios.${r.key}_text`);
        return (
          <a key={i} className="home-servicios__row" href={r.href} aria-label={t("home.servicios.row_aria_prefix", { label })} style={{ height: "288px" }}>
            <span className="home-servicios__bg" style={{ backgroundImage: `url(${r.img})` }} />
            <span className="home-servicios__veil" />

            <div className="home-servicios__row-inner">
              <div className="home-servicios__left">
                <span className="home-servicios__num">{r.n}</span>
                <p className="home-servicios__text">{text}</p>
              </div>

              <div className="home-servicios__right">
                <span className="home-servicios__big">{label}</span>
                <span className="home-servicios__arrow" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="5" y1="12" x2="19" y2="12" />
                    <polyline points="12 5 19 12 12 19" />
                  </svg>
                </span>
              </div>
            </div>
          </a>);
      })}

      <div className="home-servicios__closing">
        <div className="home-servicios__closing-inner">
          <h3 className="home-servicios__closing-title" style={{ fontSize: "36px", fontWeight: "600", width: "587px" }} dangerouslySetInnerHTML={{ __html: t("home.servicios.closing_h3_html") }} />
          <a className="home-servicios__closing-cta" href="contacto.html">
            <span>{t("home.servicios.closing_cta")}</span>
            <span className="home-servicios__closing-cta-arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <line x1="5" y1="12" x2="19" y2="12" />
                <polyline points="12 5 19 12 12 19" />
              </svg>
            </span>
          </a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { ToolsSection, AppPromo, Testimonials, Blog, FAQ, HomeInnoSEO, HomeWelcome, HomeServicios });