/* portfolio.jsx — alternating feature rows (default) or grid cards.
   Real media: SEO screenshots (img) + AI demos (video). */

const PF_IMG_IGAMING = 'uploads/iGaming%20SEO%20Growth%20%26%20Traffic%20Scaling%20-%20Casino%20%26%20Affiliate%20Network.jpg';
const PF_IMG_FOXXINA = 'uploads/Foxxina.jpg';

const PORTFOLIO = [
  {
    cat: 'SEO', type: 'img', media: PF_IMG_IGAMING,
    title: 'iGaming SEO growth & traffic scaling',
    sub: 'Casino & affiliate network · UK market',
    desc: 'End-to-end SEO for a network of iGaming and casino affiliate sites — advanced on-page optimisation, technical fixes and white-hat link campaigns driving sustainable organic growth.',
    stats: [{ n: '0→35K+', l: 'Organic / 3 mo' }, { n: '4.5K', l: 'Referring domains' }, { n: '60K', l: 'Peak organic' }],
    wins: [
      'Scaled from 0 to 35K+ organic visits in 3 months using white-hat practices and content mapping',
      'Built high-quality backlink networks across Slot, Poker and Sports Betting markets',
      'Audited with Ahrefs, Search Console and Screaming Frog to lift technical health',
    ],
    tags: ['Technical SEO', 'Link building', 'Keyword research', 'Ahrefs'],
  },
  {
    cat: 'SEO', type: 'img', media: PF_IMG_FOXXINA,
    title: 'Foxxina — organic acquisition',
    sub: 'Affiliate platform · Search Console verified',
    desc: 'A full-funnel SEO programme combining on-page optimisation, content strategy and backlink acquisition — verified by a clean upward trend in Search Console clicks and impressions.',
    stats: [{ n: '18.6K', l: 'Clicks' }, { n: '240K', l: 'Impressions' }, { n: '7.7%', l: 'Avg. CTR' }],
    wins: [
      'Grew clicks and impressions on a consistent upward curve over the reporting window',
      'Optimised across diverse niches — casino, real estate, wellness and more',
      'Improved average position to 13.6 through technical and content SEO',
    ],
    tags: ['On-page SEO', 'Off-page SEO', 'Backlink strategy', 'Search Console'],
  },
  {
    cat: 'AI Automation', type: 'video', media: 'uploads/Ai%20voice%20assistant.mp4',
    title: 'AI voice assistant',
    sub: 'Conversational phone & voice agent',
    desc: 'A natural-language voice agent that answers calls, handles FAQs and books appointments around the clock — capturing every lead even when the team is offline.',
    stats: [{ n: '24/7', l: 'Availability' }, { n: '<2s', l: 'Response time' }, { n: '80%', l: 'Calls handled' }],
    wins: [
      'Understands intent and responds naturally in real time',
      'Books, reschedules and routes calls without human handoff',
      'Logs every interaction straight into the CRM',
    ],
    tags: ['Voice AI', 'Call automation', 'CRM integration'],
  },
  {
    cat: 'AI Automation', type: 'video', media: 'uploads/AI%20Automation.mp4',
    title: 'AI automation workflows',
    sub: 'End-to-end lead & ops automation',
    desc: 'Connected workflows that link forms, CRM and email so leads are captured, qualified and nurtured automatically — removing the manual busywork that slows growth.',
    stats: [{ n: '100%', l: 'Lead capture' }, { n: '10+ hrs', l: 'Saved / week' }, { n: '0', l: 'Manual steps' }],
    wins: [
      'Triggers nurture sequences the moment a lead arrives',
      'Syncs data across tools with no copy-paste',
      'Surfaces qualified leads to sales in real time',
    ],
    tags: ['Workflow automation', 'Lead nurture', 'Integrations'],
  },
  {
    cat: 'AI Automation', type: 'video', media: 'uploads/AI%20blog%20Agent.mp4',
    title: 'AI blog agent',
    sub: 'Autonomous SEO content engine',
    desc: 'An autonomous agent that researches topics, drafts SEO-optimised articles and publishes on schedule — keeping the content engine running without a full editorial team.',
    stats: [{ n: '5×', l: 'Faster output' }, { n: 'SEO', l: 'Optimised' }, { n: 'Auto', l: 'Publishing' }],
    wins: [
      'Researches keywords and builds briefs automatically',
      'Drafts on-brand, structured, SEO-ready articles',
      'Publishes to the CMS on a set cadence',
    ],
    tags: ['Generative AI', 'Content automation', 'SEO'],
  },
];

function PfMedia({ item }) {
  const { Badge } = window.MacnitechDesignSystem_13fddf;
  return (
    <div className="pf-media">
      <div className="pf-media__tag"><Badge tone="accent" solid>{item.cat}</Badge></div>
      {item.type === 'video'
        ? <video src={item.media} muted loop playsInline controls preload="metadata" />
        : <img src={item.media} alt={item.title} loading="lazy" />}
    </div>
  );
}

function Portfolio({ variant = 'rows' }) {
  const { Tag, Button } = window.MacnitechDesignSystem_13fddf;
  return (
    <section className="section" id="portfolio" data-screen-label="Portfolio">
      <div className="mt-container">
        <div className="section-head reveal">
          <span className="eyebrow eyebrow--tick">Selected work</span>
          <h2>Outcomes, not outputs.</h2>
          <p className="lead">A look at recent engagements across SEO and AI automation — with the numbers behind them.</p>
        </div>

        {variant === 'grid' ? (
          <div className="pf-grid">
            {PORTFOLIO.map((item) => (
              <article className="card card--hover reveal" key={item.title}>
                <div className="pf-cardmedia">
                  {item.type === 'video'
                    ? <video src={item.media} muted loop playsInline controls preload="metadata" />
                    : <img src={item.media} alt={item.title} loading="lazy" />}
                </div>
                <div className="pf-cardbody">
                  <span className="pf-cat">{item.cat}</span>
                  <h3 style={{ fontSize: '1.5rem', margin: '0.4rem 0 0' }}>{item.title}</h3>
                  <p style={{ color: 'var(--text-body)', margin: '0.6rem 0 0', fontSize: 'var(--text-sm)' }}>{item.desc}</p>
                  <div className="pf-tags">{item.tags.slice(0, 3).map((t) => <Tag key={t}>{t}</Tag>)}</div>
                </div>
              </article>
            ))}
          </div>
        ) : (
          <div className="pf">
            {PORTFOLIO.map((item, i) => (
              <article className={'pf-item' + (i % 2 ? ' pf-item--flip' : '')} key={item.title}>
                <div className="reveal"><PfMedia item={item} /></div>
                <div className="pf-content reveal">
                  <span className="pf-cat">{item.cat}</span>
                  <h3>{item.title}</h3>
                  <p style={{ color: 'var(--text-muted)', margin: '0.4rem 0 0', fontFamily: 'var(--font-label)', fontSize: '12px', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{item.sub}</p>
                  <p>{item.desc}</p>
                  <div className="pf-stats">
                    {item.stats.map((s) => (
                      <div className="pf-stat" key={s.l}><div className="n">{s.n}</div><div className="l">{s.l}</div></div>
                    ))}
                  </div>
                  <ul className="pf-wins">
                    {item.wins.map((w) => <li key={w}><Icon name="check" size={17} stroke={2.3} />{w}</li>)}
                  </ul>
                  <div className="pf-tags">{item.tags.map((t) => <Tag key={t}>{t}</Tag>)}</div>
                </div>
              </article>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio });