// Caderno da Maria — versões responsivas
// Detecta tela e renderiza versão desktop (caderno aberto, 2 páginas) ou 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 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', verticalAlign: 'middle', ...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', verticalAlign: 'middle', ...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>
);

// Card de jogo reutilizável
const GameCard = ({ href, label, title, color, tilt, hint }) => (
  <a href={href} style={{ textDecoration: 'none', color: 'inherit', display: 'inline-block' }}>
    <div className="game-card" style={{
      background: color,
      border: `2px solid ${cdStyles.ink}`,
      padding: '16px 20px',
      transform: `rotate(${tilt}deg)`,
      boxShadow: '4px 4px 0 rgba(0,0,0,.15)',
      cursor: 'pointer',
      transition: 'transform .15s',
      '--tilt': `${tilt}deg`,
    }}>
      <div style={{ fontFamily: cdStyles.fontMono, fontSize: 10, color: cdStyles.pencil, letterSpacing: 1 }}>{label}</div>
      <div style={{ fontFamily: cdStyles.fontHand, fontSize: 32, fontWeight: 700, lineHeight: 1, marginTop: 6 }}>
        {title}
      </div>
      <div style={{ fontFamily: cdStyles.fontHand, fontSize: 18, color: cdStyles.ink, marginTop: 8 }}>
        {hint}
      </div>
    </div>
  </a>
);

// hook responsivo
function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 720);
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 720);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return isMobile;
}

// ═════════════════════════════════════════════════════════════
// MOBILE — vertical, página única, foco no essencial
// ═════════════════════════════════════════════════════════════
function CadernoMobile() {
  return (
    <div style={{
      width: '100%', minHeight: '100vh',
      background: cdStyles.paper,
      backgroundImage: 'repeating-linear-gradient(transparent, transparent 27px, #d4d0c0 27px, #d4d0c0 28px)',
      fontFamily: cdStyles.fontBody, color: cdStyles.ink,
      position: 'relative', boxSizing: 'border-box',
    }}>
      {/* margem vermelha */}
      <div style={{ position: 'absolute', left: 40, top: 0, bottom: 0, width: 1.5, background: cdStyles.red, opacity: 0.5 }}/>
      {/* furos */}
      {[60, 220, 380, 540, 700, 860, 1020].map((y, i) => (
        <div key={i} style={{ position: 'absolute', left: 12, top: y, width: 12, height: 12, borderRadius: '50%', background: '#fff', boxShadow: 'inset 0 0 3px rgba(0,0,0,.3)' }}/>
      ))}

      <div style={{ padding: '32px 20px 40px 56px' }}>
        <div style={{ fontFamily: cdStyles.fontMono, fontSize: 10, color: cdStyles.pencil }}>caderno secreto · vol. 1</div>

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

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

        {/* foto polaroid */}
        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'center' }}>
          <div style={{ background: '#fff', padding: 10, paddingBottom: 22, border: `1.5px solid ${cdStyles.ink}`, transform: 'rotate(-3deg)', boxShadow: '4px 4px 0 rgba(0,0,0,.12)' }}>
            <div style={{ width: 200, height: 220, 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>

        <div style={{ marginTop: 24, fontFamily: cdStyles.fontHand, fontSize: 22, 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>

        {/* JOGOS — empilhados */}
        <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 32, margin: '32px 0 14px', fontWeight: 700 }}>
          ✦ meus jogos ✦
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
          <GameCard href="jogo" label="JOGO Nº 1" title={<>jogar! <Star size={20} color={cdStyles.red} rotate={15}/></>} color={cdStyles.yellow} tilt={-2} hint="→ clica aqui!"/>
          <GameCard href="detetive" label="JOGO Nº 2" title="detetive 🔍" color={cdStyles.blue} tilt={1.5} hint="→ desvende o mistério!"/>
          <GameCard href="tabuleiros.html" label="COLEÇÃO" title="tabuleiros ✦" color={cdStyles.pink} tilt={-1} hint="→ 12 jogos!"/>
        </div>

        <div style={{ marginTop: 36, textAlign: 'center', fontFamily: cdStyles.fontHand, fontSize: 20, color: cdStyles.pencil }}>
          feito com <Heart size={14} color={cdStyles.red}/> pela Maria
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// DESKTOP — uma folha de caderno só, layout limpo em 2 colunas
// ═════════════════════════════════════════════════════════════
function CadernoDesktop() {
  return (
    <div style={{
      minHeight: '100vh',
      background: '#e8e2d0',
      padding: '40px 20px',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      fontFamily: cdStyles.fontBody, color: cdStyles.ink,
    }}>
      <div style={{
        width: '100%', maxWidth: 1080,
        background: cdStyles.paper,
        backgroundImage: 'repeating-linear-gradient(transparent, transparent 31px, #d4d0c0 31px, #d4d0c0 32px)',
        boxShadow: '0 20px 60px rgba(0,0,0,.18)',
        position: 'relative',
        boxSizing: 'border-box',
        padding: '60px 80px 80px 110px',
        minHeight: 720,
      }}>
        {/* margem vermelha */}
        <div style={{ position: 'absolute', left: 80, top: 0, bottom: 0, width: 1.5, background: cdStyles.red, opacity: 0.5 }}/>
        {/* furos */}
        {[80, 240, 400, 560, 720].map((y, i) => (
          <div key={i} style={{ position: 'absolute', left: 30, top: y, width: 14, height: 14, borderRadius: '50%', background: '#fff', boxShadow: 'inset 0 0 3px rgba(0,0,0,.25)' }}/>
        ))}

        {/* topo */}
        <div style={{ fontFamily: cdStyles.fontMono, fontSize: 11, color: cdStyles.pencil }}>caderno secreto · vol. 1</div>

        <h1 style={{ fontFamily: cdStyles.fontHand, fontSize: 96, margin: '12px 0 0', lineHeight: 0.95, fontWeight: 700, letterSpacing: -2 }}>
          o cantinho da <span style={{ textDecoration: 'underline wavy', textDecorationColor: cdStyles.red }}>Maria</span>
          <Star size={48} rotate={20} style={{ marginLeft: 12 }}/>
        </h1>
        <div style={{ marginTop: 10, fontFamily: cdStyles.fontHand, fontSize: 28, color: cdStyles.pencil }}>
          (só pros meus amigos!) <Heart size={22} color={cdStyles.pink}/>
        </div>

        {/* duas colunas */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, marginTop: 50, alignItems: 'flex-start' }}>
          {/* coluna esquerda — foto + sobre */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
              <div style={{ background: '#fff', padding: 14, paddingBottom: 32, border: `1.5px solid ${cdStyles.ink}`, transform: 'rotate(-3deg)', boxShadow: '5px 5px 0 rgba(0,0,0,.12)' }}>
                <div style={{ width: 240, height: 280, 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: 22, marginTop: 6, textAlign: 'center' }}>oi! sou eu</div>
              </div>
            </div>

            <div style={{ marginTop: 32, fontFamily: cdStyles.fontHand, fontSize: 28, 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>

          {/* coluna direita — jogos */}
          <div>
            <h2 style={{ fontFamily: cdStyles.fontHand, fontSize: 56, margin: '0 0 8px', lineHeight: 0.95, fontWeight: 700 }}>
              ✦ meus jogos
            </h2>
            <div style={{ fontFamily: cdStyles.fontHand, fontSize: 22, color: cdStyles.pencil, marginBottom: 28 }}>
              clica num cartão pra começar!
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
              <GameCard href="jogo" label="JOGO Nº 1" title={<>jogar! <Star size={26} color={cdStyles.red} rotate={15}/></>} color={cdStyles.yellow} tilt={-2} hint="→ clica aqui pra brincar!"/>
              <GameCard href="detetive" label="JOGO Nº 2" title="detetive 🔍" color={cdStyles.blue} tilt={1.5} hint="→ desvende o mistério!"/>
              <GameCard href="tabuleiros.html" label="COLEÇÃO" title="tabuleiros ✦" color={cdStyles.pink} tilt={-1} hint="→ 12 jogos pra brincar!"/>
            </div>
          </div>
        </div>

        {/* assinatura discreta */}
        <div style={{ marginTop: 60, textAlign: 'center', fontFamily: cdStyles.fontHand, fontSize: 22, color: cdStyles.pencil }}>
          feito com <Heart size={16} color={cdStyles.red}/> pela Maria
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// Componente principal — escolhe versão
// ═════════════════════════════════════════════════════════════
function App() {
  const isMobile = useIsMobile();
  return isMobile ? <CadernoMobile/> : <CadernoDesktop/>;
}

Object.assign(window, { App, CadernoDesktop, CadernoMobile });