/* Shared bits used by the new pages (Phone, Best, Brands, News, Search) */

const SectionEyebrow = ({ children, className = '' }) => (
  <div className={`text-[11px] font-mono uppercase tracking-[0.16em] text-amber-brand dark:text-amber-warm ${className}`}>
    {children}
  </div>
);

const SectionTitle = ({ children, size = 'lg', className = '' }) => {
  const s = {
    sm: 'text-[20px] sm:text-[22px]',
    lg: 'text-[24px] sm:text-[28px]',
    xl: 'text-[32px] sm:text-[40px]',
    xxl: 'text-[40px] sm:text-[56px] lg:text-[72px]',
  }[size];
  return <h2 className={`font-display font-bold tracking-tightest text-ink dark:text-white leading-[1] ${s} ${className}`}>{children}</h2>;
};

const Hairline = ({ className = '' }) => <div className={`h-px bg-line dark:bg-d-border ${className}`} />;

const SmallStat = ({ k, v, big = false }) => (
  <div>
    <div className="text-[10px] font-mono uppercase tracking-wider text-ink-soft dark:text-d-muted">{k}</div>
    <div className={`num ${big ? 'text-[20px]' : 'text-[14px]'} font-semibold text-ink dark:text-white`}>{v}</div>
  </div>
);

const ScorePill = ({ value, label, tone = 'ink' }) => {
  const tones = {
    ink: 'bg-ink text-white dark:bg-white dark:text-ink',
    amber: 'bg-amber-brand text-white dark:bg-amber-warm dark:text-ink',
    win: 'bg-win text-white',
    outline: 'border border-line dark:border-d-border text-ink dark:text-white bg-transparent',
  };
  return (
    <div className={`inline-flex items-baseline gap-1 rounded-md px-2 py-1 ${tones[tone]}`}>
      <span className="num text-[14px] font-semibold leading-none">{value}</span>
      {label && <span className="text-[10px] font-mono uppercase tracking-wider opacity-80">{label}</span>}
    </div>
  );
};

/* Filter chip group — segmented control */
const FilterGroup = ({ items, value, onChange, size = 'md' }) => {
  const sz = size === 'sm' ? 'text-[11px] px-2.5 py-1' : 'text-[12px] px-3 py-1.5';
  return (
    <div className="flex flex-wrap items-center gap-1.5">
      {items.map((it) => {
        const k = typeof it === 'string' ? it : it.k;
        const label = typeof it === 'string' ? it : it.label;
        const active = value === k;
        return (
          <button
            key={k}
            onClick={() => onChange(k)}
            className={`${sz} rounded-full border transition ${
              active
                ? 'bg-ink text-white border-ink dark:bg-white dark:text-ink dark:border-white'
                : 'border-line dark:border-d-border bg-paper dark:bg-d-surface text-ink-soft dark:text-d-muted hover:text-ink dark:hover:text-white'
            } font-medium`}
          >
            {label}
          </button>
        );
      })}
    </div>
  );
};

/* Inline mini bar */
const InlineBar = ({ value, max = 100, accent = false }) => (
  <div className="h-1.5 w-full rounded-full bg-paper-soft dark:bg-d-bg overflow-hidden">
    <div
      className={`h-full ${accent ? 'bg-amber-brand dark:bg-amber-warm' : 'bg-ink dark:bg-white'}`}
      style={{ width: `${Math.min(100, (value / max) * 100)}%` }}
    />
  </div>
);

Object.assign(window, {
  SectionEyebrow, SectionTitle, Hairline, SmallStat, ScorePill, FilterGroup, InlineBar,
});