// HomePage.jsx — Historia con Pilar Ducci
const HomePage = ({ setPage, goToCourse, palette, t }) => {
  const P = palette;
  const isMobile = useIsMobile();

  const stats = [
    { num: "30+", label: t("años enseñando historia", "years teaching history") },
    { num: "300K+", label: t("seguidores en plataformas", "followers across platforms") },
    { num: "100+", label: t("cursos y conferencias", "courses & conferences") },
  ];

  const featuredCourses = [
    {
      id: "trincheras",
      title: t("De los Imperios a las Trincheras", "From Empires to Trenches"),
      type: t("En Vivo", "Live"),
      category: t("Historia Universal", "World History"),
      desc: t("Un recorrido por los nacionalismos e imperialismos que transformaron Europa y condujeron a la Primera Guerra Mundial.", "A journey through the nationalisms and imperialisms that transformed Europe and led to World War I."),
      sessions: "3",
      price: "$45.000",
      badge: "live",
      next: t("Miércoles 10, 17 y 24 de junio · 19:00 hrs", "Wednesdays June 10, 17 & 24 · 7pm"),
      image: "/assets/trincheras.webp",
    },
    {
      id: "aquiles",
      title: t("Aquiles y Odiseo – El Mundo detrás de Troya", "Achilles & Odysseus – The World Behind Troy"),
      type: t("En Vivo", "Live"),
      category: t("Historia Universal", "World History"),
      desc: t("Dos sesiones para explorar la Guerra de Troya, sus héroes y el mundo antiguo que la hizo posible.", "Two sessions to explore the Trojan War, its heroes and the ancient world that made it possible."),
      sessions: "2",
      price: "$30.000",
      badge: "live",
      next: t("7 y 14 de julio · 19:00 hrs", "July 7 & 14 · 7pm"),
      image: "/assets/aquiles.webp",
    },
    {
      id: "vikingos",
      title: t("La Ruta de los Vikingos", "The Viking Route"),
      type: t("En Vivo", "Live"),
      category: t("Historia Universal", "World History"),
      desc: t("Una sesión para descubrir el mundo vikingo: sus rutas, cultura, mitología y legado en la historia europea.", "One session to discover the Viking world: its routes, culture, mythology and legacy in European history."),
      sessions: "1",
      price: "$15.000",
      badge: "live",
      next: t("12 de agosto · 19:00 hrs", "August 12 · 7pm"),
      image: "/assets/vikingos.webp",
    },
  ];

  return (
    <div style={{ background: P.bg, color: P.text, minHeight: "100vh" }}>
      {/* HERO */}
      <section style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        textAlign: "center",
        padding: isMobile ? "100px 20px 56px" : "120px 24px 72px",
        background: P.bg,
      }}>
        {/* Ornament */}
        <div style={{ marginBottom: 24, opacity: 0.7 }}>
          <svg width="48" height="12" viewBox="0 0 48 12">
            <line x1="0" y1="6" x2="16" y2="6" stroke={P.accent} strokeWidth="1" />
            <circle cx="24" cy="6" r="4" fill="none" stroke={P.accent} strokeWidth="1" />
            <line x1="32" y1="6" x2="48" y2="6" stroke={P.accent} strokeWidth="1" />
          </svg>
        </div>

        <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.25em", fontSize: 11, color: P.accent, textTransform: "uppercase", marginBottom: 20 }}>
          {t("Historiadora · Conferencista · Divulgadora Cultural", "Historian · Speaker · Storyteller")}
        </p>

        <div style={{ marginBottom: 16, textAlign: "center" }}>
          <div style={{
            fontFamily: "'Playfair Display', serif",
            fontStyle: "italic",
            fontWeight: 400,
            fontSize: "clamp(1.2rem, 3vw, 2rem)",
            color: P.accent,
            lineHeight: 1.3,
            marginBottom: 4,
          }}>
            {t("Historia con", "History with")}
          </div>
          <h1 style={{
            fontFamily: "'Playfair Display', serif",
            fontSize: "clamp(2.8rem, 8vw, 5.5rem)",
            fontWeight: 700,
            lineHeight: 1.0,
            color: P.textBold,
            letterSpacing: "-0.02em",
            margin: 0,
          }}>
            Pilar Ducci
          </h1>
        </div>

        <p style={{
          fontFamily: "'Lato', sans-serif",
          fontSize: "clamp(1rem, 2.5vw, 1.3rem)",
          maxWidth: 600,
          lineHeight: 1.7,
          color: P.muted,
          marginBottom: 48,
        }}>
          {t(
            "Más de 30 años conectando personas con la historia. Cursos, podcasts y viajes que transforman la manera en que entendemos el mundo.",
            "Over 30 years connecting people with history. Courses, podcasts and trips that transform the way we understand the world."
          )}
        </p>

        <div style={{ display: "flex", gap: 16, flexWrap: "wrap", justifyContent: "center" }}>
          <button onClick={() => setPage("cursos")} style={{
            background: P.accent,
            color: P.bg,
            border: "none",
            padding: "14px 36px",
            fontFamily: "'Lato', sans-serif",
            fontWeight: 700,
            fontSize: 15,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            cursor: "pointer",
            transition: "opacity 0.2s",
          }}
            onMouseEnter={e => e.target.style.opacity = "0.85"}
            onMouseLeave={e => e.target.style.opacity = "1"}
          >
            {t("Ver Cursos", "View Courses")}
          </button>
          <button onClick={() => setPage("viajes")} style={{
            background: "transparent",
            color: P.accent,
            border: `1px solid ${P.accent}`,
            padding: "14px 36px",
            fontFamily: "'Lato', sans-serif",
            fontWeight: 400,
            fontSize: 15,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            cursor: "pointer",
            transition: "all 0.2s",
          }}
            onMouseEnter={e => { e.target.style.background = P.accent + "18" }}
            onMouseLeave={e => { e.target.style.background = "transparent" }}
          >
            {t("Explorar Viajes", "Explore Trips")}
          </button>
        </div>
        <a
          href="https://www.skool.com/historiaconpilarducci"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: "inline-block",
            marginTop: 18,
            background: P.bg,
            color: P.accent2 || "#315C54",
            border: `1px solid ${P.accent2 || "#315C54"}`,
            padding: "12px 30px",
            fontFamily: "'Lato', sans-serif",
            fontWeight: 700,
            fontSize: 13,
            letterSpacing: "0.1em",
            textTransform: "uppercase",
            textDecoration: "none",
            cursor: "pointer",
            transition: "all 0.2s",
          }}
          onMouseEnter={e => {
            e.target.style.background = (P.accent2 || "#315C54") + "12";
            e.target.style.borderColor = P.accent || "#6F8A7A";
            e.target.style.color = P.accent || "#6F8A7A";
          }}
          onMouseLeave={e => {
            e.target.style.background = P.bg || "#F7F6F3";
            e.target.style.borderColor = P.accent2 || "#315C54";
            e.target.style.color = P.accent2 || "#315C54";
          }}
        >
          {t("Unirse a Skool", "Join Skool")}
        </a>

      </section>

      {/* STATS */}
      <section style={{ background: P.surface, padding: isMobile ? "36px 20px" : "48px 24px" }}>
        <div style={{ maxWidth: 900, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: isMobile ? 16 : 24 }}>
          {stats.map((s, i) => (
            <div key={i} style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 32 : 42, color: P.accent, fontWeight: 700 }}>{s.num}</div>
              <div style={{ fontFamily: "'Lato', sans-serif", fontSize: 13, color: P.muted, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ABOUT */}
      <section style={{ maxWidth: 1100, margin: "0 auto", padding: isMobile ? "60px 20px" : "100px 40px", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 40 : 80, alignItems: "center" }}>
        {/* Photo */}
        <div style={{
          width: "100%", aspectRatio: "3/4",
          position: "relative", overflow: "hidden",
          border: `1px solid ${P.accent}22`,
        }}>
          <img src="/pilar-ducci.jpeg" alt="Pilar Ducci" style={{
            width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top",
            display: "block",
          }} />
          <div style={{
            position: "absolute", bottom: 0, left: 0, right: 0, height: 4,
            background: P.accent,
          }} />
        </div>

        {/* Bio */}
        <div>
          <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.2em", fontSize: 11, color: P.accent, textTransform: "uppercase", marginBottom: 16 }}>
            {t("Sobre Pilar", "About Pilar")}
          </p>
          <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: "clamp(2rem, 4vw, 3rem)", color: P.textBold, lineHeight: 1.15, marginBottom: 24 }}>
            {t("Bióloga, historiadora\ny divulgadora cultural", "Biologist, historian\nand storyteller")}
          </h2>
          <div style={{ width: 40, height: 2, background: P.accent, marginBottom: 24 }} />
          <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 16, lineHeight: 1.9, color: P.muted, marginBottom: 16 }}>
            {t(
              "Bióloga de la Pontificia Universidad Católica de Chile, con más de 30 años dedicados a investigar y enseñar historia, ciencia y cultura popular.",
              "Biologist from the Pontificia Universidad Católica de Chile, with over 30 years devoted to researching and teaching history, science and popular culture."
            )}
          </p>
          <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 16, lineHeight: 1.9, color: P.muted, marginBottom: 32 }}>
            {t("Investigadora en Patrimonio Cultural Inmaterial de Chile y del Circo Tradicional Chileno. Narradora viral con mas de 300K seguidores en plataformas digitales.", "Investigadora en Patrimonio Cultural Inmaterial de Chile y del Circo Tradicional Chileno. Narradora viral con mas de 300K seguidores en plataformas digitales.")}
          </p>
          <button onClick={() => setPage("cursos")} style={{
            background: "transparent", color: P.accent, border: `1px solid ${P.accent}`,
            padding: "12px 28px", fontFamily: "'Lato', sans-serif", fontSize: 13,
            letterSpacing: "0.12em", textTransform: "uppercase", cursor: "pointer", transition: "all 0.2s",
          }}
            onMouseEnter={e => e.target.style.background = P.accent + "18"}
            onMouseLeave={e => e.target.style.background = "transparent"}
          >
            {t("Conoce sus cursos →", "Explore her courses →")}
          </button>
        </div>
      </section>

      {/* FEATURED COURSES */}
      <section style={{ background: P.surface, padding: isMobile ? "48px 20px" : "80px 40px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 60 }}>
            <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.2em", fontSize: 11, color: P.accent, textTransform: "uppercase", marginBottom: 12 }}>
              {t("Próximos y disponibles", "Upcoming & Available")}
            </p>
            <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: "clamp(1.8rem, 4vw, 2.8rem)", color: P.textBold }}>
              {t("Cursos Destacados", "Featured Courses")}
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 24 }}>
            {featuredCourses.map((c, i) => (
              <CourseCard key={i} course={c} P={P} t={t} goToCourse={goToCourse} />
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 48 }}>
            <button onClick={() => setPage("cursos")} style={{
              background: P.accent, color: P.bg, border: "none",
              padding: "14px 40px", fontFamily: "'Lato', sans-serif",
              fontWeight: 700, fontSize: 14, letterSpacing: "0.1em", textTransform: "uppercase",
              cursor: "pointer", transition: "opacity 0.2s",
            }}
              onMouseEnter={e => e.target.style.opacity = "0.85"}
              onMouseLeave={e => e.target.style.opacity = "1"}
            >
              {t("Ver todos los cursos", "View all courses")}
            </button>
            <div style={{ marginTop: 18 }}>
              <a
                href="https://www.skool.com/historiaconpilarducci"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-block",
                  background: P.bg,
                  color: P.accent2 || "#315C54",
                  border: `1px solid ${P.accent2 || "#315C54"}`,
                  padding: "12px 30px",
                  fontFamily: "'Lato', sans-serif",
                  fontWeight: 700,
                  fontSize: 13,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  textDecoration: "none",
                  cursor: "pointer",
                  transition: "all 0.2s",
                }}
                onMouseEnter={e => {
                  e.target.style.background = (P.accent2 || "#315C54") + "12";
                  e.target.style.borderColor = P.accent || "#6F8A7A";
                  e.target.style.color = P.accent || "#6F8A7A";
                }}
                onMouseLeave={e => {
                  e.target.style.background = P.bg || "#F7F6F3";
                  e.target.style.borderColor = P.accent2 || "#315C54";
                  e.target.style.color = P.accent2 || "#315C54";
                }}
              >
                {t("Unirse a Skool", "Join Skool")}
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* PODCAST + VIAJES TEASERS */}
      <section style={{ maxWidth: 1100, margin: "0 auto", padding: isMobile ? "48px 20px" : "80px 40px", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: 20 }}>
        {/* Podcast teaser */}
        <div onClick={() => setPage("podcasts")} style={{
          background: P.surface, padding: "48px 40px", cursor: "pointer",
          border: `1px solid ${P.accent}22`, transition: "border-color 0.2s",
          position: "relative", overflow: "hidden",
        }}
          onMouseEnter={e => e.currentTarget.style.borderColor = P.accent + "66"}
          onMouseLeave={e => e.currentTarget.style.borderColor = P.accent + "22"}
        >
          <div style={{ fontSize: 36, marginBottom: 16 }}>
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
              <circle cx="18" cy="18" r="17" stroke={P.accent} strokeWidth="1.5" />
              <circle cx="18" cy="18" r="6" fill={P.accent} />
              <path d="M18 4 A14 14 0 0 1 32 18" stroke={P.accent} strokeWidth="1.5" />
              <path d="M18 32 A14 14 0 0 1 4 18" stroke={P.accent} strokeWidth="1.5" />
            </svg>
          </div>
          <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.2em", fontSize: 10, color: P.accent, textTransform: "uppercase", marginBottom: 10 }}>
            {t("Escuchar", "Listen")}
          </p>
          <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.6rem", color: P.textBold, marginBottom: 12 }}>
            {t("Podcasts", "Podcasts")}
          </h3>
          <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 14, lineHeight: 1.7, color: P.muted }}>
            {t("Episodios en Spotify y YouTube. Historia narrada con pasión, para escuchar cuando quieras.", "Episodes on Spotify and YouTube. History told with passion, to listen whenever you want.")}
          </p>
          <div style={{ marginTop: 24, color: P.accent, fontFamily: "'Lato', sans-serif", fontSize: 13, letterSpacing: "0.1em" }}>
            {t("Explorar podcasts →", "Explore podcasts →")}
          </div>
        </div>

        {/* Viajes teaser */}
        <div onClick={() => setPage("viajes")} style={{
          background: P.surface, padding: "48px 40px", cursor: "pointer",
          border: `1px solid ${P.accent}22`, transition: "border-color 0.2s",
          position: "relative", overflow: "hidden",
        }}
          onMouseEnter={e => e.currentTarget.style.borderColor = P.accent + "66"}
          onMouseLeave={e => e.currentTarget.style.borderColor = P.accent + "22"}
        >
          <div style={{ fontSize: 36, marginBottom: 16 }}>
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
              <circle cx="18" cy="14" r="7" stroke={P.accent} strokeWidth="1.5" />
              <path d="M18 21 C18 21 8 28 8 33 L28 33 C28 28 18 21 18 21Z" stroke={P.accent} strokeWidth="1.5" fill="none" />
            </svg>
          </div>
          <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.2em", fontSize: 10, color: P.accent, textTransform: "uppercase", marginBottom: 10 }}>
            {t("Descubrir", "Discover")}
          </p>
          <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.6rem", color: P.textBold, marginBottom: 12 }}>
            {t("Viajes", "Trips")}
          </h3>
          <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 14, lineHeight: 1.7, color: P.muted }}>
            {t("Viaja en grupo o de forma privada con Pilar. Vive los destinos desde adentro, entendiendo su historia.", "Travel in a group or privately with Pilar. Experience destinations from the inside, understanding their history.")}
          </p>
          <div style={{ marginTop: 24, color: P.accent, fontFamily: "'Lato', sans-serif", fontSize: 13, letterSpacing: "0.1em" }}>
            {t("Ver viajes →", "View trips →")}
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ background: P.bg, borderTop: `1px solid ${P.accent}22`, padding: isMobile ? "40px 20px" : "48px 40px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "2fr 1fr 1fr", gap: isMobile ? 32 : 40 }}>
          <div>
            <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.4rem", color: P.accent, marginBottom: 12 }}>Historia con Pilar Ducci</h3>
            <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 13, color: P.muted, lineHeight: 1.7, maxWidth: 280 }}>
              {t("Cursos, podcasts y viajes que conectan personas con la historia.", "Courses, podcasts and trips that connect people with history.")}
            </p>
          </div>
          <div>
            <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.15em", fontSize: 10, color: P.accent, textTransform: "uppercase", marginBottom: 16 }}>{t("Páginas", "Pages")}</p>
            {[["inicio", t("Inicio","Home")], ["cursos", t("Cursos","Courses")], ["podcasts","Podcasts"], ["viajes", t("Viajes","Trips")]].map(([pg, label]) => (
              <div key={pg} onClick={() => setPage(pg)} style={{ fontFamily: "'Lato', sans-serif", fontSize: 13, color: P.muted, marginBottom: 8, cursor: "pointer" }}
                onMouseEnter={e => e.target.style.color = P.accent}
                onMouseLeave={e => e.target.style.color = P.muted}
              >{label}</div>
            ))}
          </div>
          <div>
            <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.15em", fontSize: 10, color: P.accent, textTransform: "uppercase", marginBottom: 16 }}>{t("Redes", "Social")}</p>
            {[
              { label: "Instagram", href: "https://www.instagram.com/pilar.ducci/" },
              { label: "YouTube", href: "https://www.youtube.com/@pilarducci6703" },
              { label: "Spotify", href: "https://open.spotify.com/episode/6V3WsWv503XlrAqGdMcwWZ" },
              { label: "LinkTree", href: "https://duccisconcuento.taplink.bio" },
            ].map(s => (
              <a key={s.label} href={s.href} target="_blank" rel="noreferrer" style={{ display: "block", fontFamily: "'Lato', sans-serif", fontSize: 13, color: P.muted, marginBottom: 8, textDecoration: "none" }}
                onMouseEnter={e => e.target.style.color = P.accent}
                onMouseLeave={e => e.target.style.color = P.muted}
              >{s.label}</a>
            ))}
          </div>
        </div>
        <div style={{ maxWidth: 1100, margin: "32px auto 0", paddingTop: 24, borderTop: `1px solid ${P.accent}18`, textAlign: "center" }}>
          <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 11, color: P.muted, opacity: 0.5 }}>© 2025 Historia con Pilar Ducci. {t("Todos los derechos reservados.", "All rights reserved.")}</p>
        </div>
      </footer>
    </div>
  );
};

const CourseCard = ({ course, P, t, goToCourse }) => {
  const isLive = course.badge === "live";
  const badgeColor = isLive ? "#555555" : P.accent;
  const liveBg = isLive ? "#E8E8E8" : P.accent + "22";
  return (
    <div style={{
      background: P.bg, border: `1px solid ${P.accent}22`,
      padding: 28, transition: "border-color 0.2s, transform 0.2s",
      cursor: "pointer",
    }}
      onMouseEnter={e => { e.currentTarget.style.borderColor = P.accent + "66"; e.currentTarget.style.transform = "translateY(-2px)" }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = P.accent + "22"; e.currentTarget.style.transform = "translateY(0)" }}
    >
      {course.image && (
        <div style={{ margin: "-28px -28px 20px -28px", height: 200, overflow: "hidden" }}>
          <img src={course.image} alt={course.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
        </div>
      )}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <span style={{
          background: liveBg, color: badgeColor,
          fontFamily: "'Lato', sans-serif", fontSize: 10, letterSpacing: "0.15em",
          textTransform: "uppercase", padding: "4px 10px",
          display: "flex", alignItems: "center", gap: 6,
        }}>
          {isLive && <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#e85d3a", display: "inline-block" }} />}
          {course.type}
        </span>
        <span style={{ fontFamily: "'Lato', sans-serif", fontSize: 11, color: P.muted }}>{course.sessions} {t("clases","lessons")}</span>
      </div>
      <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 10, letterSpacing: "0.15em", color: P.accent, textTransform: "uppercase", marginBottom: 8 }}>{course.category}</p>
      <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.15rem", color: P.textBold, lineHeight: 1.4, marginBottom: 12 }}>{course.title}</h3>
      <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 13, color: P.muted, lineHeight: 1.7, marginBottom: 20 }}>{course.desc}</p>
      {course.next && (
        <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 11, color: P.accent, marginBottom: 12, opacity: 0.8 }}>📅 {course.next}</p>
      )}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.3rem", color: P.accent, fontWeight: 700 }}>{course.price}</span>
        <button onClick={() => goToCourse && goToCourse(course.id)} style={{
          background: "transparent", color: P.accent, border: `1px solid ${P.accent}`,
          padding: "8px 18px", fontFamily: "'Lato', sans-serif", fontSize: 11,
          letterSpacing: "0.1em", textTransform: "uppercase", cursor: "pointer",
        }}>
          {t("Inscribirse", "Enroll")}
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { HomePage, CourseCard });