/* education.jsx — blog teasers + instagram grid
   Article data lives in articles.jsx (VD_ARTICLES). Clicking a card
   navigates to the full article subpage at #/articulo/<slug>. */

function Education() {
  const ARTICLES = window.VD_ARTICLES || [];
  return (
    <section className="section-pad" id="educacion" style={{ paddingBottom: "clamp(40px, 5vw, 72px)" }}>
      <div className="wrap">
        <Reveal>
          <div className="services-head">
            <div>
              <Eyebrow>Educación · Diario</Eyebrow>
              <h2 className="section-title" style={{ marginTop: 18 }}>
                Aprende antes<br/><em>de decidir.</em>
              </h2>
            </div>
            <p className="lead" style={{ maxWidth: "36ch" }}>
              Artículos escritos por la doctora para tomar decisiones informadas
              sobre tu piel, tu rostro y tu cabello.
            </p>
          </div>
        </Reveal>

        <div className="edu-grid">
          {ARTICLES.map((a, i) => (
            <Reveal
              as="a"
              href={`#/articulo/${a.slug}`}
              key={a.slug}
              delay={(i % 3) + 1}
              className="edu-card">
              <Photo tone={a.tone} label={`editorial · ${a.tag.toLowerCase()}`} src={a.thumb} alt={a.title} className="edu-img" />
              <div>
                <div className="edu-tag">{a.tag}</div>
                <h3 className="edu-title" style={{ marginTop: 8 }}>{a.title}</h3>
                <div className="edu-meta" style={{ marginTop: 14 }}>{a.meta}</div>
                <div className="edu-readmore">Leer artículo <Arr /></div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Instagram feed.
   To use real posts: fill each entry below with the post/reel `href`,
   a short `title`, and a local preview image `img` (drop the screenshot
   in /assets, e.g. "assets/ig-1.jpg"). While `img` is empty a warm
   placeholder with the title is shown instead. */
const IG_POSTS = [
  { title: "post · capilar antes/después", tone: "mocha",     href: "https://www.instagram.com/medvictoriadjanon/p/DX7EhTNDoFJ/",   img: "assets/ig-1.jpg" },
  { title: "reel · botox natural",         tone: "rose",      href: "https://www.instagram.com/medvictoriadjanon/reel/DQwtu1ajoch/", img: "assets/ig-2.jpg" },
  { title: "reel · efecto purga",          tone: "champagne", href: "https://www.instagram.com/medvictoriadjanon/reel/DXo69xujptc/", img: "assets/ig-3.jpg" },
  { title: "reel · radiofrecuencia",       tone: "bone",      href: "https://www.instagram.com/medvictoriadjanon/reel/DVbURt4DtIv/", img: "assets/ig-4.jpg" },
  { title: "reel · elige bien tu médico",  tone: "rose",      href: "https://www.instagram.com/medvictoriadjanon/reel/DX9XU41uxLA/", img: "assets/ig-5.jpg" },
  { title: "reel · después de los 30",     tone: "champagne", href: "https://www.instagram.com/reel/DMsa32RsgwG/",                  img: "assets/ig-6.jpg" },
];

function Instagram() {
  const POSTS = window.IG_POSTS || IG_POSTS;
  return (
    <section className="section-pad-sm ig-section" id="instagram">
      <div className="wrap">
        <Reveal>
          <div className="services-head" style={{ marginBottom: 32 }}>
            <div>
              <Eyebrow>Instagram</Eyebrow>
              <h2 className="section-title" style={{ marginTop: 18 }}>
                @medvictoriadjanon
              </h2>
            </div>
            <a className="btn btn-ghost btn-sm" href="https://www.instagram.com/medvictoriadjanon/" target="_blank" rel="noreferrer">
              Seguir <Arr />
            </a>
          </div>
        </Reveal>
        <Reveal>
          <div className="ig-grid">
            {POSTS.map((p, i) => (
              <a
                key={i}
                className="ig-tile"
                href={p.href}
                target="_blank"
                rel="noreferrer"
                aria-label={p.title}>
                <Photo
                  tone={p.tone}
                  label={p.img ? "" : p.title}
                  src={p.img || ""}
                  alt={p.title}
                  style={{ height: "100%", borderRadius: "var(--r-sm)" }} />
                {p.img && <span className="ig-cap">{p.title}</span>}
              </a>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Education, Instagram });