// 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.55,
                    fontStyle:"italic", color:"var(--ink)",
                    fontWeight:400,
                    flex:1,
                    marginBottom:28,
                    textWrap:"pretty",
                  }}>
                    {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.75,
              color:"var(--ink-2)", marginTop:28,
              display:"flex", flexDirection:"column", gap:20,
              maxWidth:540,
            }}>
              <p style={{margin:0, textWrap:"pretty"}}>{t("founderP1")}</p>
              <p style={{margin:0, textWrap:"pretty"}}>{t("founderP2")}</p>
              <p style={{margin:0, fontFamily:"var(--font-heading)", fontStyle:"italic", fontSize:19, color:"var(--ink)", lineHeight:1.5, textWrap:"balance", maxWidth:500}}>
                "{t("founderP3Quote")}"
              </p>
            </div>

            <div style={{
              marginTop:48, display:"inline-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 ─────────────────────────────────────────────────
// ─── PRICING CARDS (shared: Lumgoals · Pricing tab + final CTA) ───
const PRICING_COPY = {
  en: {
    perMonth: "/month",
    perYear: "/year",
    monthlyName: "Monthly",
    monthlySub: "Full Premium, billed monthly. Cancel anytime.",
    annualName: "Annual",
    annualSub: "Full Premium, billed yearly.",
    annualEquiv: "Just $4.17/mo · 2 months free",
    badge: "Best value",
    cta: "Start free trial",
    features: [
      "Unlimited manifestations",
      "Unlimited vision boards",
      "Morning & evening journaling",
      "A new daily affirmation",
      "Deeper progress & vibration tracking",
    ],
    note: "Choose your platform on the next step — iOS, Android, or the web app.",
  },
  es: {
    perMonth: "/mes",
    perYear: "/año",
    monthlyName: "Mensual",
    monthlySub: "Premium completo, facturado cada mes. Cancela cuando quieras.",
    annualName: "Anual",
    annualSub: "Premium completo, facturado cada año.",
    annualEquiv: "Solo $4.17/mes · 2 meses gratis",
    badge: "Mejor valor",
    cta: "Empieza tu prueba gratis",
    features: [
      "Manifestaciones ilimitadas",
      "Vision boards ilimitados",
      "Journaling de mañana y noche",
      "Una afirmación nueva cada día",
      "Seguimiento profundo de progreso y vibración",
    ],
    note: "Elige tu plataforma en el siguiente paso: iOS, Android o la web app.",
  },
};

function openPlatformModal() {
  window.dispatchEvent(new Event("lumgoals:open-download"));
}

function PricingCard({ name, price, period, sub, features, featured, badge, cta }) {
  const onActivate = () => openPlatformModal();
  return (
    <div
      className={"pricing-card" + (featured ? " featured" : "")}
      role="button"
      tabIndex={0}
      onClick={onActivate}
      onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onActivate(); } }}
    >
      {badge ? <span className="pricing-badge">{badge}</span> : null}
      <div className="pricing-name">{name}</div>
      <div className="pricing-price">
        <span className="amount">{price}</span>
        <span className="period">{period}</span>
      </div>
      <div className="pricing-sub">{sub}</div>
      <ul className="pricing-features">
        {features.map((f, i) => (
          <li key={i}><span className="pricing-check">✓</span>{f}</li>
        ))}
      </ul>
      <button type="button" className="pricing-cta"
        onClick={e => { e.stopPropagation(); onActivate(); }}>
        {cta}
      </button>
    </div>
  );
}

function PricingCards({ lang }) {
  const c = PRICING_COPY[lang] || PRICING_COPY.en;
  return (
    <>
      <div className="pricing-grid">
        <PricingCard
          name={c.monthlyName}
          price="$4.99"
          period={c.perMonth}
          sub={c.monthlySub}
          features={c.features}
          cta={c.cta}
        />
        <PricingCard
          name={c.annualName}
          price="$49.99"
          period={c.perYear}
          sub={`${c.annualSub} ${c.annualEquiv}`}
          features={c.features}
          featured
          badge={c.badge}
          cta={c.cta}
        />
      </div>
      <p className="pricing-note">{c.note}</p>
    </>
  );
}

function FinalCTA() {
  const t = useT();
  const { lang } = useLang();
  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>
          <div style={{height:36}}/>

          {/* Pricing cards — click opens the platform (iOS/Android/web) modal */}
          <div style={{position:"relative", zIndex:2, maxWidth:620, margin:"0 auto", textAlign:"left"}}>
            <PricingCards lang={lang}/>
          </div>

          <div style={{
            marginTop:24, position:"relative", zIndex:2,
            fontFamily:"var(--font-body)", fontSize:12, color:"var(--ink-2)",
            textAlign:"center",
          }}>
            {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 your thoughts, emotions, and daily actions with the life you are choosing to build. It isn't about wishing and waiting — it's about getting clear on what you want, returning to that vision often enough that it shapes how you see yourself, and then taking small, consistent steps that move you toward it. The mind tends to move in the direction of whatever it focuses on most, so manifestation is simply the intentional practice of choosing that focus.", [["The Lumgoals view", "Clarity first, repetition second, tiny aligned action always. We believe a desire becomes real not through force but through attention: when you know exactly what you're calling in, revisit it daily, and let it guide one small choice at a time, your outer life slowly reorganizes to match your inner one."], ["More than positive thinking", "Manifestation works best when feeling meets action. Picturing your goal builds the belief that it's possible; acting on it — even in the smallest way — proves to yourself that it is. Lumgoals is designed to keep both of those alive at once."], ["Manifestations you can track", "Set a clear intention, then watch it come alive with progress, a vibration score, and the streak of days you've kept it active — so an abstract dream becomes something tangible you tend to every day."], ["Vision boards", "Collect the images, words, and feelings of the life you're calling in and keep them somewhere you'll actually see them. What stays visible stays believable."], ["Guided journaling, morning and night", "Begin the day by setting intentions and choosing a daily affirmation; close it by reflecting, releasing, and recording what shifted. This morning-and-evening rhythm is where alignment is quietly built."], ["Daily affirmations", "Every day greets you with a fresh affirmation to anchor your focus — a small, consistent reminder of the person you're becoming."]]],
    "the lumgoals practice": ["The Lumgoals practice", "Lumgoals brings lumen, a measure of light, together with goals: the dreams we choose to illuminate until they become visible, actionable, and close.", [["Why light?", "Lumen comes from Latin and is used to describe luminous flow: a way of measuring light. For us, that image matters because a goal often begins as something dim and unnamed. The practice is about giving it light, language, and direction."], ["Focus turns desire into movement", "When you write what you want, choose an affirmation, and name one aligned action, your mind starts noticing the path. The goal stops floating somewhere far away and becomes something you can meet through small decisions, repeated with intention."], ["Journaling clears the noise", "Writing how you feel helps reveal what is underneath resistance, fear, or negative thoughts. Once a feeling has a name, it becomes easier to understand, release, and respond to with care instead of letting it quietly steer the day."], ["A vision you can carry", "Moving toward a goal is like lighting an unfamiliar road one step at a time. Visual people can keep the dream close through images; non-visual people can still benefit from having the intention, action plan, and reflection in their pocket. The more often you see it, the easier it becomes to recognize the openings that lead you there."], ["Morning and evening rhythm", "In the morning, return to your intention and choose one action that supports it. In the evening, notice what shifted. This is how Lumgoals turns manifestation into a daily practice of clarity, action, and trust."]]],
    "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 la práctica de alinear tus pensamientos, emociones y acciones diarias con la vida que estás eligiendo construir. No se trata de desear y esperar, sino de tener claridad sobre lo que quieres, volver a esa visión con la frecuencia suficiente para que moldee cómo te ves a ti misma, y dar pasos pequeños y constantes que te acerquen a ella. La mente tiende a moverse hacia aquello en lo que más se enfoca, así que manifestar es simplemente la práctica intencional de elegir ese enfoque.", [["La mirada Lumgoals", "Primero claridad, luego repetición y siempre pequeñas acciones alineadas. Creemos que un deseo no se vuelve real a la fuerza, sino a través de la atención: cuando sabes exactamente qué estás llamando, vuelves a ello cada día y dejas que guíe una pequeña decisión a la vez, tu vida exterior se reorganiza poco a poco para coincidir con tu mundo interior."], ["Más que pensamiento positivo", "Manifestar funciona mejor cuando la emoción se une a la acción. Visualizar tu meta construye la creencia de que es posible; actuar sobre ella —aunque sea mínimamente— te demuestra que lo es. Lumgoals está diseñada para mantener ambas cosas vivas al mismo tiempo."], ["Manifestaciones que puedes seguir", "Define una intención clara y obsérvala cobrar vida con su progreso, su nivel de vibración y la racha de días que la has mantenido activa, para que un sueño abstracto se convierta en algo concreto que cuidas cada día."], ["Vision boards", "Reúne las imágenes, palabras y sensaciones de la vida que estás llamando y tenlas donde de verdad las veas. Lo que permanece visible permanece creíble."], ["Journaling guiado, mañana y noche", "Empieza el día fijando intenciones y eligiendo una afirmación diaria; ciérralo reflexionando, soltando y registrando lo que cambió. En ese ritmo de mañana y noche es donde se construye la alineación."], ["Afirmaciones diarias", "Cada día te recibe con una afirmación nueva para anclar tu enfoque: un recordatorio pequeño y constante de la persona en la que te estás convirtiendo."]]],
    "la práctica lumgoals": ["La práctica Lumgoals", "Lumgoals une lumen, una medida de luz, con goals: las metas y sueños que elegimos iluminar hasta verlos con claridad, acción y dirección.", [["De dónde viene la luz", "Lumen viene del latín y se usa para hablar de la luz, incluso como unidad de flujo luminoso. Para nosotras esa imagen es esencial: una meta muchas veces empieza como algo borroso, íntimo o difícil de explicar. La práctica consiste en darle luz, lenguaje y forma."], ["El enfoque convierte el deseo en movimiento", "Cuando escribes lo que quieres, eliges una afirmación y defines una acción alineada, tu mente empieza a reconocer el camino. La meta deja de estar lejos y se convierte en algo que puedes tocar con decisiones pequeñas, repetidas con intención."], ["Escribir despeja el ruido", "Nombrar cómo te sientes ayuda a entender qué hay debajo del miedo, la resistencia o los pensamientos negativos. Cuando una emoción tiene nombre, deja de moverse en silencio y se vuelve más fácil soltarla, atenderla y avanzar con más calma."], ["Una visión que llevas contigo", "Avanzar hacia una meta es como iluminar un camino desconocido paso a paso. Las personas visuales pueden sostener el sueño con imágenes; quienes no lo son también se benefician de llevar la intención, el plan y la reflexión en el bolsillo. Mientras más lo ves, más fácil es reconocer las oportunidades que te acercan."], ["Ritmo de mañana y noche", "En la mañana vuelves a tu intención y eliges una acción concreta. En la noche observas qué cambió, qué sentiste y qué aprendiste. Así Lumgoals convierte la manifestación en una práctica diaria de claridad, acción y confianza."]]],
    "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", "Tu privacidad importa. Lumgoals está diseñada para ayudarte a crecer, reflexionar y manifestar en un espacio personal y seguro. Esta Política de Privacidad explica qué información recopilamos, cómo la usamos y cómo protegemos tus datos mientras usas la app.", [["Qué recopilamos", "Podemos recopilar información de tu cuenta, como tu correo o nombre de usuario; las manifestaciones, entradas de diario, vision boards y metas que creas; datos de uso que ayudan a mejorar el rendimiento y las funciones de la app; e información de pago para las suscripciones premium, gestionada de forma segura a través de proveedores externos."], ["Cómo se usan tus datos", "Tu información nos ayuda a personalizar tu experiencia, sincronizar tu contenido entre dispositivos, mejorar las funciones y la estabilidad de Lumgoals, brindar soporte y procesar suscripciones y pagos."], ["Tu contenido es tuyo", "Tus manifestaciones, diarios y tableros te pertenecen. Lumgoals no vende tu contenido personal."], ["Seguridad", "Usamos tecnologías seguras y protecciones estándar de la industria para ayudar a mantener tu información protegida."], ["Servicios de terceros", "Algunas funciones pueden apoyarse en proveedores externos de confianza para analítica, pagos o almacenamiento en la nube."], ["Tus opciones", "Puedes solicitar el acceso, la corrección o la eliminación de tus datos en cualquier momento."]]],
    "términos": ["Términos", "Te damos la bienvenida a Lumgoals. Al usar la app, aceptas los siguientes Términos de Servicio.", [["Uso de Lumgoals", "Lumgoals está pensada para el crecimiento personal, la organización, el journaling y el apoyo a la manifestación. Aceptas usar la plataforma de forma respetuosa y legal."], ["Cuentas", "Eres responsable de mantener la seguridad de tu cuenta y de tu información de inicio de sesión."], ["Suscripciones", "Algunas funciones requieren una suscripción premium. El cobro se gestiona a través de proveedores de pago externos seguros. Las cuotas de suscripción no son reembolsables salvo que la ley lo exija."], ["Propiedad del contenido", "Conservas la propiedad del contenido que creas dentro de Lumgoals."], ["Uso prohibido", "No puedes abusar de la plataforma ni interrumpirla, intentar accesos no autorizados, subir contenido dañino o ilegal, ni copiar o redistribuir los recursos de Lumgoals sin permiso."], ["Disponibilidad", "Podemos actualizar, modificar o descontinuar funciones en cualquier momento para mejorar la experiencia."], ["Limitación de responsabilidad", "Lumgoals se ofrece \"tal cual\". No podemos garantizar resultados personales, emocionales o financieros específicos por el uso de la plataforma."]]],
    "cookies": ["Cookies", "Cómo usa Lumgoals las cookies y tecnologías similares. Las cookies ayudan a Lumgoals a ofrecer una experiencia más fluida y personalizada.", [["Qué hacen las cookies", "Usamos cookies para mantener tu sesión iniciada, recordar tus preferencias y ajustes, entender el rendimiento y uso de la app, y mejorar la velocidad y la funcionalidad."], ["Analítica", "Podemos usar herramientas de analítica para entender cómo interactúan las personas con la plataforma y así mejorar la experiencia."], ["Gestionar cookies", "Puedes controlar o desactivar las cookies desde los ajustes de tu navegador o dispositivo. Algunas funciones podrían no operar correctamente si las desactivas."], ["Cookies de terceros", "Algunos servicios de confianza que usa Lumgoals también pueden colocar cookies para analítica o procesamiento de pagos."]]],
    "accesibilidad": ["Accesibilidad", "Lumgoals está construida para ser inclusiva y accesible. Nos comprometemos a crear una experiencia usable y acogedora para todas las personas.", [["Nuestro compromiso", "Buscamos usar una tipografía legible y un contraste de color accesible, dar soporte a la navegación con teclado y lectores de pantalla, mantener diseños e interacciones claros, y mejorar continuamente la accesibilidad en toda la plataforma."], ["Comentarios", "Si encuentras barreras de accesibilidad al usar Lumgoals, nos encantaría saberlo para poder mejorar."]]],
    "tus datos": ["Tus datos", "Tú controlas tus datos personales. Lumgoals te da herramientas y transparencia sobre la información asociada a tu cuenta.", [["Puedes solicitar", "Acceso a tus datos almacenados, correcciones de información inexacta, eliminación de tu cuenta y del contenido asociado, y exportación de tus datos cuando aplique."], ["Conservación de datos", "Solo conservamos los datos durante el tiempo necesario para prestar el servicio y cumplir con las obligaciones legales."], ["Eliminación de cuenta", "Si decides eliminar tu cuenta, tu contenido personal y los datos asociados se eliminarán de forma permanente en un plazo razonable, salvo que la ley exija lo contrario."]]],
  };
  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);
  // Stable slugs parallel to the footer columns and the /lumgoals · /resources · /legal pages.
  const lumgoalsSlugs = ["what-is-manifestation", "the-lumgoals-practice", "pricing", "gift-a-year", "updates", "contact"];
  const resourceSlugs = ["practice-library", "press-kit", "help-center"];
  const legalSlugs = ["privacy", "terms", "cookies", "accessibility", "your-data", "delete-account"];
  const cols = [
    { title: t("footColA"), links: [...t("footAlinks"), t("footContactLink")], page: "lumgoals.html", slugs: lumgoalsSlugs },
    { title: t("footColB"), links: t("footBlinks"), page: "resources.html", slugs: resourceSlugs },
    { title: t("footColD"), links: t("footDlinks"), page: "legal.html", slugs: legalSlugs },
  ];
  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.65,maxWidth:260,textWrap:"pretty"}}>
              {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}
                    href={c.page ? `${c.page}#${c.slugs[j]}` : undefined}
                    onOpen={c.page ? undefined : () => 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, href }) {
  const [hover, setHover] = React.useState(false);
  const baseStyle = {
    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",
  };
  const handlers = {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
  };
  // Legal links navigate to the dedicated /legal page (deep-linked by hash).
  if (href) {
    return <a href={href} style={baseStyle} {...handlers}>{label}</a>;
  }
  return (
    <button type="button" onClick={onOpen} style={baseStyle} {...handlers}>{label}</button>
  );
}

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