// Almeida & Matos — Página de Links
// Brand colors per manual: navy #354271, gold #D2AE6D, gray #848688

const TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "midnight",
  "buttonStyle": "glass",
  "showQuote": true,
  "ornament": true,
  "headerStyle": "monogram",
  "goldIntensity": 1
}/*EDITMODE-END*/;

const PALETTES = {
  midnight: {
    bg: '#0a0f1f',
    bg2: '#11182f',
    surface: 'rgba(255,255,255,0.04)',
    border: 'rgba(210,174,109,0.18)',
    text: '#F4EFE6',
    muted: '#8b93a8',
    gold: '#D2AE6D',
    navy: '#354271',
  },
  charcoal: {
    bg: '#0e0e10',
    bg2: '#161618',
    surface: 'rgba(255,255,255,0.035)',
    border: 'rgba(210,174,109,0.22)',
    text: '#F1ECE3',
    muted: '#8a8a8e',
    gold: '#D2AE6D',
    navy: '#354271',
  },
  navy: {
    bg: '#1a2240',
    bg2: '#222d54',
    surface: 'rgba(255,255,255,0.06)',
    border: 'rgba(210,174,109,0.30)',
    text: '#F6F1E5',
    muted: '#a4adc7',
    gold: '#E1BE7B',
    navy: '#354271',
  },
};

const BIO = {
  name: 'Almeida & Matos',
  subtitle: 'Sociedade de Advogados',
  bio: 'Seus direitos não são favor. Informação que muda vidas.\n⚖️  Especialistas em acidentes e doenças em geral.',
  tags: ['OAB/SP', 'Desde 2008'],
};

const PRIMARY_LINKS = [
  {
    id: 'whatsapp',
    label: 'Descubra se você tem\nbenefícios a receber.',
    detail: 'Atendimento direto · 11 93004-4411',
    icon: 'WhatsApp',
    href: 'https://wa.me/5511930044411',
    accent: true,
  },
  {
    id: 'site',
    label: 'Conheça melhor a empresa.',
    detail: 'almeidaematos.com.br',
    icon: 'Globe',
    href: 'http://www.almeidaematos.com.br',
  },
];

const SOCIALS = [
  { id: 'instagram', label: 'Instagram', icon: 'Instagram', href: 'https://www.instagram.com/almeidaematosadvogados/' },
  { id: 'facebook', label: 'Facebook', icon: 'Facebook', href: 'https://www.facebook.com/almeidaematosadv/' },
  { id: 'youtube', label: 'YouTube', icon: 'YouTube', href: 'https://www.youtube.com/channel/UCh9Wdh4V-qdCxIEqGYEbMkA' },
  { id: 'tiktok', label: 'TikTok', icon: 'TikTok', href: 'https://www.tiktok.com/@almeidaematosadvogados' },
  { id: 'kwai', label: 'Kwai', icon: 'Kwai', href: 'https://www.kwai.com/@almeidaematos' },
  { id: 'linkedin', label: 'LinkedIn', icon: 'LinkedIn', href: 'https://br.linkedin.com/company/almeida-e-matos-sociedade-de-advogados' },
];

// ─── Ornament: gold filigree divider ──────────────────────────────────────
const Ornament = ({ color = '#D2AE6D' }) => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, opacity: 0.7 }}>
    <span style={{ flex: 1, height: 1, background: `linear-gradient(90deg, transparent, ${color}66 40%, ${color}66 60%, transparent)` }} />
    <svg width="36" height="10" viewBox="0 0 36 10" fill="none">
      <circle cx="18" cy="5" r="1.6" fill={color} />
      <circle cx="6" cy="5" r="1" fill={color} opacity="0.6" />
      <circle cx="30" cy="5" r="1" fill={color} opacity="0.6" />
      <line x1="9" y1="5" x2="14" y2="5" stroke={color} strokeWidth="0.5" opacity="0.6" />
      <line x1="22" y1="5" x2="27" y2="5" stroke={color} strokeWidth="0.5" opacity="0.6" />
    </svg>
    <span style={{ flex: 1, height: 1, background: `linear-gradient(90deg, transparent, ${color}66 40%, ${color}66 60%, transparent)` }} />
  </div>
);

// ─── Link Card ─────────────────────────────────────────────────────────────
const LinkCard = ({ item, palette, style }) => {
  const [hover, setHover] = React.useState(false);
  const IconCmp = window.Icon[item.icon] || window.Icon.Globe;

  const baseCard = {
    glass: {
      background: palette.surface,
      backdropFilter: 'blur(8px)',
      border: `1px solid ${palette.border}`,
    },
    outlined: {
      background: 'transparent',
      border: `1px solid ${palette.border}`,
    },
    filled: {
      background: 'rgba(255,255,255,0.06)',
      border: `1px solid rgba(255,255,255,0.04)`,
    },
  }[style];

  const accentLayer = item.accent && !hover ? {
    boxShadow: `0 0 0 1px ${palette.gold}40, 0 8px 24px ${palette.gold}10`,
  } : {};
  const hoverLayer = hover ? {
    transform: 'translateY(-1px)',
    borderColor: palette.gold,
    boxShadow: `0 8px 32px ${palette.gold}18, 0 0 0 1px ${palette.gold}55`,
  } : {};

  return (
    <a
      href={item.href}
      target="_blank"
      rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 16,
        padding: '16px 20px',
        borderRadius: 14,
        textDecoration: 'none',
        color: palette.text,
        transition: 'all 220ms cubic-bezier(.2,.8,.2,1)',
        position: 'relative',
        overflow: 'hidden',
        ...baseCard,
        ...accentLayer,
        ...hoverLayer,
      }}
    >
      {/* Subtle gold rail on left when accent */}
      {item.accent && (
        <span style={{
          position: 'absolute', left: 0, top: 12, bottom: 12, width: 2,
          background: `linear-gradient(180deg, transparent, ${palette.gold}, transparent)`,
          opacity: 0.9,
        }} />
      )}

      <div style={{
        width: 42, height: 42, borderRadius: 10,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: hover ? `${palette.gold}1a` : 'rgba(255,255,255,0.04)',
        color: hover ? palette.gold : palette.text,
        border: `1px solid ${palette.border}`,
        transition: 'all 220ms ease',
        flexShrink: 0,
      }}>
        <IconCmp size={20} />
      </div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <span style={{
            fontSize: 'clamp(12.5px, 3.6vw, 15px)',
            fontWeight: 600, letterSpacing: '-0.01em',
            color: palette.text,
            whiteSpace: 'pre-line',
            minWidth: 0, flex: '0 1 auto',
          }}>{item.label}</span>
          {item.eyebrow && (
            <span style={{
              fontSize: 9.5, fontWeight: 600, letterSpacing: '0.12em',
              padding: '2px 6px', borderRadius: 3,
              background: `${palette.gold}22`, color: palette.gold,
              border: `1px solid ${palette.gold}40`,
              flexShrink: 0,
            }}>{item.eyebrow}</span>
          )}
        </div>
        {item.detail && (
          <div style={{
            fontSize: 12.5, color: palette.muted, marginTop: 2, fontWeight: 400,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            {item.detail}
          </div>
        )}
      </div>

      <div style={{
        color: hover ? palette.gold : palette.muted,
        transition: 'all 220ms ease',
        transform: hover ? 'translate(2px, -2px)' : 'none',
      }}>
        <window.Icon.ArrowUpRight size={16} />
      </div>
    </a>
  );
};

// ─── Social pill row ──────────────────────────────────────────────────────
const SocialRow = ({ palette }) => (
  <div style={{ display: 'flex', flexWrap: 'nowrap', gap: 'clamp(4px, 2vw, 10px)', justifyContent: 'center' }}>
    {SOCIALS.map(s => {
      const IconCmp = window.Icon[s.icon];
      return <SocialIcon key={s.id} item={s} IconCmp={IconCmp} palette={palette} />;
    })}
  </div>
);
const SocialIcon = ({ item, IconCmp, palette }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={item.href} target="_blank" rel="noopener noreferrer"
      aria-label={item.label}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        width: 'clamp(38px, 11vw, 53px)',
        height: 'clamp(38px, 11vw, 53px)',
        flexShrink: 0,
        borderRadius: '50%',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: hover ? `${palette.gold}1a` : 'rgba(255,255,255,0.04)',
        color: hover ? palette.gold : palette.text,
        border: `1px solid ${hover ? palette.gold + '88' : palette.border}`,
        textDecoration: 'none',
        transition: 'all 200ms ease',
        transform: hover ? 'translateY(-2px)' : 'none',
      }}
    >
      <IconCmp size={25} />
      <span style={{
        position: 'absolute',
        top: 'calc(100% + 8px)',
        left: '50%',
        transform: hover ? 'translate(-50%, 0)' : 'translate(-50%, -4px)',
        fontSize: 10,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: palette.gold,
        whiteSpace: 'nowrap',
        opacity: hover ? 1 : 0,
        pointerEvents: 'none',
        transition: 'opacity 180ms ease, transform 180ms ease',
      }}>
        {item.label}
      </span>
    </a>
  );
};

// ─── Copyable footer line ─────────────────────────────────────────────────
const Copyable = ({ children, value, palette, icon: IconC, size = 'sm' }) => {
  const [copied, setCopied] = React.useState(false);
  const onClick = (e) => {
    e.preventDefault();
    navigator.clipboard?.writeText(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  };
  const big = size === 'lg';
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: big ? 10 : 8,
      background: 'transparent', border: 'none', cursor: 'pointer',
      color: big ? palette.text : palette.muted,
      fontSize: big ? 15 : 12.5,
      fontWeight: big ? 600 : 400,
      letterSpacing: big ? '0.02em' : 'normal',
      padding: big ? '6px 4px' : 4,
      fontFamily: 'inherit',
    }}>
      <IconC size={big ? 15 : 13} />
      <span>{children}</span>
      <span style={{ color: copied ? palette.gold : palette.muted, transition: 'all 200ms', opacity: 0.7 }}>
        {copied ? <window.Icon.Check size={big ? 16 : 13} /> : <window.Icon.Copy size={big ? 15 : 12} />}
      </span>
    </button>
  );
};

// ─── Header ───────────────────────────────────────────────────────────────
const Header = ({ palette, headerStyle }) => {
  const plate = '#F6F1E6';
  const [hover, setHover] = React.useState(false);
  return (
    <header style={{ textAlign: 'center', paddingTop: 0 }}>
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          // Break out of the 480px column to span the full viewport width
          width: '100vw',
          position: 'relative',
          left: '50%',
          right: '50%',
          marginLeft: '-50vw',
          marginRight: '-50vw',
          marginTop: -32,
          marginBottom: 28,
          background: `linear-gradient(180deg, #FFFFFF 0%, ${plate} 100%)`,
          borderTop: `1px solid ${palette.gold}`,
          borderBottom: `1px solid ${palette.gold}`,
          boxShadow: `0 12px 50px ${palette.bg}aa`,
          padding: '14px 24px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
        <img src="assets/logo.png" alt="Almeida & Matos — Sociedade de Advogados"
             draggable="false"
             style={{
               width: '100%', maxWidth: 150, height: 'auto', display: 'block',
               userSelect: 'none', pointerEvents: 'none',
               transform: hover ? 'scale(1.06)' : 'scale(1)',
               transition: 'transform 380ms cubic-bezier(.2,.8,.2,1)',
               transformOrigin: 'center',
             }} />
      </div>

      <svg
        viewBox="0 0 720 96"
        preserveAspectRatio="xMidYMid meet"
        aria-label={BIO.bio}
        style={{
          display: 'block',
          width: '100%',
          maxWidth: 460,
          height: 'auto',
          margin: '6px auto 16px',
        }}
      >
        <text x="360" y="36" textAnchor="middle" fontSize="22" fontWeight="700"
              fill="#FFFFFF" fontFamily="Manrope, system-ui, sans-serif">
          Seus direitos não são favor. Informação que muda vidas.
        </text>
        <text x="360" y="74" textAnchor="middle" fontSize="22" fontWeight="700"
              fill="#FFFFFF" fontFamily="Manrope, system-ui, sans-serif">
          ⚖️  Especialistas em acidentes e doenças em geral.
        </text>
      </svg>

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, justifyContent: 'center' }}>
        {BIO.tags.map(tag => (
          <span key={tag} style={{
            fontSize: 10.5, letterSpacing: '0.12em', fontWeight: 500,
            padding: '4px 10px', borderRadius: 999,
            color: palette.muted,
            border: `1px solid ${palette.border}`,
            background: 'rgba(255,255,255,0.02)',
          }}>{tag.toUpperCase()}</span>
        ))}
      </div>
    </header>
  );
};

// ─── Inline YouTube player (combined card with header + embed) ────────────
const VideoCard = ({ videoId, palette, title }) => {
  const [active, setActive] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const wrapRef = React.useRef(null);
  const thumb = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
  const PlayIcon = window.Icon.Play;

  const handleFullscreen = (e) => {
    e.stopPropagation();
    const el = wrapRef.current;
    if (!el) return;
    const req = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
    req?.call(el);
  };

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: palette.surface,
        backdropFilter: 'blur(8px)',
        border: `1px solid ${hover && !active ? palette.gold + '88' : palette.border}`,
        borderRadius: 14,
        overflow: 'hidden',
        transition: 'all 220ms ease',
        boxShadow: hover && !active
          ? `0 12px 40px ${palette.gold}18, 0 0 0 1px ${palette.gold}55`
          : 'none',
        isolation: 'isolate',
        transform: 'translateZ(0)',
      }}
    >
      {/* Header — same visual language as a LinkCard, but inline */}
      <button
        type="button"
        onClick={() => !active && setActive(true)}
        disabled={active}
        style={{
          display: 'flex', alignItems: 'center', gap: 16,
          width: '100%', padding: '16px 20px',
          background: 'transparent', border: 'none',
          color: palette.text,
          textAlign: 'left',
          cursor: active ? 'default' : 'pointer',
          fontFamily: 'inherit',
        }}
      >
        <div style={{
          width: 42, height: 42, borderRadius: 10,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: hover ? `${palette.gold}1a` : 'rgba(255,255,255,0.04)',
          color: hover ? palette.gold : palette.text,
          border: `1px solid ${palette.border}`,
          flexShrink: 0,
          transition: 'all 220ms ease',
        }}>
          <PlayIcon size={20} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em',
            color: palette.text,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>{title}</div>
          <div style={{
            fontSize: 12.5, color: palette.muted, marginTop: 2,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            {active ? 'Reproduzindo no player abaixo' : 'Toque para assistir aqui'}
          </div>
        </div>
      </button>

      {/* Hairline divider */}
      <div style={{ height: 1, background: palette.border, margin: '0 16px' }} />

      {/* Video area — inside the same bordered card */}
      <div style={{ padding: 12 }}>
        <div ref={wrapRef} style={{
          position: 'relative',
          width: '100%',
          aspectRatio: '16 / 9',
          borderRadius: 8,
          overflow: 'hidden',
          background: '#000',
          isolation: 'isolate',
          transform: 'translateZ(0)',
        }}>
          {!active ? (
            <button
              type="button"
              onClick={() => setActive(true)}
              aria-label={`Assistir: ${title}`}
              style={{
                position: 'absolute', inset: 0,
                border: 'none', padding: 0,
                background: `url(${thumb}) center/cover no-repeat`,
                cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}
            >
              <span style={{
                position: 'absolute', inset: 0,
                background: `linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5))`,
              }} />
              <span style={{
                position: 'absolute',
                width: hover ? 92 : 80, height: hover ? 92 : 80,
                borderRadius: '50%',
                border: `1px solid ${palette.gold}66`,
                transition: 'all 240ms ease',
              }} />
              <span style={{
                position: 'relative',
                width: 64, height: 64, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: hover ? palette.gold : `${palette.bg2}ee`,
                border: `1px solid ${palette.gold}`,
                color: hover ? palette.bg : palette.gold,
                transform: hover ? 'scale(1.06)' : 'scale(1)',
                transition: 'all 240ms cubic-bezier(.2,.8,.2,1)',
                boxShadow: `0 8px 32px ${palette.gold}44`,
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M8 5.5v13l11-6.5z" />
                </svg>
              </span>
            </button>
          ) : (
            <React.Fragment>
              <iframe
                src={`https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`}
                title={title}
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen"
                allowFullScreen
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, borderRadius: 8 }}
              />
              <button
                type="button"
                onClick={handleFullscreen}
                aria-label="Tela cheia"
                title="Tela cheia"
                style={{
                  position: 'absolute', top: 8, right: 8,
                  width: 32, height: 32, borderRadius: 8,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: 'rgba(10,15,31,0.7)',
                  color: palette.gold,
                  border: `1px solid ${palette.gold}55`,
                  cursor: 'pointer',
                  backdropFilter: 'blur(4px)',
                  zIndex: 2,
                }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M4 9V4h5" />
                  <path d="M20 9V4h-5" />
                  <path d="M4 15v5h5" />
                  <path d="M20 15v5h-5" />
                </svg>
              </button>
            </React.Fragment>
          )}
        </div>
      </div>
    </div>
  );
};

// ─── Main App ─────────────────────────────────────────────────────────────
const App = () => {
  const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakToggle, TweakSlider, TweakSelect } = window;
  const [t, setTweak] = useTweaks(TWEAKS);

  const palette = { ...PALETTES[t.palette] };
  // gold intensity
  const goldHex = palette.gold;

  return (
    <div className="page-bg" style={{
      minHeight: '100vh',
      width: '100%',
      backgroundColor: palette.bg,
      backgroundImage: `linear-gradient(180deg, ${palette.bg}90 0%, ${palette.bg}b2 100%), url("assets/bg.png")`,
      backgroundSize: 'auto, cover',
      backgroundPosition: 'center, center',
      backgroundRepeat: 'no-repeat, no-repeat',
      backgroundAttachment: 'scroll, fixed',
      color: palette.text,
      fontFamily: "'Manrope', system-ui, sans-serif",
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Subtle grain overlay */}
      <div style={{
        position: 'fixed', inset: 0, pointerEvents: 'none',
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")`,
        opacity: 0.04,
        mixBlendMode: 'overlay',
      }} />

      {/* (decorative ornament removed) */}

      <main style={{
        maxWidth: 480,
        margin: '0 auto',
        padding: '32px 24px 40px',
        position: 'relative',
        overflow: 'visible',
      }}>
        <Header palette={palette} headerStyle={t.headerStyle} />

        {t.ornament && <div style={{ margin: '36px 0 28px' }}><Ornament color={goldHex} /></div>}
        {!t.ornament && <div style={{ height: 36 }} />}

        {/* Social row — first */}
        <section style={{ marginTop: 0, marginBottom: 36 }}>
          <div style={{
            fontSize: 10.5, letterSpacing: '0.32em', textAlign: 'center',
            color: palette.muted, marginBottom: 18, fontWeight: 500,
          }}>
            SE CONECTE COM A GENTE
          </div>
          <SocialRow palette={palette} />
        </section>

        {/* Primary CTAs */}
        <section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {PRIMARY_LINKS.map(link => (
            <LinkCard key={link.id} item={link} palette={palette} style={t.buttonStyle} />
          ))}
        </section>

        {/* YouTube video card — header + inline player as one block */}
        <section style={{ marginTop: 12 }}>
          <VideoCard
            videoId="7F83MbHMklk"
            title="Assista nosso último vídeo no YouTube"
            palette={palette}
          />
        </section>

        {/* Mission statement */}
        {t.showQuote && (
          <figure style={{
            margin: '40px 4px 8px',
            textAlign: 'center',
          }}>
            <Ornament color={goldHex} />
            <blockquote style={{
              margin: '22px 0 0',
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: 20, lineHeight: 1.4,
              fontStyle: 'italic',
              color: palette.text,
              fontWeight: 400,
              opacity: 0.95,
            }}>
              “Nossa missão é mudar vidas e realizar sonhos.”
            </blockquote>
          </figure>
        )}

        {/* Footer / contact */}
        <footer style={{
          marginTop: 32, paddingTop: 24,
          borderTop: `1px solid ${palette.border}`,
          textAlign: 'center',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <Copyable value="Alameda Araguaia, 1142 — Alphaville — Barueri/SP" palette={palette} icon={window.Icon.MapPin}>
              Alameda Araguaia, 1142 · Alphaville — Barueri/SP
            </Copyable>
            <Copyable value="11930044411" palette={palette} icon={window.Icon.Phone} size="lg">
              11 93004-4411
            </Copyable>
          </div>
          <div style={{
            marginTop: 18, fontSize: 10, letterSpacing: '0.2em',
            color: palette.muted, opacity: 0.6,
          }}>
            © {new Date().getFullYear()} ALMEIDA &amp; MATOS · OAB/SP
          </div>
        </footer>
      </main>

      {/* TWEAKS PANEL */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Ambientação">
          <TweakRadio
            label="Paleta"
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'midnight', label: 'Midnight' },
              { value: 'charcoal', label: 'Carvão' },
              { value: 'navy', label: 'Navy' },
            ]}
          />
          <TweakRadio
            label="Cabeçalho"
            value={t.headerStyle}
            onChange={(v) => setTweak('headerStyle', v)}
            options={[
              { value: 'monogram', label: 'Monograma A&M' },
              { value: 'wordmark', label: 'Logotipo' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Estilo dos botões">
          <TweakRadio
            label="Aparência"
            value={t.buttonStyle}
            onChange={(v) => setTweak('buttonStyle', v)}
            options={[
              { value: 'glass', label: 'Vidro' },
              { value: 'outlined', label: 'Contorno' },
              { value: 'filled', label: 'Sólido' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Detalhes">
          <TweakToggle
            label="Frase de missão"
            value={t.showQuote}
            onChange={(v) => setTweak('showQuote', v)}
          />
          <TweakToggle
            label="Ornamento dourado"
            value={t.ornament}
            onChange={(v) => setTweak('ornament', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);