/* Marketing primitives built on the SyncBuild design system. */
const { useState, useEffect } = React;

function cls(...xs) { return xs.filter(Boolean).join(' '); }

function Logo({ variant = 'mark+word', size = 28 }) {
  // Inline SVG for instant render + dark-mode adaptive text colour.
  return (
    <span className="inline-flex items-center gap-2 select-none">
      <svg width={size} height={size} viewBox="0 0 40 40" aria-hidden="true">
        <rect width="40" height="40" rx="8" fill="#1A1D24" />
        <path d="M11 14h14a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H15a3 3 0 0 1-3-3v-6" fill="none" stroke="hsl(var(--sb-primary))" strokeWidth="2.4" strokeLinecap="round"></path>
        <circle cx="28" cy="14" r="2" fill="hsl(var(--sb-primary))"></circle>
        <circle cx="12" cy="26" r="2" fill="hsl(var(--sb-primary))"></circle>
      </svg>
      {variant !== 'mark' && (
        <span style={{ fontWeight: 600, fontSize: size * 0.6, letterSpacing: '-0.01em', color: 'var(--fg1)' }}>SyncBuild</span>
      )}
    </span>
  );
}

function Container({ children, className = '' }) {
  return <div className={cls('mx-auto w-full max-w-[1200px] px-6', className)}>{children}</div>;
}

function Eyebrow({ children, icon }) {
  return (
    <div className="m-eyebrow inline-flex items-center gap-2">
      {icon && <Icon name={icon} size={12} />}
      {children}
    </div>
  );
}

function Badge({ children, tone = 'default', className = '' }) {
  const tones = {
    default: 'tag-pill',
    brand: 'tag-pill tag-brand',
    success: 'tag-pill',
  };
  const extra = tone === 'success' ? { background: 'var(--success-bg)', color: 'var(--success-fg)', borderColor: 'transparent' } : {};
  return <span className={cls(tones[tone], className)} style={extra}>{children}</span>;
}

function Button({ variant = 'primary', size = 'md', href, to, children, onClick, className = '', icon, iconEnd }) {
  const cn = cls('btn', variant === 'primary' ? 'btn-primary' : 'btn-ghost', size === 'lg' && 'btn-lg', className);
  const inner = (
    <>
      {icon && <Icon name={icon} size={16} />}
      <span>{children}</span>
      {iconEnd && <Icon name={iconEnd} size={16} />}
    </>
  );
  if (to) return <a href={'#' + to} onClick={(e) => { e.preventDefault(); window.__nav?.(to); }} className={cn}>{inner}</a>;
  if (href) return <a href={href} className={cn}>{inner}</a>;
  return <button onClick={onClick} className={cn}>{inner}</button>;
}

// Section heading (eyebrow + title + lede)
function SectionHeading({ eyebrow, title, lede, align = 'left', className = '' }) {
  const a = align === 'center' ? 'text-center mx-auto' : '';
  return (
    <div className={cls('max-w-2xl', a, className)}>
      {eyebrow && <div className="mb-4"><Eyebrow>{eyebrow}</Eyebrow></div>}
      <h2 className="m-headline">{title}</h2>
      {lede && <p className="m-lede mt-4" style={{ marginInline: align === 'center' ? 'auto' : 0 }}>{lede}</p>}
    </div>
  );
}

// Feature card — flat, hairline, no gimmicks
function FeatureCard({ icon, title, children, href }) {
  const Inner = (
    <div className="card p-6 h-full flex flex-col gap-3 transition-shadow hover:shadow-md">
      <div className="w-9 h-9 rounded-md grid place-items-center" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
        <Icon name={icon} size={18} />
      </div>
      <h3 className="m-title" style={{ fontSize: 17 }}>{title}</h3>
      <div className="text-[14px] leading-relaxed" style={{ color: 'var(--fg2)' }}>{children}</div>
    </div>
  );
  if (href) return <a href={'#' + href} onClick={(e) => { e.preventDefault(); window.__nav?.(href); }} className="block">{Inner}</a>;
  return Inner;
}

// Stat
function Stat({ value, label, delta }) {
  return (
    <div className="card p-5">
      <div className="text-[12px]" style={{ color: 'var(--fg2)' }}>{label}</div>
      <div className="sb-display mt-2" style={{ fontSize: 28 }}>{value}</div>
      {delta && (
        <div className="mt-2 inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-medium delta-up">
          <Icon name="TrendingUp" size={11} /> {delta}
        </div>
      )}
    </div>
  );
}

// Subtle divider w/ label
function LabelDivider({ children }) {
  return (
    <div className="flex items-center gap-4 my-8">
      <div className="h-px flex-1" style={{ background: 'var(--border)' }} />
      <span className="sb-eyebrow">{children}</span>
      <div className="h-px flex-1" style={{ background: 'var(--border)' }} />
    </div>
  );
}

// Checklist
function Checklist({ items }) {
  return (
    <ul className="space-y-2.5">
      {items.map((it, i) => (
        <li key={i} className="flex items-start gap-2.5 text-[14px]" style={{ color: 'var(--fg1)' }}>
          <span className="mt-0.5 w-4 h-4 rounded-full grid place-items-center shrink-0" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
            <Icon name="Check" size={11} strokeWidth={3} />
          </span>
          <span>{it}</span>
        </li>
      ))}
    </ul>
  );
}

// Quote
function Quote({ text, who, role, company }) {
  return (
    <figure className="card p-8">
      <blockquote className="m-title" style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.4, color: 'var(--fg1)' }}>
        "{text}"
      </blockquote>
      <figcaption className="mt-5 flex items-center gap-3">
        <div className="w-9 h-9 rounded-full grid place-items-center" style={{ background: 'var(--bg-muted)', color: 'var(--fg2)', fontWeight: 600, fontSize: 13 }}>
          {who.split(' ').map(s => s[0]).slice(0,2).join('')}
        </div>
        <div>
          <div className="text-[13px] font-medium">{who}</div>
          <div className="text-[12px]" style={{ color: 'var(--fg2)' }}>{role} · {company}</div>
        </div>
      </figcaption>
    </figure>
  );
}

// Segmented control
function Segmented({ value, onChange, options }) {
  return (
    <div className="tw-seg">
      {options.map(o => (
        <button key={o.value} className={value === o.value ? 'on' : ''} onClick={() => onChange(o.value)}>{o.label}</button>
      ))}
    </div>
  );
}

Object.assign(window, { cls, Logo, Container, Eyebrow, Badge, Button, SectionHeading, FeatureCard, Stat, LabelDivider, Checklist, Quote, Segmented });