// Variation B pages (Home composite, Services, About, Contact, Footer)

function HomeB({ setPage, t, c }) {
  return (
    <>
      <HeroB setPage={setPage} t={t} c={c} />

      {/* TRUST BAR */}
      <div style={{ padding: '24px 0', borderBottom: `1px solid ${t.border}`, background: t.bgAlt }}>
        <ContainerB>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: '0.12em', color: t.textMuted, textTransform: 'uppercase' }}>
            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: '#4ADE80', boxShadow: '0 0 8px #4ADE80' }} />
            SYSTEM ONLINE · {c.trust}
          </div>
        </ContainerB>
      </div>

      {/* SERVICES */}
      <section style={{ padding: '120px 0', borderBottom: `1px solid ${t.border}` }}>
        <ContainerB>
          <div style={{ marginBottom: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end' }}>
            <div>
              <EyebrowB t={t}>02 · {c.nav.services.toUpperCase()}</EyebrowB>
              <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 56, fontWeight: 500, color: t.text, margin: 0, letterSpacing: '-0.03em', lineHeight: 1.05 }}>{c.services.title}</h2>
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: t.textMuted, margin: 0, textWrap: 'pretty', paddingBottom: 8 }}>{c.services.sub}</p>
          </div>
          <ServicesListB t={t} c={c} />
        </ContainerB>
      </section>

      <ProcessB t={t} c={c} />

      <CTAB setPage={setPage} t={t} c={c} />
    </>
  );
}

function ServicesPageB({ setPage, t, c }) {
  return (
    <>
      <section style={{ padding: '80px 0 60px', borderBottom: `1px solid ${t.border}`, position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${t.border} 1px, transparent 1px), linear-gradient(90deg, ${t.border} 1px, transparent 1px)`, backgroundSize: '60px 60px', maskImage: 'linear-gradient(to bottom, black, transparent)' }} />
        <ContainerB style={{ position: 'relative' }}>
          <EyebrowB t={t}>/{c.nav.services.toUpperCase()}</EyebrowB>
          <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(48px, 7vw, 88px)', fontWeight: 500, color: t.text, margin: 0, letterSpacing: '-0.04em', lineHeight: 1, maxWidth: 960, textWrap: 'balance' }}>{c.services.title}</h1>
          <p style={{ fontSize: 20, color: t.textMuted, maxWidth: 640, marginTop: 24, textWrap: 'pretty' }}>{c.services.sub}</p>
        </ContainerB>
      </section>
      <section style={{ padding: '60px 0 120px' }}>
        <ContainerB>
          <ServicesListB t={t} c={c} />
        </ContainerB>
      </section>
      <CTAB setPage={setPage} t={t} c={c} />
    </>
  );
}

function AboutPageB({ setPage, t, c }) {
  return (
    <>
      <section style={{ padding: '80px 0 120px', borderBottom: `1px solid ${t.border}` }}>
        <ContainerB>
          <EyebrowB t={t}>/{c.nav.about.toUpperCase()}</EyebrowB>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'start' }}>
            <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(40px, 6vw, 72px)', fontWeight: 500, color: t.text, margin: 0, letterSpacing: '-0.03em', lineHeight: 1.02, textWrap: 'balance' }}>{c.about.title}</h1>
            <div style={{ paddingTop: 16 }}>
              <p style={{ fontSize: 22, lineHeight: 1.45, color: t.text, fontWeight: 400, margin: '0 0 24px' }}>{c.about.lead}</p>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: t.textMuted, margin: 0 }}>{c.about.body}</p>
            </div>
          </div>
        </ContainerB>
      </section>

      <section style={{ padding: '100px 0', background: t.bgAlt, borderBottom: `1px solid ${t.border}` }}>
        <ContainerB>
          <EyebrowB t={t}>02 · VALUES</EyebrowB>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 32 }}>
            {c.about.values.map((v, i) => (
              <div key={i} style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 4, padding: 40 }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.sky, letterSpacing: '0.18em', marginBottom: 32 }}>/0{i + 1}</div>
                <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 28, fontWeight: 500, color: t.text, margin: '0 0 14px', letterSpacing: '-0.02em' }}>{v.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: t.textMuted, margin: 0 }}>{v.d}</p>
              </div>
            ))}
          </div>
        </ContainerB>
      </section>

      <CTAB setPage={setPage} t={t} c={c} />
    </>
  );
}

function ContactPageB({ t, c }) {
  const [sent, setSent] = useStB(false);
  return (
    <section style={{ padding: '80px 0 140px', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{ position: 'absolute', top: 100, right: -200, width: 600, height: 600, background: `radial-gradient(circle, ${t.sky}15, transparent 65%)`, filter: 'blur(40px)' }} />
      <ContainerB style={{ position: 'relative' }}>
        <EyebrowB t={t}>/{c.nav.contact.toUpperCase()}</EyebrowB>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, marginTop: 8 }}>
          <div>
            <h1 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 56, fontWeight: 500, color: t.text, margin: '0 0 24px', letterSpacing: '-0.03em', lineHeight: 1.05, textWrap: 'balance' }}>{c.contact.title}</h1>
            <p style={{ fontSize: 18, color: t.textMuted, margin: '0 0 48px', textWrap: 'pretty' }}>{c.contact.sub}</p>

            <div style={{ border: `1px solid ${t.border}`, borderRadius: 4, background: t.surface }}>
              {[
                { k: 'EMAIL', v: c.contact.email, href: `mailto:${c.contact.email}` },
                { k: 'PHONE', v: c.contact.phone, href: `tel:${c.contact.phone.replace(/\s/g,'')}` },
                { k: 'LOCATION', v: c.contact.location + ' · 🇨🇷' },
              ].map((r, i, a) => (
                <a key={i} href={r.href} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '20px 28px', borderBottom: i < a.length - 1 ? `1px solid ${t.border}` : 'none', textDecoration: 'none', color: 'inherit' }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.textDim, letterSpacing: '0.12em' }}>{r.k}</span>
                  <span style={{ fontSize: 15, color: t.text, fontFamily: "'Space Grotesk', sans-serif" }}>{r.v}</span>
                </a>
              ))}
            </div>
          </div>

          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
            style={{ background: t.surface, border: `1px solid ${t.border}`, borderRadius: 4, padding: 40, position: 'relative' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: `linear-gradient(90deg, transparent, ${t.sky}, transparent)` }} />
            {sent ? (
              <div style={{ textAlign: 'center', padding: '80px 20px' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: t.skyTint, border: `1px solid ${t.sky}`, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', color: t.sky }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
                </div>
                <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 24, color: t.text, margin: '0 0 8px' }}>MESSAGE SENT</h3>
                <p style={{ color: t.textMuted, margin: 0, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: '0.1em' }}>RESPONSE WITHIN 24H</p>
              </div>
            ) : (
              <div style={{ display: 'grid', gap: 24 }}>
                <FieldB t={t} label={c.contact.fields.name} />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                  <FieldB t={t} label={c.contact.fields.email} type="email" />
                  <FieldB t={t} label={c.contact.fields.phone} />
                </div>
                <FieldB t={t} label={c.contact.fields.company} />
                <FieldB t={t} label={c.contact.fields.message} textarea />
                <BtnB primary t={t} style={{ width: '100%', justifyContent: 'center', padding: '18px' }}>{c.contact.fields.send} →</BtnB>
              </div>
            )}
          </form>
        </div>
      </ContainerB>
    </section>
  );
}

function FieldB({ t, label, type = 'text', textarea }) {
  const [focus, setFocus] = useStB(false);
  const Tag = textarea ? 'textarea' : 'input';
  return (
    <label style={{ display: 'block' }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.16em', color: focus ? t.sky : t.textDim, textTransform: 'uppercase', marginBottom: 10, transition: 'color 0.2s' }}>› {label}</div>
      <Tag type={type} rows={textarea ? 5 : undefined} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{ width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${focus ? t.sky : t.borderStrong}`, padding: '8px 0', fontFamily: "'Space Grotesk', sans-serif", fontSize: 16, color: t.text, outline: 'none', transition: 'border 0.2s', resize: textarea ? 'vertical' : 'none' }} />
    </label>
  );
}

function CTAB({ setPage, t, c }) {
  return (
    <section style={{ padding: '120px 0', position: 'relative', overflow: 'hidden', borderTop: `1px solid ${t.border}` }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: `linear-gradient(${t.border} 1px, transparent 1px), linear-gradient(90deg, ${t.border} 1px, transparent 1px)`, backgroundSize: '40px 40px', maskImage: 'radial-gradient(ellipse at 50% 50%, black, transparent)' }} />
      <div aria-hidden style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', width: 700, height: 700, background: `radial-gradient(circle, ${t.sky}20, transparent 65%)`, filter: 'blur(40px)' }} />
      <ContainerB style={{ position: 'relative', textAlign: 'center' }}>
        <EyebrowB t={t}>READY?</EyebrowB>
        <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 'clamp(40px, 6vw, 72px)', fontWeight: 500, color: t.text, margin: '0 auto 24px', letterSpacing: '-0.03em', lineHeight: 1.02, maxWidth: 820, textWrap: 'balance' }}>{c.contact.title}</h2>
        <p style={{ fontSize: 18, color: t.textMuted, margin: '0 auto 40px', maxWidth: 520, textWrap: 'pretty' }}>{c.contact.sub}</p>
        <BtnB primary t={t} onClick={() => setPage('contact')}>{c.cta.contact} →</BtnB>
      </ContainerB>
    </section>
  );
}

function FooterB({ t, c }) {
  return (
    <footer style={{ borderTop: `1px solid ${t.border}`, padding: '48px 0 32px', background: t.bgAlt }}>
      <ContainerB>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 40 }}>
          <div>
            <Wordmark size={32} navy={t.text} sky={t.sky} onDark={t.bg === '#05070F'} />
            <p style={{ color: t.textMuted, fontSize: 13, lineHeight: 1.6, margin: '16px 0 0', maxWidth: 320 }}>{c.footer.tagline}</p>
          </div>
          {[
            { title: c.nav.services, links: c.services.items.slice(0, 4).map((s) => s.t) },
            { title: 'COMPANY', links: [c.nav.about, c.process.title] },
            { title: c.nav.contact, links: [c.contact.email, c.contact.phone] },
          ].map((col, i) => (
            <div key={i}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: t.sky, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>› {col.title}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {col.links.map((l, j) => <li key={j} style={{ fontSize: 13, color: t.textMuted }}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ borderTop: `1px solid ${t.border}`, paddingTop: 20, display: 'flex', justifyContent: 'space-between', fontSize: 11, color: t.textDim, fontFamily: "'JetBrains Mono', monospace", letterSpacing: '0.08em' }}>
          <span>© 2026 TECNOLOGYAPP · {c.footer.rights.toUpperCase()}</span>
          <span>v2.0 · MADE IN CR 🇨🇷</span>
        </div>
      </ContainerB>
    </footer>
  );
}

Object.assign(window, { HomeB, ServicesPageB, AboutPageB, ContactPageB, FooterB, CTAB, FieldB });