// components.jsx — UI components in the Casa Lar brand.
// Button, Input, Card, Badge, Stat, Quote, Avatar, ListItem.

// ────────────────────────────────────────────────────────────────
// Button — primary (ink), accent (sol), secondary (outline), ghost
// soft (cream), danger-soft. Plus sizes sm/md/lg/xl and icon-only.
// ────────────────────────────────────────────────────────────────
function Button({ variant = 'primary', size = 'md', children, full, icon, iconRight, square }) {
  const sizes = {
    sm: { fs: 13, pad: '8px 14px',  iconPad: 8 },
    md: { fs: 14, pad: '11px 18px', iconPad: 11 },
    lg: { fs: 16, pad: '14px 24px', iconPad: 14 },
    xl: { fs: 18, pad: '18px 30px', iconPad: 18 },
  };
  const s = sizes[size];
  const styles = {
    primary:   { bg: 'var(--ink)',     color: 'var(--paper)', border: 'none' },
    accent:    { bg: 'var(--sol)',     color: 'var(--ink)',   border: 'none' },
    secondary: { bg: 'var(--paper)',   color: 'var(--ink)',   border: '1.5px solid var(--ink)' },
    ghost:     { bg: 'transparent',    color: 'var(--ink)',   border: '1.5px solid transparent' },
    soft:      { bg: 'var(--paper-2)', color: 'var(--ink)',   border: '1px solid var(--line)' },
    folha:     { bg: 'var(--folha)',   color: 'var(--paper)', border: 'none' },
    ceramica:  { bg: 'var(--ceramica)',color: 'var(--paper)', border: 'none' },
  };
  const v = styles[variant];
  return (
    <button
      style={{
        fontFamily: 'var(--sans)',
        fontSize: s.fs,
        fontWeight: 600,
        padding: square ? `${s.iconPad}px` : s.pad,
        background: v.bg,
        color: v.color,
        border: v.border,
        borderRadius: 999,
        cursor: 'pointer',
        letterSpacing: '0.005em',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 8,
        width: full ? '100%' : 'auto',
        justifyContent: full ? 'center' : 'center',
        lineHeight: 1.2,
      }}
    >
      {icon && <span style={{ display: 'inline-flex' }}>{icon}</span>}
      {children}
      {iconRight && <span style={{ display: 'inline-flex' }}>{iconRight}</span>}
    </button>
  );
}

// ────────────────────────────────────────────────────────────────
// Input — text input with label, helper, optional icon
// ────────────────────────────────────────────────────────────────
function Input({ label, helper, value, placeholder, type = 'text', state = 'default', icon, suffix, multiline }) {
  const borderColor = state === 'error' ? 'var(--ceramica)'
                    : state === 'focus' ? 'var(--ink)'
                    : 'var(--line-strong)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontFamily: 'var(--sans)' }}>
      {label && (
        <label style={{
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--ink-mute)',
        }}>{label}</label>
      )}
      <div style={{
        background: 'var(--paper)',
        border: `1.5px solid ${borderColor}`,
        borderRadius: 6,
        padding: multiline ? '12px 14px' : '11px 14px',
        fontSize: 14,
        color: value ? 'var(--ink)' : 'var(--ink-mute)',
        boxShadow: state === 'focus' ? '0 0 0 4px color-mix(in oklab, var(--sol) 35%, transparent)' : 'none',
        transition: 'box-shadow .15s',
        display: 'flex', alignItems: multiline ? 'flex-start' : 'center', gap: 8,
        minHeight: multiline ? 80 : 'auto',
      }}>
        {icon && <span style={{ display: 'inline-flex', color: 'var(--ink-mute)' }}>{icon}</span>}
        <span style={{ flex: 1 }}>{value || placeholder}</span>
        {suffix && <span style={{ color: 'var(--ink-mute)', fontFamily: 'var(--mono)', fontSize: 12 }}>{suffix}</span>}
      </div>
      {helper && (
        <div style={{ fontSize: 12, color: state === 'error' ? 'var(--ceramica)' : 'var(--ink-mute)' }}>
          {helper}
        </div>
      )}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Badge — tag/chip
// ────────────────────────────────────────────────────────────────
function Badge({ tone = 'neutral', children, dot, size = 'md' }) {
  const map = {
    neutral:  { bg: 'var(--paper-2)',    fg: 'var(--ink)',   bd: 'var(--line)' },
    sol:      { bg: 'color-mix(in oklab, var(--sol) 30%, var(--paper))',      fg: 'var(--ink)',      bd: 'transparent' },
    ceramica: { bg: 'color-mix(in oklab, var(--ceramica) 18%, var(--paper))', fg: 'var(--ceramica)', bd: 'transparent' },
    folha:    { bg: 'color-mix(in oklab, var(--folha) 18%, var(--paper))',    fg: 'var(--folha)',    bd: 'transparent' },
    ceu:      { bg: 'color-mix(in oklab, var(--ceu) 18%, var(--paper))',      fg: 'var(--ceu)',      bd: 'transparent' },
    rosa:     { bg: 'color-mix(in oklab, var(--rosa) 30%, var(--paper))',     fg: 'var(--ink)',      bd: 'transparent' },
    ink:      { bg: 'var(--ink)',        fg: 'var(--paper)', bd: 'transparent' },
  };
  const v = map[tone];
  const sizes = {
    sm: { fs: 10.5, pad: '3px 8px', dot: 5 },
    md: { fs: 11.5, pad: '4px 9px', dot: 6 },
    lg: { fs: 13,   pad: '6px 12px', dot: 7 },
  };
  const s = sizes[size];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: s.pad, borderRadius: 999,
      background: v.bg, color: v.fg, border: `1px solid ${v.bd}`,
      fontFamily: 'var(--sans)', fontSize: s.fs, fontWeight: 600,
      letterSpacing: '0.02em', lineHeight: 1.4,
    }}>
      {dot && (
        <span style={{ width: s.dot, height: s.dot, borderRadius: '50%',
          background: v.fg, opacity: 0.75 }} />
      )}
      {children}
    </span>
  );
}

// ────────────────────────────────────────────────────────────────
// Card — content surface (default, accent-bordered, elevated, dark)
// ────────────────────────────────────────────────────────────────
function Card({ children, accent, variant = 'default', padding = 22, full }) {
  const variants = {
    default:  { bg: 'var(--paper)',   color: 'var(--ink)',   border: '1px solid var(--line)', shadow: 'none' },
    soft:     { bg: 'var(--paper-2)', color: 'var(--ink)',   border: '1px solid var(--line)', shadow: 'none' },
    elevated: { bg: 'var(--paper)',   color: 'var(--ink)',   border: '1px solid var(--line)', shadow: '0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06)' },
    dark:     { bg: 'var(--ink)',     color: 'var(--paper)', border: 'none', shadow: 'none' },
  };
  const v = variants[variant];
  return (
    <div style={{
      background: v.bg, color: v.color, border: v.border,
      borderRadius: 12, padding, boxShadow: v.shadow,
      borderTop: accent ? `4px solid ${accent}` : v.border,
      fontFamily: 'var(--sans)',
      width: full ? '100%' : 'auto',
    }}>
      {children}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Stat — big number with label
// ────────────────────────────────────────────────────────────────
function Stat({ value, label, suffix, accent }) {
  return (
    <div style={{ fontFamily: 'var(--sans)' }}>
      <div style={{
        fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 56, lineHeight: 0.95,
        color: 'var(--ink)', letterSpacing: '-0.02em',
      }}>
        {value}{suffix && <span style={{ fontSize: '0.5em', marginLeft: 4, color: accent || 'var(--ink-mute)', fontStyle: 'normal' }}>{suffix}</span>}
      </div>
      <div style={{
        fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: 'var(--ink-mute)', marginTop: 10,
      }}>{label}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Quote — editorial pull-quote
// ────────────────────────────────────────────────────────────────
function Quote({ children, author, role }) {
  return (
    <figure style={{ fontFamily: 'var(--sans)', color: 'var(--ink)', margin: 0,
      position: 'relative', paddingTop: 8 }}>
      <div style={{ position: 'absolute', top: -22, left: -8 }}>
        <DecQuoteMark size={60} color="var(--sol)" />
      </div>
      <blockquote style={{
        fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28, lineHeight: 1.2,
        letterSpacing: '-0.015em', margin: 0, color: 'var(--ink)',
      }}>
        {children}
      </blockquote>
      {author && (
        <figcaption style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-soft)' }}>
          <strong style={{ fontWeight: 600, color: 'var(--ink)' }}>{author}</strong>
          {role && <span style={{ color: 'var(--ink-mute)' }}> · {role}</span>}
        </figcaption>
      )}
    </figure>
  );
}

// ────────────────────────────────────────────────────────────────
// Avatar — initials circle
// ────────────────────────────────────────────────────────────────
function Avatar({ initials, color, size = 44 }) {
  const colors = ['var(--ceu)', 'var(--ceramica)', 'var(--sol)', 'var(--rosa)', 'var(--folha)'];
  const c = color || colors[(initials.charCodeAt(0) + initials.charCodeAt(1 % initials.length)) % colors.length];
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: c, color: 'var(--paper)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--sans)', fontWeight: 600, fontSize: size * 0.4,
      letterSpacing: '-0.01em',
    }}>{initials}</div>
  );
}

// ────────────────────────────────────────────────────────────────
// ListItem — row with leading icon/dot, primary, secondary, trailing
// ────────────────────────────────────────────────────────────────
function ListItem({ leading, primary, secondary, trailing, divider }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0',
      borderBottom: divider ? '1px solid var(--line)' : 'none',
      fontFamily: 'var(--sans)',
    }}>
      {leading && <div style={{ flexShrink: 0 }}>{leading}</div>}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.25 }}>{primary}</div>
        {secondary && <div style={{ fontSize: 12.5, color: 'var(--ink-mute)', marginTop: 2 }}>{secondary}</div>}
      </div>
      {trailing && <div style={{ flexShrink: 0, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-soft)' }}>{trailing}</div>}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Icons — small inline SVGs (sized via currentColor)
// ────────────────────────────────────────────────────────────────
const Icons = {
  Heart: <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 12.5 C2 9 1 6 1 4.2 C1 2.4 2.4 1 4.2 1 C5.5 1 6.5 1.8 7 2.7 C7.5 1.8 8.5 1 9.8 1 C11.6 1 13 2.4 13 4.2 C13 6 12 9 7 12.5 Z" /></svg>,
  Arrow: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7 L11 7 M7 3 L11 7 L7 11" /></svg>,
  Mail:  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="3" width="11" height="8" rx="1" /><path d="M1.5 4 L7 8 L12.5 4" /></svg>,
  Phone: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2 2.5 L4 2.5 L5 5 L4 6 C5 8 6 9 8 10 L9 9 L11.5 10 L11.5 12 C11.5 12.3 11.3 12.5 11 12.5 C6 12.5 1.5 8 1.5 3 C1.5 2.7 1.7 2.5 2 2.5 Z" /></svg>,
  Pin:   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M7 12 C7 12 11 8 11 5.5 C11 3 9 1.5 7 1.5 C5 1.5 3 3 3 5.5 C3 8 7 12 7 12 Z" /><circle cx="7" cy="5.5" r="1.5" /></svg>,
  Check: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 7 L6 10 L11.5 4" /></svg>,
  User:  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="7" cy="5" r="2.5" /><path d="M2 12 C2 9.5 4 8 7 8 C10 8 12 9.5 12 12" /></svg>,
  Pix:   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"><path d="M7 1.5 L12.5 7 L7 12.5 L1.5 7 Z M4.5 4.5 L9.5 9.5 M9.5 4.5 L4.5 9.5" /></svg>,
  Shirt: <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4.2 1.5 L2 3 L3.2 5 L4 4.6 L4 12.5 L10 12.5 L10 4.6 L10.8 5 L12 3 L9.8 1.5 L8.7 1.5 C8.5 2.4 7.8 2.9 7 2.9 C6.2 2.9 5.5 2.4 5.3 1.5 Z" /></svg>,
  Gift:  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="1.5" y="6" width="11" height="6.5" rx="0.5" /><path d="M1 6 L13 6 M7 6 L7 12.5 M4.5 6 C3 4 5 2 7 5 M9.5 6 C11 4 9 2 7 5" /></svg>,
  Play:  <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M3 2.2 L11.8 7 L3 11.8 Z" /></svg>,
  Hand:  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7 L4 3.2 C4 2.5 4.5 2 5.2 2 C5.9 2 6.4 2.5 6.4 3.2 L6.4 6.5 M6.4 6.5 L6.4 2.6 C6.4 1.9 6.9 1.4 7.6 1.4 C8.3 1.4 8.8 1.9 8.8 2.6 L8.8 7 M8.8 7 L8.8 3.5 C8.8 2.8 9.3 2.3 10 2.3 C10.7 2.3 11.2 2.8 11.2 3.5 L11.2 8.5 C11.2 11 9.3 12.5 7 12.5 C5 12.5 3.5 11.5 3 9.5 L2.2 7.5 C2 7 2.2 6.4 2.7 6.2 C3.2 6 3.7 6.2 4 6.7 Z" /></svg>,
};

// ────────────────────────────────────────────────────────────────
// Showcase artboards
// ────────────────────────────────────────────────────────────────
function ComponentsShowcaseA() {
  return (
    <div style={{ width: '100%', height: '100%', padding: '30px 32px 24px', boxSizing: 'border-box',
      background: 'var(--paper)', overflow: 'hidden' }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
        Componentes · Botões &amp; Campos
      </div>

      {/* Buttons */}
      <div style={{ marginTop: 18 }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginBottom: 12 }}>Botões</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          <Button variant="primary" icon={Icons.Heart}>Doe agora</Button>
          <Button variant="accent">Quero apoiar</Button>
          <Button variant="secondary">Saiba mais</Button>
          <Button variant="ghost" iconRight={Icons.Arrow}>Ver depois</Button>
          <Button variant="soft">Cancelar</Button>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 10, alignItems: 'center' }}>
          <Button variant="primary" size="sm">SM</Button>
          <Button variant="primary" size="md">MD</Button>
          <Button variant="primary" size="lg">LG</Button>
          <Button variant="primary" size="xl">XL</Button>
          <Button variant="primary" size="md" square icon={Icons.Heart} />
          <Button variant="secondary" size="md" square icon={Icons.Arrow} />
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 10, alignItems: 'center' }}>
          <Button variant="folha" icon={Icons.Check}>Confirmado</Button>
          <Button variant="ceramica">Cancelar inscrição</Button>
        </div>
      </div>

      {/* Inputs */}
      <div style={{ marginTop: 22 }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginBottom: 12 }}>Campos</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Input label="NOME COMPLETO" placeholder="Maria das Graças Silva" icon={Icons.User} />
          <Input label="E-MAIL" value="maria@correio.com" state="focus" icon={Icons.Mail} helper="Você receberá um recibo." />
          <Input label="TELEFONE" value="(11) 9 9876-5432" icon={Icons.Phone} />
          <Input label="VALOR" value="120,00" suffix="R$/mês" />
          <Input label="DOCUMENTO" value="000.000.000-XX" state="error" helper="CPF inválido." />
          <Input label="MENSAGEM" placeholder="Conte como podemos ajudar…" multiline />
        </div>
      </div>
    </div>
  );
}

function ComponentsShowcaseB() {
  return (
    <div style={{ width: '100%', height: '100%', padding: '30px 32px 24px', boxSizing: 'border-box',
      background: 'var(--paper)', overflow: 'hidden' }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
        Componentes · Etiquetas, Cards, Listas
      </div>

      <div style={{ marginTop: 18 }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginBottom: 12 }}>Etiquetas</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          <Badge tone="sol" dot>Em andamento</Badge>
          <Badge tone="folha" dot>Acolhido</Badge>
          <Badge tone="ceu">Voluntária</Badge>
          <Badge tone="rosa">Padrinho</Badge>
          <Badge tone="ceramica">Urgente</Badge>
          <Badge tone="ink">Mantenedor</Badge>
          <Badge tone="neutral">Aguarda</Badge>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
          <Badge tone="folha" size="sm">SM</Badge>
          <Badge tone="folha" size="md">MD</Badge>
          <Badge tone="folha" size="lg">LG</Badge>
        </div>
      </div>

      <div style={{ marginTop: 22 }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginBottom: 12 }}>Cards</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Card accent="var(--sol)">
            <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--ink-mute)' }}>Apadrinhamento</div>
            <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginTop: 4, lineHeight: 1.1 }}>
              Sustente um lugar
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-soft)', marginTop: 6, lineHeight: 1.45 }}>
              R$ 120/mês cobre alimentação e escola.
            </div>
          </Card>
          <Card variant="dark">
            <div style={{ fontFamily: 'var(--mono)', fontSize: 9.5, letterSpacing: '0.08em',
              textTransform: 'uppercase', opacity: 0.7 }}>Transparência · 2025</div>
            <Stat value="R$ 142.580" label="DOADO NO ANO" />
          </Card>
        </div>
      </div>

      <div style={{ marginTop: 22 }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginBottom: 12 }}>Lista</div>
        <div>
          <ListItem
            leading={<Avatar initials="MG" />}
            primary="Maria das Graças"
            secondary="Coordenadora pedagógica · desde 2014"
            trailing="EQUIPE"
            divider />
          <ListItem
            leading={<Avatar initials="LR" color="var(--folha)" />}
            primary="Luiz Renato"
            secondary="Educador · turno tarde"
            trailing="EQUIPE"
            divider />
          <ListItem
            leading={<Avatar initials="AB" color="var(--ceu)" />}
            primary="Antonia Berenice"
            secondary="Psicóloga · quartas e sextas"
            trailing="EQUIPE" />
        </div>
      </div>
    </div>
  );
}

function ComponentsShowcaseC() {
  return (
    <div style={{ width: '100%', height: '100%', padding: '30px 32px 24px', boxSizing: 'border-box',
      background: 'var(--paper-2)', overflow: 'hidden' }}>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em',
        textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
        Componentes · Estatísticas &amp; Citação
      </div>

      <div style={{ marginTop: 18 }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginBottom: 16 }}>Estatísticas</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18,
          padding: '4px 0 16px', borderBottom: '1px solid var(--line)' }}>
          <Stat value="14" label="ANOS DE CASA" />
          <Stat value="86" suffix="vidas" label="ACOLHIDAS DESDE 2010" />
          <Stat value="R$ 142k" label="DOADOS EM 2025" />
        </div>
      </div>

      <div style={{ marginTop: 28 }}>
        <Quote author="Yasmin, 12 anos" role="acolhida desde os 7">
          Quando entrei, eu não sabia que aniversário tinha bolo.
          Hoje sei que a casa é minha.
        </Quote>
      </div>

      <div style={{ marginTop: 32, display: 'flex', justifyContent: 'center' }}>
        <DecFiveDots />
      </div>
    </div>
  );
}

Object.assign(window, {
  Button, Input, Badge, Card, Stat, Quote, Avatar, ListItem,
  Icons,
  ComponentsShowcaseA, ComponentsShowcaseB, ComponentsShowcaseC,
});