// ── Design tokens ─────────────────────────────────────────────────
const ACCENT = '#FF6B00';
const ACCENT_HOVER = '#FF8E53';
const ACCENT_GLOW = 'rgba(255,107,0,0.5)';
const SURFACE = '#0A0A0A';
const SURFACE2 = '#050505';
const SURFACE_LIGHT = '#111111';
const SURFACE_ELEVATED = '#181818';
const BORDER = 'rgba(255,255,255,0.08)';
const BORDER_LIGHT = 'rgba(255,255,255,0.15)';
const MUTED = '#666';
const TEXT_PRIMARY = '#F5F5F5';
const TEXT_SECONDARY = '#888';

// ── Accessibility ─────────────────────────────────────────────────
function usePrefersReducedMotion() {
  const [reduced, setReduced] = React.useState(false);
  React.useEffect(() => {
    const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
    setReduced(mql.matches);
    const h = e => setReduced(e.matches);
    mql.addEventListener('change', h);
    return () => mql.removeEventListener('change', h);
  }, []);
  return reduced;
}

// Tier set by the perf detector in index.html (default to 'high' if missing)
function usePerfTier() {
  const [tier, setTier] = React.useState(() => window.__PERF_TIER__ || 'high');
  React.useEffect(() => {
    const h = e => setTier(e.detail?.tier || window.__PERF_TIER__ || 'high');
    window.addEventListener('perftierready', h);
    // Pick up any tier set between initial state and effect
    if (window.__PERF_TIER__ && window.__PERF_TIER__ !== tier) setTier(window.__PERF_TIER__);
    return () => window.removeEventListener('perftierready', h);
  }, []);
  return tier;
}

// ── Shared window size hook (rAF-debounced) ─────────────────────
function useWindowSize(delay = 120) {
  const [size, setSize] = React.useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  React.useEffect(() => {
    let raf;
    const onResize = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        setSize({ width: window.innerWidth, height: window.innerHeight });
      });
    };
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('resize', onResize); cancelAnimationFrame(raf); };
  }, []);
  return size;
}

function SvgAnimate(props) {
  const reduced = usePrefersReducedMotion();
  const tier = usePerfTier();
  if (reduced || tier === 'low') return null;
  return React.createElement('animate', props);
}

function SvgAnimateMotion(props) {
  const reduced = usePrefersReducedMotion();
  const tier = usePerfTier();
  if (reduced || tier === 'low') return null;
  return React.createElement('animateMotion', props);
}

// ── Scroll Reveal Hook ────────────────────────────────────────────
function useFadeUp(threshold = 0.15) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
}

// ── FadeUp wrapper component ──────────────────────────────────────
function FadeUp({ children, delay = 0, style = {} }) {
  const [ref, visible] = useFadeUp();
  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(32px)',
      transition: `opacity 0.75s cubic-bezier(0.25,0.46,0.45,0.94) ${delay}ms, transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94) ${delay}ms`,
      ...style,
    }}>
      {children}
    </div>
  );
}

// ── Primitives ────────────────────────────────────────────────────
const SectionLabel = ({ number, children }) => (
  <div style={{ display: 'inline-block', marginBottom: 32 }}>
    <span style={{
      fontFamily: '"JetBrains Mono", monospace', fontSize: '0.75rem', fontWeight: 500,
      letterSpacing: '0.08em', textTransform: 'uppercase',
      background: ACCENT, color: SURFACE2, padding: '8px 16px', borderRadius: 100,
    }}>{number} / {children}</span>
  </div>
);

const SectionH2 = ({ children, style = {} }) => (
  <h2 style={{
    fontFamily: '"Bebas Neue", sans-serif', fontSize: 'clamp(2.4rem,5vw,4rem)',
    fontWeight: 400, letterSpacing: '0.02em', lineHeight: 1,
    textTransform: 'uppercase', ...style,
  }}>{children}</h2>
);

const Btn = ({ href = '#', onClick, children, style = {} }) => {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    background: ACCENT, color: SURFACE2, textDecoration: 'none',
    padding: '15px 30px', borderRadius: 100, fontSize: '0.95rem',
    fontWeight: 600, letterSpacing: '-0.01em', border: 'none', cursor: 'pointer',
    transition: 'transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94), background 0.2s, box-shadow 0.3s',
    ...style,
  };
  return (
    <a href={href} onClick={onClick} style={base}
      onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.04) translateY(-2px)'; e.currentTarget.style.background = ACCENT_HOVER; e.currentTarget.style.boxShadow = '0 8px 28px rgba(255,107,0,0.35)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1) translateY(0)'; e.currentTarget.style.background = ACCENT; e.currentTarget.style.boxShadow = 'none'; }}
    >{children}</a>
  );
};

const BtnOutline = ({ href = '#', onClick, children, style = {} }) => {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    background: 'transparent', color: TEXT_PRIMARY, textDecoration: 'none',
    padding: '12px 28px', borderRadius: 100, fontSize: '0.8rem',
    fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase',
    border: `1px solid ${BORDER_LIGHT}`, cursor: 'pointer',
    transition: 'all 0.3s cubic-bezier(0.25,0.46,0.45,0.94)', ...style,
  };
  return (
    <a href={href} onClick={onClick} style={base}
      onMouseEnter={e => { e.currentTarget.style.borderColor = ACCENT; e.currentTarget.style.color = ACCENT; e.currentTarget.style.boxShadow = '0 0 20px rgba(255,107,0,0.15)'; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = BORDER_LIGHT; e.currentTarget.style.color = TEXT_PRIMARY; e.currentTarget.style.boxShadow = 'none'; }}
    >{children}</a>
  );
};

// ── Feature Card Animations ───────────────────────────────────────
const SHUFFLE_ITEMS = [
  { stat: '50–100 hrs', sub: '5–10 person team, per week' },
  { stat: '100–200 hrs', sub: '10–20 person team, per week' },
  { stat: '200–500 hrs', sub: '20–50 person team, per week' },
];

function ShufflerCard() {
  const reduced = usePrefersReducedMotion();
  const [stack, setStack] = React.useState(SHUFFLE_ITEMS);
  React.useEffect(() => {
    if (reduced) return;
    const t = setInterval(() => setStack(s => { const n = [...s]; n.unshift(n.pop()); return n; }), 3000);
    return () => clearInterval(t);
  }, [reduced]);
  return (
    <div style={{ position: 'relative', minHeight: 148, marginTop: 8 }}>
      {stack.map((item, i) => (
        <div key={item.stat} style={{
          position: 'absolute', inset: 0,
          top: `${i * 11}px`, left: `${i * 7}px`, right: `${-i * 7}px`,
          zIndex: 3 - i, opacity: 1 - i * 0.28,
          transform: `scale(${1 - i * 0.04})`,
          transition: 'all 0.65s cubic-bezier(0.34,1.56,0.64,1)',
          background: i === 0 ? '#181818' : '#141414',
          border: `1px solid ${i === 0 ? 'rgba(255,107,0,0.28)' : BORDER}`,
          borderRadius: 16, padding: '18px 20px',
        }}>
          <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.62rem', color: ACCENT, letterSpacing: '0.1em', marginBottom: 10 }}>TIME RECOVERED</div>
          <div style={{ fontSize: '1.9rem', fontWeight: 800, lineHeight: 1, color: TEXT_PRIMARY }}>{item.stat}</div>
          <div style={{ fontSize: '0.8rem', color: MUTED, marginTop: 6 }}>{item.sub}</div>
        </div>
      ))}
    </div>
  );
}

const FEED_MSGS = [
  'Drafting follow-up for Acme Corp...',
  'Logging call notes, Sarah Chen (BuildRight)...',
  'Scheduling proposal review for Atlas Partners...',
  'Syncing CRM after discovery call...',
  'Generating onboarding doc for new hire...',
  'Pipeline updated, 3 deals advanced...',
];

function TypewriterCard() {
  const reduced = usePrefersReducedMotion();
  const [text, setText] = React.useState(reduced ? FEED_MSGS[0] : '');
  const [mIdx, setMIdx] = React.useState(0);
  const [cIdx, setCIdx] = React.useState(0);
  React.useEffect(() => {
    if (reduced) return;
    const msg = FEED_MSGS[mIdx];
    if (cIdx <= msg.length) {
      const t = setTimeout(() => { setText(msg.slice(0, cIdx)); setCIdx(c => c + 1); }, cIdx === 0 ? 500 : 40);
      return () => clearTimeout(t);
    } else {
      const t = setTimeout(() => { setMIdx(m => (m + 1) % FEED_MSGS.length); setCIdx(0); }, 1800);
      return () => clearTimeout(t);
    }
  }, [cIdx, mIdx, reduced]);
  return (
    <div style={{ marginTop: 8, minHeight: 100 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#22c55e', animation: 'pulse-dot 2s ease-in-out infinite', flexShrink: 0 }} />
        <span style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.62rem', color: MUTED, letterSpacing: '0.1em' }}>LIVE FEED, ARTIFICIAL INTELLIGENCE VOICE LAYER</span>
      </div>
      <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.85rem', color: TEXT_PRIMARY, lineHeight: 1.7 }}>
        <span style={{ color: ACCENT, marginRight: 4 }}>▶</span>{text}
        <span style={{ display: 'inline-block', width: 2, height: '0.9em', background: ACCENT, marginLeft: 2, verticalAlign: 'middle', animation: 'blink 1.1s step-end infinite' }} />
      </div>
    </div>
  );
}

const DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
const SEQ = [
  { days: [1, 3, 5], label: 'Follow-up cadence set' },
  { days: [0, 2, 4, 6], label: 'Weekly report automation' },
  { days: [1, 4], label: 'Proposal reviews locked in' },
];

function SchedulerCard() {
  const reduced = usePrefersReducedMotion();
  const [active, setActive] = React.useState(reduced ? SEQ[0].days : []);
  const [label, setLabel] = React.useState(reduced ? SEQ[0].label : '');
  const [saved, setSaved] = React.useState(reduced);
  const [sIdx, setSIdx] = React.useState(0);
  React.useEffect(() => {
    if (reduced) return;
    const { days, label: l } = SEQ[sIdx];
    setActive([]); setLabel(''); setSaved(false);
    const t1 = setTimeout(() => setActive(days), 300);
    const t2 = setTimeout(() => setLabel(l), 800);
    const t3 = setTimeout(() => setSaved(true), 1300);
    const t4 = setTimeout(() => setSIdx(i => (i + 1) % SEQ.length), 3200);
    return () => [t1, t2, t3, t4].forEach(clearTimeout);
  }, [sIdx, reduced]);
  return (
    <div style={{ marginTop: 8 }}>
      <div style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.62rem', color: MUTED, letterSpacing: '0.1em', marginBottom: 12 }}>AUTOMATION SCHEDULER</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 5, marginBottom: 14 }}>
        {DAYS.map((d, i) => (
          <div key={i} style={{
            height: 38, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'JetBrains Mono,monospace', fontSize: '0.72rem', fontWeight: 600,
            background: active.includes(i) ? ACCENT : 'rgba(255,255,255,0.05)',
            color: active.includes(i) ? '#fff' : '#444',
            transform: active.includes(i) ? 'scale(1.1)' : 'scale(1)',
            transition: 'all 0.5s cubic-bezier(0.34,1.56,0.64,1)',
          }}>{d}</div>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'rgba(255,255,255,0.04)', borderRadius: 10, padding: '10px 14px', border: `1px solid ${BORDER}` }}>
        <span style={{ fontFamily: 'JetBrains Mono,monospace', fontSize: '0.76rem', color: label ? TEXT_PRIMARY : '#333', transition: 'color 0.4s' }}>{label || 'Configuring...'}</span>
        <span style={{ fontSize: '0.68rem', fontWeight: 700, padding: '4px 11px', borderRadius: 6, background: saved ? ACCENT : 'rgba(255,107,0,0.1)', color: saved ? '#fff' : ACCENT, transition: 'all 0.35s cubic-bezier(0.34,1.56,0.64,1)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          {saved ? '✓ Saved' : 'Save'}
        </span>
      </div>
    </div>
  );
}

// ── System Architecture SVG with animated data packets ────────────
const SystemArchitectureSVG = React.memo(function SystemArchitectureSVG({ activeTab = -1 }) {
  const highlight = React.useCallback((mod) => {
    if (activeTab < 0) return false;
    if (activeTab === 0) return mod === 'INPUTS' || mod === 'CORE' || mod === 'ACTIONS';
    if (activeTab === 1) return mod === 'INPUTS' || mod === 'CORE' || mod === 'ACTIONS' || mod === 'OUTPUTS';
    return true;
  }, [activeTab]);
  const glow = activeTab === 2;

  // Filter connection lines to only active modules
  const lines = [
    {x1:140,y1:200,x2:195,y2:200, mods:['INPUTS','CORE']},      // 0 INPUTS → CORE
    {x1:305,y1:200,x2:360,y2:200, mods:['CORE','OUTPUTS']},    // 1 CORE → OUTPUTS
    {x1:250,y1:110,x2:250,y2:165, mods:['LEARNING','CORE']},   // 2 LEARNING → CORE
    {x1:250,y1:235,x2:250,y2:290, mods:['CORE','ACTIONS']},    // 3 CORE → ACTIONS
    {x1:360,y1:215,x2:305,y2:215, mods:['OUTPUTS','CORE']},   // 4 OUTPUTS → CORE
    {x1:265,y1:290,x2:265,y2:235, mods:['ACTIONS','CORE']},   // 5 ACTIONS → CORE
    {x1:235,y1:110,x2:235,y2:165, mods:['LEARNING','CORE']},  // 6 LEARNING → CORE (offset)
  ].filter(l => l.mods.every(m => highlight(m)));

  // Filter packets to only active modules
  const packets = [
    { path: 'M140,200 L195,200', dur: '2.4s', begin: '0s',   mods: ['INPUTS','CORE'] },
    { path: 'M305,200 L360,200', dur: '2.4s', begin: '0.6s', mods: ['CORE','OUTPUTS'] },
    { path: 'M250,165 L250,110', dur: '2.2s', begin: '1.2s', mods: ['CORE','LEARNING'] },
    { path: 'M250,235 L250,290', dur: '2.2s', begin: '1.8s', mods: ['CORE','ACTIONS'] },
    { path: 'M360,215 L305,215', dur: '2.4s', begin: '2.4s', mods: ['OUTPUTS','CORE'] },
    { path: 'M265,290 L265,235', dur: '2.2s', begin: '3.0s', mods: ['ACTIONS','CORE'] },
    { path: 'M235,110 L235,165', dur: '2.2s', begin: '3.6s', mods: ['LEARNING','CORE'] },
  ].filter(p => p.mods.every(m => highlight(m)));

  return (
    <svg viewBox="0 0 500 400" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', maxWidth: 500, opacity: 0.9 }}>
      <defs>
        <linearGradient id="lgArch" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="rgba(255,107,0,0.1)" />
          <stop offset="50%" stopColor="rgba(255,107,0,0.4)" />
          <stop offset="100%" stopColor="rgba(255,107,0,0.1)" />
        </linearGradient>
        <filter id="glowArch"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        <filter id="packetGlow"><feGaussianBlur stdDeviation="2" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
      </defs>

      {/* Floor plan grid */}
      <rect x="20" y="20" width="460" height="360" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
      <line x1="20" y1="140" x2="480" y2="140" stroke="rgba(255,255,255,0.05)" strokeWidth="1" strokeDasharray="4 4"/>
      <line x1="20" y1="260" x2="480" y2="260" stroke="rgba(255,255,255,0.05)" strokeWidth="1" strokeDasharray="4 4"/>
      <line x1="170" y1="20" x2="170" y2="380" stroke="rgba(255,255,255,0.05)" strokeWidth="1" strokeDasharray="4 4"/>
      <line x1="330" y1="20" x2="330" y2="380" stroke="rgba(255,255,255,0.05)" strokeWidth="1" strokeDasharray="4 4"/>

      {/* AI Core */}
      <g aria-label="Artificial Intelligence Core">
        <title>Artificial Intelligence Core</title>
        <rect x="195" y="165" width="110" height="70" rx="4"
          fill={highlight('CORE') ? 'rgba(255,107,0,0.15)' : 'rgba(255,107,0,0.08)'}
          stroke={highlight('CORE') ? ACCENT : BORDER_LIGHT} strokeWidth={highlight('CORE') ? 2 : 1}
          filter={glow ? 'url(#glowArch)' : ''}/>
        <text x="250" y="195" textAnchor="middle" fill={highlight('CORE') ? ACCENT : TEXT_SECONDARY} fontSize="10" fontFamily="JetBrains Mono,monospace" letterSpacing="0.1em">AI CORE</text>
        <text x="250" y="210" textAnchor="middle" fill={MUTED} fontSize="8" fontFamily="JetBrains Mono,monospace">Processing Layer</text>
      </g>

      {/* Inputs */}
      <rect x="40" y="165" width="100" height="70" rx="2"
        fill={highlight('INPUTS') ? 'rgba(255,107,0,0.12)' : 'rgba(255,255,255,0.02)'}
        stroke={highlight('INPUTS') ? ACCENT : BORDER_LIGHT} strokeWidth={highlight('INPUTS') ? 2 : 1}/>
      <text x="90" y="185" textAnchor="middle" fill={highlight('INPUTS') ? ACCENT : TEXT_SECONDARY} fontSize="9" fontFamily="JetBrains Mono,monospace">INPUTS</text>
      <text x="90" y="200" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Voice · Text · CRM</text>
      <text x="90" y="215" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Calendar · Email</text>

      {/* Outputs */}
      <rect x="360" y="165" width="100" height="70" rx="2"
        fill={highlight('OUTPUTS') ? 'rgba(255,107,0,0.12)' : 'rgba(255,255,255,0.02)'}
        stroke={highlight('OUTPUTS') ? ACCENT : BORDER_LIGHT} strokeWidth={highlight('OUTPUTS') ? 2 : 1}/>
      <text x="410" y="185" textAnchor="middle" fill={highlight('OUTPUTS') ? ACCENT : TEXT_SECONDARY} fontSize="9" fontFamily="JetBrains Mono,monospace">OUTPUTS</text>
      <text x="410" y="200" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Drafts · Tasks</text>
      <text x="410" y="215" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Schedules · Reports</text>

      {/* Learning */}
      <rect x="195" y="40" width="110" height="70" rx="2"
        fill={highlight('LEARNING') ? 'rgba(255,107,0,0.12)' : 'rgba(255,255,255,0.02)'}
        stroke={highlight('LEARNING') ? ACCENT : BORDER_LIGHT} strokeWidth={highlight('LEARNING') ? 2 : 1}/>
      <text x="250" y="60" textAnchor="middle" fill={highlight('LEARNING') ? ACCENT : TEXT_SECONDARY} fontSize="9" fontFamily="JetBrains Mono,monospace">LEARNING</text>
      <text x="250" y="78" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Patterns · Preferences</text>
      <text x="250" y="92" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Workflow Memory</text>

      {/* Actions */}
      <rect x="195" y="290" width="110" height="70" rx="2"
        fill={highlight('ACTIONS') ? 'rgba(255,107,0,0.12)' : 'rgba(255,255,255,0.02)'}
        stroke={highlight('ACTIONS') ? ACCENT : BORDER_LIGHT} strokeWidth={highlight('ACTIONS') ? 2 : 1}/>
      <text x="250" y="310" textAnchor="middle" fill={highlight('ACTIONS') ? ACCENT : TEXT_SECONDARY} fontSize="9" fontFamily="JetBrains Mono,monospace">ACTIONS</text>
      <text x="250" y="328" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Execute · Schedule</text>
      <text x="250" y="342" textAnchor="middle" fill={MUTED} fontSize="7" fontFamily="JetBrains Mono,monospace">Notify · Sync</text>

      {/* Connection lines — only active paths */}
      {lines.map((l,i) => (
        <line key={i} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} stroke="url(#lgArch)" strokeWidth="1.5" strokeDasharray="3 2">
          <SvgAnimate attributeName="stroke-dashoffset" values="0;10" dur="2s" repeatCount="indefinite" begin={`${i*0.3}s`}/>
        </line>
      ))}

      {/* Data packets — only active paths */}
      {packets.map((p, i) => (
        <circle key={i} r="3.5" fill={ACCENT} filter="url(#packetGlow)" opacity="0.9">
          <SvgAnimateMotion path={p.path} dur={p.dur} begin={p.begin} repeatCount="indefinite" calcMode="linear"/>
          <SvgAnimate attributeName="opacity" values="0;1;1;0" dur={p.dur} begin={p.begin} repeatCount="indefinite"/>
        </circle>
      ))}

      {/* Corner marks */}
      <path d="M20,30 L20,20 L30,20" fill="none" stroke={ACCENT} strokeWidth="1"/>
      <path d="M470,20 L480,20 L480,30" fill="none" stroke={ACCENT} strokeWidth="1"/>
      <path d="M20,370 L20,380 L30,380" fill="none" stroke={ACCENT} strokeWidth="1"/>
      <path d="M470,380 L480,380 L480,370" fill="none" stroke={ACCENT} strokeWidth="1"/>
    </svg>
  );
});

// ── Inline SVG Icons (replaces lucide-react for Babel-in-browser) ──
function Icon({ size = 24, strokeWidth = 2, children }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      {children}
    </svg>
  );
}

const MessageSquare = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
  </Icon>
);
const Clock = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
  </Icon>
);
const FileText = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/>
  </Icon>
);
const TrendingUp = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>
  </Icon>
);
const Plug = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/>
  </Icon>
);
const CreditCard = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/>
  </Icon>
);
const Key = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>
  </Icon>
);
const Eye = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
  </Icon>
);
const Target = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>
  </Icon>
);
const Handshake = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <path d="m11 17 2 2a1 1 0 1 0 3-3"/>
    <path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/>
    <path d="m21 3 1 11h-2"/>
    <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"/>
    <path d="M3 4h8"/>
  </Icon>
);
const Check = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <polyline points="20 6 9 17 4 12"/>
  </Icon>
);
const X = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
  </Icon>
);
const ArrowDown = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
  </Icon>
);
const ChevronLeft = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <polyline points="15 18 9 12 15 6"/>
  </Icon>
);
const ChevronRight = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <polyline points="9 18 15 12 9 6"/>
  </Icon>
);
const Mail = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 7 12 13 2 7"/>
  </Icon>
);
const CalendarDays = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="14" x2="8" y2="14.01"/><line x1="12" y1="14" x2="12" y2="14.01"/><line x1="16" y1="14" x2="16" y2="14.01"/><line x1="8" y1="18" x2="8" y2="18.01"/><line x1="12" y1="18" x2="12" y2="18.01"/><line x1="16" y1="18" x2="16" y2="18.01"/>
  </Icon>
);
const ClipboardList = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>
  </Icon>
);
const DollarSign = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
  </Icon>
);
const BarChart3 = ({ size = 24, strokeWidth = 2 }) => (
  <Icon size={size} strokeWidth={strokeWidth}>
    <path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/>
  </Icon>
);

function Disclosure({ title, defaultOpen = false, children }) {
  const [open, setOpen] = React.useState(defaultOpen);
  const [height, setHeight] = React.useState(defaultOpen ? 'auto' : 0);
  const contentRef = React.useRef(null);
  const id = React.useId();

  React.useEffect(() => {
    if (!contentRef.current) return;
    setHeight(open ? contentRef.current.scrollHeight : 0);
  }, [open, children]);

  return (
    <div className="disclosure">
      <button
        type="button"
        aria-expanded={open}
        aria-controls={`disc-${id}`}
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center justify-between text-left py-3"
        style={{ background: 'transparent', border: 0, color: 'inherit', cursor: 'pointer' }}
      >
        <span style={{ fontWeight: 600 }}>{title}</span>
        <span aria-hidden="true" style={{
          display: 'inline-block',
          transition: 'transform 200ms ease',
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
        }}>+</span>
      </button>
      <div
        id={`disc-${id}`}
        role="region"
        style={{
          maxHeight: typeof height === 'number' ? `${height}px` : height,
          overflow: 'hidden',
          transition: 'max-height 280ms ease',
        }}
      >
        <div ref={contentRef} style={{ paddingBottom: 16 }}>{children}</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ACCENT, ACCENT_HOVER, ACCENT_GLOW, SURFACE, SURFACE2, SURFACE_LIGHT, SURFACE_ELEVATED,
  BORDER, BORDER_LIGHT, MUTED, TEXT_PRIMARY, TEXT_SECONDARY,
  usePrefersReducedMotion, usePerfTier, SvgAnimate, SvgAnimateMotion,
  useFadeUp, FadeUp, useWindowSize,
  SectionLabel, SectionH2, Btn, BtnOutline,
  ShufflerCard, TypewriterCard, SchedulerCard, SystemArchitectureSVG,
  MessageSquare, Clock, FileText, TrendingUp, Plug,
  CreditCard, Key, Eye, Target, Handshake,
  Check, X, ArrowDown, ChevronLeft, ChevronRight,
  Mail, CalendarDays, ClipboardList, DollarSign, BarChart3,
  Disclosure,
});