// app.jsx — Solvera landing root. Composes sections + palette tweaks.

const { useState, useEffect } = React;

// ─────────────────────────────────────────────────────────────────────────
// Palettes — friendly, clean, B2B-trustworthy
// ─────────────────────────────────────────────────────────────────────────

const PALETTES = {
  cielo: {
    label: 'Cielo',
    bg: '#fbfaf7',
    bg2: '#ffffff',
    bg3: '#f1efea',
    fg: '#14181f',
    fgSoft: '#3a4150',
    fgMute: '#707788',
    rule: 'rgba(20, 24, 31, 0.08)',
    ruleStrong: 'rgba(20, 24, 31, 0.18)',
    accent: '#2a5cf5',
    accentDeep: '#1d44ba',
    accentSoft: '#e4ecff',
    accentTint: 'rgba(42, 92, 245, 0.08)',
    positive: '#14a263',
    positiveSoft: '#e1f5ec',
    warm: '#ff8f4d',
    warmSoft: '#fff0e3',
  },
  salvia: {
    label: 'Salvia',
    bg: '#f8faf6',
    bg2: '#ffffff',
    bg3: '#edf1e8',
    fg: '#141a14',
    fgSoft: '#3a4738',
    fgMute: '#6c7a6a',
    rule: 'rgba(20, 26, 20, 0.08)',
    ruleStrong: 'rgba(20, 26, 20, 0.18)',
    accent: '#2f8a4f',
    accentDeep: '#1b5d34',
    accentSoft: '#e1f3e7',
    accentTint: 'rgba(47, 138, 79, 0.08)',
    positive: '#14a263',
    positiveSoft: '#e1f5ec',
    warm: '#d97a3c',
    warmSoft: '#fbeadb',
  },
  notte: {
    label: 'Notte',
    bg: '#0e0f14',
    bg2: '#161823',
    bg3: '#1f2230',
    fg: '#f5f5f7',
    fgSoft: '#b4b8c4',
    fgMute: '#7a7f8e',
    rule: 'rgba(245, 245, 247, 0.10)',
    ruleStrong: 'rgba(245, 245, 247, 0.22)',
    accent: '#8b6dff',
    accentDeep: '#a48bff',
    accentSoft: 'rgba(139, 109, 255, 0.16)',
    accentTint: 'rgba(139, 109, 255, 0.08)',
    positive: '#3ed98b',
    positiveSoft: 'rgba(62, 217, 139, 0.14)',
    warm: '#ffb56b',
    warmSoft: 'rgba(255, 181, 107, 0.14)',
  },
};

function applyPalette(p) {
  const r = document.documentElement.style;
  r.setProperty('--bg', p.bg);
  r.setProperty('--bg-2', p.bg2);
  r.setProperty('--bg-3', p.bg3);
  r.setProperty('--fg', p.fg);
  r.setProperty('--fg-soft', p.fgSoft);
  r.setProperty('--fg-mute', p.fgMute);
  r.setProperty('--rule', p.rule);
  r.setProperty('--rule-strong', p.ruleStrong);
  r.setProperty('--accent', p.accent);
  r.setProperty('--accent-deep', p.accentDeep);
  r.setProperty('--accent-soft', p.accentSoft);
  r.setProperty('--accent-tint', p.accentTint);
  r.setProperty('--positive', p.positive);
  r.setProperty('--positive-soft', p.positiveSoft);
  r.setProperty('--warm', p.warm);
  r.setProperty('--warm-soft', p.warmSoft);
}

// ─────────────────────────────────────────────────────────────────────────
// Final CTA banner before footer
// ─────────────────────────────────────────────────────────────────────────

function FinalCTA() {
  return (
    <section style={{ padding: '40px 0 100px' }}>
      <div className="container">
        <div style={{
          background: 'var(--fg)',
          color: 'var(--bg)',
          borderRadius: 'var(--radius-lg)',
          padding: 'clamp(40px, 6vw, 72px)',
          position: 'relative',
          overflow: 'hidden',
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 40, alignItems: 'center',
        }} className="final-cta-grid">
          {/* Decoration */}
          <div aria-hidden="true" style={{
            position: 'absolute', right: -100, top: -100,
            width: 380, height: 380, borderRadius: '50%',
            background: 'radial-gradient(circle, var(--accent-tint) 0%, transparent 70%)',
            filter: 'blur(40px)',
            pointerEvents: 'none',
          }} />

          <div style={{ position: 'relative', zIndex: 1 }}>
            <Eyebrow style={{ marginBottom: 18, color: 'var(--accent)' }}>
              Empieza aquí
            </Eyebrow>
            <h2 style={{
              margin: '0 0 18px',
              fontSize: 'clamp(32px, 4vw, 52px)',
              fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05,
            }}>
              Cuéntanos el problema.{' '}<br />Del resto nos ocupamos nosotros.
            </h2>
            <p style={{
              margin: 0, fontSize: 'clamp(19px, 1.6vw, 22px)',
              color: 'var(--bg)', lineHeight: 1.5,
              maxWidth: 520, fontWeight: 500,
              letterSpacing: '-0.005em',
            }}>
              <strong style={{ fontWeight: 700 }}>30 minutos, gratis.</strong> Escuchamos, entendemos y te decimos honestamente
              si podemos ayudarte. Si no hay encaje, <em style={{ color: 'var(--accent-soft)', fontStyle: 'normal', fontWeight: 600 }}>te lo decimos de inmediato</em>.
            </p>
          </div>

          <div className="final-cta-actions" style={{
            position: 'relative', zIndex: 1,
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <a href="https://wa.me/393793762553?text=Hola%20Solvera%2C%20quisiera%20informaci%C3%B3n" target="_blank" rel="noopener" style={{
              background: 'var(--accent)', color: '#fff',
              padding: '18px 28px', borderRadius: 999,
              textDecoration: 'none', fontSize: 17, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              gap: 10, boxShadow: 'var(--shadow-md)',
              transition: 'transform .15s ease',
            }}
              onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
              onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
            >
              Escríbenos ahora <ArrowRight />
            </a>
          </div>

          <style>{`
            @media (max-width: 760px) {
              .final-cta-grid {
                grid-template-columns: 1fr !important;
                text-align: center;
              }
              .final-cta-grid h2,
              .final-cta-grid p { margin-left: auto !important; margin-right: auto !important; }
              .final-cta-actions { align-items: center !important; }
            }
          `}</style>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────────────────

function Footer() {
  return (
    <footer style={{
      padding: '56px 0 32px',
      borderTop: '1px solid var(--rule)',
      background: 'var(--bg)',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) repeat(2, minmax(0, 1fr))',
          gap: 40, marginBottom: 48,
        }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <Logo />
              <span style={{
                fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em',
              }}>Solvera</span>
            </div>
            <p style={{
              margin: 0, fontSize: 15, color: 'var(--fg-soft)',
              maxWidth: 360, lineHeight: 1.55,
            }}>
              Agencia de integración de IA para tu empresa.
              Primero escuchamos, después construimos, siempre estamos contigo.
            </p>
            <div style={{
              marginTop: 20, display: 'flex', flexDirection: 'column',
              gap: 14, alignItems: 'flex-start',
            }}>
              <a href="mailto:info@aisolvera.com" style={{
                fontSize: 15, fontWeight: 600,
                color: 'var(--accent)', textDecoration: 'none',
              }}>info@aisolvera.com</a>
              <a href="https://wa.me/393793762553?text=Hola%20Solvera%2C%20quisiera%20informaci%C3%B3n"
                target="_blank" rel="noopener"
                style={{
                  display: 'inline-flex', alignItems: 'center', gap: 9,
                  background: '#25D366', color: '#fff',
                  padding: '11px 20px', borderRadius: 12,
                  fontSize: 14.5, fontWeight: 600, textDecoration: 'none',
                  boxShadow: 'var(--shadow-sm)',
                  transition: 'transform .15s ease',
                }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
              >
                <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
                </svg>
                Escríbenos por WhatsApp
              </a>
              <div style={{ display: 'flex', gap: 18, marginTop: 2, fontSize: 14 }}>
                <a href="https://www.facebook.com/profile.php?id=61590218902339" target="_blank" rel="noopener" style={{ color: 'var(--fg-soft)', textDecoration: 'none' }}>Facebook</a>
                <a href="https://www.instagram.com/solveraintegrazioni/" target="_blank" rel="noopener" style={{ color: 'var(--fg-soft)', textDecoration: 'none' }}>Instagram</a>
              </div>
            </div>
          </div>

          <FooterCol title="Navegar" links={[
            ['Demo', '#demo'],
            ['Ejemplos', '#esempi'],
            ['Para quién', '#settori'],
            ['Por qué nosotros', '#perche-noi'],
            ['FAQ', '#faq'],
            ['Escríbenos', 'mailto:info@aisolvera.com'],
          ]} />
          <FooterCol title="Legal" links={[
            ['Política de Privacidad', '/privacy.html'],
            ['Política de Cookies', '/cookie.html'],
            ['Términos', '/termini.html'],
          ]} />
        </div>

        <div style={{
          borderTop: '1px solid var(--rule)', paddingTop: 22,
          display: 'flex', justifyContent: 'space-between',
          fontSize: 12, color: 'var(--fg-mute)',
          flexWrap: 'wrap', gap: 12,
        }}>
          <span>© 2026 Solvera</span>
          <span>Made in Italy 🇮🇹 · Para España 🇪🇸 · Respuesta en 24h</span>
        </div>

        <style>{`
          @media (max-width: 760px) {
            .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{
        fontSize: 12, fontWeight: 700, color: 'var(--fg-mute)',
        fontFamily: 'var(--mono)', letterSpacing: '0.04em',
        textTransform: 'uppercase', marginBottom: 16,
      }}>{title}</div>
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(([l, h]) => (
          <li key={l}>
            <a href={h} style={{
              textDecoration: 'none', color: 'var(--fg)',
              fontSize: 15, fontWeight: 500,
              transition: 'color .15s ease',
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
              onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg)'}
            >{l}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cielo"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    applyPalette(PALETTES[t.palette] || PALETTES.cielo);
  }, [t.palette]);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div style={{ position: 'relative' }}>
      <Nav scrolled={scrolled} />
      <Hero />
      <ToolsStrip />
      <WhatItDoes />
      <PainPoints />
      <LostOpportunities />
      <Examples />
      <Industries />
      <About />
      <WhyUs />
      <FAQ />
      <FinalCTA />
      <Footer />
      <ChatBot />

      <TweaksPanel title="Tweaks · Solvera">
        <TweakSection label="Palette" />
        <TweakColor
          label="Tonalità"
          value={[PALETTES[t.palette].accent, PALETTES[t.palette].bg, PALETTES[t.palette].fg]}
          options={[
            [PALETTES.cielo.accent, PALETTES.cielo.bg, PALETTES.cielo.fg],
            [PALETTES.salvia.accent, PALETTES.salvia.bg, PALETTES.salvia.fg],
            [PALETTES.notte.accent, PALETTES.notte.bg, PALETTES.notte.fg],
          ]}
          onChange={(palette) => {
            const match = Object.entries(PALETTES).find(
              ([_, p]) => p.accent === palette[0]
            );
            if (match) setTweak('palette', match[0]);
          }}
        />
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10,
          color: 'rgba(41,38,27,0.55)', letterSpacing: '0.06em',
          textTransform: 'uppercase', textAlign: 'center', marginTop: -4,
        }}>
          {PALETTES[t.palette].label}
        </div>

        <TweakSection label="Note" />
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 10,
          color: 'rgba(41,38,27,0.55)', lineHeight: 1.5,
          padding: '8px 0',
        }}>
          Tres direcciones cromáticas, misma estructura. Las fotos de perfil y los
          testimonios son marcadores — reemplazar con materiales reales.
        </div>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);