// Variações do wireframe Caderno/Diário
// 3 versões: Capa simples, Página completa, Mobile

const cdStyles = {
  fontHand: '"Caveat", cursive',
  fontBody: '"Patrick Hand", cursive',
  fontMono: '"Courier New", monospace',
  ink: '#1a1a1a',
  paper: '#fefdf7',
  pencil: '#666',
  red: '#e85d4f',
  yellow: '#f4c542',
  blue: '#7eb6d9',
  green: '#9bc88e',
  pink: '#fcd5ce',
};

const NotebookBg = ({ children, lineSpacing = 28 }) => (
  <div style={{
    width: '100%', minHeight: '100vh',
    background: cdStyles.paper,
    backgroundImage: `repeating-linear-gradient(transparent, transparent ${lineSpacing-1}px, #d4d0c0 ${lineSpacing-1}px, #d4d0c0 ${lineSpacing}px)`,
    fontFamily: cdStyles.fontBody, color: cdStyles.ink,
    position: 'relative',
  }}>
    <div style={{ position: 'absolute', left: 60, top: 0, bottom: 0, width: 1.5, background: cdStyles.red, opacity: 0.5 }}/>
    {[60, 200, 340, 480, 620, 760].map((y, i) => (
      <div key={i} style={{ position: 'absolute', left: 18, top: y, width: 14, height: 14, borderRadius: '50%', background: '#fff', boxShadow: 'inset 0 0 3px rgba(0,0,0,.3)' }}/>
    ))}
    {children}
  </div>
);

const Star = ({ size = 16, color = cdStyles.yellow, rotate = 0, style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={{ transform: `rotate(${rotate}deg)`, display: 'inline-block', ...style }}>
    <path d="M12 2 L14 9 L21 10 L16 15 L17 22 L12 18 L7 22 L8 15 L3 10 L10 9 Z"
      fill={color} stroke={cdStyles.ink} strokeWidth="1.2" strokeLinejoin="round"/>
  </svg>
);

const Heart = ({ size = 16, color = cdStyles.red, style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'inline-block', ...style }}>
    <path d="M12 21 C 5 16, 2 11, 2 7 C 2 4, 5 2, 8 2 C 10 2, 12 4, 12 6 C 12 4, 14 2, 16 2 C 19 2, 22 4, 22 7 C 22 11, 19 16, 12 21 Z"
      fill={color} stroke={cdStyles.ink} strokeWidth="1.2"/>
  </svg>
);

const Photo = ({ width, height, label, tilt = 0, bg = '#e8e0d0' }) => (
  <div style={{
    width, height, background: bg,
    border: `1.5px solid ${cdStyles.ink}`,
    transform: `rotate(${tilt}deg)`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: cdStyles.fontMono, fontSize: 10, color: cdStyles.pencil,
    position: 'relative', overflow: 'hidden', flexShrink: 0,
  }}>
    <svg style={{ position: 'absolute', inset: 0 }} width="100%" height="100%">
      <line x1="0" y1="0" x2="100%" y2="100%" stroke={cdStyles.pencil} strokeWidth="0.5" opacity="0.3"/>
      <line x1="100%" y1="0" x2="0" y2="100%" stroke={cdStyles.pencil} strokeWidth="0.5" opacity="0.3"/>
    </svg>
    <span style={{ position: 'relative', background: bg, padding: '2px 4px' }}>[{label}]</span>
  </div>
);

const Tab = ({ label, color, tilt = 0 }) => (
  <div style={{
    background: color, border: `1.5px solid ${cdStyles.ink}`, borderRight: 'none',
    padding: '8px 10px 8px 14px', fontFamily: cdStyles.fontHand, fontSize: 16, fontWeight: 600,
    transform: `rotate(${tilt}deg)`,
    boxShadow: '2px 2px 0 rgba(0,0,0,.15)',
    cursor: 'pointer',
  }}>{label}</div>
);

// ═════════════════════════════════════════════════════════════
// V1 — CAPA SIMPLES (entrada limpa)
// ═════════════════════════════════════════════════════════════
function WF_CadernoCapa() {
  return (
    <NotebookBg>
      {/* abas */}
      <div style={{ position: 'absolute', right: 0, top: 80, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <Tab label="BRINCAR" color={cdStyles.yellow} tilt={-1}/>
        <Tab label="DESENHOS" color={cdStyles.blue} tilt={0.5}/>
        <Tab label="AMIGOS" color={cdStyles.green} tilt={-0.8}/>
        <Tab label="RECADOS" color={cdStyles.red} tilt={0.6}/>
      </div>

      <div style={{ padding: '60px 100px 40px 90px' }}>
        <div style={{ fontFamily: cdStyles.fontMono, fontSize: 11, color: cdStyles.pencil }}>caderno secreto · vol. 1</div>

        <h1 style={{ fontFamily: cdStyles.fontHand, fontSize: 84, margin: '20px 0 0', lineHeight: 1, fontWeight: 700, letterSpacing: -2 }}>
          o cantinho<br/>
          da <span style={{ textDecoration: 'underline wavy', textDecorationColor: cdStyles.red }}>Maria</span>
        </h1>
        <div style={{ marginTop: 16, display: 'flex', gap: 8, alignItems: 'center' }}>
          <Star size={40} rotate={20}/>
          <Star size={28} color={cdStyles.red} rotate={-15}/>
          <Heart size={32} color={cdStyles.pink}/>
        </div>

        <div style={{ marginTop: 28, fontFamily: cdStyles.fontHand, fontSize: 28, lineHeight: 1.3 }}>
          (só pros meus amigos!)
        </div>

        {/* foto polaroid grande */}
        <div style={{ marginTop: 40, display: 'flex', gap: 24, alignItems: 'flex-start' }}>
          <div style={{ background: '#fff', padding: 12, paddingBottom: 28, border: `1.5px solid ${cdStyles.ink}`, transform: 'rotate(-3deg)', boxShadow: '4px 4px 0 rgba(0,0,0,.12)' }}>
            <div style={{ width: 180, height: 200, overflow: 'hidden', border: `1.5px solid ${cdStyles.ink}` }}>
              <img src="assets/maria-rosa.jpeg" alt="Maria" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%', display: 'block' }}/>
            </div>
            <div style={{ fontFamily: cdStyles.fontHand, fontSize: 18, marginTop: 4, textAlign: 'center' }}>oi! sou eu</div>
          </div>

          <div style={{ flex: 1, paddingTop: 20 }}>
            <div style={{ fontFamily: cdStyles.fontHand, fontSize: 24, lineHeight: 1.4 }}>
              tenho 7 anos e adoro<br/>
              <span style={{ background: cdStyles.yellow, padding: '0 4px' }}>pintar</span>,{' '}
              <span style={{ background: cdStyles.blue, padding: '0 4px' }}>brincar</span>,<br/>
              ouvir histórias de princesa<br/>
              e jogar com meus amigos.
            </div>
            <div style={{ marginTop: 24, fontFamily: cdStyles.fontHand, fontSize: 22, color: cdStyles.pencil }}>
              → escolhe uma aba do lado pra ver mais!
            </div>
          </div>
        </div>

        {/* assinatura */}
        <div style={{ position: 'absolute', bottom: 30, right: 30, fontFamily: cdStyles.fontHand, fontSize: 22, transform: 'rotate(-4deg)' }}>
          com carinho,<br/>
          <span style={{ fontSize: 32, color: cdStyles.red }}>Maria <Heart size={18}/></span>
        </div>
      </div>
    </NotebookBg>
  );
}

// ═════════════════════════════════════════════════════════════
// V2 — PÁGINA COMPLETA (com tudo)
// ═════════════════════════════════════════════════════════════
function WF_CadernoCompleto() {
  return (
    <NotebookBg>
      <div style={{ position: 'absolute', right: 0, top: 60, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <Tab label="BRINCAR" color={cdStyles.yellow} tilt={-1}/>
        <Tab label="DESENHOS" color={cdStyles.blue} tilt={0.5}/>
        <Tab label="AMIGOS" color={cdStyles.green} tilt={-0.8}/>
        <Tab label="RECADOS" color={cdStyles.red} tilt={0.6}/>
      </div>

      <div style={{ padding: '32px 100px 40px 90px' }}>
        <div style={{ fontFamily: cdStyles.fontMono, fontSize: 11, color: cdStyles.pencil }}>03 de maio · sábado</div>
        <h1 style={{ fontFamily: cdStyles.fontHand, fontSize: 56, margin: '4px 0 0', lineHeight: 1, fontWeight: 700 }}>
          o cantinho da <span style={{ textDecoration: 'underline wavy', textDecorationColor: cdStyles.red }}>Maria</span> <Star size={32} rotate={15}/>
        </h1>
        <div style={{ fontFamily: cdStyles.fontHand, fontSize: 22, color: cdStyles.pencil }}>(só pros amigos!) <Heart size={16}/></div>

        {/* sobre */}
        <div style={{ display: 'flex', gap: 16, marginTop: 24, alignItems: 'flex-start' }}>
          <Photo width={110} height={110} label="eu!" tilt={-3} bg="#f0d8c0"/>
          <div style={{ flex: 1, fontFamily: cdStyles.fontHand, fontSize: 20, lineHeight: 1.4, paddingTop: 4 }}>
            tenho 7 anos. adoro <span style={{ background: cdStyles.yellow }}>pintar</span>, brincar de <span style={{ background: cdStyles.blue }}>esconde-esconde</span> e princesas <Star size={12} color={cdStyles.red}/>
          </div>
        </div>

        {/* brincadeiras */}
        <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 32, margin: '24px 0 8px', fontWeight: 700 }}>✦ brincadeiras da semana</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { t: 'caça ao tesouro', d: 'pistas no quintal', c: cdStyles.yellow, r: 0.5 },
            { t: 'cabaninha de lençol', d: 'lençol + 4 cadeiras', c: cdStyles.blue, r: -0.5 },
            { t: 'cozinha de massinha', d: 'bolo de morango fake', c: cdStyles.green, r: 0.5 },
            { t: 'pega-pega congelado', d: 'no recreio com Lulu e Bia', c: cdStyles.red, r: -0.5 },
          ].map((b, i) => (
            <div key={i} style={{ background: '#fff', border: `1.5px solid ${cdStyles.ink}`, padding: '8px 12px', transform: `rotate(${b.r}deg)` }}>
              <div style={{ fontFamily: cdStyles.fontHand, fontSize: 18, fontWeight: 600 }}>
                <span style={{ background: b.c, padding: '0 4px' }}>{b.t}</span>
              </div>
              <div style={{ fontFamily: cdStyles.fontBody, fontSize: 13, color: cdStyles.pencil, marginTop: 2 }}>{b.d}</div>
            </div>
          ))}
        </div>

        {/* desenhos */}
        <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 32, margin: '24px 0 8px', fontWeight: 700 }}>✦ meus desenhos</h2>
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ background: '#fff', padding: 8, paddingBottom: 18, border: `1.5px solid ${cdStyles.ink}`, transform: 'rotate(-2deg)' }}>
            <Photo width={110} height={90} label="princesa" bg="#fff8e1"/>
            <div style={{ fontFamily: cdStyles.fontHand, fontSize: 13, textAlign: 'center', marginTop: 2 }}>princesa</div>
          </div>
          <div style={{ background: '#fff', padding: 8, paddingBottom: 18, border: `1.5px solid ${cdStyles.ink}`, transform: 'rotate(1deg)' }}>
            <Photo width={110} height={90} label="dragão" bg="#d4e9f7"/>
            <div style={{ fontFamily: cdStyles.fontHand, fontSize: 13, textAlign: 'center', marginTop: 2 }}>dragão</div>
          </div>
          <div style={{ background: '#fff', padding: 8, paddingBottom: 18, border: `1.5px solid ${cdStyles.ink}`, transform: 'rotate(-1deg)' }}>
            <Photo width={110} height={90} label="casa" bg="#fcd5ce"/>
            <div style={{ fontFamily: cdStyles.fontHand, fontSize: 13, textAlign: 'center', marginTop: 2 }}>minha casa</div>
          </div>
          <div style={{
            border: `1.5px dashed ${cdStyles.ink}`, padding: 8, paddingBottom: 18, width: 110, height: 108,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: cdStyles.fontHand, fontSize: 14, color: cdStyles.pencil, textAlign: 'center',
          }}>+ ver<br/>todos</div>
        </div>

        {/* recados */}
        <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 32, margin: '24px 0 8px', fontWeight: 700 }}>✦ recadinhos dos amigos</h2>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {[
            { de: 'Lulu', m: 'amooo brincar com vc!', c: '#ffe9a8', r: -3 },
            { de: 'Pedro', m: 'qdo vc vem na minha casa?', c: '#c8e6c9', r: 2 },
            { de: 'Bia', m: 'vc é minha melhor amiga', c: '#fcd5ce', r: -1 },
          ].map((r, i) => (
            <div key={i} style={{
              background: r.c, padding: '10px 12px', minWidth: 130,
              fontFamily: cdStyles.fontHand, fontSize: 16,
              boxShadow: '2px 2px 0 rgba(0,0,0,.15)',
              transform: `rotate(${r.r}deg)`,
            }}>
              <div>"{r.m}"</div>
              <div style={{ fontSize: 13, color: cdStyles.pencil, marginTop: 4, textAlign: 'right' }}>— {r.de}</div>
            </div>
          ))}
          <div style={{
            border: `1.5px dashed ${cdStyles.ink}`, padding: '10px 12px', minWidth: 100,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: cdStyles.fontHand, fontSize: 14, color: cdStyles.pencil, textAlign: 'center',
          }}>+ deixar<br/>recado</div>
        </div>
      </div>
    </NotebookBg>
  );
}

// ═════════════════════════════════════════════════════════════
// V3 — MOBILE
// ═════════════════════════════════════════════════════════════
function WF_CadernoMobile() {
  return (
    <NotebookBg lineSpacing={26}>
      <div style={{ padding: '20px 16px 20px 50px' }}>
        <div style={{ fontFamily: cdStyles.fontMono, fontSize: 9, color: cdStyles.pencil }}>caderno · 03/05</div>
        <h1 style={{ fontFamily: cdStyles.fontHand, fontSize: 40, margin: '4px 0 0', lineHeight: 1, fontWeight: 700 }}>
          o cantinho da<br/>
          <span style={{ textDecoration: 'underline wavy', textDecorationColor: cdStyles.red }}>Maria</span> <Star size={22} rotate={15}/>
        </h1>

        {/* foto + bio compactos */}
        <div style={{ display: 'flex', gap: 10, marginTop: 16, alignItems: 'center' }}>
          <Photo width={70} height={70} label="eu" tilt={-3} bg="#f0d8c0"/>
          <div style={{ fontFamily: cdStyles.fontHand, fontSize: 15, lineHeight: 1.3 }}>
            7 anos · adoro<br/>
            <span style={{ background: cdStyles.yellow }}>pintar</span> e <span style={{ background: cdStyles.blue }}>brincar</span><br/>
            <span style={{ color: cdStyles.pencil }}>(só pros amigos)</span>
          </div>
        </div>

        {/* abas em chips */}
        <div style={{ display: 'flex', gap: 6, marginTop: 18, flexWrap: 'wrap' }}>
          <Tab label="BRINCAR" color={cdStyles.yellow}/>
          <Tab label="DESENHOS" color={cdStyles.blue}/>
          <Tab label="AMIGOS" color={cdStyles.green}/>
          <Tab label="RECADOS" color={cdStyles.red}/>
        </div>

        {/* destaque brincadeira */}
        <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 22, margin: '20px 0 6px', fontWeight: 700 }}>✦ brincadeira de hoje</h2>
        <div style={{ background: '#fff', border: `1.5px solid ${cdStyles.ink}`, padding: 10, transform: 'rotate(-0.5deg)' }}>
          <div style={{ fontFamily: cdStyles.fontHand, fontSize: 18, fontWeight: 600 }}>
            <span style={{ background: cdStyles.yellow, padding: '0 4px' }}>caça ao tesouro</span>
          </div>
          <div style={{ fontFamily: cdStyles.fontBody, fontSize: 12, color: cdStyles.pencil, marginTop: 2 }}>pistas escondidas no quintal</div>
        </div>

        {/* desenho destaque */}
        <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 22, margin: '18px 0 6px', fontWeight: 700 }}>✦ desenho novo</h2>
        <div style={{ background: '#fff', padding: 8, paddingBottom: 18, border: `1.5px solid ${cdStyles.ink}`, transform: 'rotate(-1deg)' }}>
          <Photo width="100%" height={120} label="princesa que doma dragão" bg="#fff8e1"/>
          <div style={{ fontFamily: cdStyles.fontHand, fontSize: 14, textAlign: 'center', marginTop: 2 }}>princesa que doma dragão</div>
        </div>

        {/* recado */}
        <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 22, margin: '18px 0 6px', fontWeight: 700 }}>✦ último recado</h2>
        <div style={{ background: '#fcd5ce', padding: '10px 12px', fontFamily: cdStyles.fontHand, fontSize: 16, transform: 'rotate(-1deg)', boxShadow: '2px 2px 0 rgba(0,0,0,.15)' }}>
          "vc é minha melhor amiga"
          <div style={{ fontSize: 12, color: cdStyles.pencil, marginTop: 4, textAlign: 'right' }}>— Bia</div>
        </div>

        <div style={{
          marginTop: 14, border: `1.5px dashed ${cdStyles.ink}`, padding: '10px 12px',
          fontFamily: cdStyles.fontHand, fontSize: 14, color: cdStyles.pencil, textAlign: 'center',
        }}>+ deixar um recado pra Maria</div>
      </div>
    </NotebookBg>
  );
}

Object.assign(window, { WF_CadernoCapa, WF_CadernoCompleto, WF_CadernoMobile });