// End-of-page sections: Pricing, FAQ, big CTA, Footer.

const { Container: ECont, Section: ESect, Pill: EPill, SectionHeader: EHeader,
  Btn: EBtn, Logo: ELogo, Icon: EIcon, GlowCard: ECard } = window;
const { useState: useStateE } = React;

// ─── Pricing ─────────────────────────────────────────────────
function Pricing() {
  const tiers = [
    {
      name: 'Sprint', tag: 'fixed-scope projects',
      price: '€18k', priceUnit: 'from',
      desc: '2–4 week sprints for a specific automation, dashboard or workflow. Best when you already know what to build.',
      features: [
        'Diagnose + prototype in 2 weeks',
        '1 senior engineer · 1 designer',
        'Production handover w/ docs',
        'Slack channel during build',
      ],
      cta: 'Start a sprint', highlighted: false,
    },
    {
      name: 'Build', tag: 'end-to-end systems',
      price: '€60k', priceUnit: 'from',
      desc: 'Full builds from blank page to production over 6–12 weeks. Discovery, design, engineering, deployment, handover.',
      features: [
        'Multi-disciplinary team of 3–4',
        'Production-grade observability',
        'CI / CD on your infrastructure',
        '12-week post-launch support',
        'Roadmap for next phase',
      ],
      cta: 'Plan a build', highlighted: true,
    },
    {
      name: 'Embed', tag: 'embedded engineering',
      price: '€15k', priceUnit: '/ month',
      desc: 'A dedicated Xybos squad embedded in your team. Quarterly commitment, monthly reviews, no long-term lock-in.',
      features: [
        '2–4 engineers · 1 lead',
        'Sprints in your tooling',
        'On-call rotation included',
        'Quarterly insourcing review',
      ],
      cta: 'Embed a team', highlighted: false,
    },
  ];

  return (
    <ESect id="pricing">
      <ECont>
        <EHeader
          eyebrow="[ 06 · PRICING ]"
          title="Three ways to work with us."
          tagline="Every engagement is a fixed fee — no hourly billing. We&apos;ll quote precisely after the diagnose call."
          align="center"
          max={680}
        />

        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {tiers.map((t) => (
            <ECard key={t.name} hoverable={!t.highlighted}
              style={{
                padding: 36,
                ...(t.highlighted ? {
                  background: 'linear-gradient(180deg, rgba(30,107,255,.10), rgba(30,107,255,.02))',
                  borderColor: 'rgba(30,107,255,.45)',
                  boxShadow: '0 0 0 1px rgba(30,107,255,.25), 0 24px 80px rgba(30,107,255,.18)',
                } : {}),
              }}>
              {t.highlighted && (
                <div style={{ position: 'absolute', top: 18, right: 18 }}>
                  <span style={{ background: 'var(--blue)', color: '#fff', padding: '4px 10px', borderRadius: 999, fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase', boxShadow: '0 0 16px var(--blue-glow)' }}>
                    Most popular
                  </span>
                </div>
              )}

              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: t.highlighted ? '#9FBFFF' : 'rgba(255,255,255,.5)', letterSpacing: 0.6, textTransform: 'uppercase' }}>
                {t.tag}
              </div>
              <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: -0.8, marginTop: 8, color: '#fff' }}>{t.name}</div>

              <div style={{ marginTop: 26, display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,.5)' }}>{t.priceUnit}</span>
                <span style={{ fontSize: 52, fontWeight: 600, letterSpacing: -1.6, color: '#fff', lineHeight: 1 }}>{t.price}</span>
              </div>
              <p style={{ marginTop: 18, fontSize: 14.5, color: 'rgba(255,255,255,.6)', lineHeight: 1.55 }}>{t.desc}</p>

              <ul style={{ margin: '28px 0 32px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                {t.features.map(f => (
                  <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, color: 'rgba(255,255,255,.78)' }}>
                    <span style={{ marginTop: 2, color: 'var(--blue-bright)' }}><EIcon name="check" size={16} stroke={2.2} /></span>
                    {f}
                  </li>
                ))}
              </ul>

              <EBtn
                variant={t.highlighted ? 'primary' : 'secondary'}
                size="md"
                icon
                className={t.highlighted ? 'btn-primary' : ''}
                style={{ width: '100%' }}
              >{t.cta}</EBtn>
            </ECard>
          ))}
        </div>

        {/* Footnote */}
        <div style={{ textAlign: 'center', marginTop: 40, fontSize: 13, color: 'rgba(255,255,255,.45)' }}>
          Need something else? <a href="#contact" style={{ color: '#9FBFFF', textDecoration: 'underline', textDecorationColor: 'rgba(159,191,255,.4)', textUnderlineOffset: 3 }}>Tell us what you&apos;re building →</a>
        </div>
      </ECont>
    </ESect>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────
function FAQ() {
  const items = [
    {
      q: 'How is Xybos different from a typical agency?',
      a: 'We don\'t do strategy decks or audits. Every engagement ends with production software on your stack, owned and operated by your team. We hire senior engineers only — no juniors, no offshoring. Two-thirds of our work is repeat business.',
    },
    {
      q: 'Do you work with our existing engineering team or replace them?',
      a: 'We augment. We sit inside your tools (Github, Linear, Slack) and pair with your engineers. Every line of code we ship is reviewed by someone on your side, and we plan for handover from day one.',
    },
    {
      q: 'Can you sign an NDA / DPA / SOC2 paperwork?',
      a: 'Yes. We\'re SOC2 Type II certified, GDPR compliant, and sign DPAs as a matter of course. We can also work inside your VPN or against scrubbed environments if your data classification requires it.',
    },
    {
      q: 'What stacks do you work in?',
      a: 'Primarily TypeScript / React / Node, Python, and SQL (Postgres, Snowflake, BigQuery). Infra typically AWS or GCP. For ML we use PyTorch, modern LLM tooling (LangGraph, DSPy, vLLM), plus classic forecasting stacks. We meet you where you are.',
    },
    {
      q: 'How quickly can you start?',
      a: 'Diagnose sprints typically start within 2 weeks of a signed SOW. Full builds depend on team availability — usually 3–4 weeks. We\'ll always tell you honestly if we can\'t take on the work in your timeframe.',
    },
    {
      q: 'What happens if a project doesn\'t hit production?',
      a: '98% of our engagements do. For the rare cases that don\'t, we refund the build phase in full and hand over everything we\'ve learned. We\'d rather earn the next engagement than hold an unhappy customer to a deliverable.',
    },
  ];

  const [open, setOpen] = useStateE(0);

  return (
    <ESect id="faq">
      <ECont max={920}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <EHeader
              eyebrow="[ 07 · FAQ ]"
              title="Questions we get asked."
              tagline="Can&apos;t find what you&apos;re looking for? Reach us at kristaps@xybos.tech and we&apos;ll respond inside a working day."
            />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {items.map((it, i) => (
              <FAQItem key={i} item={it} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} index={i} last={i === items.length - 1} />
            ))}
          </div>
        </div>
      </ECont>
    </ESect>
  );
}

function FAQItem({ item, open, onToggle, index, last }) {
  return (
    <div style={{ borderTop: '1px solid var(--line)', borderBottom: last ? '1px solid var(--line)' : 'none' }}>
      <button onClick={onToggle} style={{
        width: '100%', padding: '24px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'transparent', border: 'none', color: '#fff', cursor: 'pointer', textAlign: 'left',
        fontFamily: 'inherit',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,.4)', letterSpacing: 0.5 }}>
            0{index + 1}
          </span>
          <span style={{ fontSize: 18, fontWeight: 500, letterSpacing: -0.3 }}>{item.q}</span>
        </div>
        <div style={{
          width: 36, height: 36, borderRadius: 999,
          background: open ? 'var(--blue)' : 'rgba(255,255,255,.06)',
          border: '1px solid ' + (open ? 'transparent' : 'var(--line)'),
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: open ? '0 0 16px var(--blue-glow)' : 'none',
          transition: 'all .2s ease-out', flexShrink: 0,
        }}>
          <EIcon name={open ? 'minus' : 'plus'} size={14} stroke={2.2} color="#fff" />
        </div>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0, overflow: 'hidden',
        transition: 'max-height .35s ease-out',
      }}>
        <div style={{ paddingLeft: 44, paddingBottom: 24, fontSize: 15.5, color: 'rgba(255,255,255,.65)', lineHeight: 1.6, maxWidth: 640 }}>
          {item.a}
        </div>
      </div>
    </div>
  );
}

// ─── Big CTA ─────────────────────────────────────────────────
function FinalCTA() {
  window.useLang();
  return (
    <ESect id="contact" style={{ padding: '80px 0 120px' }}>
      <ECont>
        <div style={{
          position: 'relative', overflow: 'hidden', borderRadius: 24,
          padding: '72px 56px',
          background: 'linear-gradient(135deg, #06070A 0%, #0E1A45 65%, #1740A8 130%)',
          border: '1px solid rgba(30,107,255,.3)',
          boxShadow: '0 40px 140px rgba(30,107,255,.18)',
        }}>
          {/* Layered backgrounds */}
          <div style={{
            position: 'absolute', bottom: -260, right: -120, width: 760, height: 760, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(30,107,255,.36) 0%, rgba(30,107,255,.06) 40%, transparent 65%)',
            filter: 'blur(50px)', pointerEvents: 'none',
          }} />
          <div style={{
            position: 'absolute', top: -180, left: -120, width: 520, height: 520, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(77,139,255,.22) 0%, transparent 60%)',
            filter: 'blur(60px)', pointerEvents: 'none',
          }} />
          <div className="grid-bg" style={{
            position: 'absolute', inset: 0, opacity: 0.28,
            WebkitMaskImage: 'radial-gradient(ellipse 80% 70% at 30% 50%, #000, transparent)',
            maskImage: 'radial-gradient(ellipse 80% 70% at 30% 50%, #000, transparent)',
            pointerEvents: 'none',
          }} />

          {/* Giant 04 watermark — bottom right */}
          <div style={{
            position: 'absolute', right: -30, bottom: -100,
            fontSize: 'clamp(220px, 32vw, 420px)', fontWeight: 700, letterSpacing: -16,
            lineHeight: 0.85, fontFamily: 'var(--sans)',
            background: 'linear-gradient(180deg, rgba(255,255,255,.06), transparent)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            userSelect: 'none', pointerEvents: 'none',
          }}>04</div>

          {/* Corner brackets */}
          <CTACorner t l /><CTACorner t r /><CTACorner b l /><CTACorner b r />

          {/* Content grid — asymmetric split */}
          <div style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>

            {/* LEFT — type column */}
            <div>
              <EPill>{window.t('[ 04 · CONTACT ]')}</EPill>

              <h2 style={{
                fontSize: 'clamp(40px, 5.4vw, 76px)', fontWeight: 600, letterSpacing: -2.4,
                lineHeight: 1.02, margin: '24px 0 0', color: '#fff', maxWidth: 560,
              }}>
                {window.t("Let's see if it's")}{' '}
                <span style={{
                  position: 'relative', display: 'inline-block'
                }}>
                  <span style={{
                  background: 'linear-gradient(180deg, #BFD3FF, #4D8BFF 60%, #1E6BFF)',
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
                }}>{window.t('a fit.')}</span>
                  <span aria-hidden style={{
                    position: 'absolute', left: 0, right: 0, bottom: -2, height: 4,
                    background: 'linear-gradient(90deg, transparent, var(--blue-bright), transparent)',
                    borderRadius: 2, filter: 'blur(2px)',
                  }} />
                </span>
              </h2>

              <p style={{ marginTop: 26, fontSize: 16.5, color: 'rgba(255,255,255,.72)', lineHeight: 1.6, maxWidth: 520 }}>
                {window.t("A 30-minute conversation is enough to tell whether automation is the right answer right now \u2014 or whether the problem you're seeing is actually something else.")}
              </p>

              <div style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap', alignItems: 'center' }}>
                <EBtn variant="primary" size="lg" icon className="btn-primary"
                  as="a" href="https://calendly.com/xybos/meet-greet" target="_blank" rel="noopener">{window.t('Book a call with Kristaps')}</EBtn>
                <EBtn variant="secondary" size="lg"
                  as="a" href="xybos-contact.html">{window.t('Write us')}</EBtn>
              </div>
            </div>

            {/* RIGHT — info card stack */}
            <div data-stagger style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {/* What we'll cover */}
              <div style={{
                padding: 22, borderRadius: 14,
                background: 'rgba(10,11,14,.55)', border: '1px solid var(--line)',
                backdropFilter: 'blur(10px)',
              }}>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: '#9FBFFF', letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 14 }}>
                  {window.t("// 30 min \u00b7 what we'll cover")}
                </div>
                {[
                ['The bottleneck', "What\u2019s broken and what it\u2019s costing."],
                ['Whether ML fits', "Honest answer \u2014 sometimes it doesn\u2019t."],
                ['Concrete next step', 'A diagnostic SOW, or a referral, or nothing.']].
                map(([t, s], i) =>
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '10px 0', borderTop: i ? '1px solid var(--line-soft)' : 'none' }}>
                    <span style={{
                    flexShrink: 0, fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600,
                    width: 22, height: 22, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: 'rgba(30,107,255,.18)', color: '#9FBFFF', border: '1px solid rgba(30,107,255,.35)'
                  }}>0{i + 1}</span>
                    <div>
                      <div style={{ fontSize: 13.5, fontWeight: 500, color: '#fff' }}>{window.t(t)}</div>
                      <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,.55)', marginTop: 2 }}>{window.t(s)}</div>
                    </div>
                  </div>
                )}
              </div>

              {/* Contact direct */}
              <div style={{
                padding: 18, borderRadius: 14,
                background: 'linear-gradient(180deg, rgba(30,107,255,.08), rgba(30,107,255,.02))',
                border: '1px solid rgba(30,107,255,.32)',
                boxShadow: '0 0 0 1px rgba(30,107,255,.12), 0 12px 36px rgba(30,107,255,.18)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                  <span style={{
                    width: 34, height: 34, borderRadius: 999,
                    background: 'linear-gradient(135deg, #FFB948, #FF7A2C)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: '#fff', fontWeight: 600, fontSize: 13, letterSpacing: -0.3,
                  }}>KK</span>
                  <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
                    <div style={{ fontSize: 14, fontWeight: 500, color: '#fff' }}>{window.t('Kristaps Lokmanis · CEO')}</div>
                    <a href="https://www.linkedin.com/in/kristaps-lokmanis" target="_blank" rel="noopener" aria-label="LinkedIn"
                      style={{ width: 30, height: 30, borderRadius: 8, border: '1px solid var(--line)', background: 'rgba(255,255,255,.04)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.75)', transition: 'color .2s, background .2s, border-color .2s' }}
                      onMouseEnter={(e) => { e.currentTarget.style.color = '#fff'; e.currentTarget.style.background = 'rgba(30,107,255,.18)'; e.currentTarget.style.borderColor = 'rgba(30,107,255,.5)'; }}
                      onMouseLeave={(e) => { e.currentTarget.style.color = 'rgba(255,255,255,.75)'; e.currentTarget.style.background = 'rgba(255,255,255,.04)'; e.currentTarget.style.borderColor = 'var(--line)'; }}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 11.001 5.001A2.5 2.5 0 014.98 3.5zM3 9.5h4v11H3v-11zm6 0h3.8v1.5h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V20.5h-4v-5.6c0-1.33-.02-3.05-1.86-3.05-1.86 0-2.14 1.45-2.14 2.96V20.5H9v-11z" /></svg>
                    </a>
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'var(--mono)', fontSize: 13 }}>
                  <a href="mailto:kristaps@xybos.tech" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: '#fff', padding: '8px 0', borderTop: '1px solid var(--line)' }}>
                    <EIcon name="api" size={13} color="#9FBFFF" stroke={1.8} /> kristaps@xybos.tech
                  </a>
                  <a href="tel:+37129800149" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: '#fff', padding: '8px 0', borderTop: '1px solid var(--line-soft)' }}>
                    <EIcon name="bolt" size={13} color="#9FBFFF" stroke={1.8} /> +371 29 800 149
                  </a>
                </div>
              </div>

              {/* Response time */}
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14,
                padding: '12px 18px', borderRadius: 14,
                background: 'rgba(10,11,14,.55)', border: '1px solid var(--line)',
                fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,.6)', letterSpacing: 0.4,
              }}>
                <span>{window.t('// avg response')}</span>
                <span style={{ color: '#fff', fontWeight: 600 }}>&lt; 24h</span>
                <span style={{ width: 1, height: 14, background: 'var(--line)' }} />
                <span>{window.t('// weekdays')}</span>
                <span style={{ color: '#9FBFFF' }}>09:00 — 18:00 EET</span>
              </div>
            </div>
          </div>
        </div>
      </ECont>
    </ESect>
  );
}

function CTACorner({ t, b, l, r }) {
  const s = { position: 'absolute', width: 24, height: 24, [t ? 'top' : 'bottom']: 16, [l ? 'left' : 'right']: 16, pointerEvents: 'none', zIndex: 3 };
  const c = 'rgba(159,191,255,.5)';
  return (
    <div style={s}>
      <span style={{ position: 'absolute', [t ? 'top' : 'bottom']: 0, [l ? 'left' : 'right']: 0, width: 14, height: 1, background: c }} />
      <span style={{ position: 'absolute', [t ? 'top' : 'bottom']: 0, [l ? 'left' : 'right']: 0, width: 1, height: 14, background: c }} />
    </div>
  );
}

// ─── Footer ──────────────────────────────────────────────────
function Footer() {
  const cols = [
    { h: 'Sitemap', items: ['Why Xybos', 'Services', 'Process', 'Contact'] },
    { h: 'Contact', items: ['kristaps@xybos.tech', '+371 29 800 149', 'Riga, Latvia'] },
    { h: 'Legal',   items: ['Privacy'] },
  ];

  window.useLang();
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '80px 0 32px', background: 'var(--ink)', position: 'relative', overflow: 'hidden' }}>
      <ECont>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1.2fr 1fr', gap: 48, marginBottom: 64 }}>
          <div>
            <ELogo height={44} />
            <p style={{ marginTop: 22, fontSize: 14, color: 'rgba(255,255,255,.6)', lineHeight: 1.55, maxWidth: 340 }}>
              <span style={{ color: '#fff', fontWeight: 500 }}>{window.t('Xybos — operational intelligence, engineered.')}</span><br />
              {window.t('Machine-learning systems that automate the operational core of mid-sized retail, manufacturing and logistics businesses — engineered by a team with deep experience in large-scale ML delivery.')}
            </p>
          </div>

          {cols.map(c => (
            <div key={c.h}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,.45)', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 16 }}>{window.t(c.h)}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.items.map(it => {
                  const href =
                    it === 'Why Xybos'        ? 'xybos-landing.html#why' :
                    it === 'Services'         ? 'xybos-landing.html#services' :
                    it === 'Process'          ? 'xybos-landing.html#process' :
                    it === 'Contact'          ? 'xybos-contact.html' :
                    it === 'Privacy'          ? 'xybos-privacy.html' :
                    it === 'kristaps@xybos.tech' ? 'mailto:kristaps@xybos.tech' :
                    it === '+371 29 800 149'  ? 'tel:+37129800149' :
                    '#';
                  return <a key={it} href={href} className="nav-link" style={{ fontSize: 14, color: 'rgba(255,255,255,.7)', transition: 'color .15s' }}>{window.t(it)}</a>;
                })}
              </div>
            </div>
          ))}
        </div>

        {/* Giant brand display */}
        <div style={{
          position: 'relative', marginTop: 24, marginBottom: 48,
          overflow: 'hidden',
        }}>
          <div style={{
            fontSize: 'clamp(120px, 22vw, 260px)', fontWeight: 700, letterSpacing: -10,
            lineHeight: 0.9,
            background: 'linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            textAlign: 'center',
            userSelect: 'none',
          }}>xybos</div>
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: 24, borderTop: '1px solid var(--line)', flexWrap: 'wrap', gap: 16,
          fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(255,255,255,.45)', letterSpacing: 0.4,
        }}>
          <div>© 2026 Xybos SIA</div>
        </div>
      </ECont>
    </footer>
  );
}

Object.assign(window, { Pricing, FAQ, FinalCTA, Footer });
