// Pyrovolt — Company, Contact, News, Legal pages

const CONTACT_EMAIL = window.PYROVOLT_CONTACT_EMAIL || 'info@pyrovolt.es';
const CONTACT_ENDPOINT = window.PYROVOLT_CONTACT_ENDPOINT || '/api/contact';
const NEWSLETTER_ENDPOINT = window.PYROVOLT_NEWSLETTER_ENDPOINT || '/api/newsletter';
const LEGAL_PROFILE = Object.assign({
  companyName: 'PYROVOLT ALLIANCE SL',
  commercialName: 'Pyrovolt',
  taxId: 'B21786611',
  address: 'Calle Caballero 87P, BJ, 08029 Barcelona (Barcelona), España',
  domain: 'pyrovolt.es',
  email: CONTACT_EMAIL,
  dpoEmail: CONTACT_EMAIL,
}, window.PYROVOLT_LEGAL || {});

// ─── Security: XSS sanitisation ───────────────────────────────────────────────
function sanitizeInput(str) {
  if (typeof str !== 'string') return '';
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;')
    .replace(/\//g, '&#x2F;')
    .trim()
    .slice(0, 2000);
}

function isValidEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i.test(String(value || '').trim());
}

function validateContactForm(form) {
  if (!form.name || form.name.trim().length < 2) return 'Indica tu nombre.';
  if (!isValidEmail(form.email)) return 'Introduce un email válido.';
  if (!form.message || form.message.trim().length < 10) return 'Cuéntanos el contexto del proyecto con al menos 10 caracteres.';
  if (!form.privacyAccepted) return 'Debes aceptar la Política de Privacidad para continuar.';
  return '';
}

function validateNewsletterForm(email, consent) {
  if (!isValidEmail(email)) return 'Introduce un email válido.';
  if (!consent) return 'Debes aceptar recibir comunicaciones comerciales.';
  return '';
}

// ─── Rate limiting via localStorage ──────────────────────────────────────────
const RATE_LIMIT_KEY = 'pv-contact-rate';
const RATE_LIMIT_MAX = 3;
const RATE_LIMIT_WINDOW = 60 * 60 * 1000; // 1 hour

function checkRateLimit() {
  try {
    const raw = localStorage.getItem(RATE_LIMIT_KEY);
    const now = Date.now();
    let times = raw ? JSON.parse(raw) : [];
    times = times.filter(t => now - t < RATE_LIMIT_WINDOW);
    if (times.length >= RATE_LIMIT_MAX) return false;
    times.push(now);
    localStorage.setItem(RATE_LIMIT_KEY, JSON.stringify(times));
    return true;
  } catch (e) {
    return true; // fail open if localStorage unavailable
  }
}

function compactContactValue(value) {
  return String(value || '').trim();
}

function contactPayload(form, source = 'contact-page') {
  return {
    source,
    name: compactContactValue(form.name),
    company: compactContactValue(form.company),
    email: compactContactValue(form.email),
    need: compactContactValue(form.need || form.interest),
    power: compactContactValue(form.power),
    message: compactContactValue(form.message),
    privacyConsent: form.privacyAccepted === true,
    consentText: 'Acepta la Política de Privacidad para recibir respuesta a la solicitud.',
    submittedAt: new Date().toISOString(),
  };
}

function contactSummary(payload) {
  return [
    `Nombre: ${payload.name || '-'}`,
    `Empresa: ${payload.company || '-'}`,
    `Email: ${payload.email || '-'}`,
    `Necesidad: ${payload.need || '-'}`,
    payload.power ? `Potencia: ${payload.power}` : null,
    '',
    payload.message || 'Sin resumen adicional.',
  ].filter(line => line !== null).join('\n');
}

async function submitContactPayload(form, source) {
  const payload = contactPayload(form, source);
  if (CONTACT_ENDPOINT) {
    const response = await fetch(CONTACT_ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    if (!response.ok) throw new Error(`Contact endpoint failed: ${response.status}`);
    return { mode: 'endpoint', payload };
  }

  const subject = encodeURIComponent(`Solicitud Pyrovolt - ${payload.need || 'Proyecto'}`);
  const body = encodeURIComponent(contactSummary(payload));
  window.location.href = `mailto:${CONTACT_EMAIL}?subject=${subject}&body=${body}`;
  return { mode: 'email', payload };
}

async function copyContactSummary(payload) {
  if (!navigator.clipboard) return false;
  await navigator.clipboard.writeText(contactSummary(payload));
  return true;
}

function LegacyCompanyPage({ navigate }) {
  return (
    <>
      <section style={{ paddingTop: 160, paddingBottom: 80, position: 'relative', overflow: 'hidden' }} className="container">
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 50% 50% at 70% 50%, var(--accent-glow), transparent 70%)', pointerEvents: 'none' }}/>
        <div style={{ position: 'relative' }}>
          <div className="h-eyebrow" style={{ marginBottom: 32, color: 'var(--accent-soft)' }}>Sobre Pyrovolt</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 8vw, 140px)', marginBottom: 40, maxWidth: '14ch' }}>
            La <It>energía</It><br/>que mueve Europa.
          </h1>
          <p className="t-lead" style={{ maxWidth: 680, fontSize: 'clamp(18px, 2vw, 26px)' }}>
            Una marca europea de electrónica de potencia y soluciones energéticas. Cargadores EV, almacenamiento, transformadores y media tensión bajo un único interlocutor, una única garantía y un solo equipo de soporte.
          </p>
        </div>
      </section>

      <section className="section container" style={{ borderTop: '1px solid var(--line)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {[
            ['1 MW', 'Cargador máx.', 'Distribuido por surtidor'],
            ['6,26 MWh', 'BESS por contenedor', '20ft · grid-forming'],
            ['24 kV', 'Media tensión', 'Celdas SF6-free'],
            ['Europa', 'Cobertura', 'Soporte y garantía'],
          ].map(([v, k, d], i) => (
            <div key={i} style={{ padding: '40px 28px', borderLeft: i > 0 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(44px, 5vw, 72px)', fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1, marginBottom: 16 }}>{v}</div>
              <div className="h-eyebrow" style={{ marginBottom: 8 }}>{k}</div>
              <div className="t-mono" style={{ color: 'var(--fg-mute)' }}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section container" style={{ borderTop: '1px solid var(--line)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 40 }}>
          <div style={{ gridColumn: 'span 5' }}>
            <div className="h-eyebrow" style={{ marginBottom: 16 }}>Manifiesto</div>
            <h2 className="h-title">Energy Made Simple.</h2>
          </div>
          <div style={{ gridColumn: 'span 7' }}>
            {[
              ['Un solo partner.', 'Cargadores, almacenamiento y media tensión diseñados para hablar entre sí. Si algo falla, sabemos dónde mirar.'],
              ['Todo visible.', 'Ficha técnica completa en la web. Precios orientativos. Plazos reales de entrega. Sin comerciales que te llamen "para entender tu proyecto".'],
              ['Servicio de verdad.', 'SLA de 4h en Europa continental. Equipo Pyrovolt al frente. Piezas de repuesto garantizadas durante 10 años.'],
              ['Software propio.', 'CPMS, EMS y monitorización. Una app, una API. Se integra con cualquier backend OCPP 2.0.1.'],
            ].map(([t, d], i) => (
              <div key={i} style={{ borderTop: '1px solid var(--line)', padding: '28px 0', display: 'grid', gridTemplateColumns: '60px 1fr', gap: 20 }}>
                <div className="t-mono" style={{ color: 'var(--fg-mute)' }}>0{i+1}</div>
                <div>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 8 }}>{t}</h4>
                  <p style={{ color: 'var(--fg-dim)', fontSize: 15, lineHeight: 1.6 }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section container" style={{ borderTop: '1px solid var(--line)' }}>
        <div style={{ marginBottom: 40 }}>
          <div className="h-eyebrow" style={{ marginBottom: 12 }}>Cobertura</div>
          <h2 className="h-title">Donde la energía llega.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {[
            ['Iberia', 'España · Portugal', 'Soporte y proyectos'],
            ['DACH', 'Alemania · Austria · Suiza', 'Soporte y proyectos'],
            ['Benelux', 'Países Bajos · Bélgica · Lux.', 'Soporte y proyectos'],
            ['Resto de Europa', 'Italia · Francia · Nórdicos · CEE', 'Bajo proyecto'],
          ].map(([c, t, a], i) => (
            <div key={i} className="tile" style={{ padding: 28, minHeight: 260, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ marginBottom: 16, height: 120, position: 'relative', borderRadius: 14, overflow: 'hidden', background: 'var(--bg-soft)', border: '1px solid var(--line)' }}>
                <svg viewBox="0 0 200 120" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                  <defs>
                    <pattern id={`map-grid-${i}`} width="12" height="12" patternUnits="userSpaceOnUse">
                      <path d="M 12 0 L 0 0 0 12" fill="none" stroke="rgba(244,242,237,0.06)" strokeWidth="0.4"/>
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill={`url(#map-grid-${i})`}/>
                  {[0,1,2].map(k => (
                    <circle key={k} cx={40 + k*60} cy={30 + (k%2)*40} r="3" fill="rgba(167,139,250,0.7)"/>
                  ))}
                </svg>
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--fg-dim)' }}>{c.toUpperCase()}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 4 }}>{c}</div>
                <div className="t-mono" style={{ color: 'var(--fg-dim)', marginBottom: 6 }}>{t}</div>
                <div className="t-mono" style={{ color: 'var(--fg-mute)' }}>{a}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <CTAStrip navigate={navigate}/>
    </>
  );
}

function LegacyContactPage({ navigate }) {
  const [submission, setSubmission] = React.useState({ state: 'idle', mode: null, payload: null, copied: false, error: '' });
  const [form, setForm] = React.useState({ name: '', company: '', email: '', interest: 'chargers', power: '', message: '' });
  const submit = async (e) => {
    e.preventDefault();
    setSubmission({ state: 'sending', mode: null, payload: null, copied: false, error: '' });
    try {
      const result = await submitContactPayload(form, 'legacy-contact-page');
      setSubmission({ state: 'done', mode: result.mode, payload: result.payload, copied: false, error: '' });
    } catch (error) {
      setSubmission({ state: 'error', mode: null, payload: contactPayload(form, 'legacy-contact-page'), copied: false, error: 'No se ha podido enviar automáticamente. Copia el resumen o escríbenos directamente.' });
    }
  };
  const reset = () => {
    setSubmission({ state: 'idle', mode: null, payload: null, copied: false, error: '' });
    setForm({ name: '', company: '', email: '', interest: 'chargers', power: '', message: '' });
  };
  return (
    <section style={{ paddingTop: 140, paddingBottom: 120, minHeight: '100vh' }} className="container">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 48 }}>
        <div style={{ gridColumn: 'span 5' }}>
          <div className="h-eyebrow" style={{ marginBottom: 24, color: 'var(--accent-soft)' }}>Contacto directo</div>
          <h1 className="h-title" style={{ marginBottom: 32 }}>Cuéntanos<br/><It>tu proyecto</It>.</h1>
          <p className="t-lead" style={{ marginBottom: 40 }}>
            Respondemos en 24 horas laborables con criterio técnico desde el primer mensaje.
          </p>
          <div style={{ borderTop: '1px solid var(--line)' }}>
            <SpecRow2 k="Contacto" v="info@pyrovolt.es"/>
            <SpecRow2 k="Proyectos" v="info@pyrovolt.es"/>
            <SpecRow2 k="Tender / Utility" v="info@pyrovolt.es"/>
            <SpecRow2 k="Prensa" v="info@pyrovolt.es"/>
          </div>
        </div>
        <div style={{ gridColumn: 'span 7' }}>
          {submission.state === 'idle' || submission.state === 'sending' || submission.state === 'error' ? (
            <form onSubmit={submit} style={{ background: 'var(--bg-elev)', borderRadius: 24, padding: 40 }}>
              <Field label="Nombre" value={form.name} onChange={v => setForm({...form, name: v})}/>
              <Field label="Empresa" value={form.company} onChange={v => setForm({...form, company: v})}/>
              <Field label="Email" type="email" value={form.email} onChange={v => setForm({...form, email: v})}/>
              <div style={{ marginBottom: 24 }}>
                <label className="t-mono" style={{ color: 'var(--fg-dim)', marginBottom: 12, display: 'block' }}>Interesado en</label>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {[
                    ['chargers', 'Cargadores'],
                    ['storage', 'Almacenamiento'],
                    ['both', 'Proyecto integrado'],
                    ['service', 'Servicio técnico'],
                  ].map(([id, lbl]) => (
                    <button type="button" key={id} onClick={() => setForm({...form, interest: id})}
                      className="btn"
                      style={{
                        background: form.interest === id ? 'var(--accent)' : 'transparent',
                        color: form.interest === id ? 'var(--accent-fg)' : 'var(--fg)',
                        border: '1px solid ' + (form.interest === id ? 'var(--accent)' : 'var(--line-strong)'),
                        padding: '10px 16px',
                      }}>{lbl}</button>
                  ))}
                </div>
              </div>
              <Field label="Potencia estimada (opcional)" value={form.power} onChange={v => setForm({...form, power: v})} placeholder="ej. 2 MW total, 4 plazas"/>
              <div style={{ marginBottom: 24 }}>
                <label className="t-mono" style={{ color: 'var(--fg-dim)', marginBottom: 12, display: 'block' }}>Mensaje</label>
                <textarea value={form.message} onChange={e => setForm({...form, message: e.target.value})}
                  rows={5}
                  style={{ width: '100%', background: 'var(--bg-soft)', border: '1px solid var(--line)', borderRadius: 10, padding: '12px 14px', color: 'var(--fg)', font: 'inherit', resize: 'vertical' }}/>
              </div>
              <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%', justifyContent: 'center' }}>
                {submission.state === 'sending' ? 'Preparando...' : 'Enviar'}
              </button>
              {submission.state === 'error' && <p className="pv-contact-error">{submission.error}</p>}
            </form>
          ) : (
            <div style={{ background: 'var(--bg-elev)', borderRadius: 24, padding: 60, textAlign: 'center' }}>
              <div className="h-eyebrow" style={{ marginBottom: 20, color: 'var(--accent)' }}>{submission.mode === 'endpoint' ? 'Recibido' : 'Email preparado'}</div>
              <h3 className="h-section" style={{ marginBottom: 16 }}>Gracias, {form.name || 'equipo'}.</h3>
              <p className="t-lead" style={{ textAlign: 'center', margin: '0 auto 32px' }}>
                {submission.mode === 'endpoint'
                  ? <>Un ingeniero te escribirá a <strong>{form.email || 'tu correo'}</strong> en las próximas 24h laborables.</>
                  : <>Se ha abierto un email a <strong>{CONTACT_EMAIL}</strong> con tu solicitud. Si tu gestor de correo no se ha abierto, copia el resumen y envíalo manualmente.</>}
              </p>
              <div className="pv-contact-actions">
                {submission.mode !== 'endpoint' && (
                  <button
                    type="button"
                    className="btn btn-ghost"
                    onClick={async () => {
                      const copied = await copyContactSummary(submission.payload);
                      setSubmission(current => ({ ...current, copied }));
                    }}
                  >
                    {submission.copied ? 'Resumen copiado' : 'Copiar resumen'}
                  </button>
                )}
                <button type="button" onClick={reset} className="btn btn-ghost">Enviar otro</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function ContactPage({ navigate }) {
  const [submission, setSubmission] = React.useState({ state: 'idle', mode: null, payload: null, copied: false, error: '' });
  const [form, setForm] = React.useState({
    name: '',
    company: '',
    email: '',
    need: 'Proyecto integrado',
    message: '',
    privacyAccepted: false,
    honeypot: '', // spam trap - must stay empty
  });
  const submit = async (e) => {
    e.preventDefault();
    // Honeypot check
    if (form.honeypot) return;
    const validationError = validateContactForm(form);
    if (validationError) {
      setSubmission(s => ({ ...s, state: 'error', error: validationError }));
      return;
    }
    // Rate limit check
    if (!checkRateLimit()) {
      setSubmission(s => ({ ...s, state: 'error', error: 'Demasiados envíos en la última hora. Por favor, espera antes de intentarlo de nuevo.' }));
      return;
    }
    setSubmission({ state: 'sending', mode: null, payload: null, copied: false, error: '' });
    try {
      // Sanitize inputs before sending
      const sanitized = {
        name: sanitizeInput(form.name),
        company: sanitizeInput(form.company),
        email: sanitizeInput(form.email),
        need: sanitizeInput(form.need),
        message: sanitizeInput(form.message),
        privacyAccepted: form.privacyAccepted,
      };
      const result = await submitContactPayload(sanitized, 'contact-page');
      setSubmission({ state: 'done', mode: result.mode, payload: result.payload, copied: false, error: '' });
    } catch (error) {
      setSubmission({
        state: 'error',
        mode: null,
        payload: contactPayload(form, 'contact-page'),
        copied: false,
        error: 'No se ha podido enviar automáticamente. Copia el resumen o escríbenos directamente.',
      });
    }
  };
  const reset = () => {
    setSubmission({ state: 'idle', mode: null, payload: null, copied: false, error: '' });
    setForm({ name: '', company: '', email: '', need: 'Proyecto integrado', message: '', privacyAccepted: false, honeypot: '' });
  };
  const update = (key, value) => setForm(current => ({ ...current, [key]: value }));
  const options = ['Recarga DC', 'BESS', 'MT y distribución', 'Proyecto integrado'];

  return (
    <section className="pv-contact-page">
      <div className="pv-contact-shell">
        <div className="pv-contact-copy">
          <div className="pv-contact-kicker">Contacto</div>
          <h1>Cuéntanos qué necesitas dimensionar.</h1>
          <p>
            Con uso previsto, ubicación y potencia aproximada podemos preparar una primera orientación sin pedirte un dossier completo.
          </p>
          <div className="pv-contact-proof">
            <span>Respuesta en 24h laborables</span>
            <span>Respuesta técnica desde el inicio</span>
            <span>Interlocutor técnico asignado</span>
          </div>
          <div className="pv-contact-direct" style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
            <div style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--fg-mute)', letterSpacing: '.08em', marginBottom: 8 }}>CONTACTO DIRECTO</div>
            <a href={`mailto:${CONTACT_EMAIL}`} style={{ color: 'var(--fg-dim)', fontSize: 14, textDecoration: 'none' }}>{CONTACT_EMAIL}</a>
          </div>
        </div>

        <div className="pv-contact-card">
          {submission.state === 'idle' || submission.state === 'sending' || submission.state === 'error' ? (
            <form onSubmit={submit} noValidate>
              {/* Honeypot field — hidden from real users */}
              <div style={{ display: 'none' }} aria-hidden="true">
                <input
                  type="text"
                  name="website"
                  value={form.honeypot}
                  onChange={e => update('honeypot', e.target.value)}
                  tabIndex={-1}
                  autoComplete="off"
                />
              </div>

              <div className="pv-contact-grid">
                <ContactField label="Nombre" value={form.name} onChange={v => update('name', v)} required minLength={2} autoComplete="name" />
                <ContactField label="Empresa" value={form.company} onChange={v => update('company', v)} />
              </div>
              <ContactField label="Email de respuesta" type="email" value={form.email} onChange={v => update('email', v)} required autoComplete="email" />

              <div className="pv-contact-field">
                <label>Qué necesitas</label>
                <div className="pv-contact-options">
                  {options.map(option => (
                    <button
                      key={option}
                      type="button"
                      className={form.need === option ? 'is-active' : ''}
                      onClick={() => update('need', option)}
                    >
                      {option}
                    </button>
                  ))}
                </div>
              </div>

              <div className="pv-contact-field">
                <label>Resumen breve</label>
                <textarea
                  value={form.message}
                  onChange={e => update('message', e.target.value)}
                  rows={4}
                  minLength={10}
                  required
                  placeholder="Ej. hub de carga, parque BESS, potencia objetivo, ubicación aproximada..."
                />
              </div>

              <div className="pv-contact-field pv-contact-privacy">
                <label className="pv-checkbox-label">
                  <input
                    type="checkbox"
                    checked={form.privacyAccepted}
                    onChange={e => update('privacyAccepted', e.target.checked)}
                    required
                  />
                  <span>
                    He leído y acepto la{' '}
                    <a href="#privacy" onClick={e => { e.preventDefault(); navigate('privacy'); }}>
                      Política de Privacidad
                    </a>
                    . Pyrovolt tratará mis datos únicamente para responder a esta solicitud.
                  </span>
                </label>
              </div>

              <button className="pv-contact-submit" type="submit" disabled={submission.state === 'sending'}>
                {submission.state === 'sending' ? 'Preparando solicitud...' : 'Enviar solicitud'}
              </button>
              {submission.state === 'error' && (
                <div className="pv-contact-error">
                  {submission.error}
                  {submission.payload && (
                    <> <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a></>
                  )}
                </div>
              )}
            </form>
          ) : (
            <div className="pv-contact-success">
              <div>{submission.mode === 'endpoint' ? 'Recibido' : 'Email preparado'}</div>
              <h2>Gracias, {form.name || 'equipo'}.</h2>
              <p>
                {submission.mode === 'endpoint'
                  ? <>
                      Revisaremos la solicitud y responderemos a <strong>{form.email || 'tu correo'}</strong> con el siguiente paso.
                    </>
                  : <>
                      Se ha abierto un email a <strong>{CONTACT_EMAIL}</strong> con tu solicitud. Si tu gestor de correo no se ha abierto, copia el resumen y envíalo manualmente.
                    </>}
              </p>
              <div className="pv-contact-actions">
                {submission.mode !== 'endpoint' && (
                  <button
                    type="button"
                    onClick={async () => {
                      const copied = await copyContactSummary(submission.payload);
                      setSubmission(current => ({ ...current, copied }));
                    }}
                  >
                    {submission.copied ? 'Resumen copiado' : 'Copiar resumen'}
                  </button>
                )}
                <button type="button" onClick={reset}>Enviar otra solicitud</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── Newsletter Form ───────────────────────────────────────────────────────────
function NewsletterForm({ compact = false }) {
  const [email, setEmail] = React.useState('');
  const [consent, setConsent] = React.useState(false);
  const [website, setWebsite] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | done | error
  const [error, setError] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (website) return;
    const validationError = validateNewsletterForm(email, consent);
    if (validationError) {
      setError(validationError);
      setStatus('error');
      return;
    }
    setStatus('sending');
    setError('');
    try {
      if (NEWSLETTER_ENDPOINT) {
        const res = await fetch(NEWSLETTER_ENDPOINT, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            email: sanitizeInput(email),
            consent: true,
            source: 'website-newsletter',
          }),
        });
        if (!res.ok) throw new Error('endpoint error');
      }
      setStatus('done');
    } catch (err) {
      setStatus('error');
    }
  };

  if (status === 'done') {
    return (
      <div className="pv-newsletter-success pv-newsletter-message" role="status">
        <span aria-hidden="true">✓</span> Suscripción confirmada. Te mantendremos al día.
      </div>
    );
  }

  return (
    <form className={compact ? 'pv-newsletter-form pv-newsletter-compact' : 'pv-newsletter-form'} onSubmit={submit} noValidate>
      <div className="pv-honeypot" aria-hidden="true">
        <label>
          Web
          <input
            type="text"
            name="website"
            value={website}
            onChange={event => setWebsite(event.target.value)}
            tabIndex={-1}
            autoComplete="off"
          />
        </label>
      </div>
      <div className="pv-newsletter-row">
        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
          placeholder="tu@empresa.com"
          required
          aria-label="Email para newsletter"
        />
        <button type="submit" disabled={status === 'sending'}>
          {status === 'sending' ? '...' : 'Suscribirse'}
        </button>
      </div>
      <label className="pv-newsletter-consent">
        <input
          type="checkbox"
          checked={consent}
          onChange={e => setConsent(e.target.checked)}
          required
        />
        <span>
          Acepto recibir comunicaciones técnicas y comerciales de Pyrovolt. Puedo darme de baja en cualquier momento.{' '}
          <a href="#privacy" style={{ color: 'inherit', opacity: .7 }}>Privacidad</a>.
        </span>
      </label>
      <p className="pv-newsletter-legal">
        Usaremos tu email solo para enviarte novedades técnicas, recursos de producto y comunicaciones relacionadas con Pyrovolt. No cedemos tus datos a terceros salvo proveedores encargados del tratamiento.
      </p>
      {status === 'error' && (
        <div className="pv-contact-error pv-newsletter-message" role="alert" style={{ marginTop: 8 }}>
          {error || <>No se ha podido procesar. Inténtalo de nuevo o escríbenos a <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a>.</>}
        </div>
      )}
    </form>
  );
}

const ContactField = ({ label, value, onChange, type = 'text', placeholder, required = false, minLength, autoComplete }) => (
  <div className="pv-contact-field">
    <label>{label}{required ? ' *' : ''}</label>
    <input
      type={type}
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      required={required}
      minLength={minLength}
      autoComplete={autoComplete}
    />
  </div>
);

const Field = ({ label, value, onChange, type = 'text', placeholder }) => (
  <div style={{ marginBottom: 20 }}>
    <label className="t-mono" style={{ color: 'var(--fg-dim)', marginBottom: 8, display: 'block' }}>{label}</label>
    <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
      style={{ width: '100%', background: 'var(--bg-soft)', border: '1px solid var(--line)', borderRadius: 10, padding: '12px 14px', color: 'var(--fg)', font: 'inherit' }}/>
  </div>
);

const SpecRow2 = ({ k, v }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '18px 0', borderBottom: '1px solid var(--line)' }}>
    <div className="t-mono" style={{ color: 'var(--fg-dim)' }}>{k}</div>
    <div style={{ fontSize: 15 }}>{v}</div>
  </div>
);

function LegacyNewsPage({ navigate }) {
  const items = [
    { tag: 'Proyecto', title: 'Primera instalación 1 MW en un corredor logístico ibérico.', date: '12 Abr 2026', read: '4 min' },
    { tag: 'Producto', title: 'Pyrovolt amplía gama HPC con cabinas distribuidas de 1.250 kW.', date: '28 Mar 2026', read: '3 min' },
    { tag: 'Producto', title: 'Nueva familia de celdas SF6-free hasta 24 kV.', date: '14 Feb 2026', read: '2 min' },
    { tag: 'Proyecto', title: '6,26 MWh co-ubicados con una planta FV de gran escala en Iberia.', date: '30 Ene 2026', read: '5 min' },
    { tag: 'Producto', title: 'Modular DC ahora escalable en caliente hasta 320 kW.', date: '08 Ene 2026', read: '3 min' },
    { tag: 'Empresa', title: 'Pyrovolt amplía cobertura de soporte al mercado Benelux.', date: '15 Dic 2025', read: '2 min' },
  ];
  return (
    <>
      <section style={{ paddingTop: 140, paddingBottom: 60 }} className="container">
        <div className="h-eyebrow" style={{ marginBottom: 24, color: 'var(--accent-soft)' }}>Noticias</div>
        <h1 className="h-title" style={{ marginBottom: 24 }}>Lo que está pasando en <It>Pyrovolt</It>.</h1>
      </section>
      <section className="container" style={{ paddingBottom: 120 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {items.map((it, i) => (
            <article key={i} className="tile" style={{ minHeight: 400, padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ marginBottom: 24 }}>
                <BlueprintTile tag={it.tag} height={200} dark={true}/>
              </div>
              <div>
                <div className="t-mono" style={{ color: 'var(--fg-mute)', marginBottom: 12 }}>{it.tag} · {it.date} · {it.read}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.2, marginBottom: 16 }}>
                  {it.title}
                </h4>
                <span className="btn-text" style={{ fontSize: 13 }}>Leer</span>
              </div>
            </article>
          ))}
        </div>
      </section>

      <CTAStrip navigate={navigate}/>
    </>
  );
}



function CompanyPage({ navigate }) {
  const services = ['Recarga DC', 'BESS', 'MT SF6-free', 'Software', 'EMS', 'OCPP'];
  const pillars = [
    ['Ingeniería aplicada', 'Un equipo técnico que conecta recarga, almacenamiento, media tensión y software en una misma arquitectura.'],
    ['Menos interfaces', 'Diseñamos el proyecto completo para evitar proveedores desconectados y zonas grises en ejecución.'],
    ['Escalabilidad real', 'Desde un punto DC compacto hasta hubs HPC, BESS utility-scale y distribución MT completa.'],
    ['Operación mantenible', 'Supervisión, control remoto, alarmas y soporte para que la infraestructura sea más fácil de explotar.'],
  ];

  return (
    <>
      <main className="pv-company-v2">
        <div className="pv-company-shell-v2">
          <section className="pv-company-frame-v2">
            <div className="pv-company-topbar-v2">
              <div className="pv-company-topbar-pill-v2">
                <strong>Pyrovolt</strong>
                <nav>
                  <span>Por qué Pyrovolt</span>
                  <span>Empresa</span>
                  <span>Soluciones</span>
                </nav>
                <button onClick={() => navigate('contact')}>Contactar</button>
              </div>
            </div>

            <section className="pv-company-hero-v2">
              <Reveal>
                <h1>Infraestructura energética lista para pasar a obra.</h1>
                <p>
                  Recarga DC, BESS, media tensión y software coordinados desde el layout inicial para reducir interfaces, compras duplicadas y decisiones tardías.
                </p>
                <div className="pv-company-hero-actions-v2">
                  <a className="btn btn-primary" href="#contact" onClick={(e) => { e.preventDefault(); navigate('contact'); }}>Preparar consulta técnica</a>
                </div>
              </Reveal>
            </section>

            <section className="pv-company-summary-v2">
              <Reveal className="pv-company-services-card-v2">
                <h3>Servicios</h3>
                <div className="pv-company-chip-cloud-v2">
                  {services.map((item) => <span key={item}>{item}</span>)}
                </div>
              </Reveal>

              <div className="pv-company-stack-v2">
                <Reveal className="pv-company-metric-card-v2 is-dark">
                  <strong>1 MW+</strong>
                  <p>arquitecturas DC para hubs de recarga y sistemas distribuidos.</p>
                </Reveal>
                <Reveal className="pv-company-metric-card-v2">
                  <strong>6,26 MWh</strong>
                  <p>capacidad de referencia en soluciones BESS en contenedor.</p>
                </Reveal>
              </div>

              <Reveal className="pv-company-quote-card-v2">
                <span>“</span>
                  <p>La parte eléctrica, el almacenamiento y la recarga deben decidirse juntas antes de cerrar obra civil, acometida y explotación.</p>
                <small>Criterio de proyecto</small>
              </Reveal>
            </section>

            <section className="pv-company-pillars-v2">
              <Reveal className="pv-company-pillars-intro-v2">
              <h2>Las decisiones de potencia se toman mejor antes de cerrar compras, obra y operación.</h2>
              </Reveal>

              <div className="pv-company-pillars-grid-v2">
                {pillars.map(([title, desc]) => (
                  <Reveal key={title} className="pv-company-pillar-v2">
                    <i />
                    <h3>{title}</h3>
                    <p>{desc}</p>
                  </Reveal>
                ))}
              </div>
            </section>

            <section className="pv-company-more-head-v2">
              <Reveal>
                <h2>Un equipo para proyectos donde red, equipos y software se cruzan.</h2>
              </Reveal>
              <Reveal>
                <p>
                  Pyrovolt ayuda a convertir requisitos eléctricos, producto y explotación diaria en una propuesta técnica legible desde la primera conversación.
                </p>
              </Reveal>
            </section>

            <section className="pv-company-more-grid-v2">
              <Reveal className="pv-company-visual-card-v2">
                <div className="pv-company-visual-inner-v2">
                <div className="pv-company-visual-badge-v2">Arquitectura energética coordinada</div>
                  <div className="pv-company-visual-lines-v2">
                    <span />
                    <span />
                    <span />
                  </div>
                </div>
              </Reveal>

              <Reveal className="pv-company-team-card-v2">
                <h3>Equipo de proyecto</h3>
                <p>
                  Producto, ingeniería y soporte comparten el mismo contexto para que las decisiones no se pierdan entre propuesta, suministro y puesta en marcha.
                </p>
              </Reveal>
            </section>
          </section>
        </div>
      </main>

      <CTAStrip navigate={navigate} />
    </>
  );
}


function NewsPage({ navigate }) {
  const featured = { tag: 'Guía principal', metric: '1 MW+', title: 'Cómo elegir arquitectura de recarga para un hub DC.', text: 'Criterios rápidos para comparar potencia, obra, operación y crecimiento por fases antes de cerrar una solución.', route: 'chargers' };
  const posts = [
    { tag: 'Recarga DC', title: 'Cuándo elegir compact, modular, stand-alone o sistema distribuido.', meta: 'Guía de selección', route: 'chargers' },
    { tag: 'Almacenamiento', title: 'Diferencias prácticas entre armario ESS y contenedor BESS.', meta: 'Criterio técnico', route: 'storage' },
    { tag: 'MT', title: 'Qué debe resolverse antes de pedir celdas, trafo o centro prefabricado.', meta: 'Checklist de proyecto', route: 'mt' },
    { tag: 'Software', title: 'Qué debe ver el operador antes de escalar una red de recarga.', meta: 'Operación', route: 'app' },
    { tag: 'Empresa', title: 'Qué revisamos en una primera propuesta integrada.', meta: 'Método de trabajo', route: 'company' },
  ];

  return (
    <>
      <main className="pv-news-v2">
        <div className="pv-news-shell-v2">
          <section className="pv-news-frame-v2">
            <section className="pv-news-hero-v2">
              <Reveal className="pv-news-hero-copy-v2">
                <div className="pv-company-pill">Recursos</div>
                <h1>Guías para tomar mejores decisiones técnicas.</h1>
                <p>{featured.text}</p>
              </Reveal>

              <Reveal as="a" href={'#' + featured.route} className="pv-news-featured-v2 pv-card-link" onClick={(event) => { event.preventDefault(); navigate(featured.route); }}>
                <span>{featured.tag}</span>
                <strong>{featured.metric}</strong>
                <h2>{featured.title}</h2>
                <p>Abrir guía →</p>
              </Reveal>
            </section>

            <section className="pv-news-grid-v2">
              {posts.map((post, index) => (
                <Reveal
                  key={post.title}
                  className={index === 0 ? 'pv-news-card-v2 pv-card-link is-wide' : 'pv-news-card-v2 pv-card-link'}
                  as="a"
                  href={'#' + post.route}
                  onClick={(event) => { event.preventDefault(); navigate(post.route); }}
                >
                  <span>{post.tag}</span>
                  <h3>{post.title}</h3>
                  <p>{post.meta}</p>
                </Reveal>
              ))}
            </section>
          </section>
        </div>
      </main>

      <CTAStrip navigate={navigate} />
    </>
  );
}

// ─── Legal Pages ──────────────────────────────────────────────────────────────
function LegalSection({ title, children }) {
  return (
    <div className="pv-legal-section">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

function LegalIdentityList() {
  return (
    <ul className="pv-legal-identity">
      <li><strong>Denominación social:</strong> {LEGAL_PROFILE.companyName}</li>
      <li><strong>Nombre comercial:</strong> {LEGAL_PROFILE.commercialName}</li>
      <li><strong>CIF/NIF:</strong> {LEGAL_PROFILE.taxId}</li>
      <li><strong>Domicilio social:</strong> {LEGAL_PROFILE.address}</li>
      <li><strong>Email:</strong> <a href={`mailto:${LEGAL_PROFILE.email}`}>{LEGAL_PROFILE.email}</a></li>
      <li><strong>Dominio:</strong> {LEGAL_PROFILE.domain}</li>
    </ul>
  );
}

function PolicyPage({ type, navigate }) {

  const PrivacyContent = () => (
    <>
      <LegalSection title="1. Responsable del tratamiento">
        <LegalIdentityList />
        <p>Estos son los datos identificativos del responsable del tratamiento para este sitio web.</p>
      </LegalSection>
      <LegalSection title="2. Datos que recopilamos">
        <p>A través del formulario de contacto recogemos los siguientes datos personales:</p>
        <ul>
          <li>Nombre y apellidos</li>
          <li>Nombre de empresa</li>
          <li>Dirección de correo electrónico</li>
          <li>Información sobre el proyecto o necesidad técnica</li>
        </ul>
        <p>No recopilamos datos sensibles ni datos de menores de edad.</p>
      </LegalSection>
      <LegalSection title="3. Finalidad del tratamiento">
        <p>Los datos facilitados se utilizan exclusivamente para:</p>
        <ul>
          <li>Responder a solicitudes técnicas o comerciales iniciadas por el usuario.</li>
          <li>Preparar propuestas o presupuestos a petición expresa del interesado.</li>
          <li>Enviar comunicaciones comerciales relacionadas con productos Pyrovolt, si el usuario ha dado su consentimiento explícito.</li>
        </ul>
      </LegalSection>
      <LegalSection title="4. Base legal del tratamiento">
        <p>El tratamiento de datos se realiza bajo las siguientes bases legales del RGPD (Reglamento UE 2016/679):</p>
        <ul>
          <li><strong>Consentimiento</strong> (art. 6.1.a): para el envío de comunicaciones comerciales.</li>
          <li><strong>Interés legítimo</strong> (art. 6.1.f): para responder a consultas comerciales iniciadas por el usuario.</li>
          <li><strong>Ejecución de un contrato</strong> (art. 6.1.b): cuando el tratamiento sea necesario para la relación contractual.</li>
        </ul>
      </LegalSection>
      <LegalSection title="5. Conservación de los datos">
        <p>Los datos se conservarán mientras exista una conversación activa o una relación comercial. Transcurrido ese período, serán bloqueados y posteriormente eliminados conforme a la normativa aplicable.</p>
      </LegalSection>
      <LegalSection title="6. Destinatarios">
        <p>Los datos no se cederán a terceros salvo obligación legal. Podremos utilizar proveedores de servicios de correo electrónico o CRM que actúen como encargados del tratamiento bajo acuerdo RGPD.</p>
      </LegalSection>
      <LegalSection title="7. Derechos del interesado">
        <p>Puedes ejercer tus derechos de acceso, rectificación, supresión, portabilidad, limitación y oposición enviando un email a <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a>. También tienes derecho a presentar una reclamación ante la Agencia Española de Protección de Datos (aepd.es).</p>
      </LegalSection>
      <LegalSection title="8. Transferencias internacionales">
        <p>Si se realizan transferencias de datos fuera del Espacio Económico Europeo, se adoptarán las garantías adecuadas conforme al RGPD (cláusulas contractuales tipo, decisiones de adecuación, etc.).</p>
      </LegalSection>
    </>
  );

  const CookiesContent = () => (
    <>
      <LegalSection title="Responsable del sitio">
        <LegalIdentityList />
      </LegalSection>
      <LegalSection title="1. ¿Qué son las cookies?">
        <p>Las cookies son pequeños archivos de texto que se almacenan en tu dispositivo cuando visitas un sitio web. Nos permiten recordar tus preferencias y mejorar tu experiencia de navegación.</p>
      </LegalSection>
      <LegalSection title="2. Cookies que utilizamos">
        <div className="pv-legal-table">
          <div className="pv-legal-table-row pv-legal-table-head">
            <span>Nombre</span><span>Tipo</span><span>Finalidad</span><span>Duración</span>
          </div>
          <div className="pv-legal-table-row">
            <span>pyrovolt-theme-v2</span><span>Técnica</span><span>Recuerda el tema visual (claro/oscuro)</span><span>Persistente</span>
          </div>
          <div className="pv-legal-table-row">
            <span>pyrovolt-language-v2</span><span>Técnica</span><span>Recuerda el idioma seleccionado</span><span>Persistente</span>
          </div>
          <div className="pv-legal-table-row">
            <span>pv-cookie-consent</span><span>Técnica</span><span>Almacena tu preferencia de cookies</span><span>1 año</span>
          </div>
          <div className="pv-legal-table-row">
            <span>pv-contact-rate</span><span>Técnica</span><span>Prevención de spam en formulario</span><span>1 hora</span>
          </div>
          <div className="pv-legal-table-row">
            <span>_ga / _gid</span><span>Analítica</span><span>Google Analytics — análisis de uso (si se activa)</span><span>2 años / 24h</span>
          </div>
          <div className="pv-legal-table-row">
            <span>_fbp</span><span>Marketing</span><span>Meta Pixel — seguimiento de conversiones (si se activa)</span><span>90 días</span>
          </div>
        </div>
      </LegalSection>
      <LegalSection title="3. Cookies técnicas">
        <p>Las cookies técnicas son necesarias para el correcto funcionamiento del sitio. No requieren consentimiento según la LSSI y el RGPD. Almacenamos en localStorage las preferencias de tema e idioma.</p>
      </LegalSection>
      <LegalSection title="4. Cookies analíticas y de marketing">
        <p>Las cookies analíticas (Google Analytics) y de marketing (Meta Pixel) sólo se activarán si das tu consentimiento explícito a través del banner de cookies. Puedes modificar tus preferencias en cualquier momento haciendo clic en "Configurar cookies" en el pie de página.</p>
      </LegalSection>
      <LegalSection title="5. Gestión de cookies">
        <p>Puedes gestionar o rechazar las cookies no esenciales en cualquier momento:</p>
        <ul>
          <li>A través del panel de preferencias de cookies de este sitio.</li>
          <li>Configurando tu navegador para rechazar cookies.</li>
          <li>Eliminando las cookies ya almacenadas desde la configuración de tu navegador.</li>
        </ul>
        <p>Ten en cuenta que deshabilitar ciertas cookies puede afectar a la funcionalidad del sitio (por ejemplo, no se recordará tu idioma preferido).</p>
      </LegalSection>
      <LegalSection title="6. Contacto">
        <p>Para cualquier consulta sobre el uso de cookies, contacta con nosotros en <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a>.</p>
      </LegalSection>
    </>
  );

  const LegalNoticeContent = () => (
    <>
      <LegalSection title="1. Datos identificativos">
        <p>En cumplimiento con el deber de información establecido en la Ley 34/2002, de 11 de julio, de Servicios de la Sociedad de la Información y del Comercio Electrónico (LSSI-CE), se informa:</p>
        <LegalIdentityList />
      </LegalSection>
      <LegalSection title="2. Objeto y ámbito de aplicación">
        <p>El presente Aviso Legal regula el uso del sitio web pyrovolt.es, titularidad de {LEGAL_PROFILE.companyName}. El acceso y uso de este sitio web implica la aceptación plena de las condiciones aquí establecidas.</p>
      </LegalSection>
      <LegalSection title="3. Propiedad intelectual e industrial">
        <p>Todos los contenidos del sitio web (textos, imágenes, logotipos, diseño, código fuente) son propiedad de Pyrovolt o dispone de los derechos necesarios para su uso. Queda prohibida su reproducción, distribución o modificación sin autorización expresa y por escrito.</p>
      </LegalSection>
      <LegalSection title="4. Exclusión de responsabilidad">
        <p>Pyrovolt no se responsabiliza de los daños derivados del uso del sitio web, de errores en los contenidos o de la imposibilidad de acceso. La información técnica y comercial publicada tiene carácter orientativo y puede ser modificada sin previo aviso.</p>
      </LegalSection>
      <LegalSection title="5. Legislación aplicable y jurisdicción">
        <p>Este aviso legal se rige por la legislación española. Para cualquier controversia derivada del uso del sitio web, las partes se someten a los juzgados y tribunales competentes conforme a la normativa vigente.</p>
      </LegalSection>
    </>
  );

  const TermsContent = () => (
    <>
      <LegalSection title="Responsable contractual">
        <LegalIdentityList />
      </LegalSection>
      <LegalSection title="1. Objeto">
        <p>Las presentes Condiciones Generales regulan la relación comercial entre Pyrovolt y sus clientes en el suministro de equipos, sistemas y servicios de infraestructura energética (cargadores EV, sistemas BESS y equipos de media tensión).</p>
      </LegalSection>
      <LegalSection title="2. Formación del contrato">
        <p>Los contratos se formalizan mediante propuesta técnica o presupuesto aceptado por escrito por el cliente. La información publicada en el sitio web tiene carácter informativo y no constituye oferta vinculante.</p>
      </LegalSection>
      <LegalSection title="3. Precios y condiciones de pago">
        <p>Los precios se establecen en cada propuesta comercial. Salvo indicación contraria, los precios no incluyen IVA ni costes de transporte, instalación o puesta en marcha. Las condiciones de pago se fijan en cada contrato.</p>
      </LegalSection>
      <LegalSection title="4. Entrega y plazos">
        <p>Los plazos de entrega indicados son estimativos y pueden estar sujetos a disponibilidad de fabricación y cadena de suministro. Pyrovolt no será responsable de retrasos debidos a causas de fuerza mayor.</p>
      </LegalSection>
      <LegalSection title="5. Garantías">
        <p>Los equipos Pyrovolt cuentan con garantía de fabricante según las condiciones específicas de cada producto. La garantía cubre defectos de fabricación y no incluye daños por uso indebido, instalación incorrecta o agentes externos.</p>
      </LegalSection>
      <LegalSection title="6. Limitación de responsabilidad">
        <p>Pyrovolt no será responsable de daños indirectos, lucro cesante o pérdidas de datos derivadas del uso o mal uso de sus equipos. La responsabilidad máxima de Pyrovolt se limita al importe del contrato correspondiente.</p>
      </LegalSection>
      <LegalSection title="7. Propiedad intelectual">
        <p>Todo el software, firmware, documentación técnica y diseños proporcionados son propiedad de Pyrovolt o sus licenciantes. El cliente obtiene una licencia de uso no exclusiva e intransferible.</p>
      </LegalSection>
      <LegalSection title="8. Legislación aplicable">
        <p>Las presentes condiciones se rigen por el derecho español. Para cualquier controversia, las partes se someten a los tribunales de la jurisdicción correspondiente al domicilio de Pyrovolt.</p>
      </LegalSection>
    </>
  );

  const pages = {
    privacy: {
      kicker: 'Privacidad',
      title: 'Política de Privacidad',
      updated: '18 de mayo de 2026',
      Content: PrivacyContent,
    },
    cookies: {
      kicker: 'Cookies',
      title: 'Política de Cookies',
      updated: '18 de mayo de 2026',
      Content: CookiesContent,
    },
    legal: {
      kicker: 'Aviso Legal',
      title: 'Aviso Legal',
      updated: '18 de mayo de 2026',
      Content: LegalNoticeContent,
    },
    terms: {
      kicker: 'Términos',
      title: 'Términos y Condiciones',
      updated: '18 de mayo de 2026',
      Content: TermsContent,
    },
  };
  const pg = pages[type] || pages.legal;
  const { Content } = pg;

  return (
    <section className="pv-policy-page">
      <div className="pv-policy-shell">
        <button type="button" className="pv-policy-back" onClick={() => navigate('home')}>← Volver al inicio</button>
        <div className="pv-contact-kicker">{pg.kicker}</div>
        <h1>{pg.title}</h1>
        <div className="pv-legal-meta">Última actualización: {pg.updated}</div>
        <div className="pv-legal-body">
          <Content />
        </div>
        <div className="pv-policy-actions">
          <button type="button" className="pv-contact-submit" onClick={() => navigate('contact')}>Hablar con Pyrovolt</button>
        </div>
      </div>
    </section>
  );
}


Object.assign(window, { CompanyPage, ContactPage, NewsPage, PolicyPage, NewsletterForm });
