// landing-phone.jsx — frame de iPhone + 4 conteúdos (1 por layout)
// Todos compartilham o mesmo perfil (Estúdio Aurora) pra mostrar
// como o MESMO conteúdo muda só com a troca de estilo.

const LINKO_CREAM   = '#f3eee4';
const LINKO_SURFACE = '#ffffff';
const LINKO_INK     = '#1f1b14';
const LINKO_INK2    = '#615b4e';
const LINKO_INK3    = '#8a8479';
const LINKO_TAG     = '#e6dfd0';
const ACCENT_COPPER = '#c08962';
const ACCENT_BROWN  = '#5a3a1e';

// ──────────────────────────────────────────────────────────────
// Frame
// ──────────────────────────────────────────────────────────────
function LandingPhone({ children, width = 280, height = 568, bg = LINKO_CREAM }) {
  return (
    <div style={{
      width, height,
      borderRadius: 42,
      background: '#0d0d0d',
      padding: 8,
      boxShadow: '0 40px 80px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.06)',
      position: 'relative',
      flexShrink: 0,
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 34,
        background: bg,
        overflow: 'hidden',
        position: 'relative',
      }}>
        {/* Status bar */}
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 36,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '12px 26px 0',
          fontFamily: 'Plus Jakarta Sans, sans-serif',
          fontSize: 12, fontWeight: 700, color: LINKO_INK,
          zIndex: 2,
        }}>
          <span>9:41</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
              <rect x="0" y="3" width="3" height="7" rx="0.5" fill={LINKO_INK} />
              <rect x="4" y="2" width="3" height="8" rx="0.5" fill={LINKO_INK} />
              <rect x="8" y="1" width="3" height="9" rx="0.5" fill={LINKO_INK} />
              <rect x="12" y="0" width="3" height="10" rx="0.5" fill={LINKO_INK} />
            </svg>
            <svg width="18" height="10" viewBox="0 0 18 10" fill="none">
              <rect x="0.5" y="1" width="14" height="8" rx="2" stroke={LINKO_INK} strokeWidth="1" fill="none" />
              <rect x="2" y="2.5" width="10" height="5" rx="1" fill={LINKO_INK} />
              <rect x="15.5" y="3.5" width="1.5" height="3" rx="0.5" fill={LINKO_INK} />
            </svg>
          </div>
        </div>
        {/* Notch */}
        <div style={{
          position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 88, height: 26, borderRadius: 18,
          background: '#0d0d0d',
          zIndex: 3,
        }} />
        {/* Content (clipped, no scroll) */}
        <div style={{
          position: 'absolute', inset: 0,
          paddingTop: 44, overflow: 'hidden',
        }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Shared profile header (avatar + name + bio + handle)
// ──────────────────────────────────────────────────────────────
function ProfileHeader({ compact = false }) {
  return (
    <div style={{ textAlign: 'center', padding: compact ? '14px 18px 12px' : '20px 18px 14px' }}>
      <div style={{
        width: compact ? 48 : 60, height: compact ? 48 : 60, borderRadius: '50%',
        background: LINKO_INK, color: '#fdfaf0',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Instrument Serif, serif', fontStyle: 'italic',
        fontSize: compact ? 22 : 28, lineHeight: 1,
        margin: '0 auto 10px',
      }}>A</div>
      <div style={{
        fontFamily: 'Instrument Serif, serif', fontStyle: 'italic',
        fontSize: compact ? 18 : 22, lineHeight: 1.15, letterSpacing: '-0.01em',
        color: LINKO_INK,
      }}>Estúdio Aurora</div>
      <div className="mono" style={{
        fontSize: 9.5, color: LINKO_INK3, marginTop: 4,
        letterSpacing: '0.04em',
      }}>linko.business/estudio-aurora</div>
      {!compact && (
        <div style={{
          fontSize: 11, color: LINKO_INK2, lineHeight: 1.45,
          margin: '10px 4px 0',
        }}>
          Mentoria, cursos e produtos digitais para quem cria com propósito.
        </div>
      )}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// 1 · CLÁSSICO — lista vertical de botões
// ──────────────────────────────────────────────────────────────
function ContentClassico() {
  const links = [
    { title: 'Mentoria 1:1 — turma de junho', sub: '6 encontros · suporte WhatsApp' },
    { title: 'Curso Calendário Mestre', sub: '12 aulas + planilhas + comunidade' },
    { title: 'Ebook · 7 dias para sair do caos', sub: 'Download gratuito' },
    { title: 'Atendimento via WhatsApp', sub: 'Resposta em até 24h' },
    { title: '@estudio.aurora', sub: 'Instagram' },
  ];
  return (
    <div style={{ color: LINKO_INK, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ProfileHeader />
      <div style={{
        padding: '0 16px 18px',
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {links.map((l, i) => (
          <div key={i} style={{
            background: LINKO_SURFACE, borderRadius: 12,
            padding: '12px 14px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.06)',
          }}>
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{
                fontSize: 12, fontWeight: 600, lineHeight: 1.2,
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>{l.title}</div>
              <div style={{
                fontSize: 10, color: LINKO_INK3, marginTop: 3,
                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
              }}>{l.sub}</div>
            </div>
            <div style={{ fontSize: 14, color: LINKO_INK3, marginLeft: 8 }}>›</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// 2 · BENTO — grade modular, cards de tamanhos variados
// ──────────────────────────────────────────────────────────────
function ContentBento() {
  return (
    <div style={{ color: LINKO_INK, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ProfileHeader />
      <div style={{
        padding: '0 16px 18px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8,
      }}>
        {/* Small + Small */}
        <BentoTile label="Instagram" sub="@estudio.aurora" icon="○" />
        <BentoTile label="WhatsApp" sub="Atendimento" icon="◇" />

        {/* Featured (full row, ink bg) */}
        <div style={{ gridColumn: '1 / -1' }}>
          <div style={{
            background: LINKO_INK, color: '#fdfaf0',
            borderRadius: 12, padding: '14px 14px',
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <div className="mono" style={{
              fontSize: 8.5, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: ACCENT_COPPER, fontWeight: 600,
            }}>destaque</div>
            <div style={{
              fontFamily: 'Instrument Serif, serif', fontStyle: 'italic',
              fontSize: 18, lineHeight: 1.15,
            }}>Mentoria 1:1</div>
            <div style={{ fontSize: 10, color: 'rgba(253,250,240,0.6)', lineHeight: 1.4 }}>
              Turma de junho · 3 vagas restantes
            </div>
          </div>
        </div>

        {/* Two small */}
        <BentoTile label="Curso completo" sub="12 aulas" icon="✦" />
        <BentoTile label="Newsletter" sub="Quinzenal" icon="✉" />

        {/* Small wide */}
        <div style={{ gridColumn: '1 / -1' }}>
          <BentoTile label="Ebook gratuito · 7 dias sem caos" sub="Download imediato" icon="↓" />
        </div>
      </div>
    </div>
  );
}
function BentoTile({ label, sub, icon }) {
  return (
    <div style={{
      background: LINKO_SURFACE, borderRadius: 12,
      padding: '10px 12px',
      display: 'flex', flexDirection: 'column', gap: 4,
      boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.06)',
      minHeight: 56,
      justifyContent: 'space-between',
    }}>
      <div style={{
        width: 24, height: 24, borderRadius: 8, background: LINKO_TAG,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 12, color: LINKO_INK,
      }}>{icon}</div>
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, lineHeight: 1.2 }}>{label}</div>
        <div style={{ fontSize: 9.5, color: LINKO_INK3, marginTop: 2 }}>{sub}</div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// 3 · CATÁLOGO — cards de produto (foto, título, preço, CTA)
// ──────────────────────────────────────────────────────────────
function ContentCatalogo() {
  const products = [
    { title: 'Mentoria 1:1', sub: '6 encontros · suporte WhatsApp', price: 'R$ 1.200', cta: 'Quero a vaga', tag: '3 vagas', img: 'linear-gradient(135deg, #c08962, #5a3a1e)' },
    { title: 'Curso Calendário Mestre', sub: '12 aulas em vídeo + planilhas', price: 'R$ 397', cta: 'Comprar', img: 'linear-gradient(135deg, #ece2cc, #c08962)' },
    { title: 'Ebook · 7 dias sem caos', sub: 'Material em PDF', price: 'Grátis', cta: 'Baixar', img: 'linear-gradient(135deg, #5a3a1e, #1f1b14)' },
  ];
  return (
    <div style={{ color: LINKO_INK, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ProfileHeader compact />
      <div style={{
        padding: '0 14px 18px',
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {products.map((p, i) => (
          <div key={i} style={{
            background: LINKO_SURFACE, borderRadius: 14,
            padding: 10,
            display: 'flex', gap: 10, alignItems: 'center',
            boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.06)',
            position: 'relative',
          }}>
            <div style={{
              width: 64, height: 64, borderRadius: 10,
              background: p.img, flexShrink: 0,
              position: 'relative',
            }}>
              {p.tag && (
                <div className="mono" style={{
                  position: 'absolute', top: 5, left: 5,
                  background: '#fdfaf0', color: LINKO_INK,
                  fontSize: 7, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
                  padding: '2px 5px', borderRadius: 4,
                }}>{p.tag}</div>
              )}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600, lineHeight: 1.2 }}>{p.title}</div>
              <div style={{ fontSize: 9.5, color: LINKO_INK3, marginTop: 2, lineHeight: 1.3 }}>{p.sub}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
                <div style={{ fontWeight: 700, fontSize: 12 }}>{p.price}</div>
                <div style={{
                  background: LINKO_INK, color: '#fdfaf0',
                  fontSize: 9, fontWeight: 600,
                  padding: '4px 9px', borderRadius: 999,
                  marginLeft: 'auto',
                }}>{p.cta}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// 4 · MURAL — grid editorial, cards coloridos individualmente
// ──────────────────────────────────────────────────────────────
function ContentMural() {
  return (
    <div style={{ color: LINKO_INK, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <ProfileHeader compact />
      <div style={{
        padding: '0 14px 18px',
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gridTemplateRows: 'repeat(4, 52px)',
        gap: 6,
      }}>
        {/* Tall card (spans 2 rows) — copper */}
        <div style={{
          gridColumn: '1 / 2', gridRow: '1 / 3',
          background: ACCENT_COPPER, color: '#fdfaf0',
          borderRadius: 10, padding: '10px 11px',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        }}>
          <div style={{
            fontFamily: 'Instrument Serif, serif', fontStyle: 'italic',
            fontSize: 14, lineHeight: 1.1,
          }}>Mentoria<br/>1:1</div>
          <div style={{ fontSize: 8.5, opacity: 0.8 }}>Junho · 3 vagas</div>
        </div>

        {/* Small cream */}
        <div style={{
          background: LINKO_TAG, borderRadius: 10, padding: '8px 10px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <div style={{ fontSize: 10, fontWeight: 700 }}>Newsletter</div>
          <div style={{ fontSize: 8, color: LINKO_INK2 }}>Quinzenal</div>
        </div>

        {/* Small ink */}
        <div style={{
          background: LINKO_INK, color: '#fdfaf0',
          borderRadius: 10, padding: '8px 10px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <div style={{ fontSize: 10, fontWeight: 700 }}>Curso</div>
          <div style={{ fontSize: 8, opacity: 0.6 }}>12 aulas</div>
        </div>

        {/* Small brown */}
        <div style={{
          gridColumn: '1 / 2',
          background: ACCENT_BROWN, color: '#fdfaf0',
          borderRadius: 10, padding: '8px 10px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <div style={{ fontSize: 10, fontWeight: 700 }}>Ebook</div>
          <div style={{ fontSize: 8, opacity: 0.7 }}>Grátis</div>
        </div>

        {/* Tall surface (spans 2 rows) */}
        <div style={{
          gridColumn: '2 / 3', gridRow: '3 / 5',
          background: LINKO_SURFACE, borderRadius: 10, padding: '10px 11px',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.06)',
        }}>
          <div style={{
            width: 24, height: 24, borderRadius: '50%',
            background: 'linear-gradient(135deg, #c08962, #5a3a1e)',
          }} />
          <div>
            <div style={{ fontSize: 10, fontWeight: 700 }}>Instagram</div>
            <div style={{ fontSize: 8, color: LINKO_INK3 }}>@aurora</div>
          </div>
        </div>

        {/* Wide bottom */}
        <div style={{
          gridColumn: '1 / 2',
          background: LINKO_SURFACE, borderRadius: 10, padding: '8px 10px',
          display: 'flex', alignItems: 'center', gap: 6,
          boxShadow: 'inset 0 0 0 1px rgba(31,27,20,0.06)',
        }}>
          <div style={{ width: 14, height: 14, borderRadius: '50%', background: '#1ea463' }} />
          <div>
            <div style={{ fontSize: 9.5, fontWeight: 700 }}>WhatsApp</div>
            <div style={{ fontSize: 7.5, color: LINKO_INK3 }}>Atendimento</div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LandingPhone = LandingPhone;
window.ContentClassico = ContentClassico;
window.ContentBento = ContentBento;
window.ContentCatalogo = ContentCatalogo;
window.ContentMural = ContentMural;