/* Exemplos ilustrativos de layout do estúdio CodeKid. */

function Showcase() {
  const exemplos = [
    { img: 'assets/exemplo-site-0.png?v=2', cat: 'Padaria', bairro: 'Copacabana', desc: 'Capa centralizada em tons quentes de forno, com a fornada ao vivo.' },
    { img: 'assets/exemplo-site-1.png?v=2', cat: 'Restaurante', bairro: 'Leblon', desc: 'Hero centrado com o ambiente do salão, prato do dia e WhatsApp.' },
    { img: 'assets/exemplo-site-2.png?v=2', cat: 'Barbearia', bairro: 'Centro', desc: 'Capa centralizada na paleta rosa, com agenda por horário marcado.' }
  ];

  return (
    <section id="exemplos" style={{ padding: '80px 0', position: 'relative' }}>
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 46px' }}>
          <div className="eyebrow" style={{ color: 'var(--cyan)', marginBottom: 14 }}>Ideias para o seu site</div>
          <h2 className="display" style={{ fontSize: 'clamp(26px, 4vw, 40px)', margin: '0 0 14px', fontWeight: 800 }}>
            Cada negócio, um site <span className="gradient-text">único</span>
          </h2>
          <p style={{ color: 'var(--text-dim)', fontSize: 15.5, margin: 0 }}>
            Exemplos de layout gerados pelo estúdio CodeKid — design, textos e cores
            para inspirar o site do seu negócio. São demonstrações, não sites de clientes.
          </p>
        </div>

        <div className="showcase-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {exemplos.map((e, i) => (
            <div key={i} className="panel reveal" style={{ padding: 12, transitionDelay: (i * 0.08) + 's' }}>
              <div style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.08)', position: 'relative', background: '#05080e' }}>
                <img src={e.img} alt={'Exemplo de site — ' + e.cat} loading="lazy" decoding="async" style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '1200 / 760', objectFit: 'cover', objectPosition: 'top' }} />
                <span style={{ position: 'absolute', top: 10, left: 10, display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, fontSize: 11, fontWeight: 700, background: 'rgba(0,229,255,0.14)', border: '1px solid rgba(0,229,255,0.35)', color: '#fff', backdropFilter: 'blur(6px)' }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--green)', boxShadow: '0 0 8px var(--green)' }}></span> Layout de exemplo
                </span>
              </div>
              <div style={{ padding: '14px 8px 8px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <span style={{ fontWeight: 700, fontSize: 15 }}>{e.cat}</span>
                  <span style={{ fontSize: 12, color: 'var(--text-dim)' }}>· {e.bairro}</span>
                </div>
                <p style={{ fontSize: 13, color: 'var(--text-dim)', margin: 0, lineHeight: 1.5 }}>{e.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="reveal" style={{ textAlign: 'center', marginTop: 40 }}>
          <a href="#contato" className="btn btn-primary" onClick={e => { e.preventDefault(); if (window.scrollToSection) window.scrollToSection('contato'); }}>
            Quero um site assim
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) { .showcase-grid { grid-template-columns: 1fr !important; max-width: 460px; margin: 0 auto; } }
      `}</style>
    </section>
  );
}

window.Showcase = Showcase;