// NSS Software — page sections

const { useEffect, useRef, useState } = React;

// --- Service Image Carousel ---
const ServiceCarousel = ({ images, title }) => {
  const [active, setActive] = useState(0);
  const [fading, setFading] = useState(false);

  useEffect(() => {
    if (!images || images.length <= 1) return;
    const id = setInterval(() => {
      setFading(true);
      setTimeout(() => {
        setActive(prev => (prev + 1) % images.length);
        setFading(false);
      }, 280);
    }, 3800);
    return () => clearInterval(id);
  }, [images]);

  const go = (idx) => {
    if (idx === active || fading) return;
    setFading(true);
    setTimeout(() => { setActive(idx); setFading(false); }, 280);
  };

  if (!images || images.length === 0) return null;

  return (
    <div className="svc-carousel">
      <div className="svc-carousel-frame" style={{ opacity: fading ? 0 : 1 }}>
        <img
          src={images[active]}
          alt={`${title} — preview ${active + 1}`}
          className="svc-carousel-img"
          loading="lazy"
        />
        <div className="svc-carousel-overlay">
          <span className="svc-carousel-label">Preview {active + 1}/{images.length}</span>
        </div>
      </div>
      {images.length > 1 && (
        <div className="svc-carousel-dots">
          {images.map((_, i) => (
            <button
              key={i}
              className={`svc-dot${i === active ? ' on' : ''}`}
              onClick={() => go(i)}
              aria-label={`Preview ${i + 1}`}
            />
          ))}
        </div>
      )}
    </div>
  );
};

// --- Urgency ticker strip ---
const Ticker = () => {
  const items = [
    "Stop losing clients — no response = no sale",
    "Delivery in record time · weeks, not months",
    "More visibility · More leads · More revenue",
    "24 / 7 AI agents that never sleep",
    "Less delay — more action — more autonomy",
    "Your first AI agent live in 7 days",
    "Every day offline is a day losing money",
  ];
  const doubled = [...items, ...items];
  return (
    <div className="ticker" aria-label="Key results">
      <div className="ticker-track">
        {doubled.map((item, i) => (
          <span key={i} className="ticker-item">
            <span className="ticker-diamond" aria-hidden="true">◆</span>
            {item}
          </span>
        ))}
      </div>
    </div>
  );
};

// --- intersection-observer reveal hook ---
const useReveal = () => {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal, .mask-reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

// --- progress bar ---
const Progress = () => {
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const pct = h.scrollTop / (h.scrollHeight - h.clientHeight || 1);
      if (ref.current) ref.current.style.transform = `scaleX(${pct})`;
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="progress" ref={ref}></div>;
};

// --- nav ---
const Nav = () => {
  const [open, setOpen] = useState(false);
  const links = [
    { idx: "01", label: "Services",  href: "#services"  },
    { idx: "02", label: "Portfolio", href: "#portfolio" },
    { idx: "03", label: "Systems",   href: "#ai"        },
    { idx: "04", label: "Process",   href: "#process"   },
    { idx: "05", label: "Contact",   href: "#cta"       },
  ];
  const close = () => setOpen(false);

  // lock body scroll when menu open
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <nav className={`nav${open ? " nav--open" : ""}`}>
      <div className="nav-row">
        <a href="#top" className="brand" onClick={close}>
          <span className="brand-mark"><BrandMark /></span>
          <span>NSS Software</span>
          <span className="brand-suffix">QA / 2026</span>
        </a>

        {/* desktop links */}
        <div className="nav-links">
          {links.map((l) => (
            <a key={l.idx} className="nav-link" href={l.href}>
              <span className="idx">{l.idx}</span>
              <span>{l.label}</span>
            </a>
          ))}
        </div>

        <div className="nav-right">
          <a href="#cta" className="nav-cta" onClick={close}>
            <span className="dot"></span>
            <span>Start a project</span>
          </a>
          {/* hamburger */}
          <button
            className="nav-burger"
            onClick={() => setOpen(o => !o)}
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
          >
            <span className="burger-line" />
            <span className="burger-line" />
            <span className="burger-line" />
          </button>
        </div>
      </div>

      {/* mobile overlay */}
      <div className="nav-mobile" aria-hidden={!open}>
        <div className="nav-mobile-links">
          {links.map((l) => (
            <a key={l.idx} className="nav-mobile-link" href={l.href} onClick={close}>
              <span className="nav-mobile-idx">{l.idx}</span>
              <span>{l.label}</span>
              <svg className="nav-mobile-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" strokeWidth="1.3"/>
              </svg>
            </a>
          ))}
          <a href="https://wa.me/97451701529" className="nav-mobile-cta" target="_blank" rel="noopener noreferrer" onClick={close}>
            WhatsApp us →
          </a>
        </div>
        <div className="nav-mobile-footer">
          <span>NSS Software · Doha, Qatar</span>
          <span>infonsssoftware@gmail.com</span>
        </div>
      </div>
    </nav>
  );
};

// --- hero ---
const Hero = () => {
  const titleLines = window.NSS.hero.title;
  return (
    <header className="hero" id="top">
      <div className="hero-bg" style={{ backgroundImage: "url('images/hero-bg.jpg')", backgroundSize: "cover", backgroundPosition: "center 30%", backgroundRepeat: "no-repeat" }} />
      <div className="hero-grid" />
      <HiperFrames />
      <div className="hero-figure float-slower"><HeroFigure /></div>
      <div className="hero-content">
        <div className="hero-meta">
          <div className="hero-meta-col">
            <span className="label">Index</span>
            <span className="value">01 — Digital Infrastructure</span>
          </div>
          <div className="hero-meta-col">
            <span className="label">Origin</span>
            <span className="value">Doha · Qatar · QAT (UTC+3)</span>
          </div>
          <div className="hero-meta-col">
            <span className="label">Status</span>
            <span className="value">◉ Available — 24/7 AI Support</span>
          </div>
        </div>

        <h1 className="display">
          {titleLines.map((line, i) => (
            <span key={i} className={`mask-reveal reveal-delay-${i + 1}`} style={{ display: "block" }}>
              <span>{i === 1 ? <em className="thin">{line}</em> : line}</span>
            </span>
          ))}
        </h1>

        <p className="hero-sub lede reveal reveal-delay-4">{window.NSS.hero.sub}</p>

        <div className="hero-actions reveal reveal-delay-5">
          <a className="btn btn-primary" href="#cta">
            <span>Start a project</span>
            <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7H12M12 7L7 2M12 7L7 12" stroke="currentColor" strokeWidth="1.4" />
            </svg>
          </a>
          <a className="btn btn-ghost" href="#services">
            <span>Explore services</span>
          </a>
        </div>

        <div className="hero-bottom">
          <div className="scroll-cue">Scroll</div>
          <div className="hero-meta-col" style={{ textAlign: "right" }}>
            <span className="label">Currently engineering</span>
            <span className="value">4 active engagements · 9 systems in maintenance</span>
          </div>
        </div>
      </div>
    </header>
  );
};

// --- trust ---
const Trust = () => (
  <section className="trust" id="trust">
    <div className="trust-grid">
      <div className="trust-philosophy">
        <span className="eyebrow">02 — Philosophy</span>
        <p>{window.NSS.trust.statement}</p>
      </div>
      {window.NSS.trust.stats.map((s, i) => (
        <div className="trust-cell reveal" key={i}>
          <span className="eyebrow no-bar">Metric / {String(i + 1).padStart(2, "0")}</span>
          <div className="stat">{s.value}<span className="unit">{s.unit}</span></div>
          <p className="copy">{s.label}</p>
        </div>
      ))}
    </div>
  </section>
);

// --- services ---
const Services = () => {
  const wireKinds = ["landing", "gallery", "portfolio", "corp", "ecom", "hosting"];
  return (
    <section className="section services" id="services">
      <div className="container">
        <div className="section-header reveal">
          <div>
            <span className="eyebrow">03 — Solutions</span>
          </div>
          <div>
            <h2 className="h2">Every problem your business faces online — <em className="thin" style={{ fontStyle: "italic", fontWeight: 300, color: "var(--fg-2)" }}>we solve it.</em></h2>
            <p className="lede" style={{ marginTop: 24 }}>
              From a landing page that turns visitors into paying clients, to a full AI-powered platform that runs your operations around the clock. Pick the layer that fits where you are today.
            </p>
          </div>
        </div>

        <div className="svc-grid">
          {window.NSS.services.map((s, i) => (
            <article key={s.num} className={`svc-card span-${s.span} reveal reveal-delay-${(i % 3) + 1}`}>
              <div className="between">
                <span className="num">{s.num} / Web Development</span>
              </div>
              {window.NSS && window.NSS.serviceImages && window.NSS.serviceImages[s.num]
                ? <ServiceCarousel images={window.NSS.serviceImages[s.num]} title={s.name} />
                : <div className="svc-wire"><SvcWire kind={wireKinds[i]} /></div>
              }
              <div>
                <div className="name">{s.name}</div>
              </div>
              <div className="desc">{s.desc}</div>
              <ul>
                {s.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
              <div className="footnote">↳ {s.footnote}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// Thumbnail map for case studies
const WORK_IMAGES = {
  "01": "images/meridian-thumb.jpg",
  "02": "images/atlas-inventory.jpg",
  "03": "images/souq-lumiere.jpg",
  "04": "images/cedar-clinic.jpg",
};

// --- portfolio (unified: case studies + live projects + in-dev) ---
const Portfolio = () => {
  const videoRef = useRef(null);
  // Merge work case studies + portfolio items into one list
  const caseStudies = (window.NSS.work || []).map((w, i) => ({
    id: `w${w.num}`,
    name: w.name,
    slug: w.meta,
    desc: null,
    tags: [w.tag],
    status: "live",
    image: WORK_IMAGES[w.num],
    url: null,
  }));
  const ownProjects = (window.NSS.portfolio || []).filter(p => p.num !== "01").concat(
    (window.NSS.portfolio || []).filter(p => p.num === "01")
  ).sort((a, b) => a.num - b.num);

  return (
    <section className="section portfolio" id="portfolio">
      <div className="container">
        <div className="section-header reveal">
          <div>
            <span className="eyebrow">04 — Portfolio</span>
          </div>
          <div>
            <h2 className="h2">Real businesses. <em className="thin" style={{ fontStyle: "italic", fontWeight: 300, color: "var(--fg-2)" }}>Real results.</em></h2>
            <p className="lede" style={{ marginTop: 24 }}>
              Every project below is live, generating revenue, or actively in development for a real client. Not demos. Not concepts. Working systems.
            </p>
          </div>
        </div>

        {/* Featured case study — video */}
        <div className="work-feature reveal">
          <div className="wf-media">
            <video
              ref={videoRef}
              autoPlay loop muted playsInline
              poster="images/meridian-featured.jpg"
              className="wf-video"
            >
              <source src="images/meridian-featured.mp4" type="video/mp4" />
              <img src="images/meridian-featured.jpg" alt="Meridian Capital" className="wf-video" />
            </video>
            <div className="wf-gradient" />
            <div className="wf-overlay-top">
              <span className="eyebrow no-bar wf-eyebrow">Featured · 2026</span>
              <div className="h3 wf-title">Meridian Capital — Investor Portal & Corporate AI Agent.</div>
            </div>
            <div className="wf-overlay-bottom">
              10-page architecture · 2 AI agents · 1 client portal
            </div>
          </div>
          <div className="wf-caption">
            <span className="eyebrow no-bar">Featured · 2026</span>
            <div className="wf-caption-title">Meridian Capital — Investor Portal & Corporate AI Agent.</div>
            <div className="wf-caption-meta">10-page architecture · 2 AI agents · 1 client portal</div>
          </div>
        </div>

        {/* Case studies list */}
        <div className="work-list">
          {caseStudies.filter(c => c.id !== "w01").map((c) => (
            <article key={c.id} className="work-item reveal">
              <div className="work-num">
                <span className="pill">{c.tags[0]}</span>
              </div>
              <div className="work-title">{c.name}<span className="meta">{c.slug}</span></div>
              <div className="work-thumb">
                <img src={c.image} alt={c.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
            </article>
          ))}
        </div>

        {/* Own projects grid */}
        <div className="portfolio-divider">
          <span className="eyebrow no-bar">NSS-Built Platforms</span>
        </div>
        <div className="portfolio-grid">
          {ownProjects.map((p, i) => (
            <article key={p.num} className={`portfolio-card reveal reveal-delay-${(i % 3) + 1}`}>
              <div className="portfolio-img-wrap">
                <img src={p.image} alt={p.name} className="portfolio-img" loading="lazy" />
                {p.status === "dev"
                  ? <div className="portfolio-badge">In Development</div>
                  : <div className="portfolio-badge live">◉ Live</div>
                }
              </div>
              <div className="portfolio-body">
                <div className="portfolio-meta">
                  <span className="portfolio-num">{p.num}</span>
                  <span className="portfolio-slug">{p.slug}</span>
                </div>
                <div className="portfolio-name">{p.name}</div>
                <p className="portfolio-desc">{p.desc}</p>
                <div className="portfolio-tags">
                  {p.tags.map((t) => <span key={t} className="portfolio-tag">{t}</span>)}
                </div>
                {p.status === "live" && p.url
                  ? <a href={p.url} className="portfolio-link" target="_blank" rel="noopener noreferrer">
                      <span>View project</span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 10L10 2M10 2H4M10 2V8" stroke="currentColor" strokeWidth="1.3"/></svg>
                    </a>
                  : p.status === "dev"
                    ? <span className="portfolio-dev-label">Coming soon</span>
                    : null
                }
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// AI agent icons (inline SVG — one per agent type)
const AI_ICONS = {
  "01": (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="8" width="20" height="13" rx="2"/>
      <path d="M8 8V6a4 4 0 018 0v2"/>
      <circle cx="12" cy="14" r="2"/>
      <path d="M12 16v2"/>
    </svg>
  ),
  "02": (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
    </svg>
  ),
  "03": (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
    </svg>
  ),
  "04": (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
    </svg>
  ),
};

// --- AI ---
const AI = () => (
  <section className="section ai" id="ai">
    <div className="container">
      <div className="section-header reveal">
        <div>
          <span className="eyebrow">05 — Automation</span>
        </div>
        <div>
          <h2 className="h2">Your business, running <em className="thin" style={{ fontStyle: "italic", fontWeight: 300, color: "var(--fg-2)" }}>without you.</em></h2>
          <p className="lede" style={{ marginTop: 24 }}>
            An AI agent never sleeps, never misses a lead, never forgets to follow up. We deploy them as part of every engagement — because manual response is the fastest way to lose clients.
          </p>
        </div>
      </div>

      <div className="svc-category ai-category reveal">
        <div className="svc-cat-cover svc-cat-cover--ai">
          <span className="eyebrow no-bar">02 / AI</span>
          <div className="svc-cat-title">AI Agents<br />&amp; Automation</div>
          <p className="svc-cat-desc">Deploy intelligent agents across WhatsApp, Web, and Telegram — 24/7, no human needed.</p>
          <a href="#cta" className="svc-cat-cta">Deploy an agent →</a>
          <div className="ai-diagram-mini"><AiDiagram /></div>
        </div>
        <div className="svc-track">
          {window.NSS.ai.map((a, i) => (
            <article key={a.idx} className={`ai-card-h reveal reveal-delay-${i + 1}`}>
              <div className="ai-card-icon">{AI_ICONS[a.idx]}</div>
              <span className="ai-card-num">{a.idx}</span>
              <div className="ai-card-name">{a.name}</div>
              <p className="ai-card-desc">{a.desc}</p>
              <a href="#cta" className="ai-card-cta">Inquire →</a>
            </article>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// --- process ---
const Process = () => (
  <section className="section process" id="process">
    <div className="container">
      <div className="section-header reveal">
        <div>
          <span className="eyebrow">06 — How We Work</span>
        </div>
        <div>
          <h2 className="h2">From signed to shipped — <em className="thin" style={{ fontStyle: "italic", fontWeight: 300, color: "var(--fg-2)" }}>in weeks, not months.</em></h2>
          <p className="lede" style={{ marginTop: 24 }}>
            No discovery theater. No endless revision cycles. Clear scope, clear milestones, clear delivery. We move fast because every week without a system is a week losing revenue.
          </p>
        </div>
      </div>
      <div className="process-grid">
        {window.NSS.process.map((p, i) => (
          <div key={p.num} className={`process-step reveal reveal-delay-${i + 1}`}>
            <span className="step-num">STEP {p.num}</span>
            <div className="step-title">{p.title}</div>
            <div className="step-desc">{p.desc}</div>
            <div className="step-meta">{p.meta}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// --- testimonials ---
const Testimonials = () => (
  <section className="testimonials">
    <div className="container">
      <div className="section-header reveal" style={{ paddingTop: "var(--section-pad)", marginBottom: 0 }}>
        <div>
          <span className="eyebrow">07 — Client Signal</span>
        </div>
        <div>
          <h2 className="h2">Don't take our word <em className="thin" style={{ fontStyle: "italic", fontWeight: 300, color: "var(--fg-2)" }}>for it.</em></h2>
        </div>
      </div>
    </div>
    <div style={{ height: 64 }} />
    <div className="testimonial-grid">
      {window.NSS.testimonials.map((t, i) => (
        <figure className="testimonial reveal" key={i}>
          <blockquote>{t.quote}</blockquote>
          <figcaption className="who">
            <span className="name">{t.name}</span>
            <span>{t.org}</span>
          </figcaption>
        </figure>
      ))}
    </div>
    <div style={{ height: "var(--section-pad)" }} />
  </section>
);

// --- WhatsApp contact form ---
const WhatsAppForm = () => {
  const [name, setName] = useState('');
  const [interest, setInterest] = useState('');
  const [note, setNote] = useState('');
  const submit = (e) => {
    e.preventDefault();
    const lines = [`Hi NSS Software, I'm ${name}.`];
    if (interest) lines.push(`I'm interested in: ${interest}.`);
    if (note) lines.push(note);
    window.open(`https://wa.me/97451701529?text=${encodeURIComponent(lines.join(' '))}`, '_blank');
  };
  return (
    <form className="wa-form reveal reveal-delay-3" onSubmit={submit}>
      <div className="wa-form-row">
        <input className="wa-input" type="text" placeholder="Your name" value={name} onChange={e => setName(e.target.value)} required />
        <select className="wa-input wa-select" value={interest} onChange={e => setInterest(e.target.value)}>
          <option value="">Service (optional)</option>
          <option value="Landing Page">Landing Page</option>
          <option value="E-Commerce Platform">E-Commerce Platform</option>
          <option value="AI Agent / Automation">AI Agent / Automation</option>
          <option value="Corporate Website">Corporate Website</option>
          <option value="Hosting & Maintenance">Hosting &amp; Maintenance</option>
          <option value="Other">Other</option>
        </select>
      </div>
      <textarea className="wa-input wa-textarea" placeholder="Brief message (optional)" value={note} onChange={e => setNote(e.target.value)} rows={3} />
      <button type="submit" className="btn-whatsapp">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
        <span>Send via WhatsApp</span>
      </button>
    </form>
  );
};

// --- final CTA ---
const FinalCTA = () => (
  <section className="cta" id="cta">
    <div className="cta-bg" />
    <div className="container">
      <span className="eyebrow no-bar reveal" style={{ marginBottom: 32, display: "inline-block" }}>08 — Start Now</span>

      <h2 className="display reveal" style={{ fontSize: "clamp(36px, 5.6vw, 84px)" }}>
        Your competitors are<br />
        <em className="thin">already automating.</em>
      </h2>

      <p className="lede reveal reveal-delay-1" style={{ maxWidth: "52ch", marginTop: 32 }}>
        Every week without a system is a week losing clients to someone who has one. NSS deploys your website, AI agents, and store in record time — so your business starts working for you, not the other way around.
      </p>

      <div className="actions reveal reveal-delay-2">
        <a className="btn btn-primary" href="https://wa.me/97451701529" target="_blank" rel="noopener noreferrer">
          <span>WhatsApp us</span>
          <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7H12M12 7L7 2M12 7L7 12" stroke="currentColor" strokeWidth="1.4" />
          </svg>
        </a>
        <a className="btn btn-ghost" href="#services">
          <span>View catalog</span>
        </a>
      </div>

      <WhatsAppForm />

      <div className="cta-contacts reveal reveal-delay-4">
        <a href="mailto:infonsssoftware@gmail.com" className="cta-contact-link">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="3" width="12" height="8.5" rx="1" stroke="currentColor" strokeWidth="1.2"/><path d="M1 3.5L7 8l6-4.5" stroke="currentColor" strokeWidth="1.2"/></svg>
          infonsssoftware@gmail.com
        </a>
        <a href="https://instagram.com/nsssoftware" target="_blank" rel="noopener noreferrer" className="cta-contact-link">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
          @nsssoftware
        </a>
      </div>
    </div>
  </section>
);

// --- footer ---
const Foot = () => (
  <footer className="foot">
    <div className="container">
      <div className="foot-grid">
        <div className="foot-brand">
          <div className="brand">
            <span className="brand-mark"><BrandMark /></span>
            <span>NSS Software</span>
          </div>
          <p>Comprehensive technology solutions powered by AI for modern businesses in Qatar. Established 2026.</p>
          <span className="small">nss-software.qa</span>
        </div>
        <div className="foot-col">
          <h4>Services</h4>
          <ul>
            <li><a href="#services">Web Development</a></li>
            <li><a href="#ai">AI & Automation</a></li>
            <li><a href="#services">Enterprise Solutions</a></li>
            <li><a href="#services">Creative Division</a></li>
            <li><a href="#services">Hosting & Maintenance</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#trust">Philosophy</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#process">Method</a></li>
            <li><a href="#cta">Contact</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Contact</h4>
          <ul>
            <li><a href="https://wa.me/97451701529" target="_blank" rel="noopener noreferrer">+974 5170 1529 (WhatsApp)</a></li>
            <li><a href="mailto:infonsssoftware@gmail.com">infonsssoftware@gmail.com</a></li>
            <li><a href="https://instagram.com/nsssoftware" target="_blank" rel="noopener noreferrer">@nsssoftware</a></li>
            <li><a href="#">Doha, Qatar</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 NSS Software · All rights reserved</span>
        <span>Confidential & Proprietary · Service Catalog 2026</span>
        <span>Sun–Thu 09:00 – 18:00 (QAT)</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Progress, Nav, Hero, Ticker, Trust, Services, Portfolio, AI, Process, Testimonials, FinalCTA, Foot, useReveal });
