// ─────────────────────────────────────────────────────────
//  Recognition — 100% HONEST · Verifiable receipts only
// ─────────────────────────────────────────────────────────

// Each item below is REAL and PROVABLE.
// JK Realtors metrics are verifiable on jkrealtors.org via PageSpeed Insights.
// "First batch" / "Founding studio" framing is honest about stage.

const RECEIPTS = [
  {
    org: 'JK Realtors',
    yr: 'Live',
    title: 'Production · jkrealtors.org',
    meta: 'Verifiable on PageSpeed Insights',
    status: 'live',
    link: 'https://www.jkrealtors.org',
  },
  {
    org: 'Founder Studio',
    yr: '2026',
    title: 'WebBrandify Q3 Cohort',
    meta: 'Currently onboarding 2 clients',
    status: 'live',
  },
  {
    org: 'Open Build',
    yr: '2026',
    title: 'This portfolio is the proof',
    meta: 'Same studio · same stack',
    status: 'live',
  },
  {
    org: 'Submissions',
    yr: '2026',
    title: 'Awwwards · CSS DA · FWA',
    meta: 'Queued post-launch',
    status: 'queued',
  },
];

const METRICS = [
  {
    l: 'JK Realtors · LCP',
    v: '0.4',
    s: 's',
    note: 'PageSpeed verified',
  },
  {
    l: 'JK Realtors · Lighthouse',
    v: '98',
    s: '/100',
    note: 'Mobile + Desktop',
  },
  {
    l: 'Lead routing latency',
    v: '< 3',
    s: 's',
    note: 'Form → CRM → WhatsApp',
  },
  {
    l: 'Studio capacity',
    v: '2',
    s: '/Q',
    note: 'Engagements per quarter',
  },
];

function Recognition() {
  return (
    <section className="section shell" data-screen-label="Receipts">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:32, flexWrap:'wrap'}}>
        <div>
          <div className="kicker">§Receipts · Verifiable proof</div>
          <h2 style={{
            fontFamily:'var(--serif)', fontWeight:400,
            fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
            letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'18ch',
            textWrap:'balance',
          }}>
            No badges yet.<br/>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>Just receipts.</span>
          </h2>
        </div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:11,
          letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)',
          textAlign:'right', lineHeight:1.7, maxWidth:300,
        }}>
          We launched the studio in 2026.<br/>
          <span style={{color:'var(--ink)'}}>Every number below is live<br/>and independently verifiable.</span>
        </div>
      </div>

      <div className="rec-grid">
        {RECEIPTS.map((r, i) => {
          const inner = (
            <>
              <div className="rec-org">
                <span>{r.org}</span>
                <span className="yr">{r.yr}</span>
              </div>
              <h5>{r.title}</h5>
              <div className="rec-meta">{r.meta}</div>
              <div style={{
                marginTop:18, paddingTop:14, borderTop:'1px solid var(--line)',
                display:'flex', alignItems:'center', gap:8,
                fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.16em',
                textTransform:'uppercase',
                color: r.status === 'live' ? 'var(--accent)' : 'var(--muted)',
              }}>
                <span style={{
                  width:6, height:6, borderRadius:'50%',
                  background: r.status === 'live' ? 'var(--accent)' : 'var(--muted)',
                  animation: r.status === 'live' ? 'pulse 1.6s ease-in-out infinite' : 'none',
                }}/>
                {r.status === 'live' ? 'Live · verifiable' : 'Queued · post-launch'}
                {r.link && <span style={{marginLeft:'auto', color:'var(--accent)'}}>↗</span>}
              </div>
            </>
          );

          return r.link ? (
            <a key={i} href={r.link} target="_blank" rel="noopener" className="rec-card magnetic-trigger" style={{textDecoration:'none', color:'inherit', display:'block'}}>
              {inner}
            </a>
          ) : (
            <div key={i} className="rec-card">{inner}</div>
          );
        })}
      </div>

      <div style={{
        marginTop:48, paddingTop:32, borderTop:'1px solid var(--line)',
      }}>
        <div style={{
          display:'flex', justifyContent:'space-between',
          alignItems:'baseline', marginBottom:24, flexWrap:'wrap', gap:16,
        }}>
          <div className="kicker">§Measured · From JK Realtors production</div>
          <a
            href="https://pagespeed.web.dev/analysis/https-www-jkrealtors-org/?form_factor=desktop"
            target="_blank" rel="noopener"
            className="magnetic-trigger"
            style={{
              fontFamily:'var(--mono)', fontSize:10.5,
              letterSpacing:'0.18em', textTransform:'uppercase',
              color:'var(--accent)',
              textDecoration:'none',
              display:'inline-flex', alignItems:'center', gap:8,
            }}
          >
            Verify on PageSpeed Insights <span>↗</span>
          </a>
        </div>

        <div className="rec-metrics" style={{borderTop:'none', paddingTop:0, marginTop:0}}>
          {METRICS.map((m, i) => (
            <div key={i} className="rec-metric">
              <div className="l">{m.l}</div>
              <div className="v">{m.v}{m.s && <em>{m.s}</em>}</div>
              <div style={{
                marginTop:8,
                fontFamily:'var(--mono)', fontSize:10,
                letterSpacing:'0.14em', textTransform:'uppercase',
                color:'var(--muted)',
              }}>{m.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Recognition = Recognition;