/* SectionCTA — shared call-to-action block used at the foot of TimeBack,
   HowItWorks, Testimonials, Fit (and anywhere else a single section-level
   CTA is needed). The point is to make the button feel like a deliberate
   destination instead of a stray pill — bigger label, coral arrow capsule
   for brand pop, optional meta line + secondary link, dark / light tone
   for navy vs paper backgrounds.

   Props:
     label       string  — button text (e.g. "Get your time back")
     href        string  — anchor target (default "#cta")
     tone        'light' | 'dark'  — dark = on navy, light = on paper (default 'light')
     align       'center' | 'start' — flex alignment (default 'center')
     meta        string  — small uppercase mono line beneath the button (optional)
     lead        string  — short headline above the button (optional)
     secondary   { label, href } — secondary text link (optional)
     ariaLabel   string  — accessibility override for the link
*/

const sectionCtaStyles = {
  block: (align) => ({
    display: 'flex',
    flexDirection: 'column',
    alignItems: align === 'start' ? 'flex-start' : 'center',
    textAlign: align === 'start' ? 'left' : 'center',
    gap: 16,
  }),
  lead: (tone) => ({
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 18,
    fontWeight: 500,
    letterSpacing: '-0.01em',
    lineHeight: 1.35,
    color: tone === 'dark' ? 'rgba(255,255,255,0.92)' : 'var(--ink-soft)',
    margin: 0,
    whiteSpace: 'nowrap',
  }),
  btn: (tone) => ({
    background: tone === 'dark' ? 'var(--paper)' : 'var(--ink)',
    color: tone === 'dark' ? 'var(--ink)' : 'var(--paper)',
    padding: '14px 14px 14px 28px',
    borderRadius: 999,
    fontSize: 16,
    fontWeight: 600,
    letterSpacing: '-0.005em',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 14,
    transition: 'background .18s, color .18s, transform .15s, box-shadow .2s',
    textDecoration: 'none',
    boxShadow: tone === 'dark'
      ? '0 12px 30px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18)'
      : '0 10px 24px rgba(22,27,61,0.14), 0 2px 4px rgba(22,27,61,0.08)',
    border: tone === 'dark' ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(255,255,255,0.06)',
    cursor: 'pointer',
    fontFamily: 'inherit',
  }),
  arrow: {
    width: 36,
    height: 36,
    borderRadius: '50%',
    background: 'var(--coral)',
    color: '#fff',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
    transition: 'transform .18s',
  },
  meta: (tone) => ({
    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    fontSize: 11,
    letterSpacing: '0.1em',
    textTransform: 'uppercase',
    fontWeight: 500,
    color: tone === 'dark' ? 'rgba(255,255,255,0.82)' : 'var(--ink-muted)',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    whiteSpace: 'nowrap',
  }),
  metaDot: (tone) => ({
    width: 4, height: 4, borderRadius: '50%',
    background: tone === 'dark' ? 'var(--coral)' : 'var(--coral)',
    flexShrink: 0,
  }),
  secondary: (tone) => ({
    fontSize: 14,
    fontWeight: 500,
    color: tone === 'dark' ? 'rgba(255,255,255,0.92)' : 'var(--blue)',
    textDecoration: 'none',
    borderBottom: tone === 'dark'
      ? '1px solid rgba(255,255,255,0.55)'
      : '1px solid rgba(8,120,216,0.35)',
    paddingBottom: 1,
    transition: 'color .18s, border-color .18s',
  }),
  row: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 18,
    flexWrap: 'wrap',
    justifyContent: 'inherit',
  },
};

function SectionCTA({
  label,
  href = '#cta',
  tone = 'light',
  align = 'center',
  meta,
  lead,
  secondary,
  ariaLabel,
}) {
  const onEnter = (e) => {
    if (tone === 'dark') {
      e.currentTarget.style.background = 'var(--coral)';
      e.currentTarget.style.color = 'var(--paper)';
    } else {
      e.currentTarget.style.background = 'var(--blue)';
    }
    e.currentTarget.style.transform = 'translateY(-1px)';
    const arrow = e.currentTarget.querySelector('[data-cta-arrow]');
    if (arrow) arrow.style.transform = 'translateX(2px)';
  };
  const onLeave = (e) => {
    if (tone === 'dark') {
      e.currentTarget.style.background = 'var(--paper)';
      e.currentTarget.style.color = 'var(--ink)';
    } else {
      e.currentTarget.style.background = 'var(--ink)';
    }
    e.currentTarget.style.transform = 'translateY(0)';
    const arrow = e.currentTarget.querySelector('[data-cta-arrow]');
    if (arrow) arrow.style.transform = 'translateX(0)';
  };

  return (
    <div style={sectionCtaStyles.block(align)}>
      {lead ? <div style={sectionCtaStyles.lead(tone)}>{lead}</div> : null}
      <div style={{ ...sectionCtaStyles.row, justifyContent: align === 'start' ? 'flex-start' : 'center' }}>
        <a
          href={href}
          aria-label={ariaLabel || label}
          style={sectionCtaStyles.btn(tone)}
          onMouseEnter={onEnter}
          onMouseLeave={onLeave}
        >
          <span>{label}</span>
          <span data-cta-arrow style={sectionCtaStyles.arrow} aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M5 12h14" />
              <path d="M13 6l6 6-6 6" />
            </svg>
          </span>
        </a>
        {secondary ? (
          <a
            href={secondary.href}
            style={sectionCtaStyles.secondary(tone)}
            onMouseEnter={e => {
              if (tone === 'dark') { e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = '#fff'; }
              else { e.currentTarget.style.color = 'var(--blue-deep)'; e.currentTarget.style.borderColor = 'var(--blue-deep)'; }
            }}
            onMouseLeave={e => {
              if (tone === 'dark') { e.currentTarget.style.color = 'rgba(255,255,255,0.92)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.55)'; }
              else { e.currentTarget.style.color = 'var(--blue)'; e.currentTarget.style.borderColor = 'rgba(8,120,216,0.35)'; }
            }}
          >
            {secondary.label}
          </a>
        ) : null}
      </div>
      {meta ? (
        <div style={sectionCtaStyles.meta(tone)}>
          <span style={sectionCtaStyles.metaDot(tone)} aria-hidden="true" />
          <span>{meta}</span>
        </div>
      ) : null}
    </div>
  );
}

Object.assign(window, { SectionCTA });