const slBarLink = { display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0, whiteSpace: 'nowrap', color: 'inherit', textDecoration: 'none' };
const slKicker = { fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' };
const slH2 = { fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', lineHeight: 'var(--lh-snug)', color: 'var(--text-primary)', margin: '8px 0 16px' };
const slBody = { color: 'var(--text-secondary)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-normal)', margin: '0 0 16px' };
const slWrap = { maxWidth: 'var(--container-max)', margin: '0 auto' };

function ServiceLanding({ Button, Badge, Card, Tag, Icon, NavBar, Footer, onNav, t, L, local, others, 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);
  return (
    <div 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={slBarLink}><Icon name="whatsapp" size={14} />+1 (786) 709-7143</a>
          <a href="https://wa.me/17542979520" target="_blank" rel="noopener noreferrer" style={slBarLink}><Icon name="whatsapp" size={14} />+1 (754) 297-9520</a>
          <a href="mailto:sales@canaangroupsolutions.com" style={slBarLink}><Icon name="mail" size={14} />sales@canaangroupsolutions.com</a>
          <a href="https://www.instagram.com/canaan.innovations/" target="_blank" rel="noopener noreferrer" style={slBarLink}><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' }, slWrap)}>
          <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' }}>{local.crumbHome}</a>
            <span aria-hidden="true">/</span>
            <a href={P + SVC} style={{ color: 'rgba(255,255,255,.78)', textDecoration: 'none' }}>{local.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) 520px', gap: 46, alignItems: 'center' }, slWrap)} 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-lg)', fontWeight: 800, lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-tight)', margin: '0 0 18px', maxWidth: 560 }}>{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' }}>
              <Button size="lg" onClick={() => onNav && onNav('contact')}>{local.quote}</Button>
              <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} />{local.call}</a>
            </div>
          </div>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid rgba(255,255,255,.22)', boxShadow: '0 24px 48px rgba(0,0,0,.4)' }}>
            <img src={A + L.img} alt={L.h1} style={{ display: 'block', width: '100%', height: 320, objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(160deg, rgba(0,42,80,.2), rgba(0,42,80,0) 55%)' }} />
          </div>
        </div>
      </section>

      <section style={{ padding: '64px var(--container-pad)' }}>
        <div style={Object.assign({ display: 'grid', gridTemplateColumns: 'minmax(0,1.15fr) minmax(0,.85fr)', gap: 52, alignItems: 'start' }, slWrap)} data-grid="2">
          <div>
            {L.intro.map((p, i) => <p key={i} style={i === 0 ? Object.assign({}, slBody, { fontSize: 'calc(var(--fs-body-lg) + 1px)', color: 'var(--text-primary)' }) : slBody}>{p}</p>)}
          </div>
          <aside style={{ border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: '24px 24px 20px', background: 'var(--surface-alt)' }}>
            <span style={slKicker}>{local.statsTitle}</span>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 16 }}>
              {local.stats.map((s, i) => (
                <div key={i}>
                  <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--brand-primary)', lineHeight: 1.1 }}>{s.v}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', marginTop: 4 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <div style={{ borderTop: '1px solid var(--border-default)', marginTop: 20, paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13.5, color: 'var(--text-secondary)' }}>
              <div style={{ display: 'flex', gap: 9, alignItems: 'flex-start' }}><span style={{ color: 'var(--brand-accent)', marginTop: 1 }}><Icon name="pin" size={16} /></span><span><strong style={{ color: 'var(--text-primary)' }}>{local.addressLabel}:</strong> {local.address}</span></div>
              <div style={{ display: 'flex', gap: 9, alignItems: 'flex-start' }}><span style={{ color: 'var(--brand-accent)', marginTop: 1 }}><Icon name="whatsapp" size={16} /></span><span><strong style={{ color: 'var(--text-primary)' }}>{local.phoneLabel}:</strong> <a href="tel:+17867097143">+1 (786) 709-7143</a></span></div>
              <div style={{ display: 'flex', gap: 9, alignItems: 'flex-start' }}><span style={{ color: 'var(--brand-accent)', marginTop: 1 }}><Icon name="check" size={16} /></span><span><strong style={{ color: 'var(--text-primary)' }}>{local.hoursLabel}:</strong> {local.hours}</span></div>
            </div>
          </aside>
        </div>
      </section>

      <section style={{ padding: '58px var(--container-pad)', background: 'var(--surface-alt)' }}>
        <div style={slWrap}>
          <span style={slKicker}>{L.kicker}</span>
          <h2 style={slH2}>{L.includesTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,minmax(0,1fr))', gap: 20, marginTop: 26 }} data-grid="3">
            {L.includes.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={L.icon} 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={slWrap}>
          <h2 style={slH2}>{L.processTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,minmax(0,1fr))', gap: 22, marginTop: 24 }} data-grid="4">
            {L.process.map((p, i) => (
              <div key={i} style={{ borderTop: '3px solid var(--brand-accent)', paddingTop: 16 }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--brand-accent)', letterSpacing: '.1em', marginBottom: 8 }}>{'0' + (i + 1)}</div>
                <h3 style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>{p.t}</h3>
                <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)', margin: 0 }}>{p.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,1fr) minmax(0,1fr)', gap: 52 }, slWrap)} data-grid="2">
          <div>
            <h2 style={Object.assign({}, slH2, { color: '#fff' })}>{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: 'rgba(255,255,255,.88)', lineHeight: 'var(--lh-normal)' }}>
                  <span style={{ color: 'var(--brand-accent-light)', marginTop: 2 }}><Icon name="check" size={18} strokeWidth={2.2} /></span>{f}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h2 style={Object.assign({}, slH2, { color: '#fff' })}>{L.deliverTitle}</h2>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {L.deliver.map((d, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15, color: 'rgba(255,255,255,.82)', paddingBottom: 12, borderBottom: i < L.deliver.length - 1 ? '1px solid rgba(255,255,255,.14)' : 'none' }}>
                  <span style={{ fontWeight: 800, color: 'var(--brand-accent-light)', fontSize: 13, marginTop: 2 }}>{'0' + (i + 1)}</span>{d}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {L.caseText && (
        <section style={{ padding: '58px var(--container-pad)', background: 'var(--surface-alt)' }}>
          <div style={Object.assign({ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 46, alignItems: 'center' }, slWrap)} data-grid="2">
            <div>
              <span style={slKicker}>{L.caseTitle}</span>
              <h2 style={slH2}>JV Air Pro</h2>
              <p style={Object.assign({}, slBody, { margin: 0 })}>{L.caseText}</p>
            </div>
            <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', background: 'var(--surface-inverse)' }}>
              <video src={A + "assets/video-antes-y-despues.mp4"} ref={(v) => { if (v) { v.muted = true; v.volume = 0; } }} muted loop playsInline autoPlay style={{ display: 'block', width: '100%', height: 300, objectFit: 'cover' }} />
            </div>
          </div>
        </section>
      )}

      <section style={{ padding: '58px var(--container-pad)' }}>
        <div style={slWrap}>
          <h2 style={slH2}>{local.trustTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,minmax(0,1fr))', gap: 22, marginTop: 22 }} data-grid="3">
            {local.trust.map((it, i) => (
              <div key={i} style={{ padding: '22px 20px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)' }}>
                <h3 style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px', lineHeight: 1.32 }}>{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: '52px var(--container-pad)', background: 'var(--brand-primary)', color: '#fff' }}>
        <div style={Object.assign({ display: 'grid', gridTemplateColumns: 'minmax(0,.9fr) minmax(0,1.1fr)', gap: 44, alignItems: 'center' }, slWrap)} data-grid="2">
          <div>
            <h2 style={Object.assign({}, slH2, { color: '#fff', margin: '0 0 12px' })}>{local.areaTitle}</h2>
            <p style={{ fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.85)', lineHeight: 'var(--lh-normal)', margin: 0 }}>{local.areaSub}</p>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {local.cities.map((c, i) => (
              <span key={i} style={{ padding: '9px 16px', borderRadius: 999, border: '1px solid rgba(255,255,255,.35)', fontSize: 14, fontWeight: 600, color: '#fff' }}>{c}</span>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '58px var(--container-pad)' }}>
        <div style={Object.assign({ maxWidth: 900 }, { margin: '0 auto' })}>
          <span style={slKicker}>{local.faqLabel}</span>
          <h2 style={slH2}>{L.h1}</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 22 }}>
            {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: '18px 20px', background: open === i ? 'var(--surface-alt)' : '#fff', border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 16, 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 20px 20px' }}>
                  <p style={{ margin: 0, fontSize: 15, color: 'var(--text-secondary)', lineHeight: 'var(--lh-normal)' }}>{f.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '0 var(--container-pad) 58px' }}>
        <div style={slWrap}>
          <h2 style={Object.assign({}, slH2, { fontSize: 'var(--fs-display-sm)' })}>{local.othersTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,minmax(0,1fr))', gap: 16 }} data-grid="4">
            {others.map((o, i) => (
              <a key={i} href={o.href} style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '18px 18px', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', textDecoration: 'none', color: 'var(--text-primary)', fontWeight: 600, fontSize: 14.5, lineHeight: 1.3 }}>
                <span style={{ color: 'var(--brand-accent)', flexShrink: 0 }}><Icon name={o.icon} size={20} /></span>{o.title}
              </a>
            ))}
          </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' }, slWrap)}>
          <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' }}>
            <Button variant="inverse" size="lg" onClick={() => onNav && onNav('contact')}>{local.quote}</Button>
            <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} />{local.call}</a>
          </div>
        </div>
      </section>

      <Footer
        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.ServiceLanding = ServiceLanding;
