// Directory pages: Operators, Manufacturers, Designers

const Directory = ({ nav, route }) => {
  const D = window.__DSC_DATA;
  const q0 = route?.query || {};
  const [query, setQuery] = React.useState(q0.q || '');
  const [loc, setLoc] = React.useState(q0.loc || '');
  const [spec, setSpec] = React.useState(q0.spec || '');
  const [country, setCountry] = React.useState(q0.country || 'All');
  const [sizeBuckets, setSizeBuckets] = React.useState([]);
  const [insurance, setInsurance] = React.useState('Any');
  const [platforms, setPlatforms] = React.useState([]);
  const [videoOnly, setVideoOnly] = React.useState(false);
  const [skyrenderOnly, setSkyrenderOnly] = React.useState(false);
  const [sort, setSort] = React.useState('Recommended');
  const [layout, setLayout] = React.useState(window.__TWEAKS?.directoryLayout || 'grid');

  const specialties = ['All', 'Brand Activations', 'Stadium Shows', 'Weddings', 'Municipal', 'Festivals', 'Sports', 'Art Installations', 'Corporate', 'Tech Launches'];
  const countries = ['All', ...Array.from(new Set(D.operators.map(o => o.country))).sort()];

  const sizeBucketDefs = [
    { key: '100-200', label: '100–200 drones', min: 100, max: 200 },
    { key: '200-400', label: '200–400 drones', min: 200, max: 400 },
    { key: '400-800', label: '400–800 drones', min: 400, max: 800 },
    { key: '800+',    label: '800+ drones',    min: 800, max: Infinity },
  ];
  const insuranceLevels = ['Any', '$1M+', '$2M+', '$3M+', '$4M+', '$5M+'];
  const platformOptions = ['High Great / EMO', 'Verge Aero', 'Custom fleet'];

  const toggleInArray = (arr, v, setter) =>
    setter(arr.includes(v) ? arr.filter(x => x !== v) : [...arr, v]);

  const filtered = React.useMemo(() => {
    let list = D.operators.slice();
    if (query) list = list.filter(o => (o.name + ' ' + o.headline + ' ' + o.specialties.join(' ')).toLowerCase().includes(query.toLowerCase()));
    if (loc) list = list.filter(o => o.city.toLowerCase().includes(loc.toLowerCase()) || o.region.toLowerCase().includes(loc.toLowerCase()));
    if (spec && spec !== 'All') list = list.filter(o => o.specialties.includes(spec));
    if (country && country !== 'All') list = list.filter(o => o.country === country);
    if (sizeBuckets.length) {
      list = list.filter(o => sizeBuckets.some(k => {
        const b = sizeBucketDefs.find(x => x.key === k);
        return b && o.fleet >= b.min && o.fleet < b.max;
      }));
    }
    if (insurance !== 'Any') {
      const min = parseInt(insurance.replace(/[^0-9]/g, ''), 10);
      list = list.filter(o => (o.insurance || 0) >= min);
    }
    if (platforms.length) list = list.filter(o => platforms.includes(o.platform));
    if (videoOnly) list = list.filter(o => o.video);
    if (skyrenderOnly) list = list.filter(o => o.skyrender);

    if (sort === 'Rating') list.sort((a, b) => b.rating - a.rating);
    else if (sort === 'Fleet size') list.sort((a, b) => b.fleet - a.fleet);
    else if (sort === 'Newest') list.sort((a, b) => b.founded - a.founded);
    else list.sort((a, b) => b.rating - a.rating || b.fleet - a.fleet);
    return list;
  }, [query, loc, spec, country, sizeBuckets, insurance, platforms, videoOnly, skyrenderOnly, sort]);

  return (
    <div className="page">
      {/* Header */}
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <div className="container" style={{ padding: '36px 32px 0' }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>/ directory / operators</div>
          <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 42, margin: '0 0 8px', letterSpacing: '-0.02em', fontWeight: 400 }}>Drone show operators</h1>
          <p style={{ margin: 0, color: 'var(--ink-2)', maxWidth: 640 }}>Verified operators in {countries.length - 1} countries. Filter by country, location, fleet size, specialty, and certifications.</p>

          {/* Search bar */}
          <div style={{ marginTop: 24, display: 'flex', gap: 0, background: 'var(--bg)', border: '1px solid var(--line-2)', borderRadius: 999, padding: 4, maxWidth: 760 }}>
            <div style={{ flex: 1.2, display: 'flex', alignItems: 'center', padding: '0 14px' }}>
              <span className="mono muted" style={{ fontSize: 10, marginRight: 8 }}>SEARCH</span>
              <input style={{ border: 0, padding: '10px 0', background: 'transparent', width: '100%' }} placeholder="Name, specialty, keyword…" value={query} onChange={e => setQuery(e.target.value)} />
            </div>
            <div className="vhair" style={{ margin: '8px 0' }} />
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '0 14px' }}>
              <span className="mono muted" style={{ fontSize: 10, marginRight: 8 }}>LOCATION</span>
              <input style={{ border: 0, padding: '10px 0', background: 'transparent', width: '100%' }} placeholder="City or region" value={loc} onChange={e => setLoc(e.target.value)} />
            </div>
            <button className="btn btn-primary">Search</button>
          </div>

          {/* Sub-nav tabs */}
          <div style={{ marginTop: 28, display: 'flex', gap: 24, borderBottom: 0 }}>
            {[
              { k: 'directory', label: 'Operators', count: D.operators.length },
              { k: 'directory-mf', label: 'Manufacturers and Tools', count: D.manufacturers.length },
              { k: 'directory-ds', label: 'Designers', count: D.designers.length },
            ].map(t => (
              <button key={t.k} onClick={() => nav({ page: t.k })}
                style={{
                  padding: '12px 0', marginBottom: -1,
                  borderBottom: t.k === 'directory' ? '2px solid var(--ink)' : '2px solid transparent',
                  fontSize: 14, fontWeight: t.k === 'directory' ? 600 : 400,
                  color: t.k === 'directory' ? 'var(--ink)' : 'var(--ink-3)',
                  display: 'flex', alignItems: 'center', gap: 8,
                }}>
                {t.label} <span className="mono" style={{ fontSize: 11 }}>{t.count}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <div className="container" style={{ padding: '28px 32px 80px', display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32 }}>
        {/* Filters */}
        <aside>
          <h3 className="mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', margin: '0 0 14px', color: 'var(--ink-3)' }}>Filters</h3>

          <FilterGroup label="Country">
            <select className="select" value={country} onChange={e => setCountry(e.target.value)}>
              {countries.map(c => <option key={c}>{c}</option>)}
            </select>
          </FilterGroup>

          <FilterGroup label="Show type / use case">
            <select className="select" value={spec} onChange={e => setSpec(e.target.value)}>
              {specialties.map(s => <option key={s}>{s}</option>)}
            </select>
          </FilterGroup>

          <FilterGroup label="Size capability (max drones)">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {sizeBucketDefs.map(b => {
                const count = D.operators.filter(o => o.fleet >= b.min && o.fleet < b.max).length;
                return (
                  <label key={b.key} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
                    <input type="checkbox" checked={sizeBuckets.includes(b.key)} onChange={() => toggleInArray(sizeBuckets, b.key, setSizeBuckets)} />
                    {b.label}
                    <span className="mono muted" style={{ fontSize: 11, marginLeft: 'auto' }}>{count}</span>
                  </label>
                );
              })}
            </div>
          </FilterGroup>

          <FilterGroup label="Insurance coverage">
            <select className="select" value={insurance} onChange={e => setInsurance(e.target.value)}>
              {insuranceLevels.map(l => <option key={l}>{l}</option>)}
            </select>
          </FilterGroup>

          <FilterGroup label="Technology / platform">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {platformOptions.map(p => (
                <label key={p} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
                  <input type="checkbox" checked={platforms.includes(p)} onChange={() => toggleInArray(platforms, p, setPlatforms)} />
                  {p}
                </label>
              ))}
            </div>
          </FilterGroup>

          <FilterGroup label="Certifications">
            {['FAA Part 107', 'Part 137 Waiver', 'Part 91', 'Military Clearance'].map(c => (
              <label key={c} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, marginBottom: 6, cursor: 'pointer' }}>
                <input type="checkbox" /> {c}
              </label>
            ))}
          </FilterGroup>

          <FilterGroup label="Portfolio">
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
              <input type="checkbox" checked={videoOnly} onChange={e => setVideoOnly(e.target.checked)} /> Video / portfolio available
            </label>
          </FilterGroup>

          <FilterGroup label="SkyRender">
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
              <input type="checkbox" checked={skyrenderOnly} onChange={e => setSkyrenderOnly(e.target.checked)} /> SkyRender available
            </label>
          </FilterGroup>
        </aside>

        {/* Results */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div className="mono muted" style={{ fontSize: 12 }}>
              <strong style={{ color: 'var(--ink)' }}>{filtered.length}</strong> of {D.operators.length} operators
            </div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <label className="mono muted" style={{ fontSize: 11 }}>SORT</label>
              <select className="select" style={{ width: 'auto', padding: '6px 12px', fontSize: 13 }} value={sort} onChange={e => setSort(e.target.value)}>
                {['Recommended', 'Rating', 'Fleet size', 'Newest'].map(s => <option key={s}>{s}</option>)}
              </select>
              <div style={{ display: 'flex', background: 'var(--bg-2)', borderRadius: 4, padding: 2 }}>
                {['grid', 'list', 'map'].map(v => (
                  <button key={v} onClick={() => setLayout(v)}
                    className="mono"
                    style={{
                      padding: '6px 10px', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.05em',
                      background: layout === v ? 'var(--bg)' : 'transparent',
                      color: layout === v ? 'var(--ink)' : 'var(--ink-3)',
                      borderRadius: 2,
                      boxShadow: layout === v ? '0 1px 2px rgba(0,0,0,0.08)' : 'none',
                    }}>{v}</button>
                ))}
              </div>
            </div>
          </div>

          {/* Sponsored banner */}
          <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line)', padding: 16, borderRadius: 4, marginBottom: 20, display: 'flex', alignItems: 'center', gap: 20 }}>
            <div style={{ width: 80, height: 60 }}>
              <DotFormation variant="ring" color="#4a6fff" density={40} size="square" />
            </div>
            <div style={{ flex: 1 }}>
              <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>Sponsored · Verve Aerospace</div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>The drone behind 42 of this directory's operators.</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>Verve V4 · 450g · 36-minute flight time · RTK-ready</div>
            </div>
            <button className="btn btn-sm">Learn more →</button>
          </div>

          {layout === 'grid' && (
            <div className="grid grid-3">
              {filtered.map(op => <OperatorCard key={op.id} op={op} onClick={() => nav({ page: 'operator', id: op.id })} />)}
            </div>
          )}
          {layout === 'list' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {filtered.map(op => <OperatorCard key={op.id} op={op} onClick={() => nav({ page: 'operator', id: op.id })} layout="list" />)}
            </div>
          )}
          {layout === 'map' && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, height: 720 }}>
              <MapView ops={filtered} onClick={(op) => nav({ page: 'operator', id: op.id })} />
              <div style={{ overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {filtered.map(op => (
                  <div key={op.id} className="card hover-lift" onClick={() => nav({ page: 'operator', id: op.id })} style={{ cursor: 'pointer', padding: 12 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: op.hex }} />
                      <strong style={{ fontSize: 13 }}>{op.name}</strong>
                    </div>
                    <div className="mono muted" style={{ fontSize: 11 }}>{op.city} · {op.fleet} drones</div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {filtered.length === 0 && (
            <div className="card" style={{ padding: 48, textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--ff-display)', fontSize: 24, marginBottom: 8 }}>No operators match those filters.</div>
              <div className="muted" style={{ fontSize: 14 }}>Try removing a filter or broadening your search.</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const FilterGroup = ({ label, children }) => (
  <div style={{ marginBottom: 20, paddingBottom: 20, borderBottom: '1px solid var(--line)' }}>
    <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 10 }}>{label}</div>
    {children}
  </div>
);

const MapView = ({ ops, onClick }) => {
  // Pseudo-map with regions as dots
  const positions = {
    'West': [18, 45], 'Mountain': [32, 48], 'Southwest': [30, 62], 'South': [48, 70], 'Southeast': [65, 68],
    'Midwest': [52, 40], 'Northeast': [78, 32]
  };
  return (
    <div style={{ position: 'relative', background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 4, overflow: 'hidden',
      backgroundImage: 'radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0)', backgroundSize: '24px 24px' }}>
      <div style={{ position: 'absolute', inset: 0, padding: 20 }}>
        <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>North America · {ops.length} operators</div>
        {/* Outline */}
        <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.15 }}>
          <path d="M 8,30 Q 14,22 24,24 L 38,20 L 56,18 L 78,22 L 90,30 L 92,48 L 86,66 L 70,82 L 52,86 L 32,82 L 18,72 L 10,56 Z" fill="var(--ink-3)" />
        </svg>
        {ops.map((op, i) => {
          const [x, y] = positions[op.region] || [50, 50];
          const jitter = [(i % 7 - 3) * 1.4, (i % 5 - 2) * 1.4];
          return (
            <button key={op.id} onClick={() => onClick(op)}
              style={{
                position: 'absolute', left: `${x + jitter[0]}%`, top: `${y + jitter[1]}%`,
                transform: 'translate(-50%, -50%)',
                width: Math.max(12, op.fleet / 60), height: Math.max(12, op.fleet / 60),
                borderRadius: '50%', background: op.hex,
                border: '2px solid var(--bg)',
                boxShadow: `0 0 0 1px ${op.hex}, 0 0 12px ${op.hex}50`,
                cursor: 'pointer',
              }}
              title={op.name} />
          );
        })}
      </div>
    </div>
  );
};

// Manufacturers directory
const ManufacturersDirectory = ({ nav }) => {
  const D = window.__DSC_DATA;
  const [cat, setCat] = React.useState('All');
  const cats = ['All', ...new Set(D.manufacturers.map(m => m.category))];
  const filtered = cat === 'All' ? D.manufacturers : D.manufacturers.filter(m => m.category === cat);

  return (
    <div className="page">
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <div className="container" style={{ padding: '36px 32px 0' }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>/ directory / manufacturers</div>
          <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 42, margin: '0 0 8px', letterSpacing: '-0.02em', fontWeight: 400 }}>Hardware &amp; technology suppliers</h1>
          <p style={{ margin: 0, color: 'var(--ink-2)', maxWidth: 640 }}>The drones, LEDs, batteries, and GCS platforms that power the industry. {D.manufacturers.length} verified B2B suppliers.</p>
          <div style={{ marginTop: 28, display: 'flex', gap: 24 }}>
            {[{ k: 'directory', label: 'Operators', c: D.operators.length, a: false }, { k: 'directory-mf', label: 'Manufacturers and Tools', c: D.manufacturers.length, a: true }, { k: 'directory-ds', label: 'Designers', c: D.designers.length, a: false }].map(t => (
              <button key={t.k} onClick={() => nav({ page: t.k })} style={{ padding: '12px 0', borderBottom: t.a ? '2px solid var(--ink)' : '2px solid transparent', fontSize: 14, fontWeight: t.a ? 600 : 400, color: t.a ? 'var(--ink)' : 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 8 }}>
                {t.label} <span className="mono" style={{ fontSize: 11 }}>{t.c}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <div className="container" style={{ padding: '28px 32px 80px' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 24 }}>
          {cats.map(c => (
            <button key={c} className={`chip ${cat === c ? 'solid' : ''}`} onClick={() => setCat(c)} style={{ cursor: 'pointer' }}>{c}</button>
          ))}
        </div>

        <div className="grid grid-3">
          {filtered.map(m => (
            <div key={m.id} className="card hover-lift" style={{ padding: 24, cursor: 'pointer' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
                <div style={{ width: 48, height: 48, background: m.hex, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: 'var(--ff-mono)', fontWeight: 500, fontSize: 16 }}>
                  {m.name.split(' ').map(w => w[0]).slice(0, 2).join('')}
                </div>
                <Tier tier={m.tier} />
              </div>
              <h3 style={{ margin: '0 0 4px', fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em' }}>{m.name}</h3>
              <div className="mono muted" style={{ fontSize: 11, marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{m.category} · {m.hq}</div>
              <p style={{ margin: '0 0 16px', color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.55 }}>{m.headline}</p>
              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 14, borderTop: '1px solid var(--line)', fontSize: 12, alignItems: 'center', gap: 8 }}>
                <span className="muted">{m.products} products</span>
                <span className="mono"><strong style={{ color: 'var(--ink)' }}>{m.used_by}</strong> operators use</span>
              </div>
              <div style={{ marginTop: 10 }}>
                <ClaimButton entityType="manufacturer" entity={m} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// Designers directory
const DesignersDirectory = ({ nav }) => {
  const D = window.__DSC_DATA;
  return (
    <div className="page">
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
        <div className="container" style={{ padding: '36px 32px 0' }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>/ directory / designers</div>
          <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 42, margin: '0 0 8px', letterSpacing: '-0.02em', fontWeight: 400 }}>Formation designers</h1>
          <p style={{ margin: 0, color: 'var(--ink-2)', maxWidth: 640 }}>Independent animators and studios. Buy ready-made packs or commission custom work.</p>
          <div style={{ marginTop: 28, display: 'flex', gap: 24 }}>
            {[{ k: 'directory', label: 'Operators', c: D.operators.length }, { k: 'directory-mf', label: 'Manufacturers and Tools', c: D.manufacturers.length }, { k: 'directory-ds', label: 'Designers', c: D.designers.length, a: true }].map(t => (
              <button key={t.k} onClick={() => nav({ page: t.k })} style={{ padding: '12px 0', borderBottom: t.a ? '2px solid var(--ink)' : '2px solid transparent', fontSize: 14, fontWeight: t.a ? 600 : 400, color: t.a ? 'var(--ink)' : 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 8 }}>
                {t.label} <span className="mono" style={{ fontSize: 11 }}>{t.c}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <div className="container" style={{ padding: '28px 32px 80px' }}>
        {/* Top sellers strip */}
        <div className="eyebrow" style={{ marginBottom: 16 }}>Top sellers this month</div>
        <div className="grid grid-3">
          {D.designers.map(d => (
            <div key={d.id} className="card hover-lift" style={{ cursor: 'pointer', overflow: 'hidden' }}>
              <DotFormation variant={['heart','triangle','star','logo','wave','ring'][D.designers.indexOf(d)]} color={d.hex} density={70} />
              <div style={{ padding: 20 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <Avatar name={d.name} hex={d.hex} size={36} />
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{d.name}</div>
                    <div className="mono muted" style={{ fontSize: 11 }}>{d.studio} · {d.city}</div>
                  </div>
                </div>
                <p style={{ margin: '0 0 14px', color: 'var(--ink-2)', fontSize: 13, lineHeight: 1.5 }}>{d.headline}</p>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
                  {d.specialties.map(s => <span key={s} className="tag">{s}</span>)}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--line)', fontSize: 12 }}>
                  <span className="mono"><strong style={{ color: 'var(--ink)' }}>{d.packs}</strong> packs</span>
                  <span className="mono"><strong style={{ color: 'var(--ink)' }}>{d.sales.toLocaleString()}</strong> sales</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}><Stars filled={5} size={10} /> {d.rating}</span>
                </div>
                <div style={{ marginTop: 10 }}>
                  <ClaimButton entityType="designer" entity={d} />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Marketplace teaser */}
        <div style={{ marginTop: 48, background: 'var(--ink)', color: 'var(--bg)', borderRadius: 4, padding: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'oklch(70% 0.012 260)', marginBottom: 10 }}>The Marketplace</div>
            <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 32, margin: '0 0 10px', fontWeight: 400, letterSpacing: '-0.02em' }}>2,147 formation packs. Royalty-free for operators.</h3>
            <p style={{ margin: 0, color: 'oklch(76% 0.012 260)', fontSize: 14 }}>Designers list once and sell to operators across the directory. Platform takes 20% commission; designers keep the rest.</p>
          </div>
          <div style={{ position: 'relative', aspectRatio: '16 / 10' }}>
            <DotFormation variant="grid" color="#fff" density={120} size="wide" />
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Directory, ManufacturersDirectory, DesignersDirectory });