/* Designs gallery + Selected Work strip — with StoryForge prototype gallery */

const DESIGN_ERAS_OTHER = [
  {
    id: 'fynarfin',
    title: 'Fynarfin Era',
    desc: 'Payment infrastructure products \u2014 from system architecture to user-facing dashboards.',
    items: [
      { id: 'payment-hub', title: 'Payment Hub', desc: 'Orchestration engine for digital payments. Watch the demo walkthrough.', type: 'video', videoId: 'IacQXEAevs8', thumbImg: 'assets/thumbs/fynarfin-payment-hub.jpg' },
      { id: 'payments-bb', title: 'Payments Building Block', desc: 'Reference implementation for GovStack digital public infrastructure.', type: 'link', url: 'https://payments.govstack.global/2-description', thumbImg: 'assets/thumbs/receipt-govstack.png' },
      { id: 'fynarfin-website', title: 'Fynarfin Website', desc: 'The company site I built and shipped — product positioning, brand, and team. Preserved here.', type: 'link', url: '../prototypes/fynarfin_website/index.html', thumbImg: 'assets/thumbs/fynarfin-website.png' },
    ],
  },
  {
    id: 'other',
    title: 'Other Projects',
    desc: 'Earlier work with qualitative research annotations and design process artifacts.',
    items: [
      { id: 'jammate', title: 'JamMate', desc: 'Jam-room booking, social feed, and jammate discovery app — mobile, web, and concept art.', type: 'link', url: '../prototypes/jammate/index.html', thumbImg: 'assets/thumbs/jammate.png' },
      { id: 'college-lexical', title: 'Visualizing Lexical Novelty', desc: 'Text-mining dashboard charting lexical novelty across popular fiction. Read the write-up on the blog.', type: 'link', url: 'https://avik-ganguly.blogspot.com/2012/03/visualizing-lexical-novelty-in-popular.html', thumbImg: 'assets/thumbs/college-lexical.jpg' },
      { id: 'college-openfest', title: 'Open Fest Management System', desc: 'Event-management dashboard for a college tech fest. Read the write-up on the blog.', type: 'link', url: 'https://avik-ganguly.blogspot.com/2014/04/open-fest-management-system.html', thumbImg: 'assets/thumbs/college-openfest.png' },
      { id: 'college-laundry', title: 'Open Laundry Management System', desc: 'Web dashboard for hostel laundry tracking and operations. Read the write-up on the blog.', type: 'link', url: 'https://avik-ganguly.blogspot.com/2012/10/open-laundry-management-system.html', thumbImg: 'assets/thumbs/college-laundry.png' },
    ],
  },
];

function PlayIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg>
  );
}
function ExpandIcon() {
  return (
    <svg width="24" height="24" 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>
  );
}
function LinkIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
      <polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
    </svg>
  );
}
function PinIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path>
      <circle cx="12" cy="9" r="2.5"></circle>
    </svg>
  );
}

function DesignCard({ item }) {
  const [loaded, setLoaded] = React.useState(false);
  const handleClick = () => {
    if (item.type === 'video' && !loaded) setLoaded(true);
    else if (item.type === 'link' && item.url) window.open(item.url, '_blank', 'noopener');
  };
  const iconMap = { prototype: <ExpandIcon />, video: <PlayIcon />, link: <LinkIcon />, annotated: <PinIcon /> };

  return (
    <div className="design-card" onClick={handleClick} role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter') handleClick(); }}>
      <div className="design-card__poster">
        {item.type === 'video' && loaded ? (
          <iframe
            src={'https://www.youtube.com/embed/' + item.videoId + '?autoplay=1&rel=0'}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
            allow="autoplay; encrypted-media" allowFullScreen title={item.title}></iframe>
        ) : item.thumbImg ? (
          <React.Fragment>
            <img src={item.thumbImg} alt={item.title + ' preview'} className="design-card__poster-img" loading="lazy" />
            {item.type === 'video' && (
              <div className="design-card__play-overlay"><PlayIcon /></div>
            )}
          </React.Fragment>
        ) : (
          <div className="design-card__poster-icon">{iconMap[item.type] || iconMap.link}</div>
        )}
      </div>
      <div className="design-card__info">
        <h4 className="design-card__title">{item.title}</h4>
        <p className="design-card__desc">{item.desc}</p>
      </div>
    </div>
  );
}

function DesignsSection() {
  return (
    <section className="section section--alt" id="designs">
      <div className="container">
        <div className="section-header anim-in" data-anim>
          <p className="t-label">Design &amp; Prototyping</p>
          <h2 className="t-display">Designs</h2>
          <p>Three eras of building \u2014 from AI-assisted prototyping to fintech infrastructure to early product experiments.</p>
        </div>

        {/* Post-AI Era — StoryForge gallery + Claude Design */}
        <div className="designs-era anim-in" data-anim>
          <h3 className="designs-era__title">Post-AI Era</h3>
          <p className="designs-era__desc">How I prototype and ship in the AI era with Lovable, Cursor and Claude. Surfing the Prompt to Context Engineering to Agentic AI wave.</p>
          <StoryForgeGallery />
        </div>

        {/* Fynarfin + Other eras */}
        {DESIGN_ERAS_OTHER.map((era) => (
          <div className="designs-era anim-in" data-anim key={era.id}>
            <h3 className="designs-era__title">{era.title}</h3>
            <p className="designs-era__desc">{era.desc}</p>
            <div className="designs-grid">
              {era.items.map((item) => <DesignCard key={item.id} item={item} />)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* --- Selected Work & Samples --- */

const WORK_ITEMS = [
  { title: 'Sample Functional Spec', desc: 'Mifos Hooks design \u2014 sample of my technical writing.', url: 'https://mifosforge.jira.com/wiki/display/MIFOSX/Hooks', thumbImg: 'assets/thumbs/receipt-mifos-hooks.png',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg> },
  { title: 'Open-Source Contribution', desc: 'Merged PR to Apache Fineract (Mifos X).', url: 'https://github.com/openMF/mifosx/pull/1063', thumbImg: 'assets/thumbs/receipt-fineract-pr.png',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> },
  { title: 'Project Tracker (Live)', desc: 'How I run delivery, in the open.', url: 'https://govstack-global.atlassian.net/jira/software/c/projects/PAY/issues', thumbImg: 'assets/thumbs/receipt-jira.png',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg> },
  { title: 'GovStack Use Cases', desc: 'Payments Building Block use case documentation.', url: 'https://payments.govstack.global/2-description', thumbImg: 'assets/thumbs/receipt-govstack.png',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"></path></svg> },
  { title: 'GitHub', desc: 'github.com/avikganguly01 · 1,092 contributions in 2016, my peak year', url: 'https://github.com/avikganguly01', thumbImg: 'assets/thumbs/receipt-github.png',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 17.07 3.633 16.7 3.633 16.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.295 24 12 24 5.37 18.63 0 12 0z"></path></svg> },
  { title: 'Stack Overflow', desc: 'stackoverflow.com/users/1709700/avik', url: 'https://stackoverflow.com/users/1709700/avik', thumbImg: 'assets/thumbs/receipt-stackoverflow.png',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="15" width="16" height="6" rx="1"></rect><path d="M6 15V9a2 2 0 012-2h8a2 2 0 012 2v6"></path><path d="M8 9V5a2 2 0 012-2h4a2 2 0 012 2v4"></path></svg> },
  { title: 'Blog', desc: 'avik-ganguly.blogspot.in', url: 'https://avik-ganguly.blogspot.in', thumbImg: 'assets/thumbs/receipt-blog.png',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg> },
];

/* --- GitHub Contribution Wall (Engineering Leader page only) --- */

// Year groups separated by the two career transitions. Heatmaps wrap in a
// responsive grid — no horizontal scrolling.
const GH_YEARS_1 = [
  { year: '2015', count: '1,074', img: 'assets/thumbs/gh-2015.png' },
  { year: '2016', count: '1,092', img: 'assets/thumbs/gh-2016.png', peak: true },
  { year: '2017', count: '616',   img: 'assets/thumbs/gh-2017.png' },
  { year: '2018', count: '211',   img: 'assets/thumbs/gh-2018.png' },
];
const GH_YEARS_2 = [
  { year: '2021', count: '248',   img: 'assets/thumbs/gh-2021.png' },
  { year: '2022', count: '792',   img: 'assets/thumbs/gh-2022.png' },
  { year: '2023', count: '289',   img: 'assets/thumbs/gh-2023.png' },
];
const GH_YEARS_3 = [
  { year: '2026', count: '515',   img: 'assets/thumbs/gh-2026.png' },
];

function GhYearCard({ node }) {
  return (
    <div className={'gh-year' + (node.peak ? ' gh-year--peak' : '')} role="listitem">
      <img className="gh-year__map" src={node.img} alt={node.count + ' GitHub contributions in ' + node.year} loading="lazy" />
      <div className="gh-year__meta">
        <span className="gh-year__num">{node.year}</span>
        <span className="gh-year__count">{node.count}{node.peak ? ' · peak' : ''}</span>
      </div>
    </div>
  );
}

function GhTransition({ title, span, note }) {
  return (
    <div className="gh-band" role="separator">
      <div className="gh-band__span">{span}</div>
      <div className="gh-band__title">{title}</div>
      <div className="gh-band__note">{note}</div>
    </div>
  );
}

function ContributionWall() {
  // Locked to the Engineering Leader lens.
  const lens = (typeof window !== 'undefined' && window.PAGE_LENS) || 'eng';
  if (lens !== 'eng') return null;

  return (
    <section className="section section--alt" id="contributions">
      <div className="container">
        <div className="section-header anim-in" data-anim>
          <p className="t-label">Career Arc, in Commits</p>
          <h2 className="t-display">Contribution Wall</h2>
          <p>Eleven years of GitHub contributions — and the two transitions that reshaped how I work.</p>
        </div>

        <div className="gh-grid anim-in" data-anim role="list">
          {GH_YEARS_1.map((n) => <GhYearCard key={n.year} node={n} />)}
        </div>

        <GhTransition
          title="Specialist → Generalist"
          span="2018 mid – 2021 mid"
          note="Deep technical / specialist work broadens into a generalist range — architecture, delivery, and product." />

        <div className="gh-grid anim-in" data-anim role="list">
          {GH_YEARS_2.map((n) => <GhYearCard key={n.year} node={n} />)}
        </div>

        <GhTransition
          title="Eng-first PM → Product & Marketing-first Eng Manager"
          span="2023 – 2026"
          note="Shift from engineering-led product management to product- and marketing-led engineering leadership." />

        <div className="gh-grid anim-in" data-anim role="list">
          {GH_YEARS_3.map((n) => <GhYearCard key={n.year} node={n} />)}
        </div>
      </div>
    </section>
  );
}

function SelectedWork() {
  return (
    <section className="section" id="work">
      <div className="container">
        <div className="section-header anim-in" data-anim>
          <p className="t-label">Receipts</p>
          <h2 className="t-display">Selected Work &amp; Samples</h2>
          <p>Evidence a skeptical hiring manager can click to verify.</p>
        </div>
        <div className="work-grid anim-in anim-in--stagger" data-anim>
          {WORK_ITEMS.map((item, i) => (
            <a key={i} href={item.url} target="_blank" rel="noopener noreferrer" className={'work-card' + (item.thumbImg ? ' work-card--poster' : '')}>
              {item.thumbImg ? (
                <div className="work-card__thumb">
                  <img src={item.thumbImg} alt={item.title + ' preview'} loading="lazy" />
                </div>
              ) : (
                <div className="work-card__icon">{item.icon}</div>
              )}
              <div className="work-card__body">
                <div className="work-card__title">{item.title}</div>
                <div className="work-card__desc">{item.desc}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DesignsSection, SelectedWork, ContributionWall });