// Resident Portal — three value props + Popular services grid + footer.

function PortalValueProps() {
  const t = window.tokens;
  const items = [
    { n: '01', t: 'Ask in plain English', d: "Describe your situation the way you'd tell a friend. No forms, no form numbers, no jargon." },
    { n: '02', t: 'We find the right path', d: 'We check which agencies, permits, and fees apply to you, state and local, and line them up in order.' },
    { n: '03', t: 'You stay in the loop',  d: "Track every request in one place. We'll let you know when it's your turn and when it's done." },
  ];
  return (
    <section className="rp-valueprops" style={{
      maxWidth: 1040,
      margin: '0 auto',
      padding: '0 32px 56px',
      borderTop: `1px solid ${t.color.hair}`,
    }}>
      <div className="rp-valueprops-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, paddingTop: 72 }}>
        {items.map((it) => (
          <div key={it.n}>
            <div style={{
              fontFamily: t.font.mono,
              fontSize: 11,
              color: t.color.action,
              letterSpacing: 0.5,
              marginBottom: 14,
            }}>{it.n}</div>
            <div style={{
              fontSize: 16,
              fontWeight: 500,
              color: t.color.text,
              letterSpacing: -0.2,
              marginBottom: 8,
            }}>{it.t}</div>
            <div style={{
              fontSize: 16,
              lineHeight: '24px',
              color: t.color.muted,
            }}>{it.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function PortalPopularServices({ onAsk }) {
  const t = window.tokens;
  const services = [
    { title: 'Register a dog',     desc: 'Apply, renew, or replace a tag',    q: 'Register my dog',                wired: true, href: 'Resident Portal - Dog License.html' },
    { title: 'Driver license',     desc: 'Renew, transfer, or replace',       q: 'Renew my driver license' },
    { title: 'Parking tickets',    desc: 'Pay or dispute a ticket',           q: 'Pay a parking ticket' },
    { title: 'Birth certificates', desc: 'Request a certified copy',          q: 'Request a birth certificate' },
    { title: 'Start a business',   desc: 'Form an LLC or register a name',    q: 'Start a business' },
    { title: 'Unemployment',       desc: 'File a new claim or check status',  q: 'File for unemployment' },
  ];

  return (
    <section className="rp-services" style={{
      maxWidth: 1040,
      margin: '0 auto',
      padding: '40px 32px 80px',
    }}>
      <div className="rp-services-head" style={{
        display: 'flex',
        alignItems: 'baseline',
        justifyContent: 'space-between',
        marginBottom: 24,
      }}>
        <h2 style={{
          margin: 0,
          fontSize: 28,
          fontWeight: 500,
          letterSpacing: '-0.02em',
          color: t.color.text,
          lineHeight: 1.15,
        }}>
          Popular Services
        </h2>
        <a href="#all" className="rp-browse-all" style={{
          fontSize: 13,
          fontWeight: 500,
          color: t.color.text,
          textDecoration: 'none',
        }}>
          Browse all 184 services →
        </a>
      </div>

      <div className="rp-services-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        border: `1px solid ${t.color.hair}`,
        borderRadius: t.radius.lg,
        overflow: 'hidden',
      }}>
        {services.map((s, i) => {
          const col = i % 3;
          const row = Math.floor(i / 3);
          const isLastRow = row === Math.floor((services.length - 1) / 3);
          // For 6-tile layout: when reduced to 2 cols, last row is rows 2-3 (idx 4,5); when 1 col, last is idx 5
          const last2 = i >= services.length - 2;
          const last1 = i === services.length - 1;
          return (
            <button
              key={s.title}
              onClick={() => {
                if (s.href) { window.location.href = s.href; return; }
                if (onAsk) onAsk(s.q);
              }}
              className="rp-service-tile"
              data-col={col}
              data-last2={last2}
              data-last={last1}
              style={{
                textAlign: 'left',
                background: t.color.bg,
                border: 'none',
                borderRight: col < 2 ? `1px solid ${t.color.hair}` : 'none',
                borderBottom: !isLastRow ? `1px solid ${t.color.hair}` : 'none',
                padding: '22px 22px 20px',
                cursor: 'pointer',
                fontFamily: t.font.sans,
                transition: 'background 120ms',
              }}
            >
              <div style={{ fontSize: 16, fontWeight: 500, color: t.color.text, marginBottom: 4 }}>{s.title}</div>
              <div style={{ fontSize: 16, color: t.color.muted, marginBottom: 14, lineHeight: '24px' }}>{s.desc}</div>
              <span style={{ fontSize: 14, fontWeight: 500, color: t.color.action }}>Start →</span>
            </button>
          );
        })}
      </div>
    </section>
  );
}

function PortalFooter() {
  const t = window.tokens;
  return (
    <footer style={{
      borderTop: `1px solid ${t.color.hair}`,
      background: t.color.bg,
    }}>
      <div className="rp-footer-inner" style={{
        maxWidth: 1200,
        margin: '0 auto',
        padding: '20px 32px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 24,
        fontSize: 12,
        color: t.color.muted,
      }}>
        <div>© 2026 State of New Jersey</div>
        <nav className="rp-footer-links" style={{ display: 'flex', gap: 28 }}>
          <a href="#privacy" style={footerLink(t)}>Privacy</a>
          <a href="#a11y" style={footerLink(t)}>Accessibility</a>
          <a href="#contact" style={footerLink(t)}>Contact</a>
          <a href="#govpilot" style={footerLink(t)}>Built by GovPilot</a>
        </nav>
      </div>
    </footer>
  );
}

function footerLink(t) {
  return { fontSize: 12, color: t.color.body, textDecoration: 'none' };
}

Object.assign(window, { PortalValueProps, PortalPopularServices, PortalFooter });