// Section 5 — Vitrine de casos. Asymmetric mosaic of the 10 MVP sites
// (invented businesses), 3D tilt on hover.
function Showcase() {
  const cases = [
    { name: "Le'Âme", niche: 'Estética avançada', tag: '5,0★ · 48h', span: 4, tall: true, from: '#cfe7df', to: '#e9d9c2' },
    { name: 'Priscila Lima', niche: 'Studio de beleza', tag: 'Agenda cheia', span: 2, from: '#e9d9c2', to: '#dcc7e0' },
    { name: 'Lumina Belle', niche: 'Clínica estética', tag: '+40% agend.', span: 2, from: '#cfe1e7', to: '#cfe7df' },
    { name: 'Mônica Vertuan', niche: 'Odontologia', tag: '5,0★ Google', span: 2, from: '#d3ddd6', to: '#cfe1e7' },
    { name: 'Atelier Rosa', niche: 'Salão & beleza', tag: 'No ar em 48h', span: 2, from: '#e7d2cf', to: '#e9e1c2' },
    { name: 'Studio Vértice', niche: 'Barbearia', tag: 'Agendamento online', span: 3, from: '#cfd9d4', to: '#bcccc4' },
    { name: 'Bottega Sal', niche: 'Restaurante', tag: 'Cardápio + reservas', span: 3, from: '#e9dcc2', to: '#e0c9b3' },
    { name: 'Núoro Spa', niche: 'Massoterapia', tag: 'Domínio próprio', span: 2, from: '#cfe7e3', to: '#d7e7cf' },
    { name: 'Dra. Helena Prado', niche: 'Dermatologia', tag: '5,0★ Doctoralia', span: 2, from: '#cfe1e7', to: '#dfe7cf' },
    { name: 'Casa Vinco', niche: 'Arquitetura', tag: 'Portfólio editorial', span: 2, from: '#ded7cf', to: '#cfd9d4' },
  ];
  return (
    <section id="casos" className="section">
      <div className="container">
        <Reveal>
          <span className="eyebrow">Vitrine</span>
          <h2 className="h-section" style={{ margin: '14px 0 8px' }}>Sites que já estão <span className="em">no ar.</span></h2>
          <p style={{ fontSize: 18, color: 'var(--muted)', margin: 0 }}>10 clínicas de Água Verde, em 48h cada.</p>
        </Reveal>
        <div className="bento" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 18, marginTop: 44 }}>
          {cases.map((c, i) => (
            <Reveal key={c.name} delay={(i % 3) * 0.07} style={{ gridColumn: `span ${c.span}` }}>
              <CaseCard {...c} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseCard({ name, niche, tag, from, to, tall }) {
  const [t, setT] = React.useState({ x: 0, y: 0, s: 1 });
  const onMove = e => {
    const r = e.currentTarget.getBoundingClientRect();
    setT({ x: ((e.clientY - r.top) / r.height - .5) * -6, y: ((e.clientX - r.left) / r.width - .5) * 6, s: 1.01 });
  };
  return (
    <a href="#previa" onMouseMove={onMove} onMouseLeave={() => setT({ x: 0, y: 0, s: 1 })}
      className="card" style={{
        display: 'block', textDecoration: 'none', padding: 0, overflow: 'hidden', height: '100%',
        transform: `perspective(1000px) rotateX(${t.x}deg) rotateY(${t.y}deg) scale(${t.s})`,
        transition: 'transform .3s var(--ease-out), box-shadow .3s var(--ease-out)',
        boxShadow: t.s > 1 ? 'var(--shadow-md)' : 'var(--shadow-sm)',
      }}>
      <div style={{ height: tall ? 300 : 188, background: `linear-gradient(150deg, ${from}, ${to})`, position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 74% 24%, rgba(15,107,92,.18), transparent 56%)' }} />
        <span style={{ position: 'absolute', top: 15, left: 16, display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 11, fontWeight: 600, color: 'var(--brand-700)', background: 'rgba(255,253,248,.85)', padding: '5px 11px', borderRadius: 999 }}>
          <Star size={11} /> {tag}
        </span>
        <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: tall ? 32 : 22, color: 'var(--ink-2)', lineHeight: 1.05 }}>{name}</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '15px 18px' }}>
        <span style={{ fontSize: 13, color: 'var(--muted)' }}>{niche}</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 13, fontWeight: 600, color: 'var(--brand)' }}>
          Ver ao vivo <Icon name="arrow" size={15} color="var(--brand)" />
        </span>
      </div>
    </a>
  );
}

window.Showcase = Showcase;