/* Surgr Landing — Goal Blocks (3 columns: Hipertrofia / Emagrecimento / Performance) */

function GoalBlock({ kicker, title, desc, color, image }) {
  return (
    <div style={{
      position: 'relative',
      borderRadius: 20,
      overflow: 'hidden',
      aspectRatio: '3 / 4',
      border: '1px solid rgba(255,255,255,0.06)',
      background: '#0A0A0F',
      cursor: 'pointer',
      transition: 'transform var(--surgr-dur-base) var(--surgr-ease-out), border-color var(--surgr-dur-base)',
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-6px)'; e.currentTarget.style.borderColor = `${color}55`; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'; }}
    >
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(${image})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        filter: 'grayscale(40%) contrast(1.2) brightness(0.55)',
      }}/>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, transparent 30%, ${color}25 100%, ${color}55)`,
      }}/>
      <div style={{
        position: 'absolute', left: 24, right: 24, bottom: 24, zIndex: 2,
      }}>
        <p style={{
          fontFamily: 'var(--surgr-font-body)',
          fontSize: 11, fontWeight: 800, letterSpacing: 2.5,
          textTransform: 'uppercase',
          color, margin: '0 0 10px',
          textShadow: `0 0 20px ${color}80`,
        }}>{kicker}</p>
        <h3 style={{
          fontFamily: 'var(--surgr-font-heading)',
          fontWeight: 800,
          fontSize: 32,
          letterSpacing: -0.5,
          color: '#FFF',
          margin: 0,
          textTransform: 'uppercase',
          lineHeight: 1.05,
        }}>{title}</h3>
        <p style={{
          fontFamily: 'var(--surgr-font-body)',
          fontSize: 14, color: 'rgba(255,255,255,0.75)',
          marginTop: 10, lineHeight: 1.5,
          fontWeight: 500,
        }}>{desc}</p>
      </div>
    </div>
  );
}

const { SectionHead: GBSectionHead } = window.SurgrLandingKit;

function GoalsSection() {
  // Photos run through the brand's recipe (grayscale + tinted overlay).
  const goals = [
    {
      kicker: 'OBJETIVO 01',
      title: 'HIPERTROFIA',
      desc: 'Carga progressiva calculada série por série. Foco em volume e tempo sob tensão.',
      color: '#C8FF00',
      image: 'https://images.unsplash.com/photo-1597452573811-85e7383195a6?auto=format&fit=crop&w=800&q=80',
    },
    {
      kicker: 'OBJETIVO 02',
      title: 'EMAGRECIMENTO',
      desc: 'Treino metabólico inteligente. Densidade alta, descansos curtos, EPOC.',
      color: '#FF4D6A',
      image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=800&q=80',
    },
    {
      kicker: 'OBJETIVO 03',
      title: 'PERFORMANCE',
      desc: 'Força máxima e potência. Periodização ondulatória, autorregulação por RPE.',
      color: '#00D9FF',
      image: 'https://images.unsplash.com/photo-1549476464-37392f717541?auto=format&fit=crop&w=800&q=80',
    },
  ];

  return (
    <section style={{
      padding: '120px 24px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <GBSectionHead
          kicker="O QUE VOCÊ QUER ALCANÇAR"
          title="ESCOLHE O OBJETIVO. O SURGR MONTA O RESTO."
          subtitle="Cada plano é gerado do zero pra você. Sem ficha genérica, sem template."
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 20,
        }}>
          {goals.map((g, i) => <GoalBlock key={i} {...g}/>)}
        </div>
      </div>
    </section>
  );
}

window.SurgrLandingKit.GoalBlock = GoalBlock;
window.SurgrLandingKit.GoalsSection = GoalsSection;