// TESTIMONIALS + FOUNDER + CTA + FOOTER

function Testimonials() {
  const t = useT();
  const quotes = [
    { quote: t("t1Quote"), name: t("t1Name"), role: t("t1Role"), tint: "#7EB8F7", avatar: "linear-gradient(135deg,#7EB8F7,#C5B4F0)" },
    { quote: t("t2Quote"), name: t("t2Name"), role: t("t2Role"), tint: "#C5B4F0", avatar: "linear-gradient(135deg,#C5B4F0,#E8C5D8)" },
    { quote: t("t3Quote"), name: t("t3Name"), role: t("t3Role"), tint: "#E8C5D8", avatar: "linear-gradient(135deg,#E8C5D8,#F5D78E)" },
  ];
  return (
    <section className="section-padding" style={{padding:"120px 0 100px", position:"relative"}}>
      <div className="container">
        <div style={{textAlign:"center", marginBottom:64}}>
          <h2 className="section-title">
            {t("testTitleA")}<br/>
            <em>{t("testTitleB")}</em>
          </h2>
        </div>

        <div className="testimonial-grid">
          {quotes.map((q,i)=>(
            <div key={i} style={{position:"relative"}}>
              <div className="irid-border" style={{height:"100%"}}>
                <div style={{
                  background:"var(--surface-strong)",
                  backdropFilter:"blur(20px)",
                  borderRadius:25,
                  padding:32,
                  height:"100%",
                  display:"flex", flexDirection:"column",
                  position:"relative", overflow:"hidden",
                }}>
                  {/* Quote mark */}
                  <div className="testimonial-quote-mark" style={{
                    fontFamily:"var(--font-heading)",
                    fontSize:80, lineHeight:0.7,
                    color:q.tint, opacity:0.30,
                    marginBottom:-10,
                  }}>"</div>

                  <div style={{
                    fontFamily:"var(--font-heading)",
                    fontSize:18, lineHeight:1.5,
                    fontStyle:"italic", color:"var(--ink)",
                    fontWeight:400,
                    flex:1,
                    marginBottom:28,
                  }}>
                    {q.quote}
                  </div>

                  {/* Rating */}
                  <div style={{display:"flex",gap:2,marginBottom:14}}>
                    {[0,1,2,3,4].map(i=>(
                      <svg key={i} width="13" height="13" viewBox="0 0 24 24" fill="#F5D78E">
                        <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9"/>
                      </svg>
                    ))}
                  </div>

                  <div style={{display:"flex",alignItems:"center",gap:12,paddingTop:18,borderTop:"1px solid var(--surface-border)"}}>
                    <div style={{
                      width:44, height:44, borderRadius:22,
                      background:q.avatar,
                      border:"2px solid rgba(255,255,255,0.6)",
                      boxShadow:"0 4px 12px rgba(126,184,247,0.20)",
                    }}/>
                    <div>
                      <div style={{fontFamily:"var(--font-body)",fontSize:14,fontWeight:600,color:"var(--ink)"}}>{q.name}</div>
                      <div style={{fontFamily:"var(--font-body)",fontSize:11,color:"var(--ink-2)"}}>
                        {q.role}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

// ─── FOUNDER STORY ───────────────────────────────────────────────
function FounderStory() {
  const t = useT();
  return (
    <section className="section-padding" style={{padding:"100px 0 120px", position:"relative"}}>
      <div className="container">
        <div className="founder-grid">
          {/* Founder portrait */}
          <div style={{position:"relative"}}>
            {/* Iridescent halo */}
            <div style={{
              position:"absolute", top:30, left:-30,
              width:460, height:460, borderRadius:"50%",
              background:"radial-gradient(circle, var(--halo-2), transparent 65%)",
              filter:"blur(30px)",
              zIndex:0,
            }}/>

            {/* Portrait */}
            <div className="founder-portrait" style={{
              position:"relative", zIndex:1,
              width:460, height:560,
              borderRadius:32,
              background:"linear-gradient(160deg, #C5B4F0 0%, #E8C5D8 35%, #F5D78E 70%, #A8D8EA 100%)",
              boxShadow:"0 28px 70px rgba(155,142,212,0.40)",
              overflow:"hidden",
              padding:2,
            }}>
              <div style={{
                width:"100%", height:"100%",
                borderRadius:30,
                position:"relative", overflow:"hidden",
                display:"flex", flexDirection:"column",
                justifyContent:"flex-end",
                padding:24,
              }}>
                {/* Jahz portrait — real photo */}
                <img src="design/assets/jahz-portrait.png" alt="Jahz"
                  style={{
                    position:"absolute", inset:0,
                    width:"100%", height:"100%",
                    objectFit:"cover",
                    objectPosition:"center 30%",
                  }}/>
                {/* Warm overlay — softens for caption + matches palette */}
                <div style={{
                  position:"absolute", inset:0,
                  background:"linear-gradient(180deg, rgba(232,197,216,0.18) 0%, transparent 35%, transparent 55%, rgba(44,30,80,0.55) 100%)",
                  pointerEvents:"none",
                }}/>
                {/* Subtle iridescent rim */}
                <div style={{
                  position:"absolute", inset:0,
                  background:"radial-gradient(circle at 80% 10%, rgba(255,215,235,0.35), transparent 45%)",
                  pointerEvents:"none",
                  mixBlendMode:"screen",
                }}/>

                {/* Sparkles drift */}
                <FloatingStars/>

              </div>
            </div>
          </div>

          {/* Story */}
          <div>
            <h2 className="section-title" style={{fontSize:"clamp(34px, 4vw, 52px)"}}>
              {t("founderTitleA")}<br/>
              <em>{t("founderTitleB")}</em>
            </h2>

            <div style={{
              fontFamily:"var(--font-body)", fontSize:16, lineHeight:1.7,
              color:"var(--ink-2)", marginTop:28,
              display:"flex", flexDirection:"column", gap:18,
            }}>
              <p style={{margin:0}}>{t("founderP1")}</p>
              <p style={{margin:0}}>{t("founderP2")}</p>
              <p style={{margin:0, fontFamily:"var(--font-heading)", fontStyle:"italic", fontSize:19, color:"var(--ink)", lineHeight:1.5}}>
                "{t("founderP3Quote")}"
              </p>
            </div>

            <div style={{
              marginTop:32, display:"flex", alignItems:"center", gap:14,
              padding:"18px 22px",
              background:"var(--surface)",
              border:"1px solid var(--surface-border)",
              borderRadius:18,
              backdropFilter:"blur(20px)",
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"/>
              </svg>
              <div style={{fontFamily:"var(--font-heading)",fontSize:15,fontStyle:"italic",color:"var(--ink)",lineHeight:1.5}}>
                {t("founderSignoff")}<br/>
                <strong style={{fontStyle:"normal",fontSize:18}}>{t("founderName")}</strong>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA ─────────────────────────────────────────────────
function FinalCTA() {
  const t = useT();
  return (
    <section className="section-padding" style={{position:"relative", padding:"120px 0", overflow:"hidden"}}>
      {/* Background iridescent gradient */}
      <div style={{
        position:"absolute", inset:0,
        background:"var(--cta-bg)",
        zIndex:0,
      }}/>

      <FloatingStars/>

      {/* CTA card */}
      <div className="container" style={{position:"relative", zIndex:2}}>
        <div className="cta-card final-cta-card" style={{
          backdropFilter:"blur(30px)",
          border:"1px solid var(--surface-border)",
          borderRadius:36, padding:"72px 60px",
          maxWidth:880, margin:"0 auto",
          textAlign:"center",
          position:"relative",
          overflow:"hidden",
          boxShadow:"0 40px 100px -30px rgba(155,142,212,0.40)",
        }}>
          {/* Big sparkle decoration */}
          <CTASparkles/>

          <h2 className="cta-title cta-title-gradient" style={{
            fontFamily:"var(--font-heading)",
            fontSize:"clamp(38px, 5.4vw, 64px)",
            fontWeight:700,
            lineHeight:1.05,
            letterSpacing:"-0.8px",
            margin:0,
            position:"relative", zIndex:2,
          }}>
            {t("ctaTitleA")}<br/>
            {t("ctaTitleB") && <em style={{color:"var(--accent)", fontWeight:500}}>{t("ctaTitleB")}</em>}
          </h2>
          <p style={{
            fontFamily:"var(--font-body)", fontSize:17, lineHeight:1.6,
            color:"var(--ink-2)", margin:"24px auto 36px",
            maxWidth:520, position:"relative", zIndex:2,
          }}>
            {t("ctaBody")}
          </p>

          {/* Store badges */}
          <div style={{display:"flex", gap:14, justifyContent:"center", flexWrap:"wrap", position:"relative", zIndex:2}}>
            <AppStoreBadge/>
            <GooglePlayBadge/>
          </div>

          <div style={{
            marginTop:24, position:"relative", zIndex:2,
            fontFamily:"var(--font-body)", fontSize:12, color:"var(--ink-2)",
          }}>
            {t("ctaFootnote")}
          </div>
        </div>
      </div>
    </section>
  );
}

function CTASparkles() {
  const sparkles = React.useMemo(() => Array.from({length:14}, (_,i)=>({
    id:i,
    left:Math.random()*100, top:Math.random()*100,
    size:Math.random()*22+10,
    delay:Math.random()*3, dur:2+Math.random()*2,
    color: ["#C5B4F0","#7EB8F7","#F5D78E","#E8C5D8"][i%4],
  })), []);
  return (
    <>
      {sparkles.map(s => (
        <svg key={s.id} width={s.size} height={s.size} viewBox="0 0 24 24" fill={s.color}
          style={{
            position:"absolute",
            left:`${s.left}%`, top:`${s.top}%`,
            opacity:0.55,
            animation:`twinkle ${s.dur}s ease-in-out ${s.delay}s infinite`,
            filter:`drop-shadow(0 0 8px ${s.color})`,
            zIndex:1,
          }}>
          <path d="M12 2l1.5 8L22 12l-8.5 1.5L12 22l-1.5-8.5L2 12l8.5-1.5z"/>
        </svg>
      ))}
    </>
  );
}

function AppStoreBadge() {
  const t = useT();
  return (
    <a href="#" style={{
      display:"inline-flex", alignItems:"center", gap:12,
      background:"#0A0612",
      color:"#fff",
      padding:"12px 24px",
      borderRadius:14,
      textDecoration:"none",
      transition:"transform 150ms",
      boxShadow:"0 10px 24px rgba(10,6,18,0.25)",
    }} onMouseDown={e=>e.currentTarget.style.transform="scale(0.97)"} onMouseUp={e=>e.currentTarget.style.transform="scale(1)"}>
      <svg width="28" height="32" viewBox="0 0 24 24" fill="#fff">
        <path d="M17.5 12.5c0-2.5 2-3.7 2.1-3.8-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.9-1.6.1-3.2 1-4 2.5-1.7 3-.4 7.4 1.3 9.8.8 1.2 1.8 2.5 3.1 2.4 1.2-.1 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3-.0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.5-1-2.6-3.8zm-2.5-7c.6-.8 1.1-1.9 1-3-.9 0-2 .6-2.7 1.4-.6.7-1.2 1.8-1 2.9 1 .1 2 -.5 2.7-1.3z"/>
      </svg>
      <div style={{display:"flex",flexDirection:"column",alignItems:"flex-start"}}>
        <div style={{fontFamily:"var(--font-body)",fontSize:10,opacity:0.85,letterSpacing:0.3}}>{t("badgeDownloadOn")}</div>
        <div style={{fontFamily:"var(--font-body)",fontSize:18,fontWeight:600,letterSpacing:-0.5,lineHeight:1.1}}>{t("badgeAppStore")}</div>
      </div>
    </a>
  );
}

function GooglePlayBadge() {
  const t = useT();
  return (
    <a href="#" style={{
      display:"inline-flex", alignItems:"center", gap:12,
      background:"#0A0612",
      color:"#fff",
      padding:"12px 24px",
      borderRadius:14,
      textDecoration:"none",
      transition:"transform 150ms",
      boxShadow:"0 10px 24px rgba(10,6,18,0.25)",
    }} onMouseDown={e=>e.currentTarget.style.transform="scale(0.97)"} onMouseUp={e=>e.currentTarget.style.transform="scale(1)"}>
      <svg width="28" height="32" viewBox="0 0 24 24">
        <defs>
          <linearGradient id="gp-grad-1" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#00D4FF"/><stop offset="1" stopColor="#0066FF"/>
          </linearGradient>
          <linearGradient id="gp-grad-2" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#FFE000"/><stop offset="1" stopColor="#FF9900"/>
          </linearGradient>
          <linearGradient id="gp-grad-3" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#FF3A44"/><stop offset="1" stopColor="#C31162"/>
          </linearGradient>
          <linearGradient id="gp-grad-4" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#00F076"/><stop offset="1" stopColor="#00C853"/>
          </linearGradient>
        </defs>
        <path d="M3.6 1.7c-.4.4-.6 1-.6 1.8v17c0 .8.2 1.4.6 1.8l11-11-11-9.6z" fill="url(#gp-grad-1)"/>
        <path d="M18.4 8.6L14.6 12l3.8 3.4 2.6-1.5c1.5-.8 1.5-2.2 0-3.0l-2.6-1.5z" fill="url(#gp-grad-2)"/>
        <path d="M3.6 22.3c.6.6 1.6.7 2.7.1l11.4-6.5L14.6 12 3.6 22.3z" fill="url(#gp-grad-3)"/>
        <path d="M3.6 1.7L14.6 12l3.1-3.8L6.3 1.6c-1.1-.6-2.1-.5-2.7.1z" fill="url(#gp-grad-4)"/>
      </svg>
      <div style={{display:"flex",flexDirection:"column",alignItems:"flex-start"}}>
        <div style={{fontFamily:"var(--font-body)",fontSize:10,opacity:0.85,letterSpacing:0.3}}>{t("badgeGetItOn")}</div>
        <div style={{fontFamily:"var(--font-body)",fontSize:18,fontWeight:600,letterSpacing:-0.5,lineHeight:1.1}}>{t("badgeGooglePlay")}</div>
      </div>
    </a>
  );
}

// ─── FOOTER ───────────────────────────────────────────────────
function footerPageFor(label) {
  const key = label.toLowerCase();
  const content = {
    "what is manifestation": ["What is manifestation?", "Manifestation is the practice of aligning thought, emotion, and daily action with the life you are choosing to build.", [["Lumgoals view", "Clarity first, repetition second, tiny aligned action always."], ["In the app", "Set intentions, track progress, build boards, and reflect through guided journaling."]]],
    "the lumgoals practice": ["The Lumgoals practice", "A gentle rhythm for becoming your future self one day at a time.", [["Morning", "Choose an affirmation and one aligned action."], ["Evening", "Reflect, release, and record what shifted."]]],
    "pricing": ["Pricing", "Start with 7 days of full Premium access, then continue for $4.99/month or $49.99/year.", [["Premium", "Unlimited boards, unlimited manifestations, deeper tracking, and future premium tools."]]],
    "gift a year": ["Gift a year", "A thoughtful way to support someone dreaming, healing, or beginning again.", [["Coming soon", "Annual gift passes will include Lumgoals Premium and a guided welcome ritual."]]],
    "updates": ["Updates", "Follow product changes as Lumgoals grows.", [["Latest", "New Premium pricing, refreshed website visuals, and official app screen previews."], ["Next", "More prompts, richer vision boards, and deeper progress insights."]]],
    "practice library": ["Practice library", "Affirmations and journaling prompts in one calm space.", [["Affirmations", "I am worthy of what I desire. My energy creates clarity. My small actions are manifesting my future."], ["Journaling prompts", "What am I calling in today? What version of me already lives that reality? What small action can I take tonight?"]]],
    "press kit": ["Press kit", "A quick reference for Lumgoals story, visuals, and product positioning.", [["Boilerplate", "Lumgoals is a manifestation and journaling app for vision boards, affirmations, emotional check-ins, and intentional goal tracking."], ["Assets", "Logo, app screenshots, founder bio, and brand notes can be prepared for launch outreach."]]],
    "help center": ["Help center", "Simple answers for getting started.", [["First steps", "Create one manifestation, add a vision board, and use the journal morning and night."], ["Premium", "Premium unlocks unlimited access after the 7-day trial."]]],
    "contact": ["Contact", "For support, partnerships, press, or launch questions.", [["Email", "hello@lumgoals.com"], ["Best for", "Support requests, collaboration ideas, press notes, and account questions."]]],
    "privacy": ["Privacy", "Your privacy matters. Lumgoals is designed to help you grow, reflect, and manifest in a safe personal space. This Privacy Policy explains what information we collect, how we use it, and how we protect your data while you use the app.", [["What we collect", "We may collect account information such as your email or username; manifestations, journal entries, vision boards, and goals you create; usage data that helps improve app performance and features; and payment information for premium subscriptions, handled securely through third-party providers."], ["How your data is used", "Your information helps us personalize your experience, sync your content across devices, improve Lumgoals features and stability, provide customer support, and process subscriptions and payments."], ["Your content stays yours", "Your manifestations, journals, and boards belong to you. Lumgoals does not sell your personal content."], ["Security", "We use secure technologies and industry-standard protections to help keep your information safe."], ["Third-party services", "Some features may rely on trusted third-party providers for analytics, payments, or cloud storage."], ["Your choices", "You can request access, correction, or deletion of your data at any time."]]],
    "terms": ["Terms", "Welcome to Lumgoals. By using the app, you agree to the following Terms of Service.", [["Using Lumgoals", "Lumgoals is intended for personal growth, organization, journaling, and manifestation support. You agree to use the platform respectfully and legally."], ["Accounts", "You are responsible for maintaining the security of your account and login information."], ["Subscriptions", "Some features require a premium subscription. Billing is handled through secure third-party payment providers. Subscription fees are non-refundable unless required by law."], ["Content ownership", "You retain ownership of the content you create inside Lumgoals."], ["Prohibited use", "You may not abuse or disrupt the platform, attempt unauthorized access, upload harmful or illegal content, or copy or redistribute Lumgoals assets without permission."], ["Availability", "We may update, modify, or discontinue features at any time to improve the experience."], ["Limitation of liability", "Lumgoals is provided \"as is.\" We cannot guarantee specific personal, emotional, or financial outcomes from using the platform."]]],
    "cookies": ["Cookies", "How Lumgoals uses cookies and similar technologies. Cookies help Lumgoals provide a smoother and more personalized experience.", [["What cookies do", "We use cookies to keep you logged in, remember preferences and settings, understand app performance and usage, and improve speed and functionality."], ["Analytics", "We may use analytics tools to understand how users interact with the platform so we can improve the experience."], ["Managing cookies", "You can control or disable cookies through your browser or device settings. Some features may not function properly if cookies are disabled."], ["Third-party cookies", "Certain trusted services used by Lumgoals may also place cookies for analytics or payment processing."]]],
    "accessibility": ["Accessibility", "Lumgoals is built to be inclusive and accessible. We are committed to creating an experience that is usable and welcoming for everyone.", [["Our commitment", "We aim to use readable typography and accessible color contrast, support keyboard and screen reader navigation, maintain clear layouts and interactions, and continuously improve accessibility across the platform."], ["Feedback", "If you experience accessibility barriers while using Lumgoals, we would love to hear from you so we can improve."]]],
    "your data": ["Your data", "You control your personal data. Lumgoals gives you tools and transparency regarding the information connected to your account.", [["You can request", "Access to your stored data, corrections to inaccurate information, deletion of your account and associated content, and export of your data where applicable."], ["Data retention", "We only keep data for as long as necessary to provide the service and meet legal obligations."], ["Account deletion", "If you choose to delete your account, your personal content and associated data will be permanently removed within a reasonable period unless legally required otherwise."]]],
    "qué es manifestar": ["Qué es manifestar", "Manifestar es alinear pensamiento, emoción y acción diaria con la vida que estás construyendo.", [["Mirada Lumgoals", "Claridad, repetición y pequeños pasos alineados."], ["En la app", "Creas intenciones, vision boards, afirmaciones y reflexiones guiadas."]]],
    "la práctica lumgoals": ["La práctica Lumgoals", "Un ritmo diario suave para acercarte a tu versión futura.", [["Mañana", "Elige una afirmación y una acción alineada."], ["Noche", "Reflexiona, suelta y registra lo que cambió."]]],
    "precios": ["Precios", "Empieza con 7 días de acceso Premium completo, luego continúa por $4.99/mes o $49.99/año.", [["Premium", "Tableros ilimitados, manifestaciones ilimitadas, seguimiento profundo y futuras funciones premium."]]],
    "regala un año": ["Regala un año", "Una forma bonita de apoyar a alguien que está soñando, sanando o empezando de nuevo.", [["Próximamente", "Los regalos anuales incluirán Lumgoals Premium y una bienvenida guiada."]]],
    "novedades": ["Novedades", "Sigue los cambios de Lumgoals mientras crece.", [["Reciente", "Nuevo precio Premium, visuales renovados y pantallas oficiales de la app."], ["Próximo", "Más prompts, vision boards más completos y seguimiento profundo."]]],
    "biblioteca de práctica": ["Biblioteca de práctica", "Afirmaciones y prompts de diario en un solo espacio.", [["Afirmaciones", "Soy digna de recibir lo que deseo. Mi energía crea claridad. Mis pequeñas acciones manifiestan mi futuro."], ["Prompts de diario", "¿Qué deseo llamar hoy? ¿Qué versión de mí ya vive esa realidad? ¿Qué acción pequeña puedo tomar esta noche?"]]],
    "kit de prensa": ["Kit de prensa", "Referencia rápida para la historia, visuales y posicionamiento de Lumgoals.", [["Resumen", "Lumgoals es una app de manifestación y journaling con vision boards, afirmaciones, check-ins emocionales y seguimiento de metas."], ["Assets", "Logo, capturas, bio de fundadora y notas de marca."]]],
    "centro de ayuda": ["Centro de ayuda", "Respuestas simples para empezar.", [["Primeros pasos", "Crea una manifestación, añade un vision board y usa el journal mañana y noche."], ["Premium", "Premium desbloquea acceso ilimitado después de la prueba de 7 días."]]],
    "contacto": ["Contacto", "Para soporte, alianzas, prensa o preguntas de lanzamiento.", [["Email", "hello@lumgoals.com"], ["Ideal para", "Soporte, colaboraciones, prensa y preguntas de cuenta."]]],
    "privacidad": ["Privacidad", "Lumgoals debe sentirse íntimo, así que la privacidad importa.", [["Principio", "Recoger solo lo necesario para operar la app y mejorar la experiencia."], ["Contenido personal", "Tu journal, vision boards y manifestaciones deben mantenerse protegidos."]]],
    "términos": ["Términos", "Términos claros para usar Lumgoals.", [["Uso", "Lumgoals acompaña bienestar y metas personales; no reemplaza consejo médico, legal o financiero."], ["Suscripciones", "La prueba, precios y cancelación deben mostrarse con claridad."]]],
    "accesibilidad": ["Accesibilidad", "Lumgoals debe ser calmada, legible y usable para la mayor cantidad de personas posible.", [["Objetivos", "Buen contraste, tipografía legible, etiquetas claras y navegación accesible."]]],
    "tus datos": ["Tus datos", "Una explicación simple sobre el contenido personal.", [["Propiedad", "Tus manifestaciones, journals y vision boards son tuyos."], ["Control", "Las herramientas futuras deben facilitar exportar o borrar datos."]]],
  };
  const page = content[key] || [label, "Content is being prepared for this section.", []];
  return { title: page[0], intro: page[1], sections: page[2] };
}

function FooterModal({ page, onClose }) {
  if (!page) return null;
  return (
    <div className="footer-modal-backdrop" role="dialog" aria-modal="true">
      <div className="footer-modal">
        <button className="footer-modal-close" onClick={onClose} aria-label="Close">×</button>
        <div className="footer-modal-eyebrow">Lumgoals</div>
        <h3>{page.title}</h3>
        <p>{page.intro}</p>
        <div className="footer-modal-sections">
          {page.sections.map((section, i) => (
            <div key={i}>
              <strong>{section[0]}</strong>
              <span>{section[1]}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function PageFooter() {
  const t = useT();
  const [activePage, setActivePage] = React.useState(null);
  const cols = [
    { title: t("footColA"), links: [...t("footAlinks"), t("footContactLink")] },
    { title: t("footColB"), links: t("footBlinks") },
    { title: t("footColD"), links: t("footDlinks") },
  ];
  return (
    <footer style={{
      padding:"80px 0 40px",
      borderTop:"1px solid var(--surface-border)",
      background:"linear-gradient(180deg, transparent, var(--surface))",
    }}>
      <div className="container">
        <div className="footer-grid">
          {/* Brand col */}
          <div>
            <div style={{marginBottom:18}}>
              <div className="logo-img-light">
                <img src="design/assets/lumgoals-icon-dark.png" alt="" style={{height:44, width:"auto"}}/>
                <img src="design/assets/lumgoals-wordmark.png" alt="Lumgoals" style={{height:26, width:"auto"}}/>
              </div>
              <div className="logo-img-dark">
                <img src="design/assets/lumgoals-icon-dark.png" alt="" style={{height:44, width:"auto"}}/>
                <img className="logo-wordmark-img" src="design/assets/lumgoals-wordmark.png" alt="Lumgoals" style={{height:26, width:"auto"}}/>
              </div>
            </div>
            <div style={{fontFamily:"var(--font-body)",fontSize:14,color:"var(--ink-2)",lineHeight:1.6,maxWidth:280}}>
              {t("footTagline")}
            </div>
          </div>
          {cols.map((c,i)=>(
            <div key={i}>
              <div style={{fontFamily:"var(--font-body)",fontSize:11,fontWeight:700,letterSpacing:1.6,textTransform:"uppercase",color:"var(--ink)",marginBottom:18}}>
                {c.title}
              </div>
              <div style={{display:"flex",flexDirection:"column",gap:10}}>
                {(c.links || []).map((l,j)=>(
                  <FooterLink key={j} label={l} onOpen={() => setActivePage(footerPageFor(l))}/>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop:30,
          borderTop:"1px solid var(--surface-border)",
          display:"flex", justifyContent:"space-between", alignItems:"center",
          flexWrap:"wrap", gap:16,
        }}>
          <div style={{fontFamily:"var(--font-body)",fontSize:13,color:"var(--ink-3)"}}>
            {t("footCopy")}
          </div>
          <div style={{fontFamily:"var(--font-heading)",fontSize:14,fontStyle:"italic",color:"var(--accent)"}}>
            {t("footQuote")}
          </div>
        </div>
      </div>
      <FooterModal page={activePage} onClose={() => setActivePage(null)} />
    </footer>
  );
}

function FooterLink({ label, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button type="button"
       onClick={onOpen}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       style={{
         fontFamily:"var(--font-body)", fontSize:14,
         color: hover ? "var(--ink)" : "var(--ink-2)",
         textDecoration:"none",
         background:"transparent",
         border:0,
         padding:0,
         textAlign:"left",
         cursor:"pointer",
         transition:"color 150ms",
       }}>{label}</button>
  );
}

Object.assign(window, { Testimonials, FounderStory, FinalCTA, PageFooter });