/* IAMAI marketing — /portfolio page */
const { useEffect } = React;

// ── Project data ──────────────────────────────────────────────
const PROJECTS = [
  {
    id: "osweet",
    title: "O'Sweet",
    sub: "Full Business Operating System",
    industry: "Artisanal pastry · Témara, Morocco",
    color: "#a87ee6",
    gradient: "linear-gradient(135deg, #1a1235, #2d1b4a)",
    desc: "A complete P&L dashboard for the owner, a payroll app for staff, and a full e-commerce website with WhatsApp checkout. Three interfaces for one pastry shop — built so Sahar can focus on baking, not bookkeeping.",
    pills: ["P&L Dashboard", "E-commerce", "Staff payroll", "WhatsApp checkout", "3 interfaces"],
    features: [
      "CEO revenue dashboard with cost tracking and margin visibility",
      "Staff clock-in app with real-time salary estimate",
      "E-commerce with cake catalogue and WhatsApp checkout",
      "Revenue calendar with daily income view",
      "Net margin tracking (91.6% gross margin)",
    ],
    screens: [
      { label: "CEO Dashboard", img: null },
      { label: "Staff App", img: null },
      { label: "E-commerce", img: null },
    ],
  },
  {
    id: "printtrack",
    title: "PrintTrack",
    sub: "Order Pipeline + Invoicing + 3 Portals",
    industry: "Print shop · Los Angeles, CA",
    color: "#6BA3D6",
    gradient: "linear-gradient(135deg, #101c33, #1a3060)",
    desc: "Banky Printing was losing orders in WhatsApp threads. Now every job flows through a 6-stage pipeline, invoices generate automatically with PDF download, and customers track their own orders through a self-service portal.",
    pills: ["6-stage pipeline", "Auto invoicing", "3 portals", "Time tracking", "CRM"],
    features: [
      "6-stage Kanban pipeline (Received → Quoted → Paid → In Production → Ready → Completed)",
      "Auto-numbered invoicing (INV-YYYY-NNNN) with PDF generation",
      "Customer self-service portal — order status, invoices, file uploads",
      "Staff time tracking with clock in/out",
      "Role-based access: owner sees everything, staff sees orders, clients see their jobs",
    ],
    screens: [
      { label: "Pipeline", img: "screenshots/printtrack-pipeline.png" },
      { label: "Invoices", img: "screenshots/printtrack-invoices.png" },
      { label: "Client Portal", img: null },
    ],
  },
  {
    id: "cnk",
    title: "CNK Collision",
    sub: "Auto Body Shop CRM + Operational Alerts",
    industry: "Auto body · South Gate, LA",
    color: "#e05a3c",
    gradient: "linear-gradient(135deg, #2a1212, #4a1e1e)",
    desc: "An auto body shop that needed to know which cars are in the shop, where each one is in the repair process, and which ones are running late — before the customer calls. The system tracks vehicles by license plate and flags jobs past their ETA.",
    pills: ["Vehicle CRM", "ETA alerts", "License plates", "Analytics"],
    features: [
      "Job pipeline with 6 stages (Received → Diagnosing → Awaiting Parts → In Repair → Ready → Completed)",
      "Vehicle tracking by license plate — multiple vehicles per customer",
      "Past ETA operational alerts — 'these 7 jobs need attention'",
      "Stage distribution analytics with weekly summary",
      "Customer CRM with visit history and active job count",
    ],
    screens: [
      { label: "Jobs Pipeline", img: "screenshots/cnk-jobs.png" },
      { label: "Analytics", img: "screenshots/cnk-analytics.png" },
      { label: "Customers", img: "screenshots/cnk-customers.png" },
    ],
  },
  {
    id: "amfitness",
    title: "A&M Fitness",
    sub: "Studio CRM + Student Portal + Website Redesign",
    industry: "Personal training · North Hollywood, CA",
    color: "#d4943c",
    gradient: "linear-gradient(135deg, #1a1508, #3d2a0a)",
    desc: "Aaron and Mylan were running their studio on WhatsApp and memory. Now they have a full CRM with lead pipeline, session scheduling, analytics, and a student portal where clients track their own transformation.",
    pills: ["Lead pipeline", "Scheduling", "Analytics", "Student portal", "Website"],
    features: [
      "Lead pipeline (New → Contacted → Converted) with one-click convert",
      "Weekly calendar with session Accept/Decline and color coding",
      "Per-trainer analytics — sessions, revenue, clients, AT RISK / CHURNED flags",
      "Student portal: transformation projection, progress photos with consent, session booking",
      "Full website redesign delivered in 2 directions (warm editorial + sport-forward)",
    ],
    screens: [
      { label: "Dashboard", img: "screenshots/amfitness-dashboard.png" },
      { label: "Analytics", img: "screenshots/amfitness-analytics.png" },
      { label: "Student Portal", img: "screenshots/amfitness-portal.png" },
    ],
  },
  {
    id: "meditrack",
    title: "MediTrack",
    sub: "Medicare Intake CRM + Compliance Audit",
    industry: "Healthcare · Medicare intake",
    color: "#4d9be8",
    gradient: "linear-gradient(135deg, #0c1a30, #153060)",
    desc: "A healthcare company needed to track patient intakes from first contact to admission, monitor agent performance, and maintain a full audit trail for compliance. Every login, every action, every view — logged and searchable.",
    pills: ["Intake CRM", "Audit log", "Agent tracking", "Compliance", "5-step wizard"],
    features: [
      "28+ patient intakes with full lifecycle tracking (App Sent → Admitted → Touchdown)",
      "5-step guided intake wizard for field agents (mobile-first)",
      "Agent performance analytics — intakes per agent, care type breakdown",
      "HIPAA-grade audit log with 500+ entries — every login and view recorded",
      "Manager → Agent feedback loop on rejections with notes",
    ],
    screens: [
      { label: "Intakes", img: "screenshots/meditrack-intakes.png" },
      { label: "Analytics", img: "screenshots/meditrack-analytics.png" },
      { label: "Audit Log", img: "screenshots/meditrack-audit.png" },
    ],
  },
  {
    id: "bertini",
    title: "Bertini Inventory OS",
    sub: "Inventory + POS + Stock Alerts",
    industry: "Streetwear brand · Los Angeles, CA",
    color: "#22c55e",
    gradient: "linear-gradient(135deg, #0a1f0a, #1a3a1a)",
    desc: "House of Bertini needed to know what's in stock, what's selling, and who sold it. A full inventory management system with POS sales logging, staff attribution, and automatic low-stock alerts.",
    pills: ["Inventory", "POS sales", "Stock alerts", "Staff attribution"],
    features: [
      "185 SKUs tracked with category filters and stock status badges",
      "POS sale logging with live stock count and staff attribution",
      "Low-stock alert system with per-product thresholds",
      "Revenue KPIs and sales-by-category breakdown",
      "Monthly revenue chart with product performance ranking",
    ],
    screens: [
      { label: "Dashboard", img: null },
      { label: "Inventory", img: null },
      { label: "Sales", img: null },
    ],
  },
  {
    id: "picaloca",
    title: "Pica Loca Mangonadas",
    sub: "Bilingual Landing Page + Digital Menu",
    industry: "Street food · South Los Angeles",
    color: "#f59e0b",
    gradient: "linear-gradient(135deg, #3D2A0A, #6B4D1A)",
    desc: "A street food vendor at 76th & Broadway needed a website that felt as vibrant as their food. Bilingual EN/ES throughout, every menu item with real photography, and Instagram DM ordering.",
    pills: ["Bilingual EN/ES", "Digital menu", "Photography", "Instagram ordering"],
    features: [
      "Bilingual Spanish/English throughout — all content in both languages",
      "Digital menu with real product photography and flavor tags",
      "Location, hours, and payment info (Cash & Zelle)",
      "Instagram DM ordering integration",
      "Mobile-first design optimized for the local community",
    ],
    screens: [
      { label: "Hero", img: "screenshots/picaloca-hero.png" },
      { label: "Menu", img: "screenshots/picaloca-menu.png" },
      { label: "Location", img: "screenshots/picaloca-location.png" },
    ],
  },
];

// ── Mascot ────────────────────────────────────────────────────
function Mascot({ size = 32 }) {
  return (
    <svg viewBox="0 0 400 400" width={size} height={size} style={{ display: "block" }}>
      <defs>
        <linearGradient id="pmf" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop offset="0%" stopColor="#1c294f" />
          <stop offset="100%" stopColor="#0a1025" />
        </linearGradient>
        <linearGradient id="pel" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop offset="0%" stopColor="#9aafc8" />
          <stop offset="100%" stopColor="#5a7a9e" />
        </linearGradient>
        <linearGradient id="per" x1="50%" y1="0%" x2="50%" y2="100%">
          <stop offset="0%" stopColor="#c8ddf0" />
          <stop offset="100%" stopColor="#6ba3d6" />
        </linearGradient>
      </defs>
      <rect x="60" y="60" width="280" height="280" rx="72" fill="url(#pmf)" />
      <rect x="140" y="120" width="36" height="160" rx="18" fill="url(#pel)" />
      <rect x="224" y="120" width="36" height="160" rx="18" fill="url(#per)" />
      <rect x="145" y="126" width="26" height="76" rx="13" fill="rgba(255,255,255,0.18)" />
      <rect x="229" y="126" width="26" height="76" rx="13" fill="rgba(255,255,255,0.18)" />
    </svg>
  );
}

// ── Nav ───────────────────────────────────────────────────────
function PortfolioNav() {
  return (
    <nav style={{
      position: "sticky", top: 0, zIndex: 40,
      background: "rgba(11,14,24,0.85)",
      backdropFilter: "blur(20px)",
      WebkitBackdropFilter: "blur(20px)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div style={{
        maxWidth: "var(--max-w)", margin: "0 auto",
        padding: "0 var(--px)",
        display: "flex", alignItems: "center",
        justifyContent: "space-between", height: 64,
      }}>
        <a href="/" style={{
          display: "flex", alignItems: "center", gap: 10,
          fontWeight: 600, fontSize: 15, color: "var(--fg)",
          textDecoration: "none",
        }}>
          <Mascot size={32} />
          IAMAI
        </a>
        <a href="/#contact" style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "10px 24px",
          background: "linear-gradient(135deg, var(--accent), var(--steel))",
          color: "var(--bg)", borderRadius: 999,
          fontSize: 13, fontWeight: 600, textDecoration: "none",
          transition: "all .3s",
        }}>Book a free visit</a>
      </div>
    </nav>
  );
}

// ── Hero ──────────────────────────────────────────────────────
function PortfolioHero() {
  return (
    <div style={{ padding: "80px 0 60px", textAlign: "center" }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11,
        letterSpacing: "0.2em", textTransform: "uppercase",
        color: "var(--accent)", marginBottom: 14,
        display: "flex", alignItems: "center",
        justifyContent: "center", gap: 12,
      }}>
        <span style={{
          width: 28, height: 1.5,
          background: "linear-gradient(90deg, var(--accent), transparent)",
          display: "inline-block",
        }} />
        Portfolio
      </div>
      <h1 style={{
        fontFamily: "var(--font-display)",
        fontSize: "clamp(32px, 5vw, 52px)",
        fontWeight: 700, letterSpacing: "-0.025em",
        marginBottom: 16, color: "var(--fg)",
      }}>
        Systems we've{" "}
        <em style={{
          fontStyle: "italic", fontWeight: 400,
          background: "linear-gradient(135deg, var(--accent), var(--ice))",
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          backgroundClip: "text",
        }}>shipped.</em>
      </h1>
      <p style={{
        fontSize: 16, color: "var(--fg-2)",
        maxWidth: 520, margin: "0 auto", lineHeight: 1.7,
      }}>
        Real businesses. Real dashboards. Real results.
        Each one built by the same two people who'll build yours.
      </p>
      <div className="reveal" style={{
        display: "flex", gap: 40, justifyContent: "center",
        flexWrap: "wrap",
        marginTop: 32, paddingTop: 24, paddingBottom: 24,
        borderTop: "1px solid var(--line)",
        borderBottom: "1px solid var(--line)",
      }}>
        {[
          { val: "7", label: "Systems live" },
          { val: "6", label: "Industries" },
          { val: "3", label: "Countries" },
          { val: "<1wk", label: "Avg. delivery" },
        ].map((s) => (
          <div key={s.label}>
            <div style={{
              fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 700,
              background: "linear-gradient(135deg, var(--fg), var(--ice))",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              backgroundClip: "text",
            }}>{s.val}</div>
            <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 4 }}>{s.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Browser frame for screenshots ─────────────────────────────
function BrowserFrame({ url, src, label, color }) {
  return (
    <div>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        letterSpacing: "0.12em", textTransform: "uppercase",
        color: "var(--fg-3)", marginBottom: 8,
      }}>{label}</div>
      <div style={{
        borderRadius: 12, overflow: "hidden",
        border: `1px solid ${color}18`,
        boxShadow: `0 24px 80px rgba(0,0,0,0.4), 0 0 40px ${color}06`,
      }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 6,
          padding: "8px 12px",
          background: "rgba(255,255,255,0.02)",
          borderBottom: "1px solid rgba(255,255,255,0.04)",
        }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FF5F57" }} />
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#FEBC2E" }} />
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#28C840" }} />
          <div style={{
            flex: 1, height: 20,
            background: "rgba(255,255,255,0.03)", borderRadius: 5,
            marginLeft: 8, fontSize: 10,
            color: "rgba(255,255,255,0.2)",
            display: "flex", alignItems: "center",
            padding: "0 10px", fontFamily: "var(--font-mono)",
          }}>{url}</div>
        </div>
        <div style={{ background: "#0B0E14" }}>
          <img
            src={src}
            alt={label}
            style={{ width: "100%", display: "block" }}
            loading="lazy"
          />
        </div>
      </div>
    </div>
  );
}

// ── Screenshot placeholder ────────────────────────────────────
function ScreenPlaceholder({ label, color }) {
  return (
    <div>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 10,
        letterSpacing: "0.12em", textTransform: "uppercase",
        color: "var(--fg-3)", marginBottom: 8,
      }}>{label}</div>
      <div style={{
        background: "var(--surface)",
        border: `1px dashed ${color}30`,
        borderRadius: 10,
        minHeight: 200,
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center",
        gap: 8,
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.12em", textTransform: "uppercase",
          color: `${color}50`,
        }}>Screenshot coming</div>
        <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{label}</div>
      </div>
    </div>
  );
}

// ── Project section ───────────────────────────────────────────
function ProjectSection({ project }) {
  const renderScreen = (s, isMain) => {
    if (s.img) {
      return (
        <BrowserFrame
          key={s.label}
          url={isMain ? `${project.id}.app/dashboard` : `${project.id}.app`}
          src={s.img}
          label={s.label}
          color={project.color}
        />
      );
    }
    return <ScreenPlaceholder key={s.label} label={s.label} color={project.color} />;
  };

  const main = project.screens[0];
  const rest = project.screens.slice(1);

  return (
    <section
      id={project.id}
      className="reveal"
      style={{
        padding: "80px 0",
        borderTop: "1px solid var(--line)",
        position: "relative",
      }}
    >
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto", padding: "0 var(--px)" }}>

        {/* Header grid — description left, features right */}
        <div className="proj-header-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 60, marginBottom: 48,
          alignItems: "start",
        }}>
          <div className="reveal-left">
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              letterSpacing: "0.2em", textTransform: "uppercase",
              color: project.color, marginBottom: 14,
              display: "flex", alignItems: "center", gap: 10,
            }}>
              <span style={{
                width: 24, height: 1.5,
                background: `linear-gradient(90deg, ${project.color}, transparent)`,
                display: "inline-block",
              }} />
              {project.industry}
            </div>
            <h2 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(28px, 3.5vw, 38px)",
              fontWeight: 700, letterSpacing: "-0.02em",
              marginBottom: 6, color: "var(--fg)",
            }}>{project.title}</h2>
            <div style={{
              fontSize: 15, fontWeight: 500,
              color: project.color, marginBottom: 16,
            }}>{project.sub}</div>
            <p style={{
              fontSize: 14, color: "var(--fg-2)",
              lineHeight: 1.7, marginBottom: 20,
            }}>{project.desc}</p>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {project.pills.map((pill) => (
                <span key={pill} style={{
                  fontSize: 10, padding: "5px 12px",
                  borderRadius: 999,
                  border: `1px solid ${project.color}25`,
                  color: `${project.color}cc`,
                  fontFamily: "var(--font-mono)", letterSpacing: "0.04em",
                }}>{pill}</span>
              ))}
            </div>
          </div>

          <ul className="reveal-right" style={{
            listStyle: "none", padding: 0, margin: 0,
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            {project.features.map((f, i) => (
              <li key={i} style={{
                fontSize: 13, color: "var(--fg-2)",
                display: "flex", alignItems: "flex-start",
                gap: 8, lineHeight: 1.6,
              }}>
                <span style={{ color: project.color, flexShrink: 0, marginTop: 1 }}>→</span>
                {f}
              </li>
            ))}
          </ul>
        </div>

        {/* Screenshots — main on top, rest in row below */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
          {renderScreen(main, true)}

          {rest.length > 0 && (
            <div className="proj-screens-grid" style={{
              display: "grid",
              gridTemplateColumns: `repeat(${rest.length}, 1fr)`,
              gap: 12, marginTop: 4,
            }}>
              {rest.map((s) => renderScreen(s, false))}
            </div>
          )}
        </div>

      </div>
    </section>
  );
}

// ── CTA ───────────────────────────────────────────────────────
function PortfolioCTA() {
  return (
    <section style={{ padding: "0 0 80px" }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto", padding: "0 var(--px)" }}>
        <div className="reveal-scale" style={{
          background: "linear-gradient(135deg, var(--accent), var(--steel))",
          borderRadius: 16, padding: "56px 40px",
          textAlign: "center", position: "relative", overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", top: -80, right: -80,
            width: 350, height: 350,
            background: "radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 55%)",
            pointerEvents: "none",
          }} />
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(24px, 3.5vw, 36px)",
            fontWeight: 700, color: "var(--bg)",
            marginBottom: 12, position: "relative", zIndex: 1,
            letterSpacing: "-0.02em",
          }}>
            Want a system like these?{" "}
            <em style={{ fontStyle: "italic", fontWeight: 400 }}>Let's talk.</em>
          </h2>
          <p style={{
            fontSize: 15, color: "rgba(11,14,24,0.55)",
            maxWidth: 420, margin: "0 auto 28px",
            lineHeight: 1.6, position: "relative", zIndex: 1,
          }}>
            Ibrahim visits your shop. Oussama builds your system. Live in a week. From $799.
          </p>
          <a href="/#contact" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "14px 32px",
            background: "var(--bg)", color: "var(--accent)",
            borderRadius: 999, fontSize: 14, fontWeight: 600,
            textDecoration: "none", position: "relative", zIndex: 1,
            transition: "all .3s",
          }}>Book a free visit →</a>
        </div>
      </div>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────────
function PortfolioFooter() {
  return (
    <footer style={{
      padding: "40px 0",
      borderTop: "1px solid var(--line)",
      textAlign: "center",
    }}>
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto", padding: "0 var(--px)" }}>
        <div style={{
          display: "flex", alignItems: "center",
          justifyContent: "center", gap: 10, marginBottom: 10,
        }}>
          <Mascot size={22} />
          <span style={{ fontWeight: 600, fontSize: 14 }}>IAMAI</span>
        </div>
        <p style={{ fontSize: 12, color: "var(--fg-3)", margin: 0 }}>
          Two founders. One system at a time.
        </p>
      </div>
    </footer>
  );
}

// ── Reveal-on-scroll hook (mirrors app.jsx pattern) ───────────
const REVEAL_SELECTOR = ".reveal, .reveal-left, .reveal-right, .reveal-scale";
function useReveal() {
  useEffect(() => {
    if (!("IntersectionObserver" in window)) return;
    const root = document.documentElement;
    const els = Array.from(document.querySelectorAll(REVEAL_SELECTOR));
    requestAnimationFrame(() => {
      root.classList.add("js-reveal");
      requestAnimationFrame(() => {
        const reveal = (el) => el.classList.add("in");
        const io = new IntersectionObserver((entries) => {
          entries.forEach((e) => {
            if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); }
          });
        }, { threshold: 0.05, rootMargin: "0px 0px -40px 0px" });
        els.forEach((el) => {
          const r = el.getBoundingClientRect();
          if (r.top < window.innerHeight && r.bottom > 0) reveal(el);
          else io.observe(el);
        });
        setTimeout(() => els.forEach(reveal), 1800);
      });
    });
  }, []);
}

// ── Page mobile-stack styles (scoped to this page) ────────────
const PORTFOLIO_PAGE_STYLES = `
  @media (max-width: 900px) {
    .proj-header-grid {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
    .proj-screens-grid {
      grid-template-columns: 1fr !important;
    }
  }
`;

// ── App ───────────────────────────────────────────────────────
function PortfolioApp() {
  useReveal();

  return (
    <div style={{ background: "var(--bg)", minHeight: "100vh" }}>
      <style dangerouslySetInnerHTML={{ __html: PORTFOLIO_PAGE_STYLES }} />
      <PortfolioNav />
      <div style={{ maxWidth: "var(--max-w)", margin: "0 auto", padding: "0 var(--px)" }}>
        <PortfolioHero />
      </div>
      {PROJECTS.map((p) => (
        <ProjectSection key={p.id} project={p} />
      ))}
      <PortfolioCTA />
      <PortfolioFooter />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(PortfolioApp));