// ============================================================
// SamuelMarndi.com — Extra Sections
// Tech Stack, Partners/Companies, JARVIS branded section
// ============================================================

const TECH_STACK = [
  { category: "Cloud", items: [
    { brand: "aws", name: "AWS" },
    { brand: "azure", name: "Azure" },
    { brand: "gcp", name: "Google Cloud" },
    { brand: "oracle", name: "Oracle Cloud" },
    { brand: "vercel", name: "Vercel" },
  ]},
  { category: "Frontend", items: [
    { brand: "react", name: "React" },
    { brand: "nextjs", name: "Next.js" },
    { brand: "typescript", name: "TypeScript" },
    { brand: "figma", name: "Figma" },
  ]},
  { category: "Backend & Data", items: [
    { brand: "node", name: "Node.js" },
    { brand: "python", name: "Python" },
    { brand: "postgres", name: "PostgreSQL" },
    { brand: "mongodb", name: "MongoDB" },
    { brand: "redis", name: "Redis" },
    { brand: "pinecone", name: "Pinecone" },
  ]},
  { category: "Containers & Ops", items: [
    { brand: "docker", name: "Docker" },
    { brand: "k8s", name: "Kubernetes" },
    { brand: "github", name: "GitHub" },
  ]},
  { category: "AI", items: [
    { brand: "claude", name: "Anthropic Claude" },
    { brand: "openai", name: "OpenAI" },
  ]},
  { category: "Networking & Hardware", items: [
    { brand: "cisco", name: "Cisco" },
    { brand: "mikrotik", name: "MikroTik" },
    { brand: "hikvision", name: "Hikvision" },
  ]},
  { category: "Messaging & SaaS", items: [
    { brand: "whatsapp", name: "WhatsApp Business" },
    { brand: "slack", name: "Slack" },
    { brand: "twilio", name: "Twilio" },
    { brand: "hubspot", name: "HubSpot" },
  ]},
  { category: "Commerce & Payments", items: [
    { brand: "shopify", name: "Shopify" },
    { brand: "wordpress", name: "WordPress" },
    { brand: "stripe", name: "Stripe" },
    { brand: "razorpay", name: "Razorpay" },
  ]},
];

function TechStackSection() {
  return (
    <section className="section" style={{ position: "relative", overflow: "hidden" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "end", marginBottom: 56 }} className="tech-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Tools I use</div>
            <h2 style={{ fontSize: "var(--fs-display)" }}>
              Picked because they <em style={{ color: "var(--copper)" }}>work.</em>
            </h2>
          </div>
          <p style={{ fontSize: 17, color: "var(--text-soft)", lineHeight: 1.55, maxWidth: 520, justifySelf: "end" }}>
            No partnerships, no kickbacks. Every tool below earns its place by being the right answer for a real project. Open to alternatives when your stack demands them.
          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          {TECH_STACK.map((group, gi) => (
            <div key={gi} className="tech-row fade-up">
              <div className="tech-cat">{group.category}</div>
              <div className="tech-items">
                {group.items.map(item => {
                  const Brand = Brands[item.brand] || Brands.generic;
                  return (
                    <div key={item.name} className="tech-chip" title={item.name}>
                      <Brand size={28} />
                      <span>{item.name}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 48, padding: 24, background: "var(--bg-2)", border: "1px dashed var(--line)", borderRadius: 16, display: "flex", alignItems: "center", gap: 16, justifyContent: "space-between", flexWrap: "wrap" }}>
          <div style={{ fontSize: 14, color: "var(--text-soft)" }}>
            <strong style={{ color: "var(--text)" }}>40+ more tools</strong> across analytics, monitoring, e-sign, e-commerce, ERP, IoT protocols, and surveillance OEMs.
          </div>
          <button onClick={() => window.openChat?.()} className="btn btn-ghost btn-sm">
            <Icons.sparkles size={14} /> Ask JARVIS about your stack
          </button>
        </div>
      </div>
    </section>
  );
}

// Companies / brand recognition section
const PARTNER_BRANDS = [
  // Cloud + dev
  "aws", "azure", "gcp", "oracle", "cloudflare", "vercel", "kubernetes", "docker", "terraform",
  // Hardware
  "dell", "hp", "lenovo", "synology", "apc", "veeam",
  // Networking
  "cisco", "meraki", "mikrotik", "fortinet", "sophos", "ubiquiti", "aruba",
  // Surveillance + access
  "hikvision", "dahua", "cpplus", "hanwha", "honeywell", "zkteco", "essl", "mantra",
  // AI
  "claude", "openai", "pinecone", "langchain",
  // SaaS / productivity
  "google", "microsoft", "apple", "meta", "slack", "github", "figma",
  // Commerce / payments
  "shopify", "wordpress", "stripe", "razorpay",
  // Comms
  "whatsapp", "twilio",
  // Indian SaaS
  "zoho", "tally"
];

function PartnersSection() {
  return (
    <section className="section" style={{ background: "var(--bg-2)", overflow: "hidden", position: "relative" }}>
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 16, justifyContent: "center", display: "inline-flex" }}>Platforms & partners</div>
          <h2 style={{ fontSize: "var(--fs-display)", marginBottom: 16 }}>
            Working with the products that <em style={{ color: "var(--copper)" }}>run your business.</em>
          </h2>
          <p style={{ fontSize: 16, color: "var(--text-soft)", maxWidth: 600, margin: "0 auto" }}>
            Authorized installs, certified partners, official APIs. If your team already lives in these tools, I plug in cleanly.
          </p>
        </div>
      </div>

      {/* Marquee row 1 */}
      <div className="brand-marquee">
        <div className="brand-marquee-track">
          {[...PARTNER_BRANDS, ...PARTNER_BRANDS].map((b, i) => {
            const Brand = Brands[b] || Brands.generic;
            return (
              <div key={i} className="brand-tile">
                <Brand size={48} />
                <span className="brand-name">{brandLabel(b)}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* Marquee row 2 — reverse direction */}
      <div className="brand-marquee" style={{ marginTop: 18 }}>
        <div className="brand-marquee-track reverse">
          {[...PARTNER_BRANDS.slice().reverse(), ...PARTNER_BRANDS.slice().reverse()].map((b, i) => {
            const Brand = Brands[b] || Brands.generic;
            return (
              <div key={i} className="brand-tile">
                <Brand size={48} />
                <span className="brand-name">{brandLabel(b)}</span>
              </div>
            );
          })}
        </div>
      </div>

      <div className="container" style={{ marginTop: 56, display: "flex", justifyContent: "center", gap: 24, flexWrap: "wrap" }}>
        <div className="partner-badge"><Icons.check size={14} /> AWS Consulting Partner</div>
        <div className="partner-badge"><Icons.check size={14} /> Microsoft Partner</div>
        <div className="partner-badge"><Icons.check size={14} /> Hikvision Authorized Installer</div>
        <div className="partner-badge"><Icons.check size={14} /> Razorpay Verified Partner</div>
        <div className="partner-badge"><Icons.check size={14} /> Anthropic Build Partner</div>
      </div>
    </section>
  );
}

function brandLabel(b) {
  const map = {
    aws: "AWS", azure: "Azure", gcp: "Google Cloud", oracle: "Oracle",
    react: "React", nextjs: "Next.js", node: "Node.js", typescript: "TypeScript",
    python: "Python", postgres: "PostgreSQL", mongodb: "MongoDB", redis: "Redis",
    docker: "Docker", kubernetes: "Kubernetes", k8s: "Kubernetes",
    cisco: "Cisco", meraki: "Meraki", mikrotik: "MikroTik", fortinet: "Fortinet",
    sophos: "Sophos", ubiquiti: "Ubiquiti", aruba: "Aruba",
    hikvision: "Hikvision", dahua: "Dahua", cpplus: "CP Plus", hanwha: "Hanwha",
    honeywell: "Honeywell", bosch: "Bosch", notifier: "Notifier",
    zkteco: "ZKTeco", essl: "eSSL", mantra: "Mantra", anviz: "Anviz", spintly: "Spintly",
    dell: "Dell", hp: "HP", hpe: "HPE", lenovo: "Lenovo", supermicro: "Supermicro",
    synology: "Synology", qnap: "QNAP", apc: "APC", vertiv: "Vertiv",
    veeam: "Veeam", datto: "Datto", bitdefender: "Bitdefender", kaspersky: "Kaspersky", truenas: "TrueNAS",
    cloudflare: "Cloudflare", terraform: "Terraform", vercel: "Vercel",
    googleworkspace: "Google Workspace", microsoft365: "Microsoft 365", office365: "Office 365",
    teamviewer: "TeamViewer", anydesk: "AnyDesk",
    zoho: "Zoho", tally: "Tally", greythr: "GreytHR", keka: "Keka",
    intune: "Intune", jamf: "JAMF",
    flutter: "Flutter", swift: "Swift", kotlin: "Kotlin", tailwind: "Tailwind", django: "Django",
    mysql: "MySQL", bigquery: "BigQuery", snowflake: "Snowflake", clickhouse: "ClickHouse",
    metabase: "Metabase", airbyte: "Airbyte", dbt: "dbt", looker: "Looker", tableau: "Tableau", powerbi: "Power BI",
    llama: "Llama", mixtral: "Mixtral", pgvector: "pgvector", langchain: "LangChain", llamaindex: "LlamaIndex",
    weaviate: "Weaviate", chroma: "Chroma", qdrant: "Qdrant", wb: "Weights & Biases",
    mqtt: "MQTT", lorawan: "LoRaWAN", modbus: "Modbus", opcua: "OPC-UA",
    grafana: "Grafana", influxdb: "InfluxDB", awsiot: "AWS IoT", azureiot: "Azure IoT Hub",
    hikvision_authorized: "Hikvision Authorized Installer",
    slack: "Slack", github: "GitHub", whatsapp: "WhatsApp",
    claude: "Claude", openai: "OpenAI", stripe: "Stripe", razorpay: "Razorpay",
    google: "Google", microsoft: "Microsoft", apple: "Apple", meta: "Meta",
    shopify: "Shopify", wordpress: "WordPress", hubspot: "HubSpot", twilio: "Twilio",
    figma: "Figma", pinecone: "Pinecone",
  };
  return map[b] || b;
}

// JARVIS section — branded AI assistant highlight
function JarvisSection() {
  return (
    <section className="section jarvis-section" style={{
      background: "linear-gradient(180deg, var(--ink) 0%, #1F1812 100%)",
      color: "var(--cream)",
      position: "relative",
      overflow: "hidden"
    }}>
      {/* Animated background particles */}
      <div className="jarvis-particles">
        {[...Array(20)].map((_, i) => (
          <div key={i} className="jarvis-particle" style={{
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            animationDelay: `${Math.random() * 8}s`,
            animationDuration: `${8 + Math.random() * 12}s`
          }}></div>
        ))}
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }} className="jarvis-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20, color: "var(--copper-bright)" }}>
              Meet JARVIS · live on this site
            </div>
            <h2 style={{ fontSize: "var(--fs-display)", color: "var(--cream)", marginBottom: 24, lineHeight: 0.98 }}>
              <span style={{ display: "block" }}>JARVIS — </span>
              <em style={{ color: "var(--copper-bright)" }}>Sam's AI Assistant.</em>
            </h2>
            <p style={{ fontSize: 18, color: "#C9BCA8", lineHeight: 1.55, marginBottom: 32, maxWidth: 540 }}>
              The same chatbot you see in the corner is the kind I build for you. RAG-grounded on your docs, plugged into your CRM, deployable on web, WhatsApp, voice, and Slack. <strong style={{ color: "var(--cream)" }}>Live, not slideware.</strong>
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 32 }}>
              {[
                { num: "94%", label: "Factuality on golden-set evals" },
                { num: "62s", label: "Avg. time to scoped quote" },
                { num: "38%", label: "L1 helpdesk deflection" },
                { num: "4.4★", label: "Brand-voice rubric · /5" },
              ].map((s, i) => (
                <div key={i} style={{
                  padding: "16px 18px",
                  background: "rgba(245,238,226,0.04)",
                  borderRadius: 12,
                  border: "1px solid rgba(232,184,148,0.15)"
                }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 32, lineHeight: 1, color: "var(--copper-bright)" }}>{s.num}</div>
                  <div style={{ fontSize: 12, color: "#A89A85", marginTop: 4 }}>{s.label}</div>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button onClick={() => window.openChat?.()} className="btn btn-lg" style={{ background: "var(--copper)", color: "#fff" }}>
                <Icons.sparkles size={16} /> Talk to JARVIS now
              </button>
              <a href={B("services/ai-chatbots.html")} className="btn btn-ghost btn-lg" style={{ color: "var(--cream)", borderColor: "#3D3329" }}>
                See chatbot service <Icons.arrow size={14} />
              </a>
            </div>
          </div>

          {/* JARVIS visual — animated orb */}
          <div className="jarvis-orb-wrap">
            <div className="jarvis-orb">
              <svg viewBox="0 0 280 280" style={{ position: "absolute", inset: 0 }}>
                <defs>
                  <radialGradient id="orb-grad" cx="50%" cy="40%">
                    <stop offset="0%" stopColor="#E8B894" stopOpacity="0.9"/>
                    <stop offset="40%" stopColor="#B87A4F" stopOpacity="0.6"/>
                    <stop offset="100%" stopColor="#8C5934" stopOpacity="0"/>
                  </radialGradient>
                </defs>
                <circle cx="140" cy="140" r="120" fill="url(#orb-grad)"/>
                <circle cx="140" cy="140" r="60" fill="none" stroke="rgba(232,184,148,0.4)" strokeWidth="0.8" strokeDasharray="2 4"/>
                <circle cx="140" cy="140" r="90" fill="none" stroke="rgba(232,184,148,0.3)" strokeWidth="0.8" strokeDasharray="3 5"/>
                <circle cx="140" cy="140" r="120" fill="none" stroke="rgba(232,184,148,0.2)" strokeWidth="0.5"/>
              </svg>

              {/* Center logo mark */}
              <img src="/assets/logo-mark.png" alt="" className="jarvis-mark" />

              {/* Orbiting nodes */}
              {[
                { angle: 0, label: "RAG" },
                { angle: 60, label: "TOOLS" },
                { angle: 120, label: "CLAUDE" },
                { angle: 180, label: "EVAL" },
                { angle: 240, label: "VOICE" },
                { angle: 300, label: "WA" },
              ].map((n, i) => (
                <div key={i} className="jarvis-node" style={{
                  transform: `rotate(${n.angle}deg) translateY(-130px) rotate(-${n.angle}deg)`,
                  animationDelay: `${i * 0.3}s`
                }}>
                  <div className="jarvis-node-dot"></div>
                  <div className="jarvis-node-label">{n.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutSection() {
  return (
    <section className="section about-section">
      <div className="container">
        <div className="about-grid">
          <div className="about-photo-card">
            <img src="/assets/samuel.png" alt="Samuel Marndi · IT Consultant" />
            <div className="about-photo-stat" style={{ top: 24, left: 24 }}>
              <div className="about-stat-num">11+</div>
              <div className="about-stat-label">years in IT</div>
            </div>
            <div className="about-photo-stat" style={{ bottom: 24, right: 24 }}>
              <div className="about-stat-num">India · Global</div>
              <div className="about-stat-label">Based in Bangalore</div>
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>About Samuel</div>
            <h2 style={{ fontSize: "var(--fs-display)", lineHeight: 1.02, marginBottom: 22 }}>
              The buck stops with <em style={{ color: "var(--copper)" }}>me.</em>
            </h2>
            <p style={{ fontSize: 17, color: "var(--text-soft)", lineHeight: 1.65, marginBottom: 16 }}>
              I'm Samuel — a full-stack IT consultant who built this business on a simple promise: <strong style={{ color: "var(--text)" }}>one number, one invoice, one person who shows up.</strong> No agency layers. No vendor handoffs. No "that's a different team's problem."
            </p>
            <p style={{ fontSize: 17, color: "var(--text-soft)", lineHeight: 1.65, marginBottom: 28 }}>
              Eleven practice areas — from running Cat6A through a factory wall to deploying production RAG chatbots on Claude. I scope it, source it, install it, integrate it, and stay on as your support contact.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 28 }}>
              {[
                { icon: "check", t: "Personally onsite for kickoff & cutovers" },
                { icon: "check", t: "No subcontracted sales reps" },
                { icon: "check", t: "Fixed-price quotes wherever possible" },
                { icon: "check", t: "WhatsApp-first, escalates only if needed" },
              ].map((f, i) => {
                const FI = Icons[f.icon];
                return (
                  <div key={i} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--text-soft)" }}>
                    <FI size={16} style={{ color: "var(--copper)", flexShrink: 0, marginTop: 2 }} />
                    <span>{f.t}</span>
                  </div>
                );
              })}
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href={"/contact"} className="btn btn-primary">
                Work with me <Icons.arrow size={14} />
              </a>
              <a href={`https://wa.me/${CONTACT.whatsapp}`} target="_blank" rel="noopener" className="btn btn-ghost">
                <Icons.whatsapp size={14} style={{ color: "#25D366" }} /> WhatsApp directly
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AboutSection = AboutSection;
window.TechStackSection = TechStackSection;
window.PartnersSection = PartnersSection;
window.JarvisSection = JarvisSection;