// ============================================================
// YCI · Kit de Wireframe — primitivos + blocos globais (React)
// Classes em wireframe.css. Export para window no fim.
// ============================================================

// ---- helpers ----
// Largura da prancheta = tela + padding(64) + (rail de notas 280)
window.SHEETW = (screenW, notes = true) => screenW + 64 + (notes ? 280 : 0);

// ---- Prancheta / artboard interior ----
function Sheet({ mobile, screenW, vp, notes, children, screenStyle }) {
  return (
    <div className="wf-sheet">
      <div style={{ flex: '0 0 auto' }}>
        <div className="wf-vp">{vp}</div>
        <div className={'wf-screen ' + (mobile ? 'is-mobile' : 'is-desktop')}
          style={{ width: screenW, ...screenStyle }}>
          {children}
        </div>
      </div>
      {notes && (
        <div className="wf-notes">
          <div className="wf-notes-title">Notas · blocos &amp; estados</div>
          {notes.map((n, i) => {
            const txt = typeof n === 'string' ? n : n.t;
            const isState = typeof n === 'object' && n.state;
            return (
              <p key={i} className={'wf-note' + (isState ? ' wf-note-state' : '')}
                dangerouslySetInnerHTML={{ __html: (typeof n === 'object' && n.pin ? `<span class="wf-pin">${n.pin}</span> ` : '') + txt }} />
            );
          })}
        </div>
      )}
    </div>
  );
}

// ---- primitivos ----
const Bar = ({ w = '100%', h, cls = '', style }) =>
  <span className={'wf-bar ' + cls} style={{ width: w, ...(h ? { height: h } : {}), ...style }} />;

const Lines = ({ n = 3, w = '100%', gap = 8, style }) =>
  <div className="wf-lines" style={{ width: w, gap, ...style }}>
    {Array.from({ length: n }).map((_, i) => <span key={i} className="wf-bar" />)}
  </div>;

const Box = ({ w, h, label, dashed, plain, children, style, cls = '' }) =>
  <div className={'wf-box ' + (dashed ? 'dashed ' : '') + (plain ? 'plain ' : '') + cls}
    style={{ width: w, height: h, ...style }}>
    {label && <div className="wf-center" style={{ height: '100%', color: 'var(--wf-faint)', fontFamily: 'var(--wf-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase' }}>{label}</div>}
    {children}
  </div>;

const Img = ({ w = '100%', h = 120, label = 'Foto', video, style, cls = '' }) =>
  <div className={'wf-img ' + (video ? 'video ' : '') + cls} style={{ width: w, height: h, ...style }}>
    <span>{label}</span>
  </div>;

const Avatar = ({ s = 40, label, style }) =>
  <div className="wf-avatar" style={{ width: s, height: s, ...style }}>{label || 'IMG'}</div>;

const H = ({ size = 'md', children, style }) => <div className={'wf-h ' + size} style={style}>{children}</div>;
const T = ({ children, sm, style }) => <div className={'wf-t' + (sm ? ' sm' : '')} style={style}>{children}</div>;
const Eyebrow = ({ children, style }) => <div className="wf-eyebrow" style={style}>{children}</div>;
const Data = ({ children, style }) => <div className="wf-data" style={style}>{children}</div>;
const Hr = ({ style }) => <div className="wf-rule" style={style} />;
const Pin = ({ n, style }) => <span className="wf-pin" style={style}>{n}</span>;

const Btn = ({ children, variant = 'plain', size = '', block, ar, style }) =>
  <div className={`wf-btn ${variant} ${size} ${block ? 'block' : ''}`} style={style}>
    {children}{ar && <span className="ar">↗</span>}
  </div>;

const Chip = ({ children, active, style }) => <span className={'wf-chip' + (active ? ' active' : '')} style={style}>{children}</span>;
const Tag = ({ children, navy, style }) => <span className={'wf-tag' + (navy ? ' navy' : '')} style={style}>{children}</span>;
const Link = ({ children, style }) => <span className="wf-link" style={style}>{children}</span>;

const Field = ({ label, area, focus, placeholder, select, style }) =>
  <div className="wf-field" style={style}>
    {label && <label>{label}</label>}
    <div className={'wf-input ' + (area ? 'area ' : '') + (focus ? 'focus ' : '') + (select ? 'wf-select' : '')}>
      {placeholder}
    </div>
  </div>;

const State = ({ children, neutral, style }) =>
  <span className={'wf-state' + (neutral ? ' neutral' : '')} style={style}>{children}</span>;

// ---- chrome global ----
const Logo = ({ small }) =>
  <div className="wf-logo">
    <div className="mark" style={small ? { width: 26, height: 26 } : {}}>LOGO</div>
    <div className="wm"><span className="wf-bar" style={{ width: 58, height: 9 }} /><span className="wf-bar sm" style={{ width: 38 }} /></div>
  </div>;

const NAV = ['O Clube', 'Vida no Iate Clube', 'Notícias', 'Serviços'];

// Desktop header — logged toggles the "Entrar" → "Olá, sócio" treatment.
// weather: nautical clima/vento chip · mega: caret on nav items.
function DeskHeader({ active, logged, weather, mega }) {
  return (
    <div className="wf-topbar">
      <Logo />
      <nav className="wf-nav" style={{ marginLeft: 14 }}>
        {NAV.map(n => <a key={n} className={n === active ? '' : 'muted'} style={{ display: 'flex', alignItems: 'center', gap: 5 }}>{n}{mega && <span style={{ fontSize: 9, color: 'var(--wf-faint)' }}>▾</span>}</a>)}
      </nav>
      <div style={{ flex: 1 }} />
      {weather && <WeatherChip />}
      <div className="wf-icon" title="Busca">⌕</div>
      <div className="wf-langs"><span className="on">PT</span><span>/</span><span>EN</span></div>
      {/* Rev. 18/jun: Associe-se vira CTA fixo (sai da nav); Área do Sócio = botão, não item de menu. */}
      <div className="wf-btn ghost sm" style={{ borderColor: 'var(--wf-navy)', color: 'var(--wf-navy)' }}>Associe-se</div>
      {logged
        ? <div className="wf-btn plain sm" style={{ gap: 8 }}><span className="wf-avatar" style={{ width: 20, height: 20, fontSize: 7 }}>S</span>Área do Sócio</div>
        : <div className="wf-btn primary sm">Entrar · Área do Sócio</div>}
    </div>
  );
}

// Clima / vento — utilidade náutica no header (componente dinâmico previsto).
const WeatherChip = ({ style }) =>
  <div className="wf-data" style={{ display: 'flex', gap: 8, alignItems: 'center', color: 'var(--wf-muted)', ...style }}>
    <span>🌬 14 kn SE</span><span style={{ opacity: .4 }}>·</span><span>🌡 22°</span><span style={{ opacity: .4 }}>·</span><span>⛴ 06–23h</span>
  </div>;

// Sub-estruturas por área (mega-menu). Rev. 18/jun: 5 áreas top-level
// (O Clube, Vida no Iate Clube, Notícias, Serviços) + Associe-se como CTA.
// 'O Clube' é AGRUPADO; os demais são listas. Náutica vive sob Esportes (Vida).
const SUBNAV = {
  'O Clube': {
    'Institucional': ['70 anos (abertura)', 'Governança', 'Imprensa'],
    'Lugares & estrutura': ['Onde estamos', 'Estrutura', 'Subsedes', 'Conveniados', 'Meio Ambiente'],
  },
  // Rev. 18/jun: Gastronomia permanece sob Vida (decisão pós-reunião, validar c/ Fernando);
  // Eventos sociais ganha página; Notícias sobe para top-level (saiu daqui).
  'Vida no Iate Clube': ['Esportes › Náutica & Vela', 'Semana de Vela (SIVI)', 'Agenda', 'Eventos sociais', 'Gastronomia'],
  // Rev. 18/jun: Notícias é área própria. Revista descontinuada → editorias + newsletter.
  'Notícias': ['Todas as notícias', 'Náutica & Vela', 'Social', 'Gastronomia', 'Pessoas', 'História', 'Newsletter semanal'],
  // Serviços = só operacional (Cardápio saiu → Gastronomia).
  'Serviços': ['Marina', 'Travessia', 'Combustíveis', 'Taxas', 'Regulamentos', 'Links úteis'],
};
function MegaMenuPanel() {
  const navItem = (x) => <span key={x} className="wf-t" style={{ fontSize: 13, color: x.includes('Náutica') ? 'var(--wf-navy)' : undefined, fontWeight: x.includes('Náutica') ? 600 : 400 }}>{x}</span>;
  return (
    <div style={{ borderTop: '1px solid var(--wf-line-2)', background: 'var(--wf-screen)', padding: '24px 26px', display: 'grid', gridTemplateColumns: 'repeat(4,1fr) 1.3fr', gap: 24, boxShadow: '0 16px 30px rgba(40,40,40,.07)' }}>
      {Object.entries(SUBNAV).map(([area, items]) => (
        <div key={area}>
          <div className="wf-eyebrow" style={{ marginBottom: 14 }}>{area}</div>
          {Array.isArray(items)
            ? <div className="wf-stack" style={{ gap: 10 }}>{items.map(navItem)}</div>
            : <div className="wf-stack" style={{ gap: 14 }}>{Object.entries(items).map(([g, sub]) => <div key={g}><div className="wf-data" style={{ marginBottom: 7, color: 'var(--wf-faint)' }}>{g}</div><div className="wf-stack" style={{ gap: 9 }}>{sub.map(navItem)}</div></div>)}</div>}
        </div>
      ))}
      <div className="wf-card" style={{ padding: 0, overflow: 'hidden' }}><Img h={92} label="Destaque" style={{ border: 'none', borderRadius: 0 }} /><div style={{ padding: 13 }}><Tag navy>Semana de Vela</Tag><div className="wf-h sm" style={{ marginTop: 8 }}>Evento-âncora · 24 jul</div></div></div>
    </div>
  );
}

// Heritage / prova social — reconhecimento e presença internacional.
function SocialProof({ wrap }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div className="wf-eyebrow" style={{ justifyContent: 'center', marginBottom: 14 }}>Reconhecimento &amp; presença internacional</div>
      <div className="wf-row" style={{ gap: 10, justifyContent: 'center', flexWrap: wrap ? 'wrap' : 'nowrap' }}>
        {['Globe40', 'Rolex', 'NY Yacht Club', 'Barcelona', 'SIVI'].map(s => <div key={s} style={{ padding: '8px 13px', border: '1px solid var(--wf-line)', borderRadius: 4, background: 'var(--wf-screen)' }}><Data>{s}</Data></div>)}
      </div>
    </div>
  );
}

const Stat = ({ v, l }) => <div style={{ textAlign: 'center' }}><div className="wf-h" style={{ fontSize: 40, color: 'var(--wf-navy)', lineHeight: 1 }}>{v}</div><Data style={{ marginTop: 6 }}>{l}</Data></div>;
const Quote = ({ style }) => <div style={{ borderLeft: '3px solid var(--wf-navy)', paddingLeft: 16, ...style }}><div className="wf-h md" style={{ fontWeight: 400, fontStyle: 'italic', marginBottom: 10, lineHeight: 1.35 }}>“Citação editorial de orgulho do clube em uma ou duas linhas.”</div><Data>— Nome · cargo</Data></div>;
const ResultRow = ({ pos }) => <div className="wf-between" style={{ padding: '11px 14px', borderBottom: '1px solid var(--wf-line-2)' }}><div className="wf-row" style={{ gap: 12, alignItems: 'center' }}><Data style={{ width: 22, color: 'var(--wf-navy)', fontWeight: 700 }}>{pos}º</Data><div className="wf-bar" style={{ width: 130, height: 10 }} /></div><Data>00:00:00</Data></div>;
const TierCard = ({ name, featured }) => <div className="wf-card" style={{ padding: 18, border: featured ? '1.5px solid var(--wf-navy)' : '1px solid var(--wf-line-2)', background: featured ? 'var(--wf-navy-08)' : 'var(--wf-screen)' }}>{featured && <Tag navy>Recomendado</Tag>}<div className="wf-h md" style={{ margin: featured ? '10px 0 4px' : '0 0 4px' }}>{name}</div><Data style={{ marginBottom: 14 }}>a partir de R$ 000</Data><div className="wf-stack" style={{ gap: 9, marginBottom: 16 }}>{[0, 1, 2].map(i => <div key={i} className="wf-row" style={{ gap: 8, alignItems: 'center' }}><span style={{ color: 'var(--wf-navy)' }}>✓</span><div className="wf-bar" style={{ width: '70%', height: 9 }} /></div>)}</div><Btn variant={featured ? 'primary' : 'ghost'} size="sm" block>Escolher</Btn></div>;

// Patrocínio — cobrand "apresentado por" + card in-feed nativo (rotulado).
const Cobrand = ({ style }) => <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 4, border: '1px solid var(--wf-line)', background: 'rgba(255,255,255,.75)', ...style }}><span className="wf-data" style={{ textTransform: 'uppercase', letterSpacing: '.1em' }}>Apresentado por</span><div style={{ width: 42, height: 16, border: '1px solid var(--wf-line)', borderRadius: 2, background: '#fff' }} /></div>;
function InFeedAd() {
  return (
    <div className="wf-card" style={{ padding: 12, borderStyle: 'dashed', borderColor: 'var(--wf-navy-14)', background: 'var(--wf-navy-08)' }}>
      <div className="wf-between" style={{ marginBottom: 8 }}><Tag navy>Patrocinado</Tag><Data>slot infeed-native</Data></div>
      <div className="wf-row" style={{ gap: 12 }}><Img w={92} h={64} label="" style={{ flex: '0 0 92px' }} /><div style={{ flex: 1 }}><div className="wf-bar" style={{ width: '85%', height: 11, marginBottom: 6 }} /><div className="wf-bar" style={{ width: '55%', height: 11, marginBottom: 8 }} /><Data>Apresentado por · marca</Data></div></div>
    </div>
  );
}
// Faixa "ao vivo" do hero — utilidade sobreposta (clima/vento, regata, balsa).
function LiveStrip({ dark }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 0, background: dark ? 'rgba(20,24,40,.55)' : 'rgba(255,255,255,.82)', borderTop: '1px solid var(--wf-line-2)' }}>
      {[['🌬', '14 kn SE'], ['⛵', 'Próx. regata sáb 09h'], ['⛴', 'Balsa 06–23h'], ['⛽', 'R$ 6,29']].map(([i, v], n) =>
        <div key={n} style={{ flex: 1, padding: '9px 8px', textAlign: 'center', borderLeft: n ? '1px solid var(--wf-line-2)' : 'none' }}><span className="wf-data" style={{ color: dark ? '#fff' : 'var(--wf-ink)' }}>{i} {v}</span></div>)}
      <div style={{ padding: '9px 12px' }}><span className="wf-data" style={{ color: 'var(--wf-navy)' }}>● ao vivo</span></div>
    </div>
  );
}

function MobileHeader({ logged }) {
  return (
    <>
      <div className="wf-statusbar"><span>9:41</span><span>▰▰▰ ◢ 100%</span></div>
      <div className="wf-mtop">
        <Logo small />
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ color: 'var(--wf-muted)' }}>⌕</span>
          <span className="wf-langs"><span className="on">PT</span>/<span>EN</span></span>
          <div className="wf-burger"><i /><i /><i /></div>
        </div>
      </div>
      {logged !== undefined && (
        <div style={{ padding: '7px 16px', background: logged ? 'var(--wf-navy-08)' : 'var(--wf-fill-2)', borderBottom: '1px solid var(--wf-line-2)', display: 'flex', alignItems: 'center', gap: 8 }}>
          {logged
            ? <><span className="wf-tag navy">Logado</span><span className="wf-t sm">Botão Entrar vira atalho do painel</span></>
            : <><span className="wf-btn primary sm" style={{ height: 26 }}>Entrar · Área do Sócio</span><span className="wf-t sm">sempre visível</span></>}
        </div>
      )}
    </>
  );
}

// Universal footer (compact for mobile, full for desktop)
function Footer({ mobile }) {
  const cols = [
    ['Contato · 3 sedes', ['Ilhabela (sede)', 'Saco do Sombrio', 'São Sebastião', 'Sede SP']],
    ['Navegar', ['O Clube', 'Vida no Iate Clube', 'Notícias', 'Serviços', 'Associe-se']],
    ['Institucional', ['Imprensa', 'LGPD · Privacidade', 'Cookies', 'Transparência']],
  ];
  return (
    <div className="wf-foot" style={{ padding: mobile ? '22px 16px' : '40px 26px 26px' }}>
      <div style={{ display: mobile ? 'block' : 'grid', gridTemplateColumns: mobile ? 'none' : '1.2fr 1fr 1fr 1.3fr', gap: mobile ? 18 : 32 }}>
        {cols.map(([t, items], i) => (
          <div key={i} style={{ marginBottom: mobile ? 16 : 0 }}>
            <div className="wf-eyebrow" style={{ marginBottom: 10 }}>{t}</div>
            <div className="wf-stack" style={{ gap: 7 }}>
              {items.map(x => <span key={x} className="wf-t" style={{ fontSize: 12 }}>{x}</span>)}
            </div>
          </div>
        ))}
        <div style={{ marginBottom: mobile ? 4 : 0 }}>
          <div className="wf-eyebrow" style={{ marginBottom: 10 }}>Newsletter semanal</div>
          <div className="wf-input" style={{ marginBottom: 8 }}>seu@email.com</div>
          <div className="wf-btn ghost sm" style={{ width: '100%', display: 'flex' }}>Assinar</div>
        </div>
      </div>
      <div className="wf-rule" style={{ margin: mobile ? '18px 0 14px' : '26px 0 16px' }} />
      <div className="wf-between" style={{ flexWrap: 'wrap', gap: 12 }}>
        <div className="wf-eyebrow">Patrocinadores</div>
        <div style={{ display: 'flex', gap: 10 }}>
          {['Master', 'Oficial', 'Oficial', 'Apoio', 'Apoio'].map((s, i) =>
            <div key={i} style={{ width: s === 'Master' ? 64 : 48, height: 24, border: '1px solid var(--wf-line)', borderRadius: 3, background: '#fff' }} title={s} />)}
        </div>
        <Data>Desde 1956 · Ilhabela · 23°46′41″S 45°21′29″W</Data>
      </div>
    </div>
  );
}

// Card primitives reused across templates
const NewsCard = ({ w = '100%', tall }) =>
  <div className="wf-card" style={{ width: w }}>
    <Img h={tall ? 150 : 110} label="Foto" cls="" style={{ border: 'none', borderRadius: 0 }} />
    <div style={{ padding: 13 }}>
      <Tag>Categoria</Tag>
      <div className="wf-h sm" style={{ margin: '9px 0 7px' }}>Título da matéria em duas linhas</div>
      <Data>12 jun 2026 · Autor</Data>
    </div>
  </div>;

const EventRow = ({ status }) =>
  <div className="wf-card" style={{ display: 'flex', alignItems: 'stretch', padding: 0 }}>
    <div style={{ flex: '0 0 64px', background: 'var(--wf-navy-08)', borderRight: '1px solid var(--wf-line-2)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2, padding: '12px 0' }}>
      <div className="wf-h md" style={{ color: 'var(--wf-navy)' }}>14</div>
      <Data style={{ color: 'var(--wf-navy)' }}>JUN</Data>
    </div>
    <div style={{ flex: 1, padding: '12px 14px' }}>
      <div className="wf-between"><Tag navy>Regata</Tag>{status && <span className="wf-data">● {status}</span>}</div>
      <div className="wf-h sm" style={{ margin: '8px 0 6px' }}>Nome do evento / regata</div>
      <Data>Marina YCI · 09:00 · Vento 12–16 kn SE</Data>
    </div>
    <div className="wf-center" style={{ flex: '0 0 40px', color: 'var(--wf-faint)' }}>›</div>
  </div>;

const DocRow = ({ locked }) =>
  <div className="wf-between wf-card" style={{ padding: '12px 14px' }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <Box w={28} h={34} label="PDF" style={{ flex: '0 0 28px' }} />
      <div><div className="wf-bar" style={{ width: 150, height: 10, marginBottom: 7 }} /><Data>Ata · 12 jun 2026 · 240 KB</Data></div>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      {locked && <Tag navy>Sócio</Tag>}
      <span style={{ color: 'var(--wf-navy)', fontSize: 16 }}>↓</span>
    </div>
  </div>;

Object.assign(window, {
  Sheet, Bar, Lines, Box, Img, Avatar, H, T, Eyebrow, Data, Hr, Pin,
  Btn, Chip, Tag, Link, Field, State, Logo, DeskHeader, MobileHeader, Footer,
  NewsCard, EventRow, DocRow, NAV,
  WeatherChip, SUBNAV, MegaMenuPanel, SocialProof, Stat, Quote, ResultRow, TierCard,
  Cobrand, InFeedAd, LiveStrip,
});