/* Home page sections — about preview, services preview, portfolio preview, etc. */

const { useState: useS_HP, useEffect: useE_HP } = React;

// ── Marquee of technologies ─────────────────────────────────────────
function TechMarquee() {
  const techs = [
    "Swift", "SwiftUI", "Objective-C", "iOS", "watchOS", "tvOS",
    "React", "Next.js", "TypeScript", "TailwindCSS",
    "Node.js", "Express", "Firebase", "AWS", "GCP", "Cloudflare",
    "Python", "Kotlin", "Jetpack Compose",
    "BLE", "iBeacons", "NFC",
    "Multi-Agent Systems", "RAG", "Fine-tuning", "MCP", "LangGraph",
    "TestFlight", "Crashlytics", "Fastlane", "CI/CD"
  ];
  const dup = [...techs, ...techs];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {dup.map((t, i) => (
          <span key={i} className="marquee-item">
            <span className="marquee-bullet">◆</span> {t}
          </span>
        ))}
      </div>
    </div>
  );
}

// ── About preview ───────────────────────────────────────────────────
function AboutPreview() {
  return (
    <section className="rr-section about-preview">
      <div className="rr-container">
        <div className="about-grid">
          <div className="about-copy">
            <SectionHeader
              kicker="01 — about"
              title={<>HI! I&apos;M <span className="rr-grad-text">RICARDO</span>.</>}
            />
            <p className="rr-prose">
              I&apos;m an <b>agentic AI engineer</b> and full-stack developer
              with deep specialization in iOS, iPadOS, watchOS, and tvOS — building
              scalable, robust applications and APIs with a relentless focus on
              high performance, seamless integration, and enterprise-level security.
            </p>
            <p className="rr-prose">
              My work spans the full spectrum of modern software, from crafting
              exceptional mobile experiences on Apple platforms to architecting
              scalable web solutions with React paired with Firebase, GCP, AWS,
              or Cloudflare. I design for the edge, leveraging Cloudflare Workers,
              distributed infrastructure, and security-hardened deployments to
              keep your systems fast, resilient, and globally available.
            </p>
            <p className="rr-prose">
              On the AI frontier, I design and deploy <b>enterprise-grade AI
              solutions end to end</b> — intelligent tooling, multi-agent and
              agentic workflow systems, fine-tuned domain-specific models, and
              securely architected production AI deployments.
            </p>
            <a href="about.html" className="rr-btn rr-btn-mono" style={{marginTop: 20}}>
              read the full story →
            </a>
          </div>
          <div className="about-aside">
            <div className="about-card">
              <div className="about-card-label">// signal</div>
              <div className="about-stat-grid">
                <div className="about-stat">
                  <div className="about-stat-n">10+</div>
                  <div className="about-stat-l">years shipping</div>
                </div>
                <div className="about-stat">
                  <div className="about-stat-n">20+</div>
                  <div className="about-stat-l">production apps</div>
                </div>
                <div className="about-stat">
                  <div className="about-stat-n">$45M</div>
                  <div className="about-stat-l">erp on iPad</div>
                </div>
                <div className="about-stat">
                  <div className="about-stat-n">84M+</div>
                  <div className="about-stat-l">users reached</div>
                </div>
              </div>
            </div>
            <div className="about-card">
              <div className="about-card-label">// based</div>
              <div className="about-loc">
                <div className="about-loc-row"><span>📍</span> Orange County, California</div>
                <div className="about-loc-row"><span>🌐</span> remote-first · global clients</div>
                <div className="about-loc-row"><span>🕐</span> PT (UTC−8)</div>
              </div>
            </div>
            <div className="about-card">
              <div className="about-card-label">// stack</div>
              <div className="about-tags">
                <Tag accent>Swift / SwiftUI</Tag>
                <Tag accent>iOS · watchOS · tvOS</Tag>
                <Tag accent>React · Next.js</Tag>
                <Tag accent>Node · Express</Tag>
                <Tag accent>Firebase · AWS · GCP</Tag>
                <Tag accent>Cloudflare Workers</Tag>
                <Tag accent>Orchestrated AI Systems</Tag>
                <Tag accent>BLE · NFC · iBeacons</Tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Services preview ────────────────────────────────────────────────
function ServicesPreview() {
  const services = [
    {
      n: "01",
      t: "Agentic AI Engineering",
      d: "Multi-agent workflows, fine-tuned models, hardened inference, MCP servers, and the production plumbing to ship them.",
      tags: ["Agents", "RAG", "Fine-tuning", "MCP"],
    },
    {
      n: "02",
      t: "iOS / Apple Platforms",
      d: "Swift + SwiftUI on iOS, iPadOS, watchOS, tvOS. Obj-C → Swift conversions, App Store submissions, TestFlight, Crashlytics.",
      tags: ["Swift", "SwiftUI", "TestFlight", "BLE/NFC"],
    },
    {
      n: "03",
      t: "Full-Stack Web",
      d: "React, Next.js, SvelteKit on the front. Node, Firebase, AWS, GCP, Cloudflare on the back. TypeScript end to end.",
      tags: ["React", "Next.js", "Cloudflare"],
    },
    {
      n: "04",
      t: "Cyber Defense",
      d: "Security-hardened deployments, threat modeling, secure auth, key management, and audits for mobile + web + AI infra.",
      tags: ["Auditing", "Hardening", "AuthZ"],
    },
    {
      n: "05",
      t: "Tech Advisory",
      d: "Code reviews, architecture deep-dives, hiring, and team mentoring. I&apos;ve led teams across LA, NY, and overseas.",
      tags: ["Architecture", "Reviews", "Mentoring"],
    },
    {
      n: "06",
      t: "DevOps & CI/CD",
      d: "Fastlane, GitHub Actions, automated TestFlight pipelines. Reproducible builds, signed artifacts, zero-touch releases.",
      tags: ["Fastlane", "GH Actions", "Pipelines"],
    },
  ];

  return (
    <section className="rr-section services-preview">
      <div className="rr-container">
        <div className="services-header">
          <SectionHeader
            kicker="02 — services"
            title={<>WHAT I <span className="rr-grad-text">DO.</span></>}
            sub="Six lanes, one operator. Pick the lane — or stitch a few together for a full delivery."
          />
          <div className="services-rate">
            <div className="services-rate-card status">
              <div className="services-rate-label">// status</div>
              <div className="services-rate-status">
                <span className="rr-dot rr-dot-amber" />
                <span>not accepting side work currently</span>
              </div>
              <div className="services-rate-status-sub">building Atom — open to advisory chats &amp; introductions.</div>
            </div>
          </div>
        </div>
        <div className="services-grid">
          {services.map((s) => (
            <div key={s.n} className="service-card">
              <div className="service-card-num">{s.n}</div>
              <div className="service-card-title">{s.t}</div>
              <div className="service-card-desc">{s.d}</div>
              <div className="service-card-tags">
                {s.tags.map((t) => <Tag key={t}>{t}</Tag>)}
              </div>
              <a href="services.html" className="service-card-link">
                <span>learn more</span>
                <span>→</span>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Portfolio preview ───────────────────────────────────────────────
function PortfolioPreview() {
  const projects = [
    {
      title: "Prodege Apps Suite",
      role: "Tech Lead (iOS & Android)",
      where: "Prodege, LLC · Nov 2024 → Present",
      desc: "Promoted to Tech Lead in Dec 2025 after starting as Lead iOS Software Developer. Cross-platform iOS & Android team shipping 8 consumer reward apps — Swagbucks, InboxDollars, UPromise, MyPoints, Daily Trivia, Tada, Ysense, Poll Pay. Built a dynamic UI framework now in production for millions of users.",
      tags: ["Swift", "Kotlin", "Tech Lead", "UI Framework"],
      result: "8 apps · millions of users",
      color: "blue",
    },
    {
      title: "League Life",
      role: "Senior iOS Engineer",
      where: "Icon Studio · Oct 2023 → Oct 2024",
      desc: "Exclusive app for NBA players & staff — curated location-based services. Shipped Sendbird chat, NBA-calendar import, and feature work.",
      tags: ["Swift", "SendBird", "Firebase"],
      result: "delivered on time + budget",
      color: "cyan",
    },
    {
      title: "Mash App",
      role: "Senior iOS Engineer",
      where: "Music creation · Oct 2023 → Oct 2024",
      desc: "Collaborative music creation. Multi-platform features, crash fixes, and APIs powering user-facing functionality.",
      tags: ["Swift", "SwiftUI", "Combine", "Mixpanel"],
      result: "multiple feature releases",
      color: "blue",
    },
    {
      title: "RBLS Enterprise ERP",
      role: "Founder & Lead Engineer",
      where: "Atom · 2015 → 2021",
      desc: "AWS-native ERP for the fresh produce industry. Sales, purchasing, inventory, QR traceability — all on iPad/iPhone, with QuickBooks integration.",
      tags: ["Swift", "AWS", "DynamoDB", "QuickBooks"],
      result: "$45M company runs on it",
      color: "cyan",
    },
    {
      title: "Canary",
      role: "Sr. iOS Engineer",
      where: "Canary Connect · 2021 → 2023",
      desc: "Led design overhaul across iOS, watchOS, tvOS. Ported the production app from Obj-C → Swift. Resolved a years-old GStreamer video bug.",
      tags: ["Obj-C → Swift", "watchOS", "tvOS"],
      result: "shipped to App Store",
      color: "blue",
    },
    {
      title: "True Zero",
      role: "iOS Engineer",
      where: "Hydrogen fueling · 2023",
      desc: "Hydrogen fuel-station finder. Crash fixes, API rework, and iOS-version-update stability work.",
      tags: ["Swift", "SwiftUI", "Firebase"],
      result: "shipped bug-free",
      color: "cyan",
    },
  ];

  return (
    <section className="rr-section portfolio-preview">
      <div className="rr-container">
        <SectionHeader
          kicker="03 — portfolio"
          title={<>SELECTED <span className="rr-grad-text">WORK.</span></>}
          sub="Production apps that touched millions of users — across sports, music, IoT, ERP, and energy."
        />
        <div className="portfolio-grid">
          {projects.map((p) => (
            <a key={p.title} href="portfolio.html" className={"project-card project-" + p.color}>
              <div className="project-card-head">
                <div className="project-card-title">{p.title}</div>
                <div className="project-card-role">{p.role}</div>
                <div className="project-card-where">{p.where}</div>
              </div>
              <div className="project-card-body">
                <p>{p.desc}</p>
              </div>
              <div className="project-card-foot">
                <div className="project-card-tags">
                  {p.tags.map((t) => <Tag key={t}>{t}</Tag>)}
                </div>
                <div className="project-card-result">
                  <span>↳ result:</span> <b>{p.result}</b>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div className="portfolio-cta">
          <a href="portfolio.html" className="rr-btn rr-btn-mono">view full portfolio →</a>
        </div>
      </div>
    </section>
  );
}

// ── CTA strip ───────────────────────────────────────────────────────
function CTAStrip() {
  return (
    <section className="cta-strip rr-noise" style={{position: "relative"}}>
      <div className="rr-container cta-grid">
        <div>
          <div className="hero-kicker" style={{marginBottom: 16}}>
            <span className="rr-dot rr-dot-amber" /> not accepting side work currently — let&apos;s still talk
          </div>
          <h2 className="cta-h2">
            Let&apos;s build something <br/>
            <span className="rr-grad-text">remarkable</span> together.
          </h2>
          <p className="cta-sub">
            Whether you need a trusted technical advisor, a security-first
            architect, or a collaborator to bring a bold new vision to life —
            I&apos;m dedicated to delivering work that is built to last.
          </p>
        </div>
        <div className="cta-actions">
          <a href="connect.html" className="rr-btn rr-btn-primary cta-big">
            connect with me →
          </a>
          <a href="cv.html" className="rr-btn rr-btn-ghost">read my CV</a>
          <div className="cta-meta">
            <span>or find me on </span>
            <a href="https://www.linkedin.com/in/ricardo-ruiz-31301537/" className="cta-email">linkedin</a>
            <span> · </span>
            <a href="https://github.com/ruizrica" className="cta-email">github</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  TechMarquee, AboutPreview, ServicesPreview, PortfolioPreview, CTAStrip
});