// Variation A — "Warm Coach"
// Cream background, white cards, lime hype, balanced tone.
// Bricolage Grotesque display + Geist body.

const A = {
  bg:    '#F5F1E8',
  card:  '#FFFFFF',
  ink:   '#14110D',
  ink2:  '#5C544A',
  ink3:  '#A39B8E',
  rule:  '#E8E0CE',
  rest:  '#EFE8D7',
  hype:  '#B8F23A', // lime — wins
  good:  '#22A664',
  warn:  '#F0A12E', // amber — middle
  bad:   '#E84A4A', // warm red — slipping
  display: '"Bricolage Grotesque", system-ui',
  body:   '"Geist", system-ui',
  mono:   '"Geist Mono", monospace',
};

// CSS vars on the screen wrapper
function AWrap({ children }) {
  const style = {
    '--bg':    A.bg,
    '--card':  A.card,
    '--ink':   A.ink,
    '--ink-2': A.ink2,
    '--ink-3': A.ink3,
    '--font-body':    A.body,
    '--font-display': A.display,
    '--font-mono':    A.mono,
  };
  return <div className="scr" style={style}>{children}</div>;
}

// shared icons
const Iq = (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p} />;
const ITabHome = (p) => <Iq width={22} height={22} {...p}><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></Iq>;
const ITabFood = (p) => <Iq width={22} height={22} {...p}><path d="M12 21c-4 0-7-3.5-7-8 0-3.5 2.5-6 5-6 1.2 0 1.7.6 2 .6s.8-.6 2-.6c2.5 0 5 2.5 5 6 0 4.5-3 8-7 8z"/><path d="M12 3c1 1.5 0 4-2 4"/></Iq>;
const ITabStr = (p) => <Iq width={22} height={22} {...p}><path d="M3 12h2M5 9v6M19 9v6M19 12h2M7 7v10M17 7v10M7 12h10"/></Iq>;
const ITabFlag = (p) => <Iq width={22} height={22} {...p}><path d="M5 21V4M5 4h12l-2 4 2 4H5"/></Iq>;
const ITabUser = (p) => <Iq width={22} height={22} {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></Iq>;
const ISpark = (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2l1.7 5.3L19 9l-5.3 1.7L12 16l-1.7-5.3L5 9l5.3-1.7z"/><path d="M19 14l.8 2.4L22 17l-2.2.6L19 20l-.8-2.4L16 17l2.2-.6z" opacity=".7"/></svg>;
const IArrowDown = (p) => <Iq width={14} height={14} {...p}><path d="M12 5v14M5 12l7 7 7-7"/></Iq>;
const IArrowUp = (p) => <Iq width={14} height={14} {...p}><path d="M12 19V5M5 12l7-7 7 7"/></Iq>;
const IFire = (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M12 2s-2 3-2 6c0 1.5 1 2.5 1 4-2-1-3-3-3-5C5 10 4 13 4 16c0 4.4 3.6 8 8 8s8-3.6 8-8c0-5-4-9-4-12 0-1.5-2-2-4-2z"/></svg>;
const ICheck = (p) => <Iq width={14} height={14} strokeWidth="3" {...p}><path d="M4 12l6 6L20 6"/></Iq>;

// Tab bar
function ATabBar({ active }) {
  const tabs = [
    { id: 'home', icon: ITabHome },
    { id: 'food', icon: ITabFood },
    { id: 'str',  icon: ITabStr },
    { id: 'flag', icon: ITabFlag },
    { id: 'user', icon: ITabUser },
  ];
  return (
    <div className="tabbar">
      {tabs.map(t => {
        const Ic = t.icon;
        const on = t.id === active;
        return (
          <div key={t.id} className={'tab-btn' + (on ? ' active' : '')}>
            <Ic />
          </div>
        );
      })}
    </div>
  );
}

// Header bar (logo + AI + secondary action)
function AHeader({ title, mode, action }) {
  return (
    <div style={{
      padding: '70px 18px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <div>
        {mode && <div className="eyebrow" style={{ color: A.ink3, marginBottom: 2 }}>{mode}</div>}
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 26,
          letterSpacing: '-0.02em', lineHeight: 1, color: A.ink,
          textTransform: 'uppercase',
        }}>{title}</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button style={{
          width: 40, height: 40, border: 'none', borderRadius: 14,
          background: A.ink, color: A.hype,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 12px rgba(20,17,13,0.18)',
        }}>
          <ISpark />
        </button>
        {action && (
          <button style={{
            width: 40, height: 40, borderRadius: 14, border: `1px solid ${A.rule}`,
            background: A.card, color: A.ink2,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{action}</button>
        )}
      </div>
    </div>
  );
}

// Date strip — week scroll
function ADateStrip({ selected = 16 }) {
  const days = [
    { d: 'M', n: 11 }, { d: 'T', n: 12 }, { d: 'W', n: 13 }, { d: 'T', n: 14 },
    { d: 'F', n: 15 }, { d: 'S', n: 16 }, { d: 'S', n: 17 },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6,
      padding: '0 18px 18px',
    }}>
      {days.map((x) => {
        const on = x.n === selected;
        return (
          <div key={x.n} style={{
            aspectRatio: '1/1.15', borderRadius: 14,
            background: on ? A.ink : A.card,
            border: on ? 'none' : `1px solid ${A.rule}`,
            color: on ? '#fff' : A.ink,
            display: 'flex', flexDirection: 'column', alignItems: 'center',
            justifyContent: 'center', gap: 2,
            fontFamily: A.display,
          }}>
            <div style={{ fontSize: 10, fontWeight: 600, opacity: 0.6, letterSpacing: 0.5 }}>{x.d}</div>
            <div style={{ fontSize: 18, fontWeight: 700 }}>{x.n}</div>
            {on && <div style={{ width: 4, height: 4, borderRadius: 2, background: A.hype, marginTop: 1 }} />}
          </div>
        );
      })}
    </div>
  );
}

// ── Arc gauge — 220° sweep with score
function AGauge({ value = 0, color = A.bad, label }) {
  const max = 100;
  const r = 70, cx = 90, cy = 88;
  const sweep = 220; // degrees
  const start = 180 - (sweep - 180) / 2; // 160
  const end = start + sweep;
  const toXY = (deg) => {
    const rad = (deg * Math.PI) / 180;
    return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
  };
  const [sx, sy] = toXY(start);
  const [ex, ey] = toXY(end);
  const pct = Math.max(0, Math.min(1, value / max));
  const [px, py] = toXY(start + sweep * pct);
  const large = sweep > 180 ? 1 : 0;
  const trackD = `M${sx},${sy} A${r},${r} 0 ${large} 1 ${ex},${ey}`;
  const fillD  = `M${sx},${sy} A${r},${r} 0 ${pct > 0.5 ? 1 : 0} 1 ${px},${py}`;
  return (
    <div style={{ position: 'relative', width: 180, height: 130 }}>
      <svg width="180" height="180" viewBox="0 0 180 180">
        <path d={trackD} stroke={A.rest} strokeWidth="14" strokeLinecap="round" fill="none"/>
        {value > 0 && (
          <path d={fillD} stroke={color} strokeWidth="14" strokeLinecap="round" fill="none"
            className="anim-draw" style={{ strokeDasharray: 300, '--len': 300 }}/>
        )}
      </svg>
      <div style={{
        position: 'absolute', inset: 0, top: 18,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 60,
          lineHeight: 1, color: A.ink, letterSpacing: '-0.04em',
        }} className="anim-countup">{value}</div>
        <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600, letterSpacing: '0.12em', marginTop: 2 }}>OUT OF 100</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  A, AWrap, ATabBar, AHeader, ADateStrip, AGauge,
  ISpark, IArrowDown, IArrowUp, IFire, ICheck, Iq,
  ITabHome, ITabFood, ITabStr, ITabFlag, ITabUser,
});