function AboutSection() {
  const values = [
    { t: 'Impacto real', d: 'Que el proyecto funcione para tu negocio, no solo que se vea bonito.' },
    { t: 'Relación a largo plazo', d: 'Preferimos clientes satisfechos a proyectos rápidos sin continuidad.' },
    { t: 'Claridad', d: 'Sin jerga innecesaria, sin promesas vacías, sin letra pequeña.' },
    { t: 'Colaboración', d: 'Trabajamos contigo, no solo para ti.' },
  ];
  return (
    <section id="nosotros" className="shell" style={{ background: 'linear-gradient(180deg, transparent, rgba(124,140,255,0.03), transparent)' }}>
      <div className="container">
        <div className="about-inner" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }}>
          <div className="reveal about-sticky" style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
            <span className="eyebrow"><span className="dot"/>Nosotros</span>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              No hacemos webs.<br/>
              <span className="grad-text">Construimos productos.</span>
            </h2>
          </div>
          <div className="reveal d1">
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--text-dim)', marginBottom: 24, textWrap: 'pretty' }}>
              Somos un equipo de diseño y desarrollo enfocado en crear soluciones digitales que tienen sentido para el negocio y para las personas que las usan.
            </p>
            <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--text-mute)', marginBottom: 40 }}>
              Creemos en procesos claros, en hablar sin tecnicismos innecesarios y en entregar valor real en cada fase. No vendemos humo ni promesas vagas: preferimos resultados, transparencia y relaciones a largo plazo.
            </p>
            <div className="about-values" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {values.map((v, i) => (
                <div key={v.t} className={`card d${i%4}`} style={{ padding: 22 }}>
                  <h4 style={{ fontSize: 15, fontWeight: 500, marginBottom: 6, letterSpacing: '-0.005em' }}>{v.t}</h4>
                  <p style={{ fontSize: 13, color: 'var(--text-dim)', lineHeight: 1.5 }}>{v.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const faqs = [
  { q: '¿Cómo empiezo un proyecto con NovaForge?', a: 'Primero entendemos tu objetivo y te enviamos una propuesta con opciones (alcance, tiempos y coste). Tú eliges la opción más adecuada para la primera entrega.' },
  { q: '¿Por qué trabajáis por fases y pagos por fase?', a: 'Porque reduce riesgos para ambas partes: tú ves avances reales con entregas cerradas, y nosotros trabajamos con un alcance claro. Sin ataduras y con valor entregado en cada fase.' },
  { q: '¿Qué fases típicas tiene un proyecto?', a: 'Maquetación en Figma → base de datos → backend/API → frontend/cliente → integraciones → optimización y despliegue.' },
  { q: '¿Puedo contratar solo diseño UI/UX o solo desarrollo?', a: 'Sí. Podemos hacer únicamente UI/UX (Figma + prototipo) o solo desarrollo si ya tienes diseño. También podemos mejorar y unificar un producto existente.' },
  { q: '¿Qué tecnologías utilizáis?', a: 'Depende del proyecto, pero normalmente TypeScript, React o Vue 3, Node.js, despliegue en cloud (p.ej. Railway) y autenticación con JWT. Para mobile usamos React Native y Expo. Para automatización, n8n.' },
  { q: '¿Incluye mantenimiento y soporte?', a: 'Podemos incluirlo como una fase adicional o como un plan mensual. Lo definimos en la propuesta según el tipo de producto y tu necesidad de evolución.' },
  { q: '¿Cuánto tarda un proyecto?', a: 'Depende del alcance, pero trabajamos por entregas. La primera fase suele ser la más rápida (diseño o MVP) para que puedas validar cuanto antes.' },
  { q: '¿Mi web estará optimizada para SEO y rendimiento?', a: 'Sí: base de SEO técnico, rendimiento, accesibilidad y estructura limpia. Si necesitas SEO avanzado (estrategia, contenidos, enlazado, etc.) también lo contemplamos.' },
];

function FaqItem({ q, a, idx }) {
  const [open, setOpen] = React.useState(idx === 0);
  return (
    <div style={{
      borderBottom: '1px solid var(--border)',
      paddingBlock: 0
    }}>
      <button onClick={() => setOpen(!open)} style={{
        width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '24px 0', textAlign: 'left'
      }}>
        <span style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>{q}</span>
        <span style={{
          width: 28, height: 28, borderRadius: '50%',
          border: '1px solid var(--border-2)',
          display: 'grid', placeItems: 'center', flexShrink: 0,
          transition: 'transform .3s, background .3s',
          transform: open ? 'rotate(45deg)' : 'none',
          background: open ? 'var(--accent)' : 'transparent',
          color: open ? '#0a0b16' : 'var(--text-dim)'
        }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M12 5v14 M5 12h14" />
          </svg>
        </span>
      </button>
      <div style={{
        maxHeight: open ? 200 : 0, overflow: 'hidden',
        transition: 'max-height .4s ease, padding .3s ease',
        paddingBottom: open ? 24 : 0
      }}>
        <p style={{ color: 'var(--text-dim)', fontSize: 15, lineHeight: 1.6, maxWidth: '80ch' }}>{a}</p>
      </div>
    </div>
  );
}

function FaqSection() {
  return (
    <section id="faq" className="shell">
      <div className="container" style={{ maxWidth: 960 }}>
        <div className="sh reveal" style={{ textAlign: 'center', margin: '0 auto 56px' }}>
          <span className="eyebrow"><span className="dot"/>FAQ</span>
          <h2 className="h-section" style={{ marginTop: 20 }}>
            <span className="grad-text">Resolvemos tus dudas</span><br/>antes de empezar.
          </h2>
        </div>
        <div className="reveal">
          {faqs.map((f, i) => <FaqItem key={f.q} {...f} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

function ContactSection() {
  const [form, setForm] = React.useState({ name: '', service: 'Landing page', budget: '', currency: '€', message: '' });
  const services = ['Landing page','Web completa por secciones','Dashboard','App simple','App normal','App compleja','E-commerce','Automatización n8n','Ficha de Google (GBP)','Diseño UI/UX','Tarjetas empresariales','Otro'];

  const send = (e) => {
    e.preventDefault();
    const text = encodeURIComponent(`Hola NovaForge 👋\n\nNombre: ${form.name}\nServicio: ${form.service}\nPresupuesto: ${form.budget} ${form.currency}\n\n${form.message}`);
    window.open(`https://wa.me/34604894472?text=${text}`, '_blank');
  };

  return (
    <section id="contacto" className="shell">
      <div className="container">
        <div style={{
          background: 'linear-gradient(180deg, rgba(14,16,32,0.9), rgba(8,9,18,0.9))',
          border: '1px solid var(--border-2)',
          borderRadius: 28, padding: 64, position: 'relative', overflow: 'hidden'
        }} className="contact-box">
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 50% 70% at 0% 0%, rgba(124,140,255,0.2), transparent 60%)', pointerEvents: 'none' }} />
          <div className="contact-inner" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, position: 'relative' }}>
            <div className="reveal">
              <span className="eyebrow"><span className="dot"/>Contacto</span>
              <h2 className="h-section" style={{ marginTop: 20, marginBottom: 20 }}>
                Hablemos y te enviamos<br/>
                <span className="grad-text">una propuesta.</span>
              </h2>
              <p className="h-sub" style={{ marginBottom: 32 }}>
                Rellena el formulario y se abrirá WhatsApp con el mensaje listo para enviar. Sin compromiso.
              </p>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {['Respuesta en menos de 24h','Propuesta personalizada sin compromiso','Comunicación directa y ágil','Comparte referencias e imágenes'].map(x => (
                  <li key={x} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: 'var(--text-dim)' }}>
                    <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--accent-2)' }} />{x}
                  </li>
                ))}
              </ul>
            </div>
            <form className="reveal d1" onSubmit={send} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Field label="Nombre" value={form.name} onChange={v => setForm({ ...form, name: v })} />
              <SelectField label="Servicio" value={form.service} onChange={v => setForm({ ...form, service: v })} options={services} />
              <div className="form-row-budget" style={{ display: 'grid', gridTemplateColumns: '1fr 110px', gap: 12 }}>
                <Field label="Presupuesto estimado" value={form.budget} onChange={v => setForm({ ...form, budget: v })} placeholder="p.ej. 3000" />
                <SelectField label="Moneda" value={form.currency} onChange={v => setForm({ ...form, currency: v })} options={['€','RD$','USD']} />
              </div>
              <Field label="Mensaje" multiline value={form.message} onChange={v => setForm({ ...form, message: v })} />
              <button type="submit" className="btn btn-primary" style={{ marginTop: 8, justifyContent: 'center' }}>
                Enviar por WhatsApp
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.33 4.96L2 22l5.29-1.39c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2z"/></svg>
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, type = 'text', multiline, placeholder }) {
  const props = {
    value, onChange: e => onChange(e.target.value),
    placeholder,
    style: {
      width: '100%', padding: '12px 14px',
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid var(--border)',
      borderRadius: 10, color: 'var(--text)',
      fontSize: 14, fontFamily: 'inherit',
      outline: 'none', transition: 'border-color .2s',
    },
    onFocus: e => e.target.style.borderColor = 'var(--accent)',
    onBlur: e => e.target.style.borderColor = 'var(--border)',
  };
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 11, color: 'var(--text-mute)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</span>
      {multiline ? <textarea rows="4" {...props} /> : <input type={type} {...props} />}
    </label>
  );
}
function SelectField({ label, value, onChange, options }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 11, color: 'var(--text-mute)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{label}</span>
      <select value={value} onChange={e => onChange(e.target.value)} style={{
        padding: '12px 14px', background: 'rgba(255,255,255,0.04)',
        border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text)',
        fontSize: 14, fontFamily: 'inherit', outline: 'none',
        appearance: 'none',
        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a5a8b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
        backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center'
      }}>
        {options.map(o => <option key={o} value={o} style={{ background: '#0a0b16' }}>{o}</option>)}
      </select>
    </label>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: '48px 0 32px', marginTop: 40 }}>
      <div className="container">
        <div className="footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40, marginBottom: 40 }}>
          <div>
            <div className="brand" style={{ marginBottom: 16 }}>
              <div className="brand-mark" />
              <span>NovaForge</span>
            </div>
            <p style={{ fontSize: 13, color: 'var(--text-mute)', maxWidth: 280, lineHeight: 1.6 }}>
              Diseñamos, desarrollamos y automatizamos productos digitales que convierten.
            </p>
          </div>
          {[
            { t: 'Navegación', items: [['Inicio','#top'],['Servicios','#servicios'],['Desarrollo','#desarrollo'],['Automatización','#automation'],['Seguridad','#seguridad'],['Nosotros','#nosotros'],['FAQ','#faq']] },
            { t: 'Servicios', items: [['Landing pages','#servicios'],['Webs corporativas','#servicios'],['Dashboards','#servicios'],['Apps web y mobile','#servicios'],['E-commerce','#servicios'],['UI/UX','#servicios'],['Automatización n8n','#automation']] },
            { t: 'Contacto', items: [['WhatsApp +34 604 894 472','https://wa.me/34604894472'],['Presupuestar proyecto','#contacto']] },
          ].map(col => (
            <div key={col.t}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent-3)', marginBottom: 14 }}>{col.t}</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {col.items.map(([l, h]) => <li key={l}><a href={h} style={{ fontSize: 13, color: 'var(--text-dim)' }}>{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom" style={{ paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-mute)' }}>
          <span>© 2026 NovaForge. Todos los derechos reservados.</span>
          <div className="footer-bottom-links" style={{ display: 'flex', gap: 20 }}>
            <a href="#">Privacidad</a>
            <a href="#">Cookies</a>
            <a href="#">Términos</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AboutSection, FaqSection, ContactSection, Footer });