/* global React, Reveal, Icon */

// Real project data — from Sinux Consulting / Lohan's portfolio
window.REAL_PROJECTS = [
  {
    name: "Happy Clean Lawnscapes",
    url: "happycleanlawnscapes.com",
    href: "https://happycleanlawnscapes.com",
    category: "Service Business · Arizona, US",
    tags: ["Lawn Care", "Local SEO", "Lead Gen"],
    description: "High-converting local service website for a lawn care & landscaping business in Buckeye, AZ. Built to rank on Google and turn traffic into booked estimates.",
    accent: "#3a7d3a",
    screenshot: "assets/projects/happy-clean-lawnscapes.png",
  },
  {
    name: "Charan Invests",
    url: "charaninvests.com",
    href: "https://charaninvests.com",
    category: "Finance · Trading Community",
    tags: ["Trading", "Membership", "Whop"],
    description: "Platform for a 200K+ follower trading educator's paid community. Real-time trade alerts, live calls — 134 paid members and 14,000+ free community at launch.",
    accent: "#6c4fa0",
    screenshot: "assets/projects/charan-invests.png",
  },
  {
    name: "Dulu Dulu KL",
    url: "duludulukl.com",
    href: "https://duludulukl.com",
    category: "F&B · Kuala Lumpur",
    tags: ["Restaurant", "Brand Identity", "Reservation"],
    description: "Heritage-inspired café brand in PJ New Town serving nostalgic Malaysian comfort food. Warm, atmospheric web presence with menu and WhatsApp booking flow.",
    accent: "#c0622c",
    screenshot: "assets/projects/dulu-dulu.png",
  },
  {
    name: "Market Magicians",
    url: "marketmagicians.my",
    href: "https://marketmagicians.my",
    category: "Finance · Options Trading",
    tags: ["Options Trading", "Whop", "Community"],
    description: "Options trading community landing page. Bold editorial aesthetic with live ticker, 55+ Whop reviews, 5.0 rating, and daily live trading sessions front and center.",
    accent: "#b8962a",
    screenshot: "assets/projects/market-magicians.png",
  },
  {
    name: "Affordable Powersports",
    url: "affordablepowersportsllc.com",
    href: "https://affordablepowersportsllc.com",
    category: "Retail · Avondale, AZ",
    tags: ["Dealership", "Inventory", "US Client"],
    description: "Full inventory website for an Arizona powersports dealership. 4.6★ with 138 reviews. Built for SEO, showroom traffic, and financing inquiries.",
    accent: "#1a6fa0",
    screenshot: "assets/projects/affordable-powersports.png",
  },
];

// Browser-chrome card for displaying real shipped projects
function RealProjectCard({ p, index }) {
  return (
    <Reveal>
      <a
        href={p.href}
        target="_blank"
        rel="noopener noreferrer"
        className="card project-card-real"
        style={{
          display: "block",
          textDecoration: "none",
          color: "inherit",
          padding: 0,
          overflow: "hidden",
          height: "100%",
        }}
      >
        {/* Browser chrome */}
        <div style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          padding: "10px 14px",
          background: "rgba(255,255,255,0.025)",
          borderBottom: "1px solid var(--line-2)",
          fontSize: 11,
          fontFamily: "'JetBrains Mono', monospace",
          color: "var(--ink-3)",
        }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#ff5f57" }} />
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#febc2e" }} />
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#28c840" }} />
          <span style={{ flex: 1, textAlign: "center", color: "var(--ink-3)", letterSpacing: "0.02em" }}>
            {p.url}
          </span>
          <Icon.ext style={{ color: "var(--ink-4)", width: 12, height: 12 }} />
        </div>

        {/* Screenshot */}
        <div style={{
          position: "relative",
          aspectRatio: "16/9",
          overflow: "hidden",
          background: `linear-gradient(145deg, rgba(255,255,255,0.02), ${p.accent}10)`,
        }}>
          <img
            src={p.screenshot}
            alt={`${p.name} — ${p.url}`}
            loading="lazy"
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition: "top center",
              display: "block",
              transition: "transform .6s cubic-bezier(.2,.7,.2,1)",
            }}
          />
          {/* index number top-right */}
          {typeof index === "number" && (
            <div style={{
              position: "absolute",
              top: 12, right: 14,
              fontFamily: "'Michroma',sans-serif",
              fontSize: 10,
              color: "rgba(255,255,255,0.6)",
              letterSpacing: "0.18em",
              background: "rgba(0,0,0,0.5)",
              padding: "4px 8px",
              borderRadius: 4,
              backdropFilter: "blur(8px)",
            }}>
              {String(index + 1).padStart(2, "0")}
            </div>
          )}
        </div>

        {/* Body */}
        <div style={{ padding: "clamp(20px, 2.5vw, 28px)" }}>
          <div style={{
            fontSize: 11, letterSpacing: "0.15em",
            color: "var(--ink-3)", textTransform: "uppercase",
            marginBottom: 8,
            fontFamily: "'Poppins',sans-serif",
          }}>
            {p.category}
          </div>
          <h4 className="h4" style={{ marginBottom: 10, fontSize: "clamp(17px, 1.8vw, 20px)" }}>
            {p.name}
          </h4>
          <p style={{ color: "var(--ink-2)", fontSize: 13.5, lineHeight: 1.6, marginBottom: 16 }}>
            {p.description}
          </p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 16 }}>
            {p.tags.map((t) => (
              <span
                key={t}
                style={{
                  padding: "4px 10px",
                  fontSize: 11,
                  fontWeight: 500,
                  letterSpacing: "0.04em",
                  borderRadius: 999,
                  border: `1px solid ${p.accent}40`,
                  background: `${p.accent}14`,
                  color: p.accent,
                }}
              >
                {t}
              </span>
            ))}
          </div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            color: p.accent,
            fontSize: 13, letterSpacing: "0.03em",
            fontWeight: 500,
          }}>
            Visit site <Icon.arrow className="arrow" style={{ width: 14, height: 14 }} />
          </div>
        </div>
      </a>
    </Reveal>
  );
}

window.RealProjectCard = RealProjectCard;