// bulltech_ website — products, services, metrics, CTA, footer
const DS2 = window.BulltechDesignSystem_fb9019;
const { Logo: Logo2, Button: Button2, Badge: Badge2, Stat: Stat2, Card: Card2 } = DS2;

const CONFIG = Object.assign({
  whatsappNumber: '50256631375',
  contactEmail: 'hola@bulltechnologies.dev'
}, window.BULLTECH_CONFIG);

const wa = (msg) => `https://wa.me/${CONFIG.whatsappNumber}?text=${encodeURIComponent(msg)}`;
const WA_DEFAULT = wa('Hola Bull Technologies, quiero cotizar un proyecto digital.');

const PRODUCTS = [
  { name: 'AlphaVet', tag: 'veterinaria', desc: 'Expedientes, citas y facturación para clínicas veterinarias.', url: 'https://alphavet.lat' },
  { name: 'DentOS', tag: 'dental', desc: 'Operación completa de consultorios y clínicas dentales.', url: 'https://dentos.lat' },
  { name: 'FarmApp', tag: 'farmacia', desc: 'Inventario, ventas y control de lotes para farmacias.' },
  { name: 'Synapse OS', tag: 'laboratorio', desc: 'Órdenes, resultados y trazabilidad para laboratorios de diagnóstico.' },
  { name: 'LemiGT', tag: 'e-commerce', desc: 'Tienda en línea con pagos y logística local.', url: 'https://lemigt.store' },
];

function Products() {
  const handleProductClick = (p) => {
    if (p.url) {
      window.open(p.url, '_blank');
    } else {
      window.open(wa(`Hola Bull Technologies, me interesa saber más sobre ${p.name} (${p.tag}).`), '_blank');
    }
  };
  return (
    <section id="products" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="bt-section-container">
        <Reveal>
          <Eyebrow>Productos</Eyebrow>
          <h2 style={{ margin: '16px 0 0', fontSize: 'var(--text-h1)', fontWeight: 800, letterSpacing: 'var(--tracking-headline)', lineHeight: 'var(--leading-headline)' }}>Cinco productos, una base de ingeniería</h2>
        </Reveal>
        <div className="bt-products-grid">
          {PRODUCTS.map((p, i) => (
            <Reveal key={p.name} delay={i * 70}>
              <Card2 interactive padding={28} style={{ height: '100%', boxSizing: 'border-box' }} onClick={() => handleProductClick(p)}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                  <h3 style={{ margin: 0, fontSize: 'var(--text-h3)', fontWeight: 800, letterSpacing: 'var(--tracking-headline)' }}>{p.name}</h3>
                  <Badge2>{p.tag}</Badge2>
                </div>
                <p style={{ margin: '12px 0 18px', fontSize: 14, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{p.desc}</p>
                <span style={{ fontSize: 14, fontWeight: 600 }}>Conocer →</span>
              </Card2>
            </Reveal>
          ))}
          <Reveal delay={PRODUCTS.length * 70}>
            <div 
              onClick={() => window.open(wa('Hola Bull Technologies, quiero cotizar un software a la medida para mi operación.'), '_blank')}
              style={{ border: '1px dashed var(--border-input)', height: '100%', boxSizing: 'border-box', padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8, cursor: 'pointer' }}
            >
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-secondary)' }}>~/tu-producto</span>
              <span style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6 }}>También construimos software a la medida para tu operación.</span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  { n: '01', t: 'Sistemas a la medida', d: 'Levantamos el proceso, diseñamos el sistema y lo operamos contigo. Sin plantillas, sin atajos.' },
  { n: '02', t: 'PWAs y plataformas', d: 'Aplicaciones web progresivas que funcionan sin conexión y se instalan en cualquier dispositivo.' },
  { n: '03', t: 'E-commerce', d: 'Catálogo, pagos y logística para vender en línea en Guatemala y la región.' },
];

function Services() {
  return (
    <section id="services" style={{ borderBottom: '1px solid var(--line)', background: 'var(--surface-2)' }}>
      <div className="bt-section-container">
        <Reveal>
          <Eyebrow>Servicios</Eyebrow>
          <h2 style={{ margin: '16px 0 0', fontSize: 'var(--text-h1)', fontWeight: 800, letterSpacing: 'var(--tracking-headline)', lineHeight: 'var(--leading-headline)' }}>Software a la medida</h2>
        </Reveal>
        <div className="bt-services-grid">
          {SERVICES.map((s, i) => (
            <Reveal key={s.n} delay={i * 80}>
              <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 28, height: '100%', boxSizing: 'border-box' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--red)' }}>{s.n}</div>
                <h3 style={{ margin: '14px 0 10px', fontSize: 'var(--text-h3)', fontWeight: 800, letterSpacing: 'var(--tracking-headline)' }}>{s.t}</h3>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: 'var(--text-secondary)' }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Metrics() {
  return (
    <section id="metrics" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="bt-metrics-grid bt-metrics-container">
        <Reveal><Stat2 label="Sistemas en producción" value="5" size="lg" /></Reveal>
        <Reveal delay={70}><Stat2 label="Uptime promedio" value="99.98" unit="%" size="lg" /></Reveal>
        <Reveal delay={140}><Stat2 label="Respuesta" value="<200" unit="ms" size="lg" /></Reveal>
        <Reveal delay={210}><Stat2 label="Soporte" value="24/7" size="lg" /></Reveal>
      </div>
    </section>
  );
}

function CtaBand() {
  return (
    <section id="contact" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="bt-cta-band bt-section-container">
        <Reveal>
          <h2 style={{ margin: 0, fontSize: 'var(--text-h1)', fontWeight: 800, letterSpacing: 'var(--tracking-headline)' }}>Hablemos de tu sistema<span className="bt-cursor" style={{ color: 'var(--red)' }}>_</span></h2>
          <p style={{ margin: '12px 0 0', fontSize: 16, color: 'var(--text-secondary)' }}>Una llamada de 30 minutos para entender tu operación.</p>
        </Reveal>
        <Reveal delay={120}><Button2 variant="primary" size="lg" arrow onClick={() => window.open(WA_DEFAULT, '_blank')}>Agendar demo</Button2></Reveal>
      </div>
    </section>
  );
}

function SiteFooter() {
  const cols = [
    { h: 'Productos', items: ['AlphaVet', 'DentOS', 'FarmApp', 'Synapse OS', 'LemiGT'] },
    { h: 'Estudio', items: ['Servicios', 'Proyectos', 'Equipo', 'Contacto'] },
  ];
  const handleFooterLink = (e, it) => {
    e.preventDefault();
    if (it === 'AlphaVet') window.open('https://alphavet.lat', '_blank');
    else if (it === 'DentOS') window.open('https://dentos.lat', '_blank');
    else if (it === 'LemiGT') window.open('https://lemigt.store', '_blank');
    else if (it === 'FarmApp' || it === 'Synapse OS') window.open(wa(`Hola Bull Technologies, me interesa saber más sobre ${it}.`), '_blank');
    else {
      const targetMap = {
        'Servicios': 'services',
        'Proyectos': 'products',
        'Equipo': 'metrics',
        'Contacto': 'contact'
      };
      const targetId = targetMap[it];
      if (targetId) {
        if (window.setWebsiteView) {
          window.setWebsiteView('landing');
        }
        setTimeout(() => {
          document.getElementById(targetId)?.scrollIntoView({ behavior: 'smooth' });
        }, 100);
      }
    }
  };
  return (
    <footer data-theme="dark" style={{ background: 'var(--dark-surface)', color: 'var(--text-body)' }}>
      <div className="bt-footer-grid bt-section-container" style={{ paddingBottom: 40 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Logo2 variant="lockup" size={34} subline blink />
          <p style={{ margin: 0, fontSize: 13, color: 'var(--text-secondary)', maxWidth: 280, lineHeight: 1.6 }}>
            Construimos los sistemas sobre los que operan los negocios. Ciudad de Guatemala.
            <br /><br />
            <a href={`mailto:${CONFIG.contactEmail}`} style={{ color: 'var(--red)', textDecoration: 'none' }} onMouseEnter={(e) => e.currentTarget.style.textDecoration = 'underline'} onMouseLeave={(e) => e.currentTarget.style.textDecoration = 'none'}>{CONFIG.contactEmail}</a>
          </p>
        </div>
        {cols.map((c) => (
          <div key={c.h} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <span style={{ fontSize: 'var(--text-label)', fontWeight: 500, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{c.h}</span>
            {c.items.map((it) => (
              <a key={it} href="#" onClick={(e) => handleFooterLink(e, it)} style={{ fontSize: 14, color: 'var(--text-secondary)', textDecoration: 'none' }}>{it}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>© 2026 Bull Technologies</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>hecho en Guatemala <span style={{ color: 'var(--red)' }}>◆</span></span>
        </div>
      </div>
    </footer>
  );
}

function WebsiteApp() {
  const [view, setView] = React.useState('landing'); // 'landing' | 'generator'
  
  React.useEffect(() => {
    window.setWebsiteView = (v) => {
      setView(v);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    };
  }, []);

  return (
    <div>
      <SiteHeader view={view} setView={setView} />
      {view === 'generator' ? (
        <PrototypeGenerator setView={setView} />
      ) : (
        <React.Fragment>
          <Hero />
          <Products />
          <Services />
          <Metrics />
          <CtaBand />
        </React.Fragment>
      )}
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { Products, Services, Metrics, CtaBand, SiteFooter, WebsiteApp });