const ppBarLink = { display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0, whiteSpace: 'nowrap', color: 'inherit', textDecoration: 'none' };
const ppKicker = { fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' };
const ppH2 = { fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', lineHeight: 'var(--lh-snug)', color: 'var(--text-primary)', margin: '8px 0 16px' };
const ppBody = { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-normal)', margin: '0 0 16px' };
const ppWrap = { maxWidth: 'var(--container-max)', margin: '0 auto' };
const PP_STATE_COLORS = ['#8492A8', '#2B6CB0', '#B7791F', '#2F855A'];

// Maqueta del portal: calendario de un mes con los cuatro estados. Datos de muestra,
// no de un cliente real; sirve para que se entienda la pantalla antes de entrar.
function PulseMock({ L, portalUrl }) {
  const cells = [
    { d: 1 }, { d: 2, s: 3, net: 'IG' }, { d: 3 }, { d: 4, s: 3, net: 'FB' }, { d: 5 }, { d: 6 }, { d: 7, s: 3, net: 'IG' },
    { d: 8 }, { d: 9, s: 2, net: 'IG' }, { d: 10 }, { d: 11, s: 2, net: 'FB' }, { d: 12 }, { d: 13 }, { d: 14, s: 1, net: 'IG' },
    { d: 15 }, { d: 16, s: 1, net: 'IG' }, { d: 17 }, { d: 18, s: 0, net: 'FB' }, { d: 19 }, { d: 20 }, { d: 21, s: 0, net: 'IG' },
  ];
  return (
    <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid rgba(255,255,255,.22)', boxShadow: '0 24px 48px rgba(0,0,0,.4)', background: '#fff' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: '#0B1F3A', color: '#fff' }}>
        <svg width="18" height="18" viewBox="0 0 22 22" aria-hidden="true"><rect x="2" y="9" width="4" height="11" rx="1" fill="#fff" /><rect x="9" y="4" width="4" height="16" rx="1" fill="#fff" /><rect x="16" y="1" width="4" height="19" rx="1" fill="#fff" /></svg>
        <span style={{ fontSize: 13.5, fontWeight: 700 }}>Portal Pulse</span>
        <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'rgba(255,255,255,.6)' }}>{portalUrl}</span>
      </div>
      <div style={{ padding: '16px 16px 18px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,minmax(0,1fr))', gap: 5 }}>
          {cells.map((c, i) => (
            <div key={i} style={{ aspectRatio: '1 / 1', borderRadius: 7, border: '1px solid var(--border-subtle)', background: c.s === undefined ? '#fff' : 'var(--surface-alt)', padding: 5, display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
              <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-tertiary, #7B8794)' }}>{c.d}</span>
              {c.s !== undefined && (
                <React.Fragment>
                  <span style={{ height: 4, borderRadius: 2, background: PP_STATE_COLORS[c.s], width: '80%' }} />
                  <span style={{ fontSize: 9.5, fontWeight: 700, color: PP_STATE_COLORS[c.s] }}>{c.net}</span>
                </React.Fragment>
              )}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border-subtle)' }}>
          {L.states.map((s, i) => (
            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 600, color: 'var(--text-secondary)' }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: PP_STATE_COLORS[i] }} />{s.n}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function PortalPulse({ Button, Icon, NavBar, Footer, onNav, t, L, portalUrl, waHref, assetBase }) {
  const A = assetBase || '';
  const P = t.code === 'EN' ? 'en/' : '';
  const SVC = t.code === 'EN' ? 'innovations/services' : 'innovations/servicios';
  const [open, setOpen] = React.useState(0);
  const PORTAL = 'https://' + portalUrl;
  return (
    <div data-page="pulse" data-page-auto="1" style={{ fontFamily: 'var(--font-body)', background: '#fff' }}>
      <NavBar
        logo={<img src={A + "assets/logo-primary.jpg"} alt="Canaan Innovations" style={{ height: 46, borderRadius: 8, display: 'block' }} />}
        links={t.nav}
        active={t.nav[1]}
        onNavigate={(l) => onNav && onNav(t.navMap[l])}
        cta={<Button size="sm" onClick={() => onNav && onNav('contact')}>{t.cta}</Button>}
        topBar={<React.Fragment>
          <a href="https://wa.me/17867097143" target="_blank" rel="noopener noreferrer" style={ppBarLink}><Icon name="whatsapp" size={14} />+1 (786) 709-7143</a>
          <a href="https://wa.me/17542979520" target="_blank" rel="noopener noreferrer" style={ppBarLink}><Icon name="whatsapp" size={14} />+1 (754) 297-9520</a>
          <a href="mailto:sales@canaangroupsolutions.com" style={ppBarLink}><Icon name="mail" size={14} />sales@canaangroupsolutions.com</a>
          <a href="https://www.instagram.com/canaan.innovations/" target="_blank" rel="noopener noreferrer" style={ppBarLink}><Icon name="instagram" size={14} />canaan.innovations</a>
        </React.Fragment>}
      />

      <section style={{ position: 'relative', background: 'var(--gradient-hero)', color: '#fff', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(' + A + 'assets/pattern-circuit-lines.png)', backgroundSize: '70% auto', backgroundPosition: 'left bottom', backgroundRepeat: 'no-repeat', opacity: .85 }} />
        <div style={Object.assign({ position: 'relative', padding: '26px var(--container-pad) 0' }, ppWrap)}>
          <nav aria-label="breadcrumb" style={{ display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 13, color: 'rgba(255,255,255,.7)' }}>
            <a href={P + "innovations"} style={{ color: 'rgba(255,255,255,.78)', textDecoration: 'none' }}>{L.crumbHome}</a>
            <span aria-hidden="true">/</span>
            <a href={P + SVC} style={{ color: 'rgba(255,255,255,.78)', textDecoration: 'none' }}>{L.crumbServices}</a>
            <span aria-hidden="true">/</span>
            <span style={{ color: '#fff' }}>{L.h1}</span>
          </nav>
        </div>
        <div style={Object.assign({ position: 'relative', padding: '30px var(--container-pad) 78px', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 480px', gap: 46, alignItems: 'center' }, ppWrap)} data-grid="hero">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <span style={{ width: 34, height: 2, background: 'var(--brand-accent-light)' }} />
              <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--brand-accent-light)' }}>{L.kicker}</span>
            </div>
            <h1 style={{ fontSize: 'var(--fs-display-xl)', fontWeight: 800, lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-tight)', margin: '0 0 18px' }}>{L.h1}</h1>
            <p style={{ fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.86)', lineHeight: 'var(--lh-normal)', maxWidth: 520, margin: '0 0 26px' }}>{L.sub}</p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href={PORTAL} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '14px 24px', borderRadius: 'var(--radius-md)', background: '#fff', color: '#0B1F3A', textDecoration: 'none', fontWeight: 700, fontSize: 15 }}>{L.enter}</a>
              <a href={waHref} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '13px 22px', borderRadius: 'var(--radius-md)', border: '1px solid rgba(255,255,255,.4)', color: '#fff', textDecoration: 'none', fontWeight: 700, fontSize: 15 }}><Icon name="whatsapp" size={17} />{L.ask}</a>
            </div>
            <p style={{ margin: '18px 0 0', fontSize: 13, color: 'rgba(255,255,255,.6)' }}>{portalUrl}</p>
          </div>
          <PulseMock L={L} portalUrl={portalUrl} />
        </div>
      </section>

      <section style={{ padding: '64px var(--container-pad) 44px' }}>
        <div style={Object.assign({ maxWidth: 820 }, { margin: '0 auto' })}>
          {L.intro.map((p, i) => <p key={i} style={i === 0 ? Object.assign({}, ppBody, { fontSize: 'calc(var(--fs-body-lg) + 2px)', color: 'var(--text-primary)' }) : ppBody}>{p}</p>)}
        </div>
      </section>

      <section style={{ padding: '58px var(--container-pad)', background: 'var(--surface-alt)' }}>
        <div style={ppWrap}>
          <span style={ppKicker}>{L.kicker}</span>
          <h2 style={ppH2}>{L.seeTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,minmax(0,1fr))', gap: 20, marginTop: 26 }} data-grid="4">
            {L.see.map((it, i) => (
              <div key={i} style={{ background: '#fff', borderRadius: 'var(--radius-lg)', padding: '24px 22px', boxShadow: 'var(--shadow-sm)', border: '1px solid var(--border-subtle)' }}>
                <div style={{ width: 42, height: 42, borderRadius: 10, background: 'var(--brand-primary)', color: '#fff', display: 'grid', placeItems: 'center', marginBottom: 14 }}><Icon name={['chart', 'code', 'check', 'chip'][i] || 'check'} size={20} /></div>
                <h3 style={{ fontSize: 16.5, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px', lineHeight: 1.3 }}>{it.t}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)', margin: 0 }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '58px var(--container-pad)' }}>
        <div style={ppWrap}>
          <h2 style={ppH2}>{L.statesTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,minmax(0,1fr))', gap: 22, marginTop: 24 }} data-grid="4">
            {L.states.map((s, i) => (
              <div key={i} style={{ borderTop: '3px solid ' + PP_STATE_COLORS[i], paddingTop: 16 }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: PP_STATE_COLORS[i], letterSpacing: '.1em', marginBottom: 8 }}>{'0' + (i + 1)}</div>
                <h3 style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>{s.n}</h3>
                <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)', margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '58px var(--container-pad)', background: 'var(--surface-inverse)', color: '#fff' }}>
        <div style={Object.assign({ display: 'grid', gridTemplateColumns: 'minmax(0,.9fr) minmax(0,1.1fr)', gap: 52, alignItems: 'start' }, ppWrap)} data-grid="2">
          <div>
            <h2 style={Object.assign({}, ppH2, { color: '#fff' })}>{L.accessTitle}</h2>
            <p style={{ fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.82)', lineHeight: 'var(--lh-normal)', margin: 0 }}>{L.accessSub}</p>
          </div>
          <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {L.access.map((a, i) => (
              <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 15.5, color: 'rgba(255,255,255,.88)', lineHeight: 'var(--lh-normal)', paddingBottom: 12, borderBottom: i < L.access.length - 1 ? '1px solid rgba(255,255,255,.14)' : 'none' }}>
                <span style={{ fontWeight: 800, color: 'var(--brand-accent-light)', fontSize: 13, marginTop: 3 }}>{'0' + (i + 1)}</span>{a}
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section style={{ padding: '58px var(--container-pad)', background: 'var(--surface-alt)' }}>
        <div style={ppWrap}>
          <h2 style={ppH2}>{L.roadTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,minmax(0,1fr))', gap: 22, marginTop: 24 }} data-grid="2">
            {L.road.map((r, i) => (
              <div key={i} style={{ background: '#fff', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: '26px 24px' }}>
                <span style={{ display: 'inline-block', padding: '5px 12px', borderRadius: 999, fontSize: 11.5, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', background: i === 0 ? 'rgba(47,133,90,.12)' : 'rgba(43,108,176,.12)', color: i === 0 ? '#2F855A' : '#2B6CB0' }}>{r.tag}</span>
                <h3 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: '14px 0 8px' }}>{r.t}</h3>
                <p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)', margin: 0 }}>{r.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '58px var(--container-pad)' }}>
        <div style={Object.assign({ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 52, alignItems: 'start' }, ppWrap)} data-grid="2">
          <div>
            <h2 style={ppH2}>{L.forTitle}</h2>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {L.forWho.map((f, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15.5, color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)' }}>
                  <span style={{ color: 'var(--brand-accent)', marginTop: 2 }}><Icon name="check" size={18} strokeWidth={2.2} /></span>{f}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <span style={ppKicker}>{L.faqLabel}</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16 }}>
              {L.faq.map((f, i) => (
                <div key={i} style={{ border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
                  <button onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i} style={{ width: '100%', display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'space-between', textAlign: 'left', padding: '16px 18px', background: open === i ? 'var(--surface-alt)' : '#fff', border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 15.5, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.35 }}>
                    <h3 style={{ margin: 0, fontSize: 'inherit', fontWeight: 'inherit' }}>{f.q}</h3>
                    <span style={{ flexShrink: 0, color: 'var(--brand-accent)', fontSize: 22, lineHeight: 1 }}>{open === i ? '−' : '+'}</span>
                  </button>
                  <div style={{ display: open === i ? 'block' : 'none', padding: '0 18px 18px' }}>
                    <p style={{ margin: 0, fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)' }}>{f.a}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ position: 'relative', background: 'var(--surface-inverse)', color: '#fff', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(' + A + 'assets/pattern-circuit-lines.png)', backgroundSize: '60% auto', backgroundPosition: 'right center', backgroundRepeat: 'no-repeat', opacity: .9 }} />
        <div style={Object.assign({ position: 'relative', padding: '74px var(--container-pad)', display: 'flex', gap: 40, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' }, ppWrap)}>
          <div style={{ maxWidth: 560 }}>
            <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, margin: '0 0 12px', letterSpacing: 'var(--ls-tight)' }}>{L.ctaTitle}</h2>
            <p style={{ color: 'rgba(255,255,255,.82)', fontSize: 'var(--fs-body-lg)', margin: 0 }}>{L.ctaSub}</p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href={PORTAL} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '16px 26px', borderRadius: 'var(--radius-md)', background: '#fff', color: '#0B1F3A', textDecoration: 'none', fontWeight: 700, fontSize: 15 }}>{L.enter}</a>
            <a href={waHref} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '15px 24px', borderRadius: 'var(--radius-md)', border: '1px solid rgba(255,255,255,.4)', color: '#fff', textDecoration: 'none', fontWeight: 700, fontSize: 15 }}><Icon name="whatsapp" size={17} />{L.ask}</a>
          </div>
        </div>
      </section>

      <Footer
        langCode={t.code}
        links={t.nav}
        navLabel={t.footer.nav}
        contactLabel={t.footer.contact}
        blurb={t.footer.blurb}
        phone="+1 (786) 709-7143 / +1 (754) 297-9520"
        email="sales@canaangroupsolutions.com"
        address="13925 SW 140th St, Miami, FL 33186"
        instagram="@canaan.innovations"
      />
    </div>
  );
}
window.PortalPulse = PortalPulse;