// Ashrah Painting — Past Projects + Field Feed (Instagram window)
// Hung off window at bottom so the entry script can reach it.

const { useState: usePortfolioState } = React;

// ─────────────────────────── PAST PROJECTS ───────────────────────────
function PastProjects() {
  const projects = [
    {
      name: 'Egg Manitoba facility repaint',
      lede: '8,000 sqft industrial facility, fully repainted — completed over 4 weekends to keep the plant running Monday to Friday.',
      stats: [ ['8,000', 'sqft'], ['4', 'weekends'], ['0', 'production days lost'] ],
      photos: [
        { id: 'egg-1', src: 'assets/project-egg-manitoba-1.jpeg' },
        { id: 'egg-2', src: 'assets/project-egg-manitoba-2.jpeg' },
        { id: 'egg-3', src: 'assets/project-egg-manitoba-3.jpeg' },
        { id: 'egg-4', src: 'assets/project-egg-manitoba-4.jpeg' },
        { id: 'egg-5', src: 'assets/project-egg-manitoba-5.jpeg' },
      ],
    },
    {
      name: 'Richardson Building office fit-up',
      lede: 'Full office fit-up repaint at the Richardson Building — walls, columns and common areas finished around an active tenant schedule.',
      stats: [ ['Downtown', 'Winnipeg, MB'], ['Fit-up', 'Scope'] ],
      photos: [
        { id: 'richardson-1', src: 'assets/project-richardson-1.jpeg' },
        { id: 'richardson-2', src: 'assets/project-richardson-2.jpeg' },
        { id: 'richardson-3', src: 'assets/project-richardson-3.jpeg' },
        { id: 'richardson-4', src: 'assets/project-richardson-4.jpeg' },
        { id: 'richardson-5', src: 'assets/project-richardson-5.jpeg' },
      ],
    },
    {
      name: 'The Fitual studio',
      lede: 'Boutique fitness studio fit-up — locker room, reformer studio and lobby finished to a clean, hospitality-grade standard.',
      stats: [ ['Studio', 'Fit-up'], ['Winnipeg', 'MB'] ],
      photos: [
        { id: 'fitual-2', src: 'assets/project-fitual-2.jpeg' },
        { id: 'fitual-4', src: 'assets/project-fitual-4.jpeg' },
        { id: 'fitual-5', src: 'assets/project-fitual-5.jpeg' },
      ],
    },
    {
      name: '71 Martha (Main Street project)',
      lede: 'Main Street property repaint — 71 Martha finished top to bottom as part of an ongoing revitalization push.',
      stats: [ ['Main Street', 'Winnipeg, MB'] ],
      photos: [
        { id: 'martha-2', src: 'assets/project-martha-2.jpeg' },
        { id: 'martha-3', src: 'assets/project-martha-3.jpeg' },
        { id: 'martha-4', src: 'assets/project-martha-4.jpeg' },
      ],
    },
    {
      name: 'Amazon Hub Center',
      lede: 'Logistics hub repaint completed around live warehouse operations — no disruption to shipping schedules.',
      stats: [ ['Logistics', 'Facility'] ],
      photos: [
        { id: 'amazonhub-1', src: 'assets/project-amazonhub-1.jpeg' },
        { id: 'amazonhub-2', src: 'assets/project-amazonhub-2.jpeg' },
        { id: 'amazonhub-4', src: 'assets/project-amazonhub-4.jpeg' },
        { id: 'amazonhub-5', src: 'assets/project-amazonhub-5.jpeg' },
      ],
    },
  ];
  return (
    <section id="work" className="work" data-screen-label="06 Past projects">
      <div className="section-coord"><span className="dot" /><span>06 / Portfolio</span></div>
      <div className="work-head">
        <div>
          <div className="eyebrow">Recent work</div>
          <h2>Projects <em>on the record.</em></h2>
        </div>
      </div>

      {projects.map((p, pi) => (
        <div className="work-project" key={pi}>
          <div className="work-project-head">
            <div className="work-project-name">{p.name}</div>
            <p className="work-lede">{p.lede}</p>
          </div>
          <div className="work-stats-bar">
            {p.stats.map(([v, l], i) => (
              <div key={i}><b>{v}</b><span>{l}</span></div>
            ))}
          </div>
          <div className="work-photo-grid">
            {p.photos.map((ph, i) => (
              <div className="work-photo" key={i}>
                <img src={ph.src} alt={`${p.name}, photo ${i + 1}`} />
              </div>
            ))}
          </div>
        </div>
      ))}
    </section>
  );
}

// ─────────────────────────── CLIENT PATHWAYS ───────────────────────────
function Pathways() {
  const tracks = [
    {
      t: 'General Contractors',
      items: ['Detailed scope review', 'Accurate commercial pricing', 'Reliable manpower', 'Coordination with trades', 'Daily reporting', 'Deficiency completion', 'Final cleaning and closeout'],
    },
    {
      t: 'Property Managers',
      items: ['Occupied-building repainting', 'Hallways and common areas', 'Suite turnover painting', 'Flexible scheduling', 'Clean work areas', 'Consistent finishes', 'Ongoing maintenance support'],
    },
  ];
  return (
    <section id="pathways" className="pathways" data-screen-label="05 Pathways">
      <div className="section-coord"><span className="dot" /><span>05 / Pathways</span></div>
      <div className="pathways-head">
        <div className="eyebrow">Built for how you work</div>
        <h2>Two ways in. <em>One standard.</em></h2>
      </div>
      <div className="pathways-grid">
        {tracks.map(tr => (
          <div className="pathway-card" key={tr.t}>
            <div className="pathway-h">For {tr.t}</div>
            <ul className="pathway-list">
              {tr.items.map(it => (
                <li key={it}><span className="pathway-dot" />{it}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────── ABOUT ───────────────────────────
function About() {
  return (
    <section id="about" className="about" data-screen-label="07 About">
      <div className="section-coord"><span className="dot" /><span>07 / About</span></div>
      <div className="about-grid">
        <div className="about-copy">
          <div className="eyebrow">About us</div>
          <h2>Built by tradesmen. <em>Run like a tech team.</em></h2>
          <p>
            We built Lumia to make sure every site finishes on time and on budget. Over the last four years, we've recorded every issue a superintendent or caretaker ever raised on our jobs — and made sure we came back with a solution.
          </p>
          <p>
            Our mission: give general contractors a client for life, and give property managers a building tenants never leave because of how it looks. We designed our system to run as easy and smooth as possible on-site — and for facility managers, our goal is simple: never stop your operation, never hurt your production.
          </p>
        </div>
        <div className="about-media">
          <image-slot id="about-photo" shape="rounded" fit="cover" placeholder="Drop a crew or site photo"></image-slot>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────── SOCIAL LINKS ───────────────────────────
function SocialLinks() {
  const links = [
    { label: 'Instagram', handle: '@ashrah_painting', href: 'https://www.instagram.com/ashrah_painting' },
    { label: 'LinkedIn', handle: 'Ashrah Painting', href: 'https://www.linkedin.com/company/ashrah-painting' },
  ];
  return (
    <section id="social" className="social" data-screen-label="08 Social">
      <div className="section-coord"><span className="dot" /><span>08 / Social</span></div>
      <div className="social-head">
        <div className="eyebrow">Follow along</div>
        <h2>Find us <em>elsewhere.</em></h2>
      </div>
      <div className="social-links">
        {links.map(l => (
          <a key={l.label} href={l.href} target="_blank" rel="noopener" className="social-link">
            <span className="social-link-label">{l.label}</span>
            <span className="social-link-handle">{l.handle}</span>
            <span className="arrow">↗</span>
          </a>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { PastProjects, Pathways, About, SocialLinks });