// ViajePage.jsx
const ViajePage = ({ palette, t, openContact: openContactProp }) => {
  const P = palette;
  const isMobile = useIsMobile();
  const [openFaq, setOpenFaq] = React.useState(null);

  const openContact = openContactProp || (() => {});

  const groupIncludes = [
    { icon: "🎓", title: t("Clases previas al viaje","Pre-trip classes"), desc: t("Sesiones online antes de partir para entender cada destino en profundidad.", "Online sessions before departure to deeply understand each destination.") },
    { icon: "🥂", title: t("Cocktail de despedida","Farewell cocktail"), desc: t("Entrega de bitácoras de viaje y revisión final de detalles antes de partir.", "Distribution of travel journals and final review of details before departure.") },
    { icon: "🧭", title: t("Coordinadora de viaje","Travel coordinator"), desc: t("Acompañamiento constante de historiadora y coordinadora durante todo el recorrido.", "Constant support from historian and coordinator throughout the entire trip.") },
    { icon: "📖", title: t("Contenidos culturales","Cultural content"), desc: t("Cápsulas históricas y contexto en cada visita para que cada lugar cobre sentido.", "Historical capsules and context at each visit so every place becomes meaningful.") },
    { icon: "🤝", title: t("Grupo cuidado","Curated group"), desc: t("Grupos pequeños de personas con intereses culturales similares.", "Small groups of people with similar cultural interests.") },
    { icon: "📒", title: t("Bitácora de viaje","Travel journal"), desc: t("Bitácora personalizada para registrar cada experiencia del recorrido.", "Personalized journal to record each experience of the journey.") },
  ];

  const privateIncludes = [
    { icon: "🎯", title: t("Reunión inicial personalizada","Personal initial meeting"), desc: t("Presencial en nuestras instalaciones o en tu casa para diseñar el programa.", "In person at our facilities or at your home to design the program.") },
    { icon: "📚", title: t("Clases exclusivas","Exclusive classes"), desc: t("Online o presenciales, diseñadas específicamente para los destinos de tu viaje.", "Online or in-person, specifically designed for your trip's destinations.") },
    { icon: "🏨", title: t("Organización completa","Full organization"), desc: t("Hoteles, visitas, traslados, guías especializados, entradas y más.", "Hotels, visits, transfers, specialist guides, tickets and more.") },
    { icon: "🥂", title: t("Cocktail de despedida","Farewell cocktail"), desc: t("Entrega de documentación detallada y celebración previa al viaje.", "Distribution of detailed documentation and pre-trip celebration.") },
    { icon: "📲", title: t("Cápsulas durante el viaje","In-trip capsules"), desc: t("Contenido informativo enviado durante el recorrido para enriquecer cada visita.", "Informative content sent during the journey to enrich each visit.") },
    { icon: "👨‍👩‍👧", title: t("Tu grupo, tu historia","Your group, your story"), desc: t("Familia, pareja o amigos — diseñado completamente a tu medida.", "Family, couple or friends — completely tailored to you.") },
  ];

  const faqs = [
    { q: t("¿Cuántas personas van en los viajes en grupo?","How many people go on group trips?"), a: t("Nuestros grupos son de entre 10 y 16 personas, cuidadosamente seleccionadas para garantizar una experiencia enriquecedora y cercana.","Our groups are between 10 and 16 people, carefully selected to ensure an enriching and close experience.") },
    { q: t("¿Qué incluye el precio del viaje?","What does the trip price include?"), a: t("El precio incluye clases previas, cocktail de despedida, bitácora de viaje, acompañamiento, contenidos culturales, alojamiento, comida, tours y traslados. Los vuelos y gastos personales se coordinan por separado.","The price includes pre-trip classes, farewell cocktail, travel journal, accompaniment, cultural content, lodging, meals, tours and transfers. Flights and personal expenses are handled separately.") },
    { q: t("¿Cómo me inscribo en un viaje?","How do I sign up for a trip?"), a: t("Puedes inscribirte completando el formulario o escribiendo directamente a pilarducci.historia@gmail.com. Te contactaremos para revisar disponibilidad y próximos pasos.","You can sign up by completing the form or writing directly to pilarducci.historia@gmail.com. We'll contact you to review availability and next steps.") },
    { q: t("¿Se puede viajar en privado a cualquier destino?","Can I travel privately to any destination?"), a: t("Sí, los viajes privados son completamente personalizables. Contáctanos con tu destino soñado y lo diseñamos juntos.","Yes, private trips are completely customizable. Contact us with your dream destination and we'll design it together.") },
  ];

  return (
    <div style={{ background: P.bg, color: P.text, minHeight: "100vh", paddingTop: 80 }}>

      {/* Header */}
      <div style={{ background: P.surface, padding: "64px 40px 48px", textAlign: "center" }}>
        <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.2em", fontSize: 11, color: P.accent, textTransform: "uppercase", marginBottom: 12 }}>
          {t("Viajar con historia", "Travel with history")}
        </p>
        <h1 style={{ fontFamily: "'Playfair Display', serif", fontSize: "clamp(2rem, 5vw, 3.5rem)", color: P.textBold, marginBottom: 20 }}>
          {t("Viajes con Pilar Ducci", "Trips with Pilar Ducci")}
        </h1>
        <p style={{ fontFamily: "'Playfair Display', serif", fontStyle: "italic", fontSize: "1.15rem", color: P.accent, maxWidth: 580, margin: "0 auto 8px", lineHeight: 1.6 }}>
          {t("\"Descubre una forma diferente de viajar…", "\"Discover a different way to travel…")}
        </p>
        <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, maxWidth: 580, margin: "0 auto" }}>
          {t("No solo visitar destinos, entenderlos y vivirlos.\"", "Not just visiting destinations, understanding and living them.\"")}
        </p>
      </div>

      <div style={{ padding: isMobile ? "32px 16px 0" : "48px 40px 0", maxWidth: 1200, margin: "0 auto" }}>
        <section style={{ marginBottom: 72 }}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", minHeight: 320, marginBottom: 48 }}>
            <div style={{ background: P.surface, padding: isMobile ? "32px 24px" : "48px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.18em", fontSize: 11, color: P.accent, textTransform: "uppercase", marginBottom: 12 }}>
                {t("Viajes Privados", "Private Trips")}
              </p>
              <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: "clamp(2rem, 4vw, 3rem)", color: P.textBold, marginBottom: 16 }}>
                {t("Vas a viajar pronto?", "Traveling soon?")}
              </h2>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 24 }}>
                {t("Diseñamos viajes privados con enfoque histórico para que cada destino cobre sentido antes, durante y después del recorrido.", "We design private trips with a historical focus so every destination becomes meaningful before, during and after the journey.")}
              </p>
              <button onClick={() => openContact(t("Viaje privado", "Private trip"))} style={{
                display: "inline-block", alignSelf: "flex-start",
                background: P.accent, color: P.bg, border: "none",
                padding: "13px 28px", fontFamily: "'Lato', sans-serif",
                fontWeight: 700, fontSize: 12, letterSpacing: "0.1em",
                textTransform: "uppercase", cursor: "pointer",
              }}>
                {t("Contactar", "Contact")}
              </button>
            </div>
            <img src="/assets/viaje-1.avif" alt="Viaje privado" style={{ width: "100%", height: "100%", minHeight: 320, objectFit: "cover" }} />
          </div>

          <div>
            <div style={{ marginBottom: 48 }}>
              <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: "2rem", color: P.textBold, marginBottom: 8 }}>
                {t("Tu viaje — tu historia", "Your trip — your story")}
              </h2>
              <div style={{ width: 40, height: 2, background: P.accent, marginBottom: 20 }} />
              <p style={{ fontFamily: "'Playfair Display', serif", fontStyle: "italic", fontSize: "1.2rem", color: P.accent, lineHeight: 1.6, marginBottom: 16 }}>
                {t("Vas a Egipto? Vas a Grecia? A la India?", "Going to Egypt? Greece? India?")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Para quienes prefieren viajar solo con su propio grupo (familia, pareja o amigos), ofrecemos un servicio de asesoría y organización de viajes con enfoque histórico, pensado para ir más allá del turismo tradicional.", "For those who prefer to travel only with their own group (family, partner or friends), we offer a travel advisory and organization service with a historical focus, designed to go beyond traditional tourism.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Diseñamos experiencias personalizadas donde cada destino cobra sentido a través de su historia y cultura.", "We design personalized experiences where each destination becomes meaningful through its history and culture.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Comenzamos con una reunión presencial (en nuestras instalaciones o en su casa) y, a partir de ahí, creamos un programa a su medida. Incluimos clases exclusivas (online o presenciales), una bitácora detallada de viaje y nos encargamos de todo lo necesario en destino: hoteles, visitas, traslados, guías especializados, entradas, etc.", "We begin with an in-person meeting (at our facilities or at your home) and, from there, create a program tailored to you. We include exclusive classes (online or in-person), a detailed travel journal and take care of everything needed at the destination: hotels, visits, transfers, specialist guides, tickets, etc.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Los despedimos con la entrega de documentación acompañada de un cocktail de despedida.", "We send you off with the delivery of documentation accompanied by a farewell cocktail.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9 }}>
                {t("Y durante el viaje recibirán cápsulas informativas para enriquecer cada visita. Viajar nunca vuelve a ser lo mismo cuando conocen la historia detrás de cada paso.", "And during the trip you will receive informative capsules to enrich each visit. Travel is never the same once you know the history behind each step.")}
              </p>
            </div>

            {/* Includes grid */}
            <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.4rem", color: P.textBold, marginBottom: 24 }}>
              {t("¿Qué incluye?", "What's included?")}
            </h3>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: 16, marginBottom: 56 }}>
              {privateIncludes.map((item, i) => (
                <div key={i} style={{ padding: "20px", border: `1px solid ${P.accent}18`, background: P.surface }}>
                  <div style={{ fontSize: 24, marginBottom: 10 }}>{item.icon}</div>
                  <p style={{ fontFamily: "'Lato', sans-serif", fontWeight: 700, fontSize: 13, color: P.textBold, marginBottom: 6 }}>{item.title}</p>
                  <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 12, color: P.muted, lineHeight: 1.6 }}>{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section style={{ marginBottom: 72 }}>
          <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", minHeight: 320, marginBottom: 48 }}>
            <img src="/assets/viaje-2.avif" alt="Viaje en grupo" style={{ width: "100%", height: "100%", minHeight: 320, objectFit: "cover" }} />
            <div style={{ background: P.accent, color: "#FFFFFF", padding: isMobile ? "32px 24px" : "48px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <p style={{ fontFamily: "'Lato', sans-serif", letterSpacing: "0.18em", fontSize: 11, color: "rgba(255,255,255,0.78)", textTransform: "uppercase", marginBottom: 12 }}>
                {t("Viajes en Grupo", "Group Trips")}
              </p>
              <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: "clamp(2rem, 4vw, 3rem)", color: "#FFFFFF", marginBottom: 16 }}>
                {t("Viajemos juntos", "Let's travel together")}
              </h2>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: "rgba(255,255,255,0.86)", lineHeight: 1.9, marginBottom: 24 }}>
                {t("Viajes culturales en grupos pequeños, con clases previas, acompañamiento y contenidos que conectan cada lugar con su historia.", "Cultural trips in small groups, with pre-trip classes, accompaniment and content that connects each place with its history.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 13, color: "rgba(255,255,255,0.72)", lineHeight: 1.7, marginBottom: 24, fontStyle: "italic" }}>
                {t("Viaje acompañado por Pilar Ducci y Francisca Bravo de Prime Travel.", "Trip accompanied by Pilar Ducci and Francisca Bravo from Prime Travel.")}
              </p>
              <button onClick={() => openContact(t("Viajes en grupo", "Group trips"))} style={{
                display: "inline-block", alignSelf: "flex-start",
                background: "#FFFFFF", color: P.accent, border: "none",
                padding: "13px 28px", fontFamily: "'Lato', sans-serif",
                fontWeight: 700, fontSize: 12, letterSpacing: "0.1em",
                textTransform: "uppercase", cursor: "pointer",
              }}>
                {t("Contacto", "Contact")}
              </button>
            </div>
          </div>

          <div>
            {/* Intro */}
            <div style={{ marginBottom: 48 }}>
              <h2 style={{ fontFamily: "'Playfair Display', serif", fontSize: "2rem", color: P.textBold, marginBottom: 16 }}>
                {t("Viajes en Grupo", "Group Trips")}
              </h2>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Vivan una experiencia única viajando en grupos cuidadosamente seleccionados, diseñados para personas con intereses culturales similares, creando un ambiente enriquecedor y cercano desde el primer momento.", "Experience something unique by traveling in carefully selected groups, designed for people with similar cultural interests, creating an enriching and close atmosphere from the very first moment.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Serán acompañados por la historiadora Pilar Ducci y la coordinadora de viaje Francisca Bravo de Prime Travel en cada paso del recorrido.", "You will be accompanied by historian Pilar Ducci and travel coordinator Francisca Bravo from Prime Travel at every step of the journey.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Antes de partir, participarán en clases previas que les permitirán comprender en profundidad los destinos que visitaremos, para que cada lugar cobre sentido y cada experiencia sea más significativa.", "Before departure, you will participate in pre-trip classes that will allow you to deeply understand the destinations we will visit, so every place becomes meaningful and each experience more significant.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9, marginBottom: 12 }}>
                {t("Antes de partir, tendremos un cocktail de despedida para entregarles sus bitácoras de viaje y revisar los últimos detalles antes de comenzar la aventura.", "Before departure, we will have a farewell cocktail to give you your travel journals and review the final details before beginning the adventure.")}
              </p>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 15, color: P.muted, lineHeight: 1.9 }}>
                {t("Durante el viaje contarán con acompañamiento constante, contenidos culturales y una organización pensada para que solo se dediquen a disfrutar, aprender y compartir. Más que un viaje, es una experiencia colectiva donde la historia, el conocimiento y la conexión con otros viajeros hacen toda la diferencia.", "During the trip you will have constant support, cultural content and organization designed so you can focus only on enjoying, learning and sharing. More than a trip, it is a collective experience where history, knowledge and connection with other travelers make all the difference.")}
              </p>
            </div>

            {/* What's included */}
            <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.4rem", color: P.textBold, marginBottom: 24 }}>
              {t("¿Qué incluye?", "What's included?")}
            </h3>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: 16, marginBottom: 56 }}>
              {groupIncludes.map((item, i) => (
                <div key={i} style={{ padding: "20px 20px", border: `1px solid ${P.accent}18`, background: P.surface }}>
                  <div style={{ fontSize: 24, marginBottom: 10 }}>{item.icon}</div>
                  <p style={{ fontFamily: "'Lato', sans-serif", fontWeight: 700, fontSize: 13, color: P.textBold, marginBottom: 6 }}>{item.title}</p>
                  <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 12, color: P.muted, lineHeight: 1.6 }}>{item.desc}</p>
                </div>
              ))}
            </div>

            <div style={{ background: P.surface, border: `1px solid ${P.accent}22`, padding: isMobile ? "28px 20px" : "36px 40px", textAlign: "center", marginBottom: 56 }}>
              <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.4rem", color: P.textBold, marginBottom: 12 }}>
                {t("Proximos destinos", "Upcoming destinations")}
              </h3>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 14, color: P.muted, lineHeight: 1.8, maxWidth: 520, margin: "0 auto 24px" }}>
                {t("Revisa el PDF con los destinos disponibles 2026 y escríbenos si quieres recibir más información.", "Review the PDF with available destinations 2026 and write to us if you would like more information.")}
              </p>
              <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
                <a href="/TRAS LA MEMORIA DE TROYA VERTICAL.pdf" download style={{
                  background: P.accent, color: P.bg, border: "none",
                  padding: "12px 24px", fontFamily: "'Lato', sans-serif",
                  fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase",
                  cursor: "pointer", fontWeight: 700, textDecoration: "none",
                }}>
                  {t("Descargar PDF", "Download PDF")}
                </a>
                <button onClick={() => openContact(t("Viajes en grupo", "Group trips"))} style={{
                  background: "transparent", color: P.accent, border: `1px solid ${P.accent}`,
                  padding: "12px 24px", fontFamily: "'Lato', sans-serif",
                  fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase",
                  cursor: "pointer", fontWeight: 700,
                }}>
                  {t("Contacto", "Contact")}
                </button>
              </div>
            </div>

            {/* CTA */}
            <div style={{ background: P.surface, border: `1px solid ${P.accent}22`, padding: "40px", textAlign: "center", marginBottom: 56 }}>
              <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.6rem", color: P.textBold, marginBottom: 12 }}>
                {t("¿Tienes un destino en mente?", "Do you have a destination in mind?")}
              </h3>
              <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 14, color: P.muted, marginBottom: 24 }}>
                {t("Cuéntanos tu idea y diseñamos juntos la experiencia perfecta.", "Tell us your idea and we'll design the perfect experience together.")}
              </p>
              <button onClick={() => openContact(t("Viaje privado", "Private trip"))} style={{
                display: "inline-block",
                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",
              }}>
                {t("Contactar a Pilar", "Contact Pilar")}
              </button>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <div style={{ marginBottom: 80 }}>
          <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: "1.4rem", color: P.textBold, marginBottom: 24 }}>
            {t("Preguntas frecuentes", "Frequently asked questions")}
          </h3>
          {faqs.map((faq, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${P.accent}18` }}>
              <button onClick={() => setOpenFaq(openFaq === i ? null : i)} style={{
                width: "100%", textAlign: "left", background: "transparent",
                border: "none", padding: "18px 0", cursor: "pointer",
                display: "flex", justifyContent: "space-between", alignItems: "center",
                gap: 16,
              }}>
                <span style={{ fontFamily: "'Lato', sans-serif", fontSize: 14, color: P.textBold, fontWeight: 600 }}>{faq.q}</span>
                <span style={{ color: P.accent, fontSize: 18, flexShrink: 0, transition: "transform 0.2s", transform: openFaq === i ? "rotate(45deg)" : "none" }}>+</span>
              </button>
              {openFaq === i && (
                <p style={{ fontFamily: "'Lato', sans-serif", fontSize: 13, color: P.muted, lineHeight: 1.8, paddingBottom: 18 }}>
                  {faq.a}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ViajePage });