// Section 5, Closing the loop / Credit assignment (two-panel)
const Credit = () => {
  const [decision, setDecision] = React.useState(
    "We're redesigning the qualification layer so leads are pre-qualified before reaching an SDR. Targeting a 40% reduction in SDR time on unqualified leads."
  );
  const [confirmed, setConfirmed] = React.useState(false);

  const contributors = [
    { name: 'Sarah M.', role: 'Senior Product Manager', credit: 'Direct', pct: 60, color: T.green, note: 'Submission #042, proposed the qualification redesign almost as scoped.' },
    { name: 'Marcus T.', role: 'Solutions Engineer', credit: 'Partial', pct: 30, color: T.greenDark, note: 'Submission #017, identified the MQL→SQL handoff as the actual constraint.' },
    { name: 'James R.', role: 'SDR Team Lead', credit: 'Contributing', pct: 10, color: '#86A893', note: 'Submission #074, flagged the £50K ACV threshold the redesign uses.' },
  ];

  return (
    <section style={{ background: T.greenTint, padding: '120px 32px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <SectionLabel>Closing the loop</SectionLabel>
          <h2 className="display" style={{
            fontSize: 'clamp(28px, 3.6vw, 44px)',
            fontWeight: 700, letterSpacing: -0.8, color: T.ink,
            lineHeight: 1.15, marginBottom: 16,
          }}>
            Credit assigned automatically. No spreadsheet.
          </h2>
          <p style={{ fontSize: 17, color: T.ink2, maxWidth: 620, margin: '0 auto', lineHeight: 1.55 }}>
            Describe what you decided. Spark traces it back to the submissions that shaped it.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
          alignItems: 'stretch',
        }}>
          {/* Left: decision input */}
          <div style={{
            background: T.paperOff, border: `1px solid ${T.border}`, borderRadius: 16,
            padding: 28, display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 7, background: T.ink,
                  color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 13, fontWeight: 700,
                }}>A</div>
                <span style={{ fontSize: 14, fontWeight: 600, color: T.ink }}>Arron Patel</span>
                <span style={{ fontSize: 13, color: T.ink4 }}>· CEO</span>
              </div>
              <span className="mono" style={{ fontSize: 11, color: T.ink4, letterSpacing: 0.5 }}>
                YOUR DECISION
              </span>
            </div>

            <label style={{ fontSize: 13, color: T.ink3, marginBottom: 8, fontWeight: 500 }}>
              What did you decide to do?
            </label>
            <textarea
              value={decision}
              onChange={e => setDecision(e.target.value)}
              style={{
                flex: 1, minHeight: 180,
                padding: '14px 16px',
                border: `1px solid ${T.border}`,
                borderRadius: 10,
                background: T.paper,
                fontFamily: 'inherit', fontSize: 15, lineHeight: 1.6,
                color: T.ink, resize: 'none', outline: 'none',
                transition: 'border 200ms ease',
              }}
              onFocus={e => e.target.style.borderColor = T.green}
              onBlur={e => e.target.style.borderColor = T.border}
            />

            <div style={{
              marginTop: 14, padding: '10px 14px',
              borderRadius: 8, background: T.greenTint,
              display: 'flex', alignItems: 'center', gap: 10,
              fontSize: 13, color: T.ink2,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: T.green }} className="pulse-dot" />
              Spark traced this decision back to <strong style={{ color: T.ink, margin: '0 4px' }}>3 of 142 submissions</strong>
            </div>
          </div>

          {/* Right: proposed credit */}
          <div style={{
            background: T.paper, border: `1px solid ${T.border}`, borderRadius: 16,
            padding: 28, display: 'flex', flexDirection: 'column',
            boxShadow: '0 12px 32px rgba(15,43,26,0.06)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <SparkLogo size={26} withWord={false} />
                <span style={{ fontSize: 14, fontWeight: 600, color: T.ink }}>Spark</span>
                <span style={{ fontSize: 13, color: T.ink4 }}>· proposed credit</span>
              </div>
              <span className="mono" style={{ fontSize: 11, color: T.greenDark, letterSpacing: 0.5 }}>
                AUTO-MATCHED · 98% CONF.
              </span>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>
              {contributors.map(c => (
                <div key={c.name} style={{
                  border: `1px solid ${T.borderSoft}`,
                  borderRadius: 10,
                  padding: '14px 16px',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Avatar name={c.name} />
                      <div>
                        <div style={{ fontSize: 14, fontWeight: 600, color: T.ink, letterSpacing: -0.1 }}>{c.name}</div>
                        <div style={{ fontSize: 12, color: T.ink4 }}>{c.role}</div>
                      </div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{
                        fontSize: 11, fontWeight: 700, color: c.color,
                        padding: '3px 9px', borderRadius: 999,
                        background: c.color === T.green ? T.greenLight : 'rgba(45,138,78,0.08)',
                        letterSpacing: 0.3,
                      }}>{c.credit}</span>
                      <span style={{ fontSize: 14, fontWeight: 700, color: T.ink, minWidth: 40, textAlign: 'right' }}>{c.pct}%</span>
                    </div>
                  </div>
                  <div style={{
                    height: 4, borderRadius: 999, background: T.borderSoft,
                    overflow: 'hidden', marginBottom: 8,
                  }}>
                    <div style={{
                      width: `${c.pct}%`, height: '100%',
                      background: c.color, borderRadius: 999,
                      transition: 'width 600ms ease',
                    }} />
                  </div>
                  <div style={{ fontSize: 12.5, color: T.ink3, lineHeight: 1.5 }}>{c.note}</div>
                </div>
              ))}
            </div>

            <button
              onClick={() => setConfirmed(true)}
              style={{
                background: confirmed ? T.greenDark : T.ink,
                color: 'white', border: 'none',
                padding: '14px 18px', borderRadius: 10,
                fontSize: 15, fontWeight: 600, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                transition: 'all 200ms ease',
              }}
              onMouseEnter={e => !confirmed && (e.currentTarget.style.background = '#0A1E12')}
              onMouseLeave={e => !confirmed && (e.currentTarget.style.background = T.ink)}
            >
              {confirmed ? (
                <>
                  <Icon d="M5 13l4 4L19 7" size={16} sw={2.5} />
                  Confirmed, notifications sent
                </>
              ) : (
                <>Confirm credit and notify contributors</>
              )}
            </button>
          </div>
        </div>

        <p style={{
          textAlign: 'center', marginTop: 36,
          fontSize: 15, color: T.ink3, maxWidth: 580, margin: '36px auto 0',
          lineHeight: 1.6,
        }}>
          Each contributor receives a notification and points award automatically.
          <br /><span style={{ color: T.ink2, fontWeight: 500 }}>No spreadsheet. No memory required.</span>
        </p>
      </div>
    </section>
  );
};

const Avatar = ({ name }) => {
  const initials = name.split(' ').map(s => s[0]).slice(0, 2).join('');
  const hues = { SM: 138, MT: 200, JR: 28 };
  const h = hues[initials] || 138;
  return (
    <div style={{
      width: 30, height: 30, borderRadius: '50%',
      background: `hsl(${h}, 30%, 92%)`,
      color: `hsl(${h}, 40%, 28%)`,
      fontSize: 11, fontWeight: 700,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>{initials}</div>
  );
};

window.Credit = Credit;