// Nexora Cores — Website UI Kit · Partner band (dark) + CTA + Footer
const { Eyebrow, Button, Badge, Avatar, MetricStat } = window.NexoraCoresDesignSystem_c8b55f;
const FOOT_SP = ''; // sprite is inlined in the page → same-document #ico-* refs

function Partner() {
  const stats = [
    ['12+', 'Design partners onboarding', '#38BDF8'],
    ['60M', 'Members reachable',          '#7C6FF0'],
    ['$5K', 'Implementation, starting',   '#5EEAD4'],
    ['60', 'Days to production',          '#7C6FF0'],
  ];
  const perks = [
    { icon: 'zap',       c: '#38BDF8', t: 'Early platform access',  d: 'Ship on CommunityOS before general availability, with features built around your use case.' },
    { icon: 'users',     c: '#7C6FF0', t: 'Hands-on onboarding',    d: 'Direct line to our founding team — strategy, integration, and launch support, end to end.' },
    { icon: 'gift',      c: '#5EEAD4', t: 'Founding partner pricing', d: 'Locked-in implementation and platform rates that scale with you as you grow.' },
    { icon: 'target',    c: '#7C6FF0', t: 'Shape the roadmap',      d: 'Your feedback sets our priorities — the platform is built around real partner needs.' },
  ];
  return (
    <section id="partner" style={{ padding: '100px 5%', background: 'var(--ink)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -200, right: -200, width: 600, height: 600, background: 'radial-gradient(circle,rgba(82,64,228,.15),transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ maxWidth: 640, marginBottom: 40 }}>
          <Eyebrow tone="on-dark">Design Partners</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 800, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1.07, margin: '12px 0 16px' }}>Build the platform<br />alongside us.</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, color: 'rgba(255,255,255,.55)', lineHeight: 1.72, margin: 0, letterSpacing: '-0.01em' }}>We're onboarding a small cohort of design partners — organizations with engaged audiences ready to turn engagement into recurring revenue.</p>
        </div>

        <div style={{ display: 'flex', alignItems: 'stretch', marginBottom: 24, background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 14, overflow: 'hidden', flexWrap: 'wrap' }}>
          {stats.map(([v, l, c], i) => (
            <div key={l} style={{ flex: '1 1 180px', padding: '24px 28px', borderRight: i < 3 ? '1px solid rgba(255,255,255,.08)' : 'none', position: 'relative' }}>
              <span style={{ position: 'absolute', top: 0, left: 28, width: 26, height: 2, borderRadius: 2, background: c }} />
              <MetricStat value={v} label={l} tone="dark" size="md" />
            </div>
          ))}
        </div>

        {/* What design partners get */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 40 }} className="partner-perks">
          {perks.map(p => (
            <div key={p.t} className="nx-perk" style={{ background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.09)', borderRadius: 14, padding: '22px 20px', transition: 'transform .2s var(--ease-out), border-color .2s, background .2s' }}>
              <span style={{ width: 40, height: 40, borderRadius: 10, background: `${p.c}1f`, border: `1px solid ${p.c}3d`, color: p.c, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}>
                <svg width="20" height="20" style={{ display: 'block' }}><use href={`${FOOT_SP}#ico-${p.icon}`} /></svg>
              </span>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em', marginBottom: 7 }}>{p.t}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'rgba(255,255,255,.5)', lineHeight: 1.6, margin: 0, letterSpacing: '-0.005em' }}>{p.d}</p>
            </div>
          ))}
        </div>

        <div style={{ position: 'relative', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.1)', borderRadius: 16, padding: 36, display: 'grid', gridTemplateColumns: '220px 1fr', gap: 40, alignItems: 'start', overflow: 'hidden', boxShadow: '0 30px 60px -30px rgba(0,0,0,.6)' }} className="partner-quote">
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--grad-brand)' }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <Avatar initials="MP" brand size={52} />
            <div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600, color: '#fff', letterSpacing: '-0.02em' }}>Media Partner</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,.4)', marginTop: 2 }}>Publisher · 4M readers</div>
            </div>
            <Badge tone="dark"><svg width="12" height="12" style={{ color: 'rgba(255,255,255,.4)' }}><use href={`${FOOT_SP}#ico-building`} /></svg>Confidential</Badge>
          </div>
          <div>
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#7C6FF0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: .85, marginBottom: 14 }}><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'rgba(255,255,255,.92)', lineHeight: 1.5, letterSpacing: '-0.02em', margin: '0 0 24px' }}>We had the audience but no way to monetize engagement beyond ads. Nexora Cores gives us a membership layer and a partner ecosystem that pays per redemption — recurring revenue from the readers we already have.</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Memberships', 'Rewards marketplace', 'Partner referrals', 'Data insights'].map(t => (
                <span key={t} style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,.5)', background: 'rgba(255,255,255,.07)', border: '1px solid rgba(255,255,255,.1)', padding: '5px 12px', borderRadius: 6, letterSpacing: '-0.01em' }}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  const { NetworkCanvas } = window;
  return (
    <section id="contact" style={{ padding: '100px 5%', background: 'var(--grad-brand)', position: 'relative', overflow: 'hidden' }}>
      {NetworkCanvas ? <NetworkCanvas style={{ opacity: 0.5, mixBlendMode: 'screen' }} /> : null}
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px)', backgroundSize: '28px 28px', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 660, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 52, fontWeight: 800, color: '#fff', letterSpacing: '-0.04em', lineHeight: 1.07, margin: '0 0 18px' }}>Build what's<br />next, together.</h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, color: 'rgba(255,255,255,.85)', margin: '0 0 36px', lineHeight: 1.7, letterSpacing: '-0.01em' }}>Book a strategy call and we'll map your path to AI automation and modern digital infrastructure.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="white">Book a Strategy Call</Button>
          <Button variant="outline-white" arrow>Apply as a Design Partner</Button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = {
    Products: [['CommunityOS', 'communityos.html'], ['Connect', '#products'], ['Core AI', 'core-ai.html'], ['Platform API', 'platform-api.html']],
    Solutions: [['Restaurants & Hospitality', 'solutions.html#hospitality'], ['Telecom', 'solutions.html#telecom'], ['Fintech', 'solutions.html#fintech'], ['NGOs', 'solutions.html#ngo']],
    Company: [['About', 'about.html'], ['Design Partners', 'index.html#partner'], ['Contact', '#contact']],
    Resources: [['Documentation', 'docs.html'], ['Case Studies', 'case-studies.html'], ['Blog', 'blog.html']],
  };
  return (
    <footer style={{ background: '#07070F', padding: '64px 5% 32px' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 40, marginBottom: 56 }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 14 }}>
              <img src="assets/logo-mark.svg" width="28" height="28" alt="" />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: '#fff', letterSpacing: '-0.02em' }}>Nexora <span style={{ color: 'var(--purple-light)' }}>Cores</span></span>
            </div>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'rgba(255,255,255,.35)', lineHeight: 1.65, maxWidth: 220, margin: '0 0 20px', letterSpacing: '-0.01em' }}>Building Intelligent Digital Infrastructure.</p>
            <div style={{ display: 'flex', gap: 8 }}>
              {['linkedin', 'x', 'youtube'].map(s => (
                <a key={s} href="#" style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.5)' }}>
                  <svg width="16" height="16"><use href={`${FOOT_SP}#ico-${s}`} /></svg>
                </a>
              ))}
            </div>
          </div>
          {Object.entries(cols).map(([title, links]) => (
            <div key={title}>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,.45)', textTransform: 'uppercase', letterSpacing: '.1em', marginBottom: 16 }}>{title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {links.map(([l, href]) => <a key={l} href={href} style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'rgba(255,255,255,.35)', textDecoration: 'none', letterSpacing: '-0.01em' }}>{l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,.07)' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,.22)', letterSpacing: '-0.01em' }}>© 2026 Nexora Cores Inc. — All Rights Reserved.</span>
          <div style={{ display: 'flex', gap: 18 }}>
            {[['Privacy', 'legal.html#privacy'], ['Terms', 'legal.html#terms'], ['Security', 'legal.html#security']].map(([l, h]) => <a key={l} href={h} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'rgba(255,255,255,.22)', textDecoration: 'none' }}>{l}</a>)}
          </div>
        </div>
      </div>
    </footer>
  );
}
// Real partner logos supplied by the brand owner. Heights tuned so each reads
// at an even optical weight in the marquee; width is auto.
const TRUST_PARTNERS = [
  { name: 'Stripe',       src: 'logos/stripe.png',       h: 40 },
  { name: 'Stripe Atlas', src: 'logos/stripe-atlas.png', h: 74 },
  { name: 'AWS',          src: 'logos/aws.png',          h: 36 },
  { name: 'Claude',       src: 'logos/claude.png',       h: 31, blend: true },
  { name: 'OpenAI',       src: 'logos/openai.png',       h: 32 },
  { name: 'Vercel',       src: 'logos/vercel.svg',       h: 26 },
  { name: 'Supabase',     src: 'logos/supabase.svg',     h: 28 },
];

function TrustMark({ p }) {
  return (
    <div className="trust-mark" style={{ display: 'flex', alignItems: 'center', flexShrink: 0, padding: '0 4px' }}>
      <img src={p.src} alt={p.name} height={p.h} style={{ height: p.h, width: 'auto', display: 'block', transform: p.dy ? `translateY(${p.dy}px)` : 'none', mixBlendMode: p.blend ? 'multiply' : 'normal' }} />
    </div>
  );
}

function TrustStrip() {
  // Three copies so the -33.33% translate loop stays full edge-to-edge even on
  // wide monitors (one set alone is narrower than a desktop viewport).
  const loop = [...TRUST_PARTNERS, ...TRUST_PARTNERS, ...TRUST_PARTNERS];
  return (
    <section style={{ padding: '40px 0 42px', background: 'var(--surface)', borderBottom: '1px solid var(--border)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24 }}>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--ink-muted)' }}>Built on trusted infrastructure</span>
        <div className="nx-marquee">
          <div className="nx-marquee-track">
            {loop.map((p, i) => <TrustMark key={p.name + i} p={p} />)}
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Partner, CTA, Footer, TrustStrip });