/* ============================================================
   Tectus — redesign kit: richer primitives for the bespoke
   overview pages (Partners / Services / Resources / About /
   Platform). Composes DS components; gold accent, centered
   heroes, stat panels, testimonials, section labels.
   ============================================================ */
const { Button: RKButton, Card: RKCard, Badge: RKBadge } = window.TectusDesignSystem_c42b34;

/* gold-gradient accent text inside a headline */
function GoldAccent({ children }) {
  return (
    <span className="tt-goldaccent" style={{ background: 'linear-gradient(96deg, var(--color-primary-light), var(--color-primary) 55%, var(--color-primary-hover))', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>
      {children}
    </span>
  );
}

/* pill eyebrow — gold dot + uppercase label, outlined pill */
function PillEyebrow({ children, center }) {
  return (
    <div style={{ display: 'flex', justifyContent: center ? 'center' : 'flex-start' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 14px', borderRadius: 'var(--radius-pill)', border: '1px solid rgba(212,175,55,0.32)', background: 'var(--color-primary-soft)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--color-primary-light)' }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--color-primary)' }} />
        {children}
      </span>
    </div>
  );
}

/* centered dashed section label */
function SectionLabel({ children, center = true }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: center ? 'center' : 'flex-start', gap: 12, marginBottom: 18 }}>
      <span style={{ width: 26, height: 1, background: 'var(--color-border-strong)' }} />
      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--color-primary)' }}>{children}</span>
      <span style={{ width: 26, height: 1, background: 'var(--color-border-strong)' }} />
    </div>
  );
}

/* centered hero used by every redesigned overview page */
function CenterHero({ eyebrow, title, sub, primary, secondary, narrow }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)', width: 820, height: 520, background: 'radial-gradient(ellipse, rgba(212,175,55,0.10), transparent 64%)', pointerEvents: 'none' }} />
      <div className="wrap" style={{ padding: '72px 40px 56px', textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ marginBottom: 22 }}><PillEyebrow center>{eyebrow}</PillEyebrow></div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(38px, 5.2vw, 64px)', lineHeight: 1.04, letterSpacing: '-0.035em', margin: '0 auto 20px', maxWidth: narrow ? 760 : 900, textWrap: 'balance' }}>{title}</h1>
          <p style={{ fontSize: 18.5, lineHeight: 1.6, color: 'var(--color-text-muted)', maxWidth: 600, margin: '0 auto 32px', textWrap: 'pretty' }}>{sub}</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            {primary && <a href={ctaHref(primary)}><RKButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>{primary}</RKButton></a>}
            {secondary && <a href={ctaHref(secondary)}><RKButton variant="secondary" size="lg">{secondary}</RKButton></a>}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* bordered stat panel (4 across) */
function StatPanel({ stats, accentIdx = [0, 2] }) {
  return (
    <div className="wrap" style={{ padding: '0 40px 8px' }}>
      <Reveal>
        <div className="tt-statpanel" style={{ display: 'grid', gridTemplateColumns: `repeat(${stats.length}, 1fr)`, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden' }}>
          {stats.map((s, i) => (
            <div key={s.l} style={{ padding: '28px 30px', borderLeft: i ? '1px solid var(--color-divider)' : 'none' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'clamp(28px, 3vw, 38px)', fontWeight: 700, color: accentIdx.includes(i) ? 'var(--color-primary-light)' : 'var(--color-text)', lineHeight: 1 }}>{s.v}</div>
              <div style={{ fontSize: 13.5, color: 'var(--color-text-faint)', marginTop: 10, lineHeight: 1.4 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  );
}

/* centered section head (label + title + sub) */
function CenterHead({ label, title, sub }) {
  return (
    <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 52px' }}>
      <SectionLabel>{label}</SectionLabel>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(28px, 3.6vw, 44px)', letterSpacing: '-0.025em', lineHeight: 1.08, margin: '0 0 14px', textWrap: 'balance' }}>{title}</h2>
      {sub && <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: 0, maxWidth: 600, marginInline: 'auto', textWrap: 'pretty' }}>{sub}</p>}
    </div>
  );
}

/* numbered onboarding/process card in a bordered box */
function NumberCard({ n, t, d }) {
  return (
    <div style={{ padding: '24px 22px', background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', height: '100%' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: 9, background: 'var(--color-primary-soft)', border: '1px solid rgba(212,175,55,0.26)', color: 'var(--color-primary-light)', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 700, marginBottom: 18 }}>{n}</span>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 600, margin: '0 0 8px', lineHeight: 1.25 }}>{t}</h3>
      <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--color-text-muted)', margin: 0 }}>{d}</p>
    </div>
  );
}

/* testimonial card with stars + avatar */
function Testimonial({ stars = 5, quote, name, role, slot }) {
  return (
    <div style={{ padding: 28, background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', gap: 3, marginBottom: 16 }}>
        {Array.from({ length: 5 }).map((_, i) => (
          <Icon key={i} name="star" size={15} color={i < stars ? 'var(--color-primary)' : 'var(--color-border-strong)'} style={{ fill: i < stars ? 'var(--color-primary)' : 'transparent' }} />
        ))}
      </div>
      <p style={{ fontSize: 14.5, lineHeight: 1.62, color: 'var(--color-text)', margin: '0 0 22px', flex: 1 }}>{quote}</p>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <image-slot id={slot} style={{ width: 42, height: 42, borderRadius: '50%', display: 'block', flex: '0 0 auto' }} shape="circle" placeholder="Photo"></image-slot>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--color-text)' }}>{name}</div>
          <div style={{ fontSize: 12.5, color: 'var(--color-text-faint)', marginTop: 1 }}>{role}</div>
        </div>
      </div>
    </div>
  );
}

/* full-bleed dark CTA band */
function CTABandCenter({ label, title, sub, primary, secondary }) {
  return (
    <section className="wrap tt-cta-band" style={{ padding: '48px 40px 96px' }}>
      <Reveal>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', border: '1px solid rgba(212,175,55,0.22)', background: 'linear-gradient(180deg, rgba(212,175,55,0.06), transparent 50%), var(--color-surface)' }}>
          <span style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 320, height: 2, background: 'linear-gradient(90deg, transparent, var(--color-primary), transparent)' }} />
          <div style={{ padding: '72px 48px', textAlign: 'center' }}>
            {label && <SectionLabel>{label}</SectionLabel>}
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(30px, 4vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 auto 16px', maxWidth: 680, textWrap: 'balance' }}>{title}</h2>
            {sub && <p style={{ fontSize: 17.5, color: 'var(--color-text-muted)', maxWidth: 560, margin: '0 auto 30px', lineHeight: 1.6, textWrap: 'pretty' }}>{sub}</p>}
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              {primary && <a href={ctaHref(primary)}><RKButton variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={17} />}>{primary}</RKButton></a>}
              {secondary && <a href={ctaHref(secondary)}><RKButton variant="secondary" size="lg">{secondary}</RKButton></a>}
            </div>
          </div>
        </div>
      </Reveal>
    </section>
  );
}

/* ── Paste your Google Apps Script deployment URL here ── */
const NEWSLETTER_SHEET_URL = 'https://script.google.com/macros/s/AKfycby7Wqmd7-KsjEG78mczyla6j3mahLn-P7dzwFby8B417-ZpVMXzMIvjBa5a1AbNyQvr/exec';

/* newsletter band */
function NewsletterBand() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('idle'); // idle | loading | done

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email.includes('@') || status === 'done') return;
    setStatus('loading');
    if (NEWSLETTER_SHEET_URL) {
      try {
        await fetch(NEWSLETTER_SHEET_URL, {
          method: 'POST',
          mode: 'no-cors',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, timestamp: new Date().toISOString() }),
        });
      } catch (_) {}
    }
    setStatus('done');
  };

  return (
    <section style={{ borderTop: '1px solid var(--color-border)', background: 'var(--color-surface)' }}>
      <div className="wrap tt-news" style={{ padding: '56px 40px', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
        <div>
          <SectionLabel center={false}>Stay informed</SectionLabel>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 700, margin: '0 0 8px', letterSpacing: '-0.015em' }}>Get the latest security insights <GoldAccent>delivered weekly</GoldAccent></h3>
          <p style={{ fontSize: 14.5, color: 'var(--color-text-faint)', margin: 0, lineHeight: 1.55 }}>Practical guidance on security operations, product updates, and field best practices. No spam.</p>
        </div>
        {status === 'done' ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--color-primary)', fontSize: 14.5, fontWeight: 600, minWidth: 380 }}>
            <Icon name="circle-check" size={20} color="var(--color-primary)" />You're subscribed — talk soon.
          </div>
        ) : (
          <form onSubmit={handleSubmit} style={{ display: 'flex', gap: 10, minWidth: 380 }}>
            <input type="email" required value={email} onChange={(e) => { setEmail(e.target.value); }} placeholder="Enter your work email"
              style={{ flex: 1, height: 50, padding: '0 16px', background: 'var(--color-bg)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-md)', color: 'var(--color-text)', font: 'inherit', fontSize: 14.5, outline: 'none' }}
              onFocus={(e) => (e.target.style.borderColor = 'var(--color-primary)')} onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')} />
            <RKButton variant="primary" type="submit" disabled={status === 'loading'}>
              {status === 'loading' ? 'Saving...' : 'Subscribe'}
            </RKButton>
          </form>
        )}
      </div>
    </section>
  );
}

/* ---------- Duna-style process band — hairline-divided columns ---------- */
function ProcessBand({ items }) {
  return (
    <div className="tt-process-band" style={{ display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, borderTop: '1px solid var(--color-border-strong)' }}>
      {items.map((it, i) => (
        <Reveal key={it.t} delay={i * 90} className="tt-process-cell"
          style={{ display: 'flex', flexDirection: 'column', gap: 22, padding: '40px 28px 40px', borderLeft: i ? '1px solid var(--color-divider)' : 'none', transition: 'background var(--dur-base) var(--ease-standard)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span className="tt-process-ico" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--color-border)', background: 'var(--color-surface-2)', color: 'var(--color-text-muted)', transition: 'color var(--dur-base), border-color var(--dur-base)' }}><Icon name={it.icon} size={19} /></span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--color-text-faint)', fontWeight: 600, letterSpacing: '0.04em' }}>{it.n}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, margin: 0, lineHeight: 1.25 }}>{it.t}</h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--color-text-muted)', margin: 0 }}>{it.d}</p>
          </div>
        </Reveal>
      ))}
    </div>
  );
}

window.CUSTOM_PAGES = window.CUSTOM_PAGES || {};
Object.assign(window, { GoldAccent, PillEyebrow, SectionLabel, CenterHero, StatPanel, CenterHead, NumberCard, Testimonial, CTABandCenter, NewsletterBand, ProcessBand });