/* global React */
const { useState, useEffect, useRef } = React;

// WebP image helper: converts .png/.jpg paths to .webp
function webp(src) { return src.replace(/\.(png|jpe?g)$/i, '.webp'); }

// ============ NAV ============
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <header className={`nav ${scrolled ? 'nav--scrolled' : ''} ${open ? 'nav--open' : ''}`}>
      <div className="nav__inner">
        <a href="#" className="nav__brand" onClick={close}>
          <span className="nav__logo-plate">
            <img src={webp("/logos/logo dark.png")} alt="Orca Solutions" width="28" height="28" className="nav__logo" />
          </span>
          <span className="nav__wordmark">Orca</span>
          <span className="nav__sub">/ Solutions</span>
        </a>
        <nav className="nav__links">
          <a href="#services">Services</a>
          <a href="#work">Work</a>
          <a href="#reviews">Reviews</a>
          <a href="#about">About</a>
          <a href="#clients">Clients</a>
          <a href="#contact">Contact</a>
        </nav>
        <div className="nav__cta">
          <span className="nav__status"><span className="nav__dot"></span>Available</span>
          <a href="#contact" className="btn btn--ghost nav__cta-btn">Start a project →</a>
        </div>
        <button className="nav__burger" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={`nav__sheet ${open ? 'nav__sheet--open' : ''}`}>
        <a href="#services" onClick={close}>Services</a>
        <a href="#work" onClick={close}>Work</a>
        <a href="#reviews" onClick={close}>Reviews</a>
        <a href="#about" onClick={close}>About</a>
        <a href="#clients" onClick={close}>Clients</a>
        <a href="#contact" onClick={close}>Contact</a>
        <a href="#contact" className="btn btn--primary nav__sheet-cta" onClick={close}>Start a project →</a>
      </div>
    </header>
  );
}

// ============ HERO ============
const HERO_ROTATIONS = ['scalable systems', 'mobile platforms', 'ERP backbones', 'AI workflows', 'cloud infrastructure'];

function Hero({ variant }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % HERO_ROTATIONS.length), 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" id="home">
      <div className="hero__grid"></div>
      {variant === 'visual' && <HeroOrcaVisual />}
      <div className="hero__inner">
        <div className="hero__meta">
          <span className="tag">{'// BUILDING DIGITAL EXCELLENCE SINCE 2020'}</span>
        </div>
        <h1 className="hero__title">
          <span className="hero__line">We engineer</span>
          <span className="hero__line hero__rotator">
            <span key={idx} className="hero__rot-word">{HERO_ROTATIONS[idx]}</span>
            <span className="hero__caret" aria-hidden="true">_</span>
          </span>
          <span className="hero__line hero__line--muted">for ambitious teams.</span>
        </h1>

        <p className="hero__lede">
          Orca Solutions designs and ships custom software, mobile apps, and enterprise systems
          —built around your business, engineered for what comes next.
        </p>

        <div className="hero__ctas">
          <a href="#contact" className="btn btn--primary">Start a project<span className="btn__arrow"> →</span></a>
          <a href="#work" className="btn btn--ghost">See recent work</a>
        </div>

        <div className="hero__strip">
          <Stat n="30+" label="Projects shipped" />
          <Stat n="50+" label="Clients served" />
          <Stat n="6" label="Years building" />
          <Stat n="15+" label="Engineers & designers" />
        </div>
      </div>

      <div className="hero__ticker" aria-hidden="true">
        <div className="hero__ticker-track">
          {[...Array(2)].flatMap((_, k) =>
          ['React', 'Next.js', 'Angular', 'Vue.js', 'Svelte', 'Flutter', 'React Native', 'Swift', 'Kotlin', 'Node.js', 'Python', 'TypeScript', 'Go', 'Rust', 'Java', '.NET', 'AWS', 'Azure', 'GCP', 'Kubernetes', 'Docker', 'Terraform', 'Ansible', 'PostgreSQL', 'MongoDB', 'Redis', 'Kafka', 'Elasticsearch', 'GraphQL', 'REST', 'gRPC', 'TensorFlow', 'PyTorch', 'OpenAI', 'LangChain', 'Hugging Face', 'Firebase', 'Supabase', 'Vercel', 'Cloudflare', 'Figma', 'Tailwind CSS', 'Playwright', 'Cypress', 'Prometheus', 'Grafana', 'CI/CD', 'Git'].map((t, i) =>
          <span key={`${k}-${i}`} className="hero__ticker-item">{t}<span className="hero__ticker-dot"> · </span></span>
          )
          )}
        </div>
      </div>
    </section>
  );
}

function HeroOrcaVisual() {
  return (
    <div className="hero__visual" aria-hidden="true">
      <svg viewBox="0 0 600 600" width="100%" height="100%" className="hov">
        <defs>
          <radialGradient id="og" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.22" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </radialGradient>
          <radialGradient id="og2" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.10" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx="300" cy="300" r="280" fill="url(#og)" className="hov__core" />
        <circle cx="300" cy="300" r="220" fill="url(#og2)" className="hov__core hov__core--2" />
        {[0, 1, 2, 3].map((i) => (
          <circle key={`p${i}`} cx="300" cy="300" r="60" fill="none" stroke="var(--accent)" strokeWidth="1.2" className="hov__ping" style={{ animationDelay: `${i * 1.2}s` }} />
        ))}
        <g className="hov__ring hov__ring--cw">
          {[...Array(4)].map((_, i) => (
            <circle key={i} cx="300" cy="300" r={80 + i * 40} fill="none" stroke="var(--accent)" strokeOpacity={0.18 - i * 0.03} strokeWidth="1" strokeDasharray={`${20 + i * 6} ${10 + i * 3}`} />
          ))}
        </g>
        <g className="hov__ring hov__ring--ccw">
          {[...Array(4)].map((_, i) => (
            <circle key={i} cx="300" cy="300" r={100 + i * 50} fill="none" stroke="var(--accent)" strokeOpacity={0.14 - i * 0.025} strokeWidth="1" strokeDasharray={`${4 + i * 2} ${14 + i * 5}`} />
          ))}
        </g>
        <g className="hov__ring hov__ring--cw-slow">
          {[...Array(3)].map((_, i) => (
            <circle key={i} cx="300" cy="300" r={150 + i * 60} fill="none" stroke="var(--accent)" strokeOpacity={0.10} strokeWidth="0.8" strokeDasharray="2 12" />
          ))}
        </g>
        {[
          { r: 130, count: 6, dur: 18, dir: 1, size: 2.2 },
          { r: 195, count: 8, dur: 26, dir: -1, size: 1.8 },
          { r: 250, count: 5, dur: 34, dir: 1, size: 2.5 },
          { r: 290, count: 12, dur: 42, dir: -1, size: 1.4 },
        ].map((orb, oi) => (
          <g key={oi} className="hov__orbit" style={{ animationDuration: `${orb.dur}s`, animationDirection: orb.dir > 0 ? 'normal' : 'reverse' }}>
            {[...Array(orb.count)].map((_, i) => {
              const a = (i / orb.count) * Math.PI * 2;
              return (
                <circle key={i} cx={300 + Math.cos(a) * orb.r} cy={300 + Math.sin(a) * orb.r} r={orb.size} fill="var(--accent)" className="hov__dot" style={{ animationDelay: `${(i / orb.count) * 2}s` }} />
              );
            })}
          </g>
        ))}
        {[...Array(24)].map((_, i) => {
          const a = (i / 24) * Math.PI * 2 + 0.3;
          const r = 80 + (i % 6) * 35;
          return (
            <circle key={`s${i}`} cx={300 + Math.cos(a) * r} cy={300 + Math.sin(a) * r} r="1" fill="var(--accent)" className="hov__twinkle" style={{ animationDelay: `${(i * 0.18) % 4}s` }} />
          );
        })}
      </svg>
    </div>
  );
}

function Stat({ n, label }) {
  return (
    <div className="stat">
      <div className="stat__n">{n}</div>
      <div className="stat__l">{label}</div>
    </div>
  );
}

// ============ SERVICES ============
const SERVICES = [
  { id: '01', glyph: '\u25C6', title: 'Software Engineering', summary: 'Custom software, web, mobile, and APIs\u2014built to scale.', detail: 'From enterprise apps to startup MVPs. Full-stack web, cross-platform mobile, REST/GraphQL APIs, and bespoke systems using modern frameworks.', tags: ['React', 'Next.js', 'Angular', 'Vue.js', 'Flutter', 'Node.js', 'Go', '+ more'] },
  { id: '02', glyph: '\u25C7', title: 'Cloud & Infrastructure', summary: 'Cloud-native, DevOps, containers, and infrastructure-as-code.', detail: 'Multi-cloud architecture across AWS, Azure, and GCP. CI/CD pipelines, container orchestration, serverless, and ERP systems engineered for 99.9% uptime.', tags: ['AWS', 'Azure', 'GCP', 'Kubernetes', 'Docker', 'Terraform', '+ more'] },
  { id: '03', glyph: '\u25C8', title: 'Security', summary: 'Cybersecurity, zero-trust, payments, compliance.', detail: 'Penetration testing, SIEM integration, zero-trust architecture, PCI-DSS-compliant payment systems, SOC 2 readiness, and enterprise-grade security audits.', tags: ['OWASP', 'PCI-DSS', 'SOC 2', 'Zero Trust', 'SIEM', '+ more'] },
  { id: '04', glyph: '\u25C9', title: 'Data & Intelligence', summary: 'AI/ML, real-time analytics, data pipelines.', detail: 'LLM integration, predictive models, real-time analytics pipelines, Power BI / Tableau dashboards, and database expertise across PostgreSQL, MongoDB, and Redis.', tags: ['TensorFlow', 'PyTorch', 'OpenAI', 'PostgreSQL', 'MongoDB', 'Power BI', '+ more'] },
  { id: '05', glyph: '\u25D0', title: 'Design & QA', summary: 'User-centred design and automated quality at scale.', detail: 'Design systems in Figma, prototyping, usability testing, plus end-to-end automated testing with Playwright, Cypress, and CI-integrated quality gates.', tags: ['Figma', 'Sketch', 'Playwright', 'Cypress', 'Storybook', '+ more'] },
  { id: '06', glyph: '\u25D1', title: 'Strategy & Operations', summary: 'IT consulting, automation, and digital transformation.', detail: 'Technology roadmaps, enterprise architecture consulting, RPA with UiPath, workflow automation, and end-to-end digital transformation strategy.', tags: ['UiPath', 'Jira', 'Confluence', 'Agile', 'Scrum', '+ more'] },
];

function Services() {
  const [active, setActive] = useState('01');
  const cur = SERVICES.find((s) => s.id === active);
  return (
    <section className="services" id="services">
      <div className="section__head">
        <span className="eyebrow">/ 02 — Capabilities</span>
        <h2 className="section__title">End-to-end services<br /><span className="section__title-muted">for your digital backbone.</span></h2>
        <p className="section__lede">Six practice areas, one accountable team. Pick a discipline to dig in.</p>
      </div>
      <div className="services__layout">
        <div className="services__list">
          {SERVICES.map((s) =>
          <button key={s.id} className={`svc ${active === s.id ? 'svc--active' : ''}`} onMouseEnter={() => setActive(s.id)} onClick={() => setActive(s.id)}>
              <span className="svc__id">{s.id}</span>
              <span className="svc__glyph">{s.glyph}</span>
              <span className="svc__body">
                <span className="svc__title">{s.title}</span>
                <span className="svc__summary">{s.summary}</span>
              </span>
              <span className="svc__arrow">→</span>
            </button>
          )}
        </div>
        <aside className="services__detail" key={cur.id}>
          <div className="services__detail-id">{cur.id} / 06</div>
          <div className="services__detail-glyph">{cur.glyph}</div>
          <h3 className="services__detail-title">{cur.title}</h3>
          <p className="services__detail-text">{cur.detail}</p>
          <div className="services__detail-tags">
            {cur.tags.map((t) => <span key={t} className="chip">{t}</span>)}
          </div>
          <a href="#contact" className="services__detail-cta">Discuss a {cur.title.toLowerCase()} project →</a>
        </aside>
      </div>
    </section>
  );
}

// ============ CLIENTS ============
const CLIENTS = [
  { name: 'Sampath Bank', logo: '/clients/sampath.png', url: 'https://www.sampath.lk/' },
  { name: 'Altair Tours', logo: '/clients/altair.png', url: 'https://altair-tours.web.app/' },
  { name: 'Panthera Clothing', logo: '/clients/panthera.png', url: 'https://panthera-clothing.web.app/' },
  { name: 'Pelican Travels', logo: '/clients/pelican.webp', url: 'https://pelicantravelsandtours.com/' },
  { name: 'Lanka Tiles', logo: '/clients/lankatiles.png', url: 'https://www.lankatiles.com/' },
  { name: 'Hotcat', logo: '/clients/hotcat.png', url: 'https://hotcat.lk/' },
  { name: 'SARTC', logo: '/clients/sartc.png', url: null },
  { name: 'Tangerine Vacations', logo: '/clients/tangerine vacations.png', url: 'https://tangerinevacations.com/' },
  { name: 'Swisstek Ceylon', logo: '/clients/swisstek.png', url: 'https://swisstekceylon.com/language/en/main-home/' },
  { name: 'Amethyst SMP', logo: '/clients/amethyst.png', url: 'https://amethyst-community.web.app/' },
  { name: 'Reach Digital', logo: '/clients/reach.jpeg', url: 'https://reachdigital.lk/' },
  { name: 'Timeless Trails', logo: '/clients/timeless trails.png', url: 'https://timeless-trails.com/' },
  { name: 'Lanka Swisstek India', logo: '/clients/lanka swisstek.avif', url: 'https://www.lankaswisstek.in/' },
  { name: 'Ceylon Cozy Tours', logo: '/clients/cct.png', url: 'https://ceylon-cozy-tours.web.app/' },
  { name: 'Avacdro', logo: '/clients/avacdro.png', url: 'https://avacdro.github.io/avacdro/#home' },
  { name: 'Lanka Walltiles', logo: '/clients/lankatiles.png', url: 'https://www.lankatiles.com/' },
  { name: 'Tangerine Tours', logo: '/clients/tangerine_tours.png', url: 'https://www.tangerinetours.com/' },
  { name: 'Pera Uni Alumni', logo: '/clients/pera_university.png', url: null },
  { name: 'Swisstek Aluminium', logo: '/clients/swisstek aluminium.svg', url: 'https://www.swisstekaluminium.com/' },
  { name: 'Beyond Paradise', logo: '/clients/lankatiles.png', url: null },
  { name: 'Winrich Restaurant', logo: '/clients/Winrich.png', url: null },
  { name: 'Coloma', logo: '/clients/Coloma.png', url: 'https://coloma.toreview.website/' },
];

function Clients() {
  const row1 = CLIENTS.slice(0, 10);
  const row2 = CLIENTS.slice(10);
  return (
    <section className="clients" id="clients">
      <div className="clients__head">
        <span className="eyebrow">/ 03 — Trusted by</span>
        <h2 className="section__title section__title--sm">Banks, manufacturers, agencies,<br /><span className="section__title-muted">and ambitious operators.</span></h2>
      </div>

      <div className="clients__counter">
        <span className="clients__counter-n">{CLIENTS.length}+</span>
        <span className="clients__counter-l">organisations trust Orca to build their software</span>
      </div>

      <div className="clients__bands">
        <div className="clients__band">
          <div className="clients__band-track clients__band-track--left">
            {[...row1, ...row1, ...row1].map((c, i) => (
              <a key={`r1-${i}`} href={c.url || '#'} target={c.url ? '_blank' : undefined} rel={c.url ? 'noopener noreferrer' : undefined} className="clients__pill">
                <img src={webp(c.logo)} alt={c.name} width="32" height="32" loading="lazy" />
                <span>{c.name}</span>
              </a>
            ))}
          </div>
        </div>
        <div className="clients__band">
          <div className="clients__band-track clients__band-track--right">
            {[...row2, ...row2, ...row2].map((c, i) => (
              <a key={`r2-${i}`} href={c.url || '#'} target={c.url ? '_blank' : undefined} rel={c.url ? 'noopener noreferrer' : undefined} className="clients__pill">
                <img src={webp(c.logo)} alt={c.name} width="32" height="32" loading="lazy" />
                <span>{c.name}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ WORK ============
const WORK = [
  { tag: 'Cloud & Infrastructure', name: 'VISAL ERP', slug: 'visal-erp', client: 'Visal Solutions', blurb: 'All-in-one ERP with custom modules per department. Live across operations, finance, and inventory.', kpi: 'Replaced 4 legacy tools', image: '/projects/visal_erp/Featured.png' },
  { tag: 'Software Engineering', name: 'Winrich Restaurant', slug: 'winrich-restaurant', client: 'Winrich Group', blurb: 'Elegant ordering, reservations, and digital menu — built mobile-first for a flagship F&B brand.', kpi: '6-week launch', image: '/projects/winrich/Featured.png' },
  { tag: 'Software Engineering', name: 'Ceylon Cozy Tours', slug: 'ceylon-cozy-tours', client: 'Ceylon Cozy Tours', blurb: 'Tailor-made tourism platform with custom itineraries, 500+ tour options, and 24/7 support.', kpi: '500+ tours listed', image: '/projects/ceylon_cozy_tours/Featured.png' },
  { tag: 'Software Engineering', name: 'Panthera Clothing', slug: 'panthera', client: 'Panthera', blurb: 'End-to-end brand support — hardware implementation, branding, and a modern web platform.', kpi: 'Full brand launch', image: '/projects/panthera/Featured.png' },
  { tag: 'Software Engineering', name: 'Pera Agros Alumni', slug: 'pera-agros-alumni', client: 'Peradeniya University', blurb: 'Alumni community platform for engagement, event management, and networking.', kpi: 'University-wide reach', image: '/projects/pera_agros/Featured.png' },
  { tag: 'Security', name: 'Crypto AI', slug: 'crypto-ai', client: 'Personal Customer', blurb: 'AI-powered trading platform trained on 100+ strategies with autonomous execution.', kpi: '100+ strategies', image: '/projects/crypto_ai/Featured.png' },
];

function Work() {
  return (
    <section className="work" id="work">
      <div className="section__head section__head--row">
        <div>
          <span className="eyebrow">/ 04 — Selected work</span>
          <h2 className="section__title">Recent projects.</h2>
        </div>
        <a href="/projects" className="btn btn--ghost">All projects →</a>
      </div>
      <div className="work__grid">
        {WORK.map((w) =>
        <a key={w.name} href={'/projects/' + w.slug} className="proj">
            <div className="proj__media">
              <img src={webp(w.image)} alt={w.name} loading="lazy" width="600" height="400" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--radius-sm)' }} />
            </div>
            <div className="proj__meta">
              <span className="proj__tag">{w.tag}</span>
              <span className="proj__kpi">{w.kpi}</span>
            </div>
            <h3 className="proj__name">{w.name}</h3>
            <p className="proj__client">{w.client}</p>
            <p className="proj__blurb">{w.blurb}</p>
            <span className="proj__cta">Read case →</span>
          </a>
        )}
      </div>
      <div className="work__cta">
        <a href="/projects" className="btn btn--primary">View all projects<span className="btn__arrow"> →</span></a>
      </div>
    </section>
  );
}

// ============ REVIEWS ============
function Star({ small }) {
  const s = small ? 14 : 18;
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
      <path fill="currentColor" d="M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7L12 17.3 5.7 21l1.7-7L2 9.2l7.1-.6L12 2z"/>
    </svg>
  );
}

function Reviews() {
  const [reviews, setReviews] = useState([]);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    if (typeof firebase === 'undefined' || !firebase.firestore) {
      setLoaded(true);
      return;
    }
    firebase.firestore().collection('reviews').orderBy('createdAt', 'desc').get()
      .then((snapshot) => {
        const fetched = [];
        snapshot.forEach((doc) => {
          const d = doc.data();
          fetched.push({
            id: doc.id,
            name: d.userName || 'Client',
            photo: d.userPhoto || '',
            rating: d.rating || 5,
            quote: d.comment || '',
            date: d.createdAt ? d.createdAt.toDate() : new Date(),
          });
        });
        setReviews(fetched);
        setLoaded(true);
      })
      .catch(() => setLoaded(true));
  }, []);

  const avgRating = reviews.length > 0
    ? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1)
    : '5.0';

  return (
    <section className="reviews" id="reviews">
      <div className="section__head">
        <span className="eyebrow">/ 05 — Reviews</span>
        <h2 className="section__title">Clients who came back<br /><span className="section__title-muted">and brought their friends.</span></h2>
        <div className="reviews__summary">
          <div className="reviews__stars">
            {[0,1,2,3,4].map(i => <Star key={i} />)}
          </div>
          <p className="reviews__summary-text">
            <strong>{avgRating}</strong> average rating across <strong>{reviews.length || '...'} verified clients</strong> — every Orca client recommended us with the maximum rating.
          </p>
        </div>
      </div>

      {!loaded ? (
        <div style={{ textAlign: 'center', padding: '60px 0', color: 'var(--ink-3)' }}>
          <div style={{ width: 24, height: 24, border: '2px solid var(--line)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'hovSpinCW 1s linear infinite', margin: '0 auto 16px' }}></div>
          Loading reviews...
        </div>
      ) : (
        <div className="reviews__grid">
          {reviews.map((r, i) => (
            <article key={r.id} className="review review--animated" style={{ animationDelay: `${i * 100}ms` }}>
              <div className="review__header">
                <div className="review__stars">
                  {[1,2,3,4,5].map(j => (
                    <svg key={j} width="14" height="14" viewBox="0 0 24 24" style={{ color: j <= r.rating ? '#ffc94d' : 'var(--ink-4)' }}>
                      <path fill="currentColor" d="M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7L12 17.3 5.7 21l1.7-7L2 9.2l7.1-.6L12 2z"/>
                    </svg>
                  ))}
                </div>
                <span className="review__verified">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                  Verified
                </span>
              </div>
              <p className="review__quote">&ldquo;{r.quote}&rdquo;</p>
              <div className="review__person">
                {r.photo ? (
                  <img src={r.photo} alt={r.name + ' profile photo'} width="40" height="40" className="review__photo" referrerPolicy="no-referrer" loading="lazy" />
                ) : (
                  <span className="review__avatar">{(r.name || 'C').charAt(0)}</span>
                )}
                <div>
                  <div className="review__name">{r.name}</div>
                  <div className="review__role">{r.date.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      )}

      <div className="reviews__cta">
        <div>
          <h4>Worked with us?</h4>
          <p>Sign in with Google to leave a review. We read every one.</p>
        </div>
        <a href="/reviews" className="btn btn--primary">Leave a review<span className="btn__arrow"> →</span></a>
      </div>
    </section>
  );
}

// ============ ABOUT ============
function About() {
  return (
    <section className="about" id="about">
      <div className="about__inner">
        <span className="eyebrow">/ 06 — About</span>
        <p className="about__quote">
          "Innovation isn't something we do. <span className="about__quote-em">It's who we are.</span>{' '}
          At Orca, we turn bold ideas into intelligent, durable software."
        </p>
        <div className="about__cols">
          <div className="about__col">
            <h4>Why we exist</h4>
            <p>Six years in, we're still building Orca for the same reason we started — most software fails businesses before it gets the chance to help them. We engineer the boring parts as carefully as the exciting ones.</p>
          </div>
          <div className="about__col">
            <h4>How we work</h4>
            <p>One small, senior team per project. Direct lines to engineers, no handoffs. Discovery in days, prototypes in weeks, production in months.</p>
          </div>
          <div className="about__col">
            <h4>Where we are</h4>
            <p>Headquartered in Colombo, Sri Lanka. Building for clients across Asia, the Middle East, and Europe — banks, manufacturers, retailers, and start-ups.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ CONTACT ============
function Contact() {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', company: '', scope: 'Web platform', msg: '' });
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const handleSubmit = (e) => {
    e.preventDefault();
    if (typeof firebase !== 'undefined' && firebase.firestore) {
      firebase.firestore().collection('contacts').add({
        name: form.name,
        email: form.email,
        company: form.company,
        scope: form.scope,
        message: form.msg,
        status: 'new',
        createdAt: firebase.firestore.FieldValue.serverTimestamp(),
      }).catch(() => {});
    }
    setSent(true);
  };
  return (
    <section className="contact" id="contact">
      <div className="contact__inner">
        <div className="contact__left">
          <span className="eyebrow">/ 07 — Contact</span>
          <h2 className="contact__title">Have a project in mind?<br /><span className="contact__title-muted">Let's map it out.</span></h2>
          <p className="contact__lede">Tell us a little about what you're building. We reply within one business day, usually faster.</p>
          <div className="contact__cards">
            <a href="tel:+94711818119" className="contact__card contact__card--phone">
              <div className="contact__card-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
              </div>
              <span className="contact__card-label">Prefer to talk?</span>
              <span className="contact__card-title">Call our Technical Consultant</span>
              <span className="contact__card-name">Charaka Janith</span>
              <span className="contact__card-value">+94 71 181 8119</span>
            </a>
            <a href="https://wa.me/94711818119" target="_blank" rel="noopener noreferrer" className="contact__card contact__card--whatsapp">
              <div className="contact__card-icon">
                <svg width="24" height="24" 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 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-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 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.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 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
              </div>
              <span className="contact__card-label">Quick chat?</span>
              <span className="contact__card-title">Message us on WhatsApp</span>
              <span className="contact__card-value">wa.me/94711818119</span>
            </a>
          </div>
          <div className="contact__office">
            <span className="contact__direct-label">Office</span>
            <span className="contact__direct-value">Colombo, Sri Lanka — Mon–Fri 8:00 AM–6:00 PM</span>
          </div>
        </div>
        <form className="contact__form" onSubmit={handleSubmit}>
          {sent ?
          <div className="contact__sent">
              <div className="contact__sent-mark">✓</div>
              <h4>Message received.</h4>
              <p>We'll be in touch shortly, {form.name || 'there'}.</p>
            </div> :
          <>
              <label className="field"><span>Name</span><input value={form.name} onChange={upd('name')} placeholder="Jane Perera" required /></label>
              <label className="field"><span>Email</span><input type="email" value={form.email} onChange={upd('email')} placeholder="jane@company.com" required /></label>
              <label className="field"><span>Company</span><input value={form.company} onChange={upd('company')} placeholder="Acme Ltd." /></label>
              <label className="field">
                <span>Scope</span>
                <select value={form.scope} onChange={upd('scope')}>
                  <option>Web platform</option>
                  <option>Mobile app</option>
                  <option>ERP / internal tools</option>
                  <option>Cloud / DevOps</option>
                  <option>AI / data</option>
                  <option>Other</option>
                </select>
              </label>
              <label className="field field--full"><span>What are you building?</span>
                <textarea value={form.msg} onChange={upd('msg')} rows="4" placeholder="A few sentences is plenty. Links welcome." required></textarea>
              </label>
              <button className="btn btn--primary btn--full" type="submit">Send message<span className="btn__arrow"> →</span></button>
            </>
          }
        </form>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="foot">
      <div className="foot__top">
        <div className="foot__brand-col">
          <div className="foot__brand">
            <span className="foot__logo-plate">
              <img src={webp("/logos/logo dark.png")} alt="Orca Solutions" width="28" height="28" className="foot__logo" />
            </span>
            <span className="foot__word">Orca Solutions Limited</span>
          </div>
          <div className="foot__socials">
            <a href="https://www.linkedin.com/company/109359186/" target="_blank" rel="noopener noreferrer" className="foot__social" aria-label="LinkedIn">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </a>
            <a href="https://x.com/OrcaSolutionsLK" target="_blank" rel="noopener noreferrer" className="foot__social" aria-label="X / Twitter">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <a href="https://github.com/AspireVX15" target="_blank" rel="noopener noreferrer" className="foot__social" aria-label="GitHub">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
            </a>
            <a href="https://www.facebook.com/profile.php?id=61582136085736" target="_blank" rel="noopener noreferrer" className="foot__social" aria-label="Facebook">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
            </a>
            <a href="https://wa.me/94711818119" target="_blank" rel="noopener noreferrer" className="foot__social" aria-label="WhatsApp">
              <svg width="18" height="18" 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 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-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 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.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 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/></svg>
            </a>
            <a href="mailto:orca.softwares.limited@gmail.com" className="foot__social" aria-label="Email">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
            </a>
          </div>
        </div>
        <div className="foot__cols">
          <div><h5>Services</h5><a href="#services">Engineering</a><a href="#services">Cloud</a><a href="#services">Security</a><a href="#services">Data</a></div>
          <div><h5>Company</h5><a href="#about">About</a><a href="#work">Work</a><a href="/projects">Projects</a><a href="#contact">Contact</a></div>
          <div><h5>Connect</h5><a href="https://www.linkedin.com/company/109359186/" target="_blank" rel="noopener noreferrer">LinkedIn</a><a href="https://x.com/OrcaSolutionsLK" target="_blank" rel="noopener noreferrer">X / Twitter</a><a href="https://wa.me/94711818119" target="_blank" rel="noopener noreferrer">WhatsApp</a><a href="mailto:orca.softwares.limited@gmail.com">Email</a></div>
        </div>
      </div>
      <div className="foot__bot">
        <span>© 2026 Orca Solutions Limited</span>
        <span>Colombo · Sri Lanka</span>
        <span className="foot__pulse"><span className="foot__dot"></span>All systems operational</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Services, Clients, Work, Reviews, About, Contact, Footer });