// proof-pricing.jsx — Channels (dark), Testimonials, Pricing, FAQ
window.DZ = window.DZ || {};

// Apple Mail app-icon glyph — white envelope (sits on a blue gradient tile).
function AppleMailGlyph({ size = 18 }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
      <path fill="#fff" d="M4.2 6h15.6c1.05 0 1.9.85 1.9 1.9v8.2c0 1.05-.85 1.9-1.9 1.9H4.2A1.9 1.9 0 0 1 2.3 16.1V7.9C2.3 6.85 3.15 6 4.2 6Z" />
      <path fill="none" stroke="#0A84FF" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" d="M3.2 8.4 12 14.2l8.8-5.8" />
    </svg>
  );
}
function Channels({ onCta }) {
  const { Button, Badge } = window.DelzAILabsDesignSystem_bfa572 || {};
  const channels = window.SITE.channels;
  return (
    <section id="channels" style={{ padding: 'clamp(20px, 5vw, 56px)', scrollMarginTop: 80 }}>
      <div style={{ position: 'relative', overflow: 'hidden', maxWidth: 'var(--container-xl)', margin: '0 auto', background: 'var(--navy-ink)', borderRadius: 'var(--radius-xl)', padding: 'clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px)' }}>
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 110% at 90% -10%, rgba(242,106,31,0.30), transparent 55%), radial-gradient(60% 100% at -5% 110%, rgba(27,63,196,0.40), transparent 60%)' }} />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.9fr)', gap: 'clamp(32px, 5vw, 64px)', alignItems: 'center' }} className="channels-grid">
          <div>
            <div className="eyebrow" style={{ color: 'var(--orange-300)', marginBottom: 16 }}>MEET CUSTOMERS WHERE THEY ARE</div>
            <h2 style={{ color: '#fff', fontSize: 'clamp(28px, 4vw, 44px)', margin: '0 0 16px' }}>One agent, every channel</h2>
            <p style={{ color: 'rgba(255,255,255,0.70)', fontSize: 17, lineHeight: 1.65, margin: '0 0 32px', maxWidth: 460 }}>
              Your agents speak across WhatsApp, Telegram, email and the web with the same memory and the same connection to your tools. No channel left behind.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: 12, marginBottom: 32 }}>
              {channels.map((c) => (
                <div key={c.key} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '12px 14px', borderRadius: 'var(--radius-md)', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.10)' }}>
                  <span style={{ width: 32, height: 32, borderRadius: 8, background: c.key === 'email' ? 'linear-gradient(180deg,#5AC8FA,#0A84FF)' : c.color, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flex: 'none' }}>
                    {c.key === 'email'
                      ? <AppleMailGlyph size={18} />
                      : window.BRAND_ICONS[c.key]
                        ? <svg viewBox="0 0 24 24" width="17" height="17" fill="#fff" aria-hidden="true"><path d={window.BRAND_ICONS[c.key]} /></svg>
                        : <i data-lucide={c.icon} style={{ width: 17, height: 17 }} />}
                  </span>
                  <span style={{ fontSize: 14, fontWeight: 500, color: '#fff' }}>{c.name}</span>
                </div>
              ))}
            </div>
            {Button && <Button variant="accent" size="lg" onClick={onCta} iconRight={<i data-lucide="arrow-right" />}>Connect a channel</Button>}
          </div>

          {/* iPhone 16 — realistic WhatsApp chat */}
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <PhoneWhatsApp />
          </div>
        </div>
      </div>
    </section>
  );
}
function Bubble({ side, children }) {
  const out = side === 'out';
  return (
    <div style={{ alignSelf: out ? 'flex-end' : 'flex-start', maxWidth: '82%', background: out ? '#DCF8C6' : '#fff', color: '#111B21', fontSize: 13.5, lineHeight: 1.5, padding: '8px 11px', borderRadius: 10, borderTopRightRadius: out ? 2 : 10, borderTopLeftRadius: out ? 10 : 2, boxShadow: '0 1px 1px rgba(0,0,0,0.08)' }}>{children}</div>
  );
}
function PhoneStatusIcons() {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      <svg width="17" height="11" viewBox="0 0 18 12" fill="#111" aria-hidden="true"><rect x="0" y="7.5" width="3" height="4.5" rx="1" /><rect x="5" y="5" width="3" height="7" rx="1" /><rect x="10" y="2.5" width="3" height="9.5" rx="1" /><rect x="15" y="0" width="3" height="12" rx="1" /></svg>
      <svg width="16" height="11" viewBox="0 0 16 12" fill="#111" aria-hidden="true"><path d="M8 2.3c2.35 0 4.5.92 6.1 2.42l-1.45 1.5A6.6 6.6 0 0 0 8 4.3a6.6 6.6 0 0 0-4.65 1.92L1.9 4.72A8.85 8.85 0 0 1 8 2.3zm0 3.8c1.2 0 2.3.47 3.13 1.24L8 10.6 4.87 7.34A4.55 4.55 0 0 1 8 6.1z" /></svg>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 1.5 }}>
        <span style={{ width: 22, height: 11, borderRadius: 3, border: '1px solid rgba(0,0,0,0.4)', padding: 1.5, display: 'inline-flex' }}><span style={{ width: '80%', background: '#111', borderRadius: 1.5 }} /></span>
        <span style={{ width: 1.5, height: 4, background: 'rgba(0,0,0,0.4)', borderRadius: 1 }} />
      </span>
    </span>
  );
}

function WAMsg({ side, text, time, read }) {
  const out = side === 'out';
  return (
    <div className="wa-msg" style={{ alignSelf: out ? 'flex-end' : 'flex-start', maxWidth: '80%', background: out ? '#D9FDD3' : '#fff', color: '#111B21', fontSize: 13.5, lineHeight: 1.42, padding: '5px 8px 5px 9px', borderRadius: 8, borderTopRightRadius: out ? 2 : 8, borderTopLeftRadius: out ? 8 : 2, boxShadow: '0 1px 0.5px rgba(0,0,0,0.13)' }}>
      <span>{text}</span>
      <span style={{ float: 'right', display: 'inline-flex', alignItems: 'center', gap: 3, margin: '6px 0 -2px 10px' }}>
        <span style={{ fontSize: 10.5, color: '#667781' }}>{time}</span>
        {out && <i data-lucide="check-check" style={{ width: 15, height: 15, color: read ? '#53BDEB' : '#8696a0' }} />}
      </span>
    </div>
  );
}

function ChPhoneSideBtns() {
  const base = { position: 'absolute', background: 'linear-gradient(180deg,#42454c,#25272d)', boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.18)', zIndex: 0 };
  return (
    <React.Fragment>
      <span aria-hidden="true" style={{ ...base, left: -2.5, top: '15%', width: 3, height: 24, borderRadius: '2px 0 0 2px' }} />
      <span aria-hidden="true" style={{ ...base, left: -2.5, top: '23%', width: 3, height: 50, borderRadius: '2px 0 0 2px' }} />
      <span aria-hidden="true" style={{ ...base, left: -2.5, top: '34%', width: 3, height: 50, borderRadius: '2px 0 0 2px' }} />
      <span aria-hidden="true" style={{ ...base, right: -2.5, top: '25%', width: 3, height: 64, borderRadius: '0 2px 2px 0' }} />
    </React.Fragment>
  );
}

function PhoneWhatsApp() {
  return (
    <div className="wa-phone" style={{ position: 'relative', width: 'min(100%, 298px)', borderRadius: 56, padding: 6, background: 'linear-gradient(135deg,#5b5e66,#2c2e34 38%,#44464d 68%,#202227)', boxShadow: '0 34px 80px rgba(7,12,36,0.5), 0 4px 14px rgba(7,12,36,0.4), inset 0 0 0 1px rgba(255,255,255,0.16), 0 0 0 1.5px rgba(0,0,0,0.45)' }}>
      <ChPhoneSideBtns />
      <div style={{ position: 'relative', zIndex: 1, borderRadius: 50, overflow: 'hidden', height: 600, display: 'flex', flexDirection: 'column', background: '#E4DDD4' }}>
        <div aria-hidden style={{ position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)', width: 100, height: 28, background: '#000', borderRadius: 14, zIndex: 6, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', paddingRight: 10 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'radial-gradient(circle at 35% 35%, #2b3550, #05070d)' }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', padding: '0 22px 5px', height: 48, background: '#F7F7F7', zIndex: 2 }}>
          <span style={{ fontSize: 14.5, fontWeight: 600, color: '#111', letterSpacing: '0.3px' }}>9:41</span>
          <PhoneStatusIcons />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 9px 9px', background: '#F7F7F7', borderBottom: '0.5px solid #d6d6d6' }}>
          <i data-lucide="chevron-left" style={{ width: 22, height: 22, color: '#007a6c', flex: 'none', marginRight: -2 }} />
          <span style={{ width: 38, height: 38, borderRadius: '50%', background: '#fff', border: '0.5px solid #e0e0e0', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none', overflow: 'hidden' }}>
            <img src="assets/logo-mark.png" alt="" style={{ width: 34, height: 34, objectFit: 'contain' }} />
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: '#111', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>Delz Support Agent</div>
            <div style={{ fontSize: 11, color: '#8a8a8e' }}>online</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, color: '#007a6c', flex: 'none' }}>
            <i data-lucide="video" style={{ width: 19, height: 19 }} />
            <i data-lucide="phone" style={{ width: 17, height: 17 }} />
          </div>
        </div>
        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 6, padding: '12px 9px', background: '#E4DDD4' }}>
          <div className="wa-msg" style={{ alignSelf: 'center', background: 'rgba(255,255,255,0.9)', color: '#54656f', fontSize: 11, fontWeight: 600, padding: '3px 11px', borderRadius: 7, boxShadow: '0 1px 0.5px rgba(0,0,0,0.1)' }}>TODAY</div>
          <div className="wa-msg" style={{ alignSelf: 'center', maxWidth: '92%', textAlign: 'center', background: '#FCF4CB', color: '#766f56', fontSize: 10.5, lineHeight: 1.45, padding: '5px 10px', borderRadius: 7, boxShadow: '0 1px 0.5px rgba(0,0,0,0.08)' }}>
            <i data-lucide="lock" style={{ width: 9, height: 9, verticalAlign: 'middle', marginRight: 3 }} />Messages are end-to-end encrypted. No one outside this chat can read them.
          </div>
          <WAMsg side="in" text="Hi! My order #4821 hasn't arrived yet." time="09:12" />
          <WAMsg side="out" text="Hi Sara — let me check that for you. One sec." time="09:12" read />
          <WAMsg side="out" text="Your order shipped Tuesday and is out for delivery today. Want me to text you the tracking link?" time="09:12" read />
          <WAMsg side="in" text="Yes please" time="09:13" />
          <WAMsg side="out" text="Done — sent it to your number. Anything else?" time="09:13" read />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '7px 9px', background: '#F7F7F7' }}>
          <i data-lucide="plus" style={{ width: 25, height: 25, color: '#007a6c', flex: 'none' }} />
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: '#fff', borderRadius: 18, padding: '7px 12px', border: '0.5px solid #e2e2e2' }}>
            <span style={{ flex: 1, fontSize: 13.5, color: '#8696a0' }}>Message</span>
            <i data-lucide="camera" style={{ width: 18, height: 18, color: '#8696a0', flex: 'none' }} />
          </div>
          <span style={{ width: 34, height: 34, borderRadius: '50%', background: '#00A884', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flex: 'none' }}><i data-lucide="mic" style={{ width: 17, height: 17 }} /></span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', padding: '5px 0 8px', background: '#F7F7F7' }}><span style={{ width: 128, height: 5, borderRadius: 3, background: '#111' }} /></div>
      </div>
    </div>
  );
}

window.DZ.Channels = Channels;

function Testimonials() {
  const items = window.SITE.testimonials;
  const { Avatar } = window.DelzAILabsDesignSystem_bfa572 || {};
  return (
    <section style={{ padding: 'clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px)' }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 48px' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>PROOF</div>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: 0 }}>Teams that stopped doing the busywork</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 22 }}>
          {items.map((t) => (
            <div key={t.name} style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)', padding: 28 }}>
              <i data-lucide="quote" style={{ width: 26, height: 26, color: 'var(--orange-300)', marginBottom: 14 }} />
              <p style={{ fontSize: 16.5, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 24px', flex: 1 }}>{t.quote}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                {Avatar && <Avatar name={t.name} />}
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-strong)' }}>{t.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.DZ.Testimonials = Testimonials;

function Pricing({ onCta }) {
  const { Button, Badge } = window.DelzAILabsDesignSystem_bfa572 || {};
  const [annual, setAnnual] = React.useState(true);
  const plans = window.SITE.pricing;
  return (
    <section id="pricing" style={{ padding: 'clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 'var(--container-xl)', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 600, margin: '0 auto 36px' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>PRICING</div>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: '0 0 16px' }}>Start free. Scale when it pays off.</h2>
          <p style={{ fontSize: 17, color: 'var(--text-muted)', margin: 0 }}>Every plan includes the channels, the run log and a team that helps you ship.</p>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 44 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: 4, borderRadius: 'var(--radius-pill)', background: 'var(--surface-sunken)', border: '1px solid var(--border-subtle)' }}>
            {[['Monthly', false], ['Annual', true]].map(([label, val]) => {
              const on = annual === val;
              return (
                <button key={label} onClick={() => setAnnual(val)}
                  style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 18px', borderRadius: 'var(--radius-pill)', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
                    background: on ? 'var(--surface-card)' : 'transparent', color: on ? 'var(--text-strong)' : 'var(--text-muted)', boxShadow: on ? 'var(--shadow-sm)' : 'none', transition: 'all var(--dur-fast) var(--ease-standard)' }}>
                  {label}{label === 'Annual' && <span style={{ fontSize: 11.5, color: 'var(--action-accent)', fontWeight: 600 }}>−20%</span>}
                </button>
              );
            })}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 22, alignItems: 'stretch' }}>
          {plans.map((p) => {
            const price = annual ? p.yearly : p.monthly;
            return (
              <div key={p.name} style={{ position: 'relative', display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', padding: 'clamp(26px, 3vw, 36px)',
                border: p.featured ? '1.5px solid var(--blue-400)' : '1px solid var(--border-subtle)',
                boxShadow: p.featured ? 'var(--glow-cobalt)' : 'var(--shadow-md)' }}>
                {p.featured && (
                  <div style={{ position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)' }}>
                    {Badge && <Badge tone="accent" solid>Most popular</Badge>}
                  </div>
                )}
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--text-strong)', marginBottom: 6 }}>{p.name}</div>
                <p style={{ fontSize: 14, color: 'var(--text-muted)', margin: '0 0 22px', lineHeight: 1.5, minHeight: 42 }}>{p.tagline}</p>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                  {price === null ? (
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 40, color: 'var(--text-strong)' }}>Custom</span>
                  ) : price === 0 ? (
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 40, color: 'var(--text-strong)' }}>$0</span>
                  ) : (
                    <React.Fragment>
                      <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, color: 'var(--text-strong)' }}>${price}</span>
                      <span style={{ fontSize: 15, color: 'var(--text-muted)' }}>/mo</span>
                    </React.Fragment>
                  )}
                </div>
                <div style={{ fontSize: 13, color: 'var(--text-subtle)', marginBottom: 24 }}>{price > 0 && annual ? 'billed annually' : p.priceNote}</div>
                {Button && <Button variant={p.variant} fullWidth onClick={onCta}>{p.cta}</Button>}
                <div style={{ height: 1, background: 'var(--border-subtle)', margin: '24px 0' }} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
                  {p.features.map((f) => (
                    <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                      <i data-lucide="check" style={{ width: 18, height: 18, color: p.featured ? 'var(--blue-500)' : 'var(--success-500)', flex: 'none', marginTop: 1 }} />
                      <span style={{ fontSize: 14.5, color: 'var(--text-body)', lineHeight: 1.45 }}>{f}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.DZ.Pricing = Pricing;

function Faq() {
  const faqs = window.SITE.faqs;
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: 'clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px)', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 'var(--container-md)', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>FAQ</div>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: 0 }}>Questions, answered</h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {faqs.map((f, i) => {
            const on = open === i;
            return (
              <div key={i} style={{ background: 'var(--surface-card)', border: `1px solid ${on ? 'var(--border-default)' : 'var(--border-subtle)'}`, borderRadius: 'var(--radius-md)', boxShadow: on ? 'var(--shadow-sm)' : 'var(--shadow-xs)', overflow: 'hidden', transition: 'border-color var(--dur-base) var(--ease-standard)' }}>
                <button onClick={() => setOpen(on ? -1 : i)}
                  style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, padding: '20px 22px', border: 'none', background: 'transparent', cursor: 'pointer', textAlign: 'left' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, color: 'var(--text-strong)', flex: 1, minWidth: 0, textWrap: 'pretty' }}>{f.q}</span>
                  <i data-lucide="chevron-down" style={{ width: 20, height: 20, color: 'var(--text-muted)', flex: 'none', transform: on ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-base) var(--ease-standard)' }} />
                </button>
                <div style={{ maxHeight: on ? 240 : 0, overflow: 'hidden', transition: 'max-height var(--dur-slow) var(--ease-standard)' }}>
                  <p style={{ padding: '0 22px 22px', margin: 0, fontSize: 15.5, lineHeight: 1.65, color: 'var(--text-muted)' }}>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.DZ.Faq = Faq;