/* ============================================================
   EOLODENT — Home page
   ============================================================ */

function Hero() {
  const t = useT();
  return (
    <section className="hero">
      <div className="hero__media">
        <PhotoSlot id="hero-main" note="Foto de tu consultorio (horizontal)" radius={0} placeholder="Arrastra aquí una foto de tu clínica" />
        <div className="hero__scrim"></div>
      </div>
      <div className="wrap hero__inner">
        <div className="hero__card">
          <span className="hero__kicker"><span className="dot"></span>{t("hero.kicker")}</span>
          <h1 className="hero__title">
            <span>{t("hero.title1")}</span>
            <span className="eo-accent cyan">{t("hero.title2")}</span>
          </h1>
          <p className="hero__sub">{t("hero.sub")}</p>
          <div className="hero__actions">
            <a href="#/agenda" onClick={(e) => { e.preventDefault(); navigate("#/agenda"); }} className="btn btn--cyan btn--lg">{t("hero.cta")} <Icon name="arrow" size={18} /></a>
            <a href="#/servicios" onClick={(e) => { e.preventDefault(); navigate("#/servicios"); }} className="btn btn--ghost-light btn--lg">{t("hero.cta2")}</a>
          </div>
        </div>
      </div>
      <div className="wrap hero__stats">
        {[["clock", "hero.stat1", "hero.stat1b"], ["map", "hero.stat2", "hero.stat2b"], ["shield", "hero.stat3", "hero.stat3b"]].map(([ic, a, b]) => (
          <div key={a} className="hero__stat">
            <Icon name={ic} size={24} />
            <div><strong>{t(a)}</strong><span>{t(b)}</span></div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Welcome() {
  const t = useT();
  return (
    <section className="welcome">
      <div className="wrap welcome__grid">
        <Reveal className="welcome__media">
          <PhotoSlot id="welcome-photo" note="Equipo o recepción" radius={20} placeholder="Foto del equipo / recepción" />
          <div className="welcome__badge">
            <Icon name="heart" size={20} />
            <div><strong>+10 años</strong><span>cuidando sonrisas en CDMX</span></div>
          </div>
        </Reveal>
        <Reveal className="welcome__text" delay={120}>
          <p className="eyebrow">{t("welcome.kicker")}</p>
          <h2>{t("welcome.title")}</h2>
          <p className="welcome__body">{t("welcome.body")}</p>
          <p className="welcome__body">{t("welcome.p2")}</p>
          <ul className="welcome__list">
            {["welcome.b1", "welcome.b2", "welcome.b3"].map((k) => (
              <li key={k}><span className="tick"><Icon name="check" size={14} /></span>{t(k)}</li>
            ))}
          </ul>
        </Reveal>
      </div>
    </section>
  );
}

function Treatments() {
  const t = useT();
  const store = useStore();
  const services = store.get("services").filter((s) => s.active && s.key !== "consulta");
  return (
    <section className="section treatments" id="tratamientos">
      <div className="wrap">
        <div className="section-head center">
          <p className="eyebrow center">{t("treat.kicker")}</p>
          <h2>{t("treat.title")}</h2>
          <p className="lead">{t("treat.sub")}</p>
        </div>
        <div className="grid svc-grid mt-l">
          {services.map((s, i) => <ServiceCard key={s.id} svc={s} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  const t = useT();
  const items = [
    ["g1", "Sala de espera"], ["g2", "Consultorio"], ["g3", "Equipo de rayos X"],
    ["g4", "Caso de ortodoncia"], ["g5", "Área de esterilización"], ["g6", "Recepción"],
  ];
  return (
    <section className="section gallery">
      <div className="wrap">
        <div className="section-head center">
          <p className="eyebrow center">{t("gallery.kicker")}</p>
          <h2>{t("gallery.title")}</h2>
          <p className="lead">{t("gallery.sub")}</p>
        </div>
      </div>
      <div className="gallery__track wrap mt-l">
        {items.map(([id, label], i) => (
          <Reveal key={id} className={`gallery__item gi-${i % 6}`} delay={(i % 3) * 70}>
            <PhotoSlot id={"gal-" + id} note={label} radius={18} placeholder={label} />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function Social() {
  const t = useT();
  return (
    <section className="social">
      <div className="wrap social__inner">
        <div className="social__text">
          <p className="eyebrow">{t("social.kicker")}</p>
          <h2>{t("social.title")}</h2>
          <p className="social__sub">{t("social.sub")}</p>
          <div className="social__links">
            <a href="https://www.facebook.com/eolodent" target="_blank" rel="noopener" className="social__btn fb">
              <Icon name="facebook" size={24} /><div><strong>Facebook</strong><span>@eolodent</span></div>
            </a>
            <a href="https://www.instagram.com/eolodent_clinica/" target="_blank" rel="noopener" className="social__btn ig">
              <Icon name="instagram" size={24} /><div><strong>Instagram</strong><span>@eolodent_clinica</span></div>
            </a>
          </div>
        </div>
        <div className="social__feed">
          {["s1", "s2", "s3", "s4"].map((id, i) => (
            <PhotoSlot key={id} id={"social-" + id} note={["Tip", "Antes/Después", "Promo", "Sonrisa"][i]} radius={16} placeholder="Post de redes" className={"sf-" + i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function Branches() {
  const t = useT();
  const store = useStore();
  const branches = store.get("branches");
  return (
    <section className="section branches">
      <div className="wrap">
        <div className="section-head center">
          <p className="eyebrow center">{t("branches.kicker")}</p>
          <h2>{t("branches.title")}</h2>
          <p className="lead">{t("branches.sub")}</p>
        </div>
        <div className="grid branches__grid mt-l">
          {branches.map((b) => <BranchCard key={b.id} b={b} />)}
        </div>
      </div>
    </section>
  );
}

function BlogPreview() {
  const t = useT();
  const store = useStore();
  const posts = store.get("posts").filter((p) => p.status === "publicado").slice(0, 3);
  return (
    <section className="section blog-preview">
      <div className="wrap">
        <div className="spread blog-preview__head">
          <div className="section-head">
            <p className="eyebrow">{t("blog.kicker")}</p>
            <h2>{t("blog.title")}</h2>
          </div>
          <a href="#/blog" onClick={(e) => { e.preventDefault(); navigate("#/blog"); }} className="btn btn--ghost">{t("blog.all")} <Icon name="arrow" size={16} /></a>
        </div>
        <div className="grid blog-grid mt-l">
          {posts.map((p) => <BlogCard key={p.id} post={p} />)}
        </div>
      </div>
    </section>
  );
}

function BookingCTA() {
  const t = useT();
  return (
    <section className="section booking" id="agenda">
      <div className="wrap booking__grid">
        <div className="booking__pitch">
          <p className="eyebrow">{t("book.kicker")}</p>
          <h2>{t("book.title")}</h2>
          <p className="booking__sub">{t("book.sub")}</p>
          <ul className="booking__perks">
            <li><Icon name="check" size={16} />Consulta de valoración desde {money(800)}</li>
            <li><Icon name="check" size={16} />Atención el mismo día en urgencias</li>
            <li><Icon name="check" size={16} />Te confirmamos por WhatsApp</li>
          </ul>
          <div className="booking__call">
            <Icon name="phone" size={20} />
            <div><span>¿Urgencia ahora?</span><a href="tel:5548281475">55 4828 1475</a></div>
          </div>
        </div>
        <div className="booking__form-wrap">
          <BookingForm dark />
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <main>
      <Hero />
      <Welcome />
      <Treatments />
      <Gallery />
      <Social />
      <Branches />
      <BlogPreview />
      <BookingCTA />
    </main>
  );
}

Object.assign(window, { HomePage });