// Methodology.jsx — Landing-Metodología (purple)
const PILLARS = [
  { n: '1', title: 'Profesionales', body: 'Trabajamos con compromiso, criterio y cercanía. Somos un equipo multidisciplinario que combina visión creativa y técnica.' },
  { n: '2', title: 'Diseño', body: 'Creamos soluciones visuales con identidad. Apostamos a un diseño pensado, flexible y con carácter propio.' },
  { n: '3', title: 'Planificación y Ejecución', body: 'Nos enfocamos en cada etapa del proceso: desde la idea hasta la entrega, con orden, claridad y foco en los objetivos.' },
];

const STEPS = [
  { icon: 'CONSULTORIAicon',    title: 'Consultoría',                body: 'Escuchamos, entendemos, preguntamos. Consultoría gratuita para conocer cada marca desde su esencia.' },
  { icon: 'BRIEFicon',          title: 'Formulario de Brief',        body: 'El cliente completa un formulario que nos ayuda a visualizar y proyectar desde lo técnico y lo visual.' },
  { icon: 'ANALISISicon',       title: 'Investigación y Análisis',   body: 'Estudiamos el rubro, analizamos competidores y detectamos oportunidades para construir con fundamento.' },
  { icon: 'PROPUESTAicon',      title: 'Propuesta de Proyecto',      body: 'Presentamos concepto, moodboard, bocetos y cronograma estimado del proyecto.' },
  { icon: 'DISENOicon',         title: 'Diseño y Desarrollo',        body: 'Diseñamos de forma planificada, con reuniones semanales y feedback colaborativo.' },
  { icon: 'PRESENTACIONESicon', title: 'Presentaciones',             body: 'Armamos un resumen visual de las decisiones tomadas: manual, guía o presentación.' },
  { icon: 'ENTREGAicon',        title: 'Entrega Final',              body: 'Entregamos todo lo establecido: archivos organizados, editables y listos para usar.' },
];

function PillarCard({ n, title, body }) {
  return (
    <div style={{ position: 'relative', paddingTop: 22, paddingLeft: 20, maxWidth: 520 }}>
      <div className="sq-card" style={{
        position: 'relative', boxShadow: 'var(--shadow-card)',
        padding: '52px 40px 30px 64px', boxSizing: 'border-box',
      }}>
        <h3 className="t-card-title" style={{ margin: '0 0 12px' }}>{title}</h3>
        <p className="t-body-sm" style={{ margin: 0, color: 'var(--ink)' }}>{body}</p>
      </div>
      <div style={{
        position: 'absolute', top: 0, left: 0, width: 80, height: 80, zIndex: 2,
        borderRadius: '50%', background: 'var(--purple)', boxShadow: 'var(--shadow-badge)',
      }}>
        <DottedRing size={80} color="var(--peach)" sw={4} fill="transparent">
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 34, color: 'var(--peach)' }}>{n}</span>
        </DottedRing>
      </div>
    </div>
  );
}

function Methodology() {
  return (
    <section data-screen-label="Metodología" style={{
      padding: '140px 0 160px', position: 'relative', isolation: 'isolate', overflow: 'visible',
    }}>
      <BleedLayer bg="var(--purple)" />
      {/* Row 1 — pillars + about */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 80, padding: '0 160px', alignItems: 'flex-start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 30 }}>
          {PILLARS.map(p => <PillarCard key={p.n} {...p} />)}
        </div>
        <div>
          <h2 className="t-section" style={{ color: 'var(--peach)', margin: '0 0 18px' }}>Sobre AlfaBeth</h2>
          <p className="t-body-sm" style={{ color: 'var(--peach)', fontWeight: 700, margin: '0 0 16px', width: 400, maxWidth: '100%' }}>
            Es más que un nombre. Es una forma de diseñar.
          </p>
          <p className="t-body-sm" style={{ color: 'var(--white)', margin: '0 0 32px', width: 400, maxWidth: '100%' }}>
            Tomamos el concepto del alfabeto como base de toda comunicación, y lo reimaginamos con
            una letra que rompe lo esperado: la <em>f</em>. Así nace AlfaBeth, una agencia que
            combina estructura con libertad creativa, reglas con intuición, diseño técnico con
            carácter. Creemos en el poder de las ideas bien construidas —y en la belleza de
            desarmarlas para decir algo nuevo.
          </p>
          <DashedRule width={140} style={{ marginBottom: 175 }} />

          <div style={{
            background: 'rgba(245,218,170,0.07)',
            border: '1px solid rgba(245,218,170,0.28)',
            borderRadius: 'var(--radius-card)',
            padding: '40px 44px 44px',
            maxWidth: 480,
          }}>
            <h2 className="t-section" style={{ color: 'var(--peach)', margin: '0 0 18px' }}>Proyectar Juntos</h2>
            <p className="t-body-sm" style={{ color: 'var(--white)', margin: '0 0 30px' }}>
              Completá unas preguntas clave y descubramos juntos qué necesitás. Esta guía nos permite
              ofrecerte una consultoría con foco y dirección.
            </p>
            <BrandCTA icon="brief" href="https://docs.google.com/forms/d/e/1FAIpQLSfd9wnpXv2UpPAjrHSMFGuhhR7wpTv_s-IvVOpI7FXDRA6Nfw/viewform">Completar Formulario</BrandCTA>
          </div>
        </div>
      </div>

      {/* Row 2 — manejo de proyectos heading */}
      <div style={{ padding: '0 160px', marginTop: 130 }}>
        <h2 className="t-section" style={{ color: 'var(--peach)', margin: '0 0 24px' }}>
          Metodología con AlfaBeth
        </h2>
        <p className="t-body" style={{ color: 'var(--white)', width: 400, maxWidth: '100%', margin: 0 }}>
          En AlfaBeth planificamos cada proyecto con una metodología clara, estratégica y
          colaborativa. Acompañamos al cliente desde el primer contacto hasta la entrega final,
          combinando análisis, diseño y planificación visual.
        </p>
      </div>

      {/* Timeline */}
      <div style={{ position: 'relative', padding: '90px 120px 0', overflowX: 'auto' }}>
        <div style={{ position: 'relative', display: 'flex', gap: 8, minWidth: 1400 }}>
          {/* connector — square-module dotted line */}
          <div style={{
            position: 'absolute', left: 80, right: 80, top: 50, height: 6,
            background: 'repeating-linear-gradient(to right, var(--peach) 0 6px, transparent 6px 12px)',
            zIndex: 0,
          }} />
          {STEPS.map((s, i) => (
            <div key={i} style={{
              flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center',
              textAlign: 'center', position: 'relative', zIndex: 1,
            }}>
              <div style={{ position: 'relative', width: 100, height: 100, flex: '0 0 auto' }}>
                <div style={{
                  position: 'absolute', top: 9, left: 9, right: 9, bottom: 9,
                  borderRadius: '50%', background: 'var(--white)',
                }} />
                <img src={`assets/icons/${s.icon}.png`} alt="" style={{
                  position: 'absolute', inset: 0, width: 100, height: 100,
                }} />
              </div>
              <h4 className="t-cta" style={{ color: 'var(--peach)', margin: '22px 0 8px', fontWeight: 700, minHeight: 50 }}>{s.title}</h4>
              <p style={{
                fontFamily: 'var(--font-display)', fontSize: 16, lineHeight: '24px',
                fontWeight: 300, fontStyle: 'italic',
                color: 'var(--white)', margin: 0, maxWidth: 180,
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Methodology = Methodology;