/* Proof & Presence + Contact/CTA + Footer — supports locked lens */

/* Each credential: a logo (badge mark) and/or a full certificate image.
   - `cert` present  -> card is clickable, opens the full certificate in a lightbox.
   - logo-only card  -> centered mark on a tinted panel, still looks intentional. */
const CREDENTIALS = [
  { label: 'Aadhaar Enabled Payment System', value: 'AePS integration — payments infrastructure',
    logo: 'assets/AadhaarLogo.svg', tint: '#E8741E' },
  { label: 'OWASP Compliance', value: 'Secure SDLC — OWASP Top 10 aligned',
    logo: 'assets/OWASPlogo.png', tint: '#0B5FA5' },
  { label: 'Google UX Design', value: 'Professional Certificate · Coursera',
    logo: 'assets/GoogleUXDesign.png', tint: '#4285F4' },
  { label: 'GMAT 2018', value: '93rd percentile',
    logo: 'assets/GMATlogo.png', tint: '#6B2C91' },
  { label: 'Wharton · Financial Accounting', value: 'Coursera Certificate',
    cert: 'assets/FinancialAccountingCert.jpeg', tint: '#011F5B' },
  { label: 'Wharton · Intro to Marketing', value: 'Coursera Certificate',
    cert: 'assets/MarketingIntroCert.jpeg', tint: '#011F5B' },
  { label: 'Wharton · Intro to Operations', value: 'Coursera Certificate',
    cert: 'assets/OpsIntroCert.jpeg', tint: '#011F5B' },
  { label: 'Big Data with Spark', value: 'Coursera Certificate',
    cert: 'assets/bigDataWithSparkCert.jpg', tint: '#E25A1C' },
  { label: 'Oracle Certified Expert', value: 'Java EE 6 Web Component & Enterprise Beans',
    logo: 'assets/OracleCertifiedExpertBadge.png', tint: '#C74634' },
  { label: 'Oracle Certified', value: 'Java SE 6 Programmer',
    logo: 'assets/OracleCertifiedBadge.png', tint: '#C74634' },
  { label: 'Capital Markets Immersion', value: 'Professional Certificate',
    cert: 'assets/capitalMarketImmersionCert.jpg', tint: '#1B7A43' },
];

const LANGUAGES = [
  { lang: 'English', level: 'C1' },
  { lang: 'Hindi', level: 'B2' },
  { lang: 'Bengali', level: 'B2' },
  { lang: 'Chinese', level: 'B1' },
];

const REFERENCES = [
  { name: 'Edward Cable', role: 'CEO & Co-Founder, Mifos', note: 'Available on request',
    photo: 'assets/ref-edward-cable.jpg', linkedin: 'https://www.linkedin.com/in/edcable/' },
  { name: 'Nitin Mithal', role: 'Director & Head Global Customer Delivery, Clari5', note: 'Available on request',
    photo: 'assets/ref-nitin-mithal.jpg', linkedin: 'https://www.linkedin.com/in/nitinmithal/' },
];

function initials(name) {
  return name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase();
}

function CertLightbox({ cred, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  return (
    <div className="cert-overlay" onClick={onClose}>
      <div className="cert-lightbox" onClick={(e) => e.stopPropagation()}>
        <button className="cert-lightbox__close" onClick={onClose} aria-label="Close">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
        <img src={cred.cert} alt={cred.label} className="cert-lightbox__img" />
        <div className="cert-lightbox__caption">
          <strong>{cred.label}</strong><span>{cred.value}</span>
        </div>
      </div>
    </div>
  );
}

function CredentialCard({ cred, onOpen }) {
  const hasCert = !!cred.cert;
  const tint = cred.tint || 'var(--accent)';
  return (
    <div className={'cred-card' + (hasCert ? ' cred-card--clickable' : '')}
      style={{ '--cred-tint': tint }}
      onClick={hasCert ? onOpen : undefined}
      role={hasCert ? 'button' : undefined}
      tabIndex={hasCert ? 0 : undefined}
      onKeyDown={hasCert ? (e) => { if (e.key === 'Enter') onOpen(); } : undefined}>
      <div className={'cred-card__media' + (cred.logo ? ' cred-card__media--logo' : ' cred-card__media--cert')}>
        {cred.logo
          ? <img src={cred.logo} alt={cred.label} className="cred-card__logo" />
          : <img src={cred.cert} alt={cred.label} className="cred-card__cert" />}
        {hasCert && (
          <span className="cred-card__view">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline>
              <line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line>
            </svg>
            View certificate
          </span>
        )}
      </div>
      <div className="cred-card__info">
        <div className="cred-card__title">{cred.label}</div>
        <div className="cred-card__value">{cred.value}</div>
      </div>
    </div>
  );
}

function ProofPresence() {
  const [certIdx, setCertIdx] = React.useState(null);
  return (
    <section className="section section--alt" id="proof">
      <div className="container">
        <div className="section-header anim-in" data-anim>
          <p className="t-label">Trust Signals</p>
          <h2 className="t-display">Proof &amp; Presence</h2>
        </div>

        <div className="proof-subsection anim-in" data-anim>
          <h3 className="proof-subsection__title">Credentials</h3>
          <div className="cred-grid">
            {CREDENTIALS.map((c, i) => (
              <CredentialCard key={i} cred={c} onOpen={() => setCertIdx(i)} />
            ))}
          </div>
        </div>
        {certIdx !== null && CREDENTIALS[certIdx].cert && (
          <CertLightbox cred={CREDENTIALS[certIdx]} onClose={() => setCertIdx(null)} />
        )}

        <div className="proof-subsection anim-in" data-anim>
          <h3 className="proof-subsection__title">Languages</h3>
          <div className="proof-row">
            {LANGUAGES.map((l, i) => (
              <div className="proof-chip" key={i}>
                <span style={{ fontWeight: 600 }}>{l.lang}</span>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 28, height: 28, borderRadius: '50%',
                  background: 'oklch(from var(--accent) l c h / 0.1)',
                  fontSize: 11, fontWeight: 700, color: 'var(--accent)',
                  transition: 'background 0.5s var(--ease), color 0.5s var(--ease)'
                }}>{l.level}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="proof-subsection anim-in" data-anim>
          <h3 className="proof-subsection__title">References</h3>
          <div className="ref-cards">
            {REFERENCES.map((r, i) => {
              const Tag = r.linkedin ? 'a' : 'div';
              const linkProps = r.linkedin
                ? { href: r.linkedin, target: '_blank', rel: 'noopener noreferrer' } : {};
              return (
                <Tag className="ref-card ref-card--person" key={i} {...linkProps}>
                  <div className="ref-card__avatar" data-initials={initials(r.name)}>
                    {r.photo && (
                      <img src={r.photo} alt={r.name}
                        onError={(e) => { e.target.style.display = 'none'; }} />
                    )}
                  </div>
                  <div className="ref-card__body">
                    <div className="ref-card__name">{r.name}</div>
                    <div className="ref-card__role">{r.role}</div>
                    <div className="ref-card__avail">{r.note}</div>
                  </div>
                </Tag>
              );
            })}
          </div>
        </div>

        <div className="proof-subsection anim-in" data-anim>
          <h3 className="proof-subsection__title">Education</h3>
          <p className="t-small">{"Bachelor of Engineering \u2014 Visvesvaraya Technological University (2010\u20132014) \u00B7 Salt Lake School, Kolkata (1997\u20132010)"}</p>
        </div>
      </div>
    </section>
  );
}

/* --- Contact / CTA --- */

function ContactSection() {
  const { lens, locked } = React.useContext(LensContext);
  const [submitted, setSubmitted] = React.useState(false);
  const resumeLink = lens === 'eng' ? 'assets/resume-eng.html' : 'assets/resume-pm.html';

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  };

  const ctaHeadline = locked
    ? (lens === 'eng'
      ? "Looking for an engineering leader who ships resilient financial systems? Let\u2019s talk."
      : "Need a technical product manager who turns fintech complexity into outcomes? Let\u2019s talk.")
    : "Whether you need an engineering leader or a technical product owner for financial systems \u2014 let\u2019s talk.";

  return (
    <section className="section section--dark contact-section" id="contact">
      <div className="container">
        <div className="section-header anim-in" data-anim>
          <p className="t-label" style={{ color: 'var(--ink-3)' }}>Get in Touch</p>
          <h2 className="t-display" style={{ color: 'var(--bg)' }}>
            {ctaHeadline}
          </h2>
        </div>

        <div className="anim-in" data-anim style={{ marginBottom: 48 }}>
          <a href={resumeLink} target="_blank" className="btn btn--dark" style={{ marginRight: 16 }}>
            {"Download " + (lens === 'eng' ? 'Engineering' : 'Product') + " R\u00e9sum\u00e9"}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
          </a>
        </div>

        <div className="contact-links anim-in" data-anim>
          <a href="mailto:avikgngl@gmail.com" className="contact-link">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline>
            </svg>
            avikgngl@gmail.com
          </a>
          <a href="tel:+919900878571" className="contact-link">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path>
            </svg>
            +91 9900 878 571
          </a>
          <a href="https://linkedin.com/in/avik-ganguly-52650a58/" target="_blank" rel="noopener" className="contact-link">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
            </svg>
            LinkedIn
          </a>
          <span className="contact-link" style={{ cursor: 'default' }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path><circle cx="12" cy="10" r="3"></circle>
            </svg>
            Bengaluru, India
          </span>
        </div>

        <form className="contact-form anim-in" data-anim onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="cf-name">Name</label>
            <input type="text" id="cf-name" placeholder="Your name" required />
          </div>
          <div className="form-group">
            <label htmlFor="cf-company">Company</label>
            <input type="text" id="cf-company" placeholder="Your company" />
          </div>
          <div className="form-group">
            <label htmlFor="cf-role">Role you're hiring for</label>
            <select id="cf-role" defaultValue={lens === 'eng' ? 'eng-leader' : 'tech-pm'} key={lens}>
              <option value="eng-leader">Head of Engineering / Engineering Leader</option>
              <option value="tech-pm">Senior Technical Product Manager</option>
              <option value="other">Other</option>
            </select>
          </div>
          <div className="form-group">
            <label htmlFor="cf-msg">Message</label>
            <textarea id="cf-msg" placeholder="Tell me about the opportunity..." rows="4"></textarea>
          </div>
          <button type="submit" className="btn btn--primary" style={{ width: '100%', justifyContent: 'center' }}>
            {submitted ? '\u2713 Message Sent' : 'Send Message'}
          </button>
        </form>
      </div>
    </section>
  );
}

/* --- Footer --- */

function Footer() {
  const links = [
    { label: 'LinkedIn', url: 'https://linkedin.com/in/avik-ganguly-52650a58/' },
    { label: 'GitHub', url: 'https://github.com/avikganguly01' },
    { label: 'Stack Overflow', url: 'https://stackoverflow.com/users/1709700/avik' },
    { label: 'Blog', url: 'https://avik-ganguly.blogspot.in' },
    { label: 'Email', url: 'mailto:avikgngl@gmail.com' },
  ];

  return (
    <footer className="footer" style={{ background: 'var(--ink)' }}>
      <div className="container footer__inner">
        <span className="footer__copy">{"\u00A9 2026 Avik Ganguly"}</span>
        <div className="footer__links">
          {links.map((l, i) => (
            <a key={i} href={l.url} target="_blank" rel="noopener noreferrer">{l.label}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ProofPresence, ContactSection, Footer });