/* Brands Index — all 124 brands */

const Brands = ({ setPage }) => {
  const [filter, setFilter] = useState('all');
  const [query, setQuery] = useState('');

  const filters = [
    { k: 'all',       label: 'All · 124' },
    { k: 'mainstream', label: 'Mainstream' },
    { k: 'premium',   label: 'Premium' },
    { k: 'budget',    label: 'Budget' },
    { k: 'niche',     label: 'Niche & rugged' },
  ];

  const brands = [
    { name: 'Apple',    region: 'United States', count: 38,   founded: 1976, flagship: 'iPhone 16 Pro Max',   share: 23.4, tier: ['mainstream', 'premium'], featured: true },
    { name: 'Samsung',  region: 'South Korea',   count: 412,  founded: 1969, flagship: 'Galaxy S25 Ultra',    share: 19.8, tier: ['mainstream', 'premium', 'budget'], featured: true },
    { name: 'Xiaomi',   region: 'China',         count: 287,  founded: 2010, flagship: 'Xiaomi 15 Ultra',     share: 13.6, tier: ['mainstream', 'premium', 'budget'], featured: true },
    { name: 'OPPO',     region: 'China',         count: 246,  founded: 2004, flagship: 'Find X8 Pro',         share: 8.9,  tier: ['mainstream', 'premium'], featured: true },
    { name: 'Vivo',     region: 'China',         count: 218,  founded: 2009, flagship: 'X200 Pro',            share: 8.2,  tier: ['mainstream', 'premium'] },
    { name: 'OnePlus',  region: 'China',         count: 64,   founded: 2013, flagship: 'OnePlus 13',          share: 3.4,  tier: ['mainstream', 'premium'] },
    { name: 'Realme',   region: 'China',         count: 142,  founded: 2018, flagship: 'GT7 Pro',             share: 3.2,  tier: ['budget', 'mainstream'] },
    { name: 'Honor',    region: 'China',         count: 96,   founded: 2013, flagship: 'Magic 7 Pro',         share: 2.7,  tier: ['mainstream', 'premium'] },
    { name: 'Google',   region: 'United States', count: 18,   founded: 2016, flagship: 'Pixel 9 Pro XL',      share: 1.2,  tier: ['mainstream', 'premium'] },
    { name: 'Sony',     region: 'Japan',         count: 47,   founded: 2001, flagship: 'Xperia 1 VI',         share: 0.6,  tier: ['premium', 'niche'] },
    { name: 'Nothing',  region: 'United Kingdom',count: 8,    founded: 2020, flagship: 'Phone 3',             share: 0.4,  tier: ['mainstream', 'niche'] },
    { name: 'Motorola', region: 'United States', count: 184,  founded: 1928, flagship: 'Edge 50 Ultra',       share: 2.1,  tier: ['mainstream', 'budget'] },
    { name: 'Asus',     region: 'Taiwan',        count: 32,   founded: 2003, flagship: 'ROG Phone 9 Pro',     share: 0.5,  tier: ['niche', 'premium'] },
    { name: 'Nubia',    region: 'China',         count: 56,   founded: 2012, flagship: 'RedMagic 10 Pro',     share: 0.3,  tier: ['niche'] },
    { name: 'Tecno',    region: 'Hong Kong',     count: 167,  founded: 2006, flagship: 'Camon 30 Premier',    share: 4.6,  tier: ['budget'] },
    { name: 'Infinix',  region: 'Hong Kong',     count: 124,  founded: 2013, flagship: 'Zero 40 Pro',         share: 2.8,  tier: ['budget'] },
    { name: 'Itel',     region: 'Hong Kong',     count: 89,   founded: 2007, flagship: 'P55 5G',              share: 1.4,  tier: ['budget'] },
    { name: 'Nokia',    region: 'Finland',       count: 78,   founded: 1865, flagship: 'XR21',                share: 0.7,  tier: ['niche'] },
    { name: 'Fairphone',region: 'Netherlands',   count: 6,    founded: 2013, flagship: 'Fairphone 5',         share: 0.05, tier: ['niche'] },
    { name: 'CAT',      region: 'United Kingdom',count: 21,   founded: 2012, flagship: 'S75',                 share: 0.1,  tier: ['niche'] },
  ];

  const filtered = brands.filter((b) => {
    if (filter !== 'all' && !b.tier.includes(filter)) return false;
    if (query && !b.name.toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  });

  const featured = brands.filter((b) => b.featured);

  return (
    <main className="pb-32">
      {/* Hero */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-12 sm:pt-16">
        <SectionEyebrow>The roster</SectionEyebrow>
        <SectionTitle size="xxl" className="mt-3">
          124 brands.<br />
          <span className="text-amber-brand dark:text-amber-warm">12,847 phones.</span>
        </SectionTitle>
        <p className="mt-5 max-w-2xl text-[15px] sm:text-[16px] leading-relaxed text-ink-soft dark:text-d-muted">
          Every phone brand worth knowing about, from the global giants to single-product niche shops. Filter by tier, search by name, or browse the global market by region.
        </p>

        {/* Stats strip */}
        <div className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-px bg-line dark:bg-d-border rounded-2xl border border-line dark:border-d-border overflow-hidden">
          {[
            { k: 'Brands tracked', v: '124' },
            { k: 'Phones in DB',   v: '12,847' },
            { k: 'Active brands · 2026', v: '67' },
            { k: 'Countries of origin',  v: '22' },
          ].map((s) => (
            <div key={s.k} className="bg-paper dark:bg-d-surface p-5">
              <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-ink-soft dark:text-d-muted">{s.k}</div>
              <div className="mt-2 num text-[28px] font-bold text-ink dark:text-white">{s.v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Featured brands — large tiles */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
        <div className="flex items-end justify-between mb-5">
          <SectionTitle>Featured this month</SectionTitle>
          <span className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">Top brands by reader interest</span>
        </div>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
          {featured.map((b, i) => (
            <button
              key={b.name}
              onClick={() => setPage(`brand.${b.name.toLowerCase().replace(/\s+/g, '')}`)}
              className="group text-left rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-5 hover:border-amber-brand/40 dark:hover:border-amber-warm/40 transition relative overflow-hidden"
            >
              <div className="pointer-events-none absolute top-3 right-3 text-ink/10 dark:text-white/10 group-hover:text-amber-brand/40 dark:group-hover:text-amber-warm/40 transition">
                <EagleMark size={48} />
              </div>
              <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{b.region}</div>
              <div className="mt-1 font-display font-bold tracking-tightest text-ink dark:text-white text-[24px]">{b.name}</div>
              <div className="mt-3 flex items-baseline gap-1">
                <span className="num text-[18px] font-semibold text-ink dark:text-white">{b.count}</span>
                <span className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">phones in DB</span>
              </div>
              <div className="mt-3 text-[12px] text-ink-soft dark:text-d-muted">Flagship: <span className="text-ink dark:text-white">{b.flagship}</span></div>
              <div className="mt-4 pt-4 border-t border-line dark:border-d-border flex items-center justify-between">
                <span className="num text-[11px] text-ink-soft dark:text-d-muted">{b.share}% market share</span>
                <span className="text-[12px] font-medium text-ink dark:text-white group-hover:text-amber-brand dark:group-hover:text-amber-warm inline-flex items-center gap-1">
                  Browse <IconArrowRight size={11} />
                </span>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* Search & filter */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-5">
          <div className="flex items-center gap-3">
            <SectionTitle size="lg">All brands</SectionTitle>
            <span className="text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{filtered.length} of {brands.length}</span>
          </div>
          <div className="flex items-center gap-2 flex-1 sm:max-w-xs">
            <div className="flex-1 flex items-center gap-2 rounded-lg border border-line dark:border-d-border bg-paper dark:bg-d-surface px-3 py-2">
              <IconSearch size={14} className="text-ink-soft dark:text-d-muted" />
              <input
                placeholder="Find a brand…"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                className="flex-1 min-w-0 bg-transparent text-[13px] outline-none placeholder:text-ink-soft/60 dark:placeholder:text-d-muted/60"
              />
            </div>
          </div>
        </div>

        <div className="mb-5">
          <FilterGroup items={filters} value={filter} onChange={setFilter} />
        </div>

        {/* Brand grid */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-px bg-line dark:bg-d-border rounded-2xl border border-line dark:border-d-border overflow-hidden">
          {filtered.map((b) => (
            <button
              key={b.name}
              onClick={() => setPage(`brand.${b.name.toLowerCase().replace(/\s+/g, '')}`)}
              className="bg-paper dark:bg-d-surface p-4 text-left hover:bg-paper-soft dark:hover:bg-d-bg transition group"
            >
              <div className="flex items-center justify-between">
                <div className="font-display font-bold tracking-tighter2 text-[17px] text-ink dark:text-white group-hover:text-amber-brand dark:group-hover:text-amber-warm transition">{b.name}</div>
                <span className="num text-[11px] text-ink-soft dark:text-d-muted">{b.count}</span>
              </div>
              <div className="mt-1 text-[11px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{b.region}</div>
              <div className="mt-2 flex flex-wrap gap-1">
                {b.tier.map((t) => (
                  <span key={t} className="text-[9px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted bg-paper-soft dark:bg-d-bg border border-line dark:border-d-border rounded-sm px-1.5 py-0.5">
                    {t}
                  </span>
                ))}
              </div>
            </button>
          ))}
          {filtered.length === 0 && (
            <div className="col-span-full bg-paper dark:bg-d-surface p-10 text-center text-[13px] text-ink-soft dark:text-d-muted">
              No brands match — try clearing the filter.
            </div>
          )}
        </div>
      </section>

      {/* Market share viz */}
      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 mt-16">
        <SectionTitle size="lg">Global market share · Q1 2026</SectionTitle>
        <div className="mt-5 rounded-2xl border border-line dark:border-d-border bg-paper dark:bg-d-surface p-5 sm:p-7">
          <div className="flex h-10 rounded-lg overflow-hidden mb-5">
            {brands.slice(0, 8).map((b, i) => {
              const colors = [
                'bg-ink dark:bg-white',
                'bg-amber-brand dark:bg-amber-warm',
                'bg-navy dark:bg-d-muted',
                'bg-win',
                'bg-ink/70 dark:bg-white/70',
                'bg-amber-brand/70 dark:bg-amber-warm/70',
                'bg-navy/70 dark:bg-d-muted/70',
                'bg-win/70',
              ];
              return (
                <div
                  key={b.name}
                  className={`${colors[i]} flex items-center justify-center text-[10px] font-mono uppercase tracking-wider ${i === 0 ? 'text-white dark:text-ink' : 'text-white'} overflow-hidden`}
                  style={{ width: `${b.share * 1.3}%`, minWidth: 36 }}
                  title={`${b.name} · ${b.share}%`}
                >
                  {b.share > 4 ? b.name : ''}
                </div>
              );
            })}
            <div className="flex-1 bg-paper-soft dark:bg-d-bg flex items-center justify-center text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">
              All others
            </div>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-3">
            {brands.slice(0, 8).map((b) => (
              <div key={b.name} className="flex items-baseline justify-between">
                <span className="text-[12px] text-ink dark:text-white">{b.name}</span>
                <span className="num text-[12px] text-ink-soft dark:text-d-muted">{b.share}%</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { Brands });