/* dev.NoNames — services, stats, process, work, pricing, faq, contact, footer */

function Counter({ to, unit = "", zero }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  const done = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const run = () => {
      if (done.current) return;
      done.current = true;
      if (to === 0) { setN(0); return; }
      const dur = 1100, t0 = performance.now();
      const tick = (t) => {
        const p = Math.min(1, (t - t0) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setN(Math.round(eased * to));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
      // Guarantee the final value lands even if rAF is throttled/frozen.
      setTimeout(() => setN(to), dur + 250);
    };
    const inView = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (r.top < vh * 0.9 && r.bottom > 0) run();
    };
    let io = null;
    if (typeof IntersectionObserver !== "undefined") {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) run(); });
      }, { threshold: 0.5 });
      io.observe(el);
    }
    window.addEventListener("scroll", inView, { passive: true });
    requestAnimationFrame(inView);
    const safety = setTimeout(run, 1800);
    return () => { if (io) io.disconnect(); window.removeEventListener("scroll", inView); clearTimeout(safety); };
  }, [to]);
  return <span ref={ref} className="v">{to === 0 && zero ? zero : n}<span className="u">{unit}</span></span>;
}

function Capabilities() {
  const items = [
    { n: "Web", l: "Sites & apps" },
    { n: "E-Comm", l: "Online stores" },
    { n: "Software", l: "Custom tools" },
  ];
  return (
    <section className="caps">
      <div className="container">
        <div className="caps-grid">
          {items.map((it, i) => (
            <div className="caps-item reveal" style={{ "--d": (i * 90) + "ms" }} key={it.n}>
              <div className="caps-n">{it.n}</div>
              <div className="caps-l">{it.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="section section-svc" id="services">
      <div className="container">
        <div className="svc-hero">
          <div className="svc-hero-art reveal">
            <span className="art-glow"></span>
            <span className="art-grid"></span>
            <img src="undraw_proud-coder_bivp.svg" alt="A developer building your product" loading="lazy" />
          </div>
          <div className="svc-hero-copy reveal" style={{ "--d": "140ms" }}>
            <div className="kicker"><span className="idx">01 /</span> What we do</div>
            <h2 className="display title">Three ways we ship<br/>your business forward.</h2>
            <p className="lead">Web comes first. It's where most of you meet your customers. But whether you need a store, a site or a tool nobody sells off the shelf, it's all one team.</p>
          </div>
        </div>
      </div>
      <ServiceScroll />
    </section>
  );
}

/* Pinned, scroll-driven blob: rotates through the 3 services, icons ride the
   rim into view, detail panel swaps in sync. Falls back to stacked cards when
   GSAP is unavailable / on mobile / reduced-motion. */
function ServiceScroll() {
  const root = React.useRef(null);
  const stage = React.useRef(null);
  const blob = React.useRef(null);
  const svc = window.SERVICES;
  const COLORS = ["#22c55e", "#18bfa6", "#1fa2d6"]; // from the hero illustration: green → teal → blue

  // useLayoutEffect (not useEffect) so `.is-pinned` is applied BEFORE the browser
  // paints — otherwise the fallback stacked cards flash for one frame before the
  // blob layout takes over.
  React.useLayoutEffect(() => {
    const gsap = window.gsap, ST = window.ScrollTrigger, el = root.current;
    if (!gsap || !ST || !el) return;
    gsap.registerPlugin(ST);

    // smooth scroll with inertia (once, page-wide)
    if (window.Lenis && !window.__lenis) {
      const lenis = new window.Lenis({ lerp: 0.085, smoothWheel: true });
      window.__lenis = lenis;
      lenis.on("scroll", ST.update);
      gsap.ticker.add((time) => lenis.raf(time * 1000));
      gsap.ticker.lagSmoothing(0);
    }

    // gsap.matchMedia builds the pinned blob ONLY on desktop and reverts it
    // automatically when the viewport drops to tablet/phone (responsive to resize).
    const mm = gsap.matchMedia();
    mm.add({ big: "(min-width: 1024px)", small: "(max-width: 1023px)", reduce: "(prefers-reduced-motion: reduce)" }, (cx) => {
      if (cx.conditions.reduce) return;
      const isSmall = cx.conditions.small;
      el.classList.add("is-pinned");
      el.classList.toggle("is-mobile", isSmall);
      const icons = gsap.utils.toArray(".svc-ic", el);
      const panels = gsap.utils.toArray(".svc-panel", el);
      const dots = gsap.utils.toArray(".svc-dot", el);
      const path = el.querySelector(".svc-blob-path");
      const pickColor = gsap.utils.interpolate(COLORS);
      const R = isSmall ? 130 : (window.innerWidth < 1300 ? 300 : 360); // orbit radius (small on mobile; icons sit further inside the blob)
      const ACTIVE = isSmall ? 90 : 135;             // mobile: icon sits at the blob's bottom
      const BASE = [ACTIVE, ACTIVE + 120, ACTIVE - 120]; // icon i reaches ACTIVE when r = -120*i
      const sBase = isSmall ? 0.68 : 0.4, sPeak = isSmall ? 1.05 : 1.5; // icon scale (smaller on mobile)
      const state = { r: 0 };

      gsap.set(blob.current, { xPercent: -50, yPercent: -50 });
      icons.forEach((ic) => gsap.set(ic, { xPercent: -50, yPercent: -50 }));

      const apply = () => {
        const r = state.r;
        gsap.set(blob.current, { rotation: r * 0.55 });
        icons.forEach((ic, i) => {
          const deg = BASE[i] + r;
          const a = deg * Math.PI / 180;
          const vis = Math.cos((deg - ACTIVE) * Math.PI / 180); // 1 at the corner-front
          gsap.set(ic, {
            x: Math.cos(a) * R,
            y: Math.sin(a) * R,
            opacity: gsap.utils.clamp(0, 1, (vis + 0.4) / 1.0),
            scale: sBase + sPeak * gsap.utils.clamp(0, 1, vis),
          });
        });
        const t = gsap.utils.clamp(0, 1, -r / 240);
        const col = pickColor(t);
        el.style.setProperty("--svc-accent", col);
        if (path) gsap.set(path, { fill: col });
        const active = Math.round(t * 2);
        dots.forEach((d, i) => d.classList.toggle("on", i === active));
      };

      gsap.set([panels[1], panels[2]], { autoAlpha: 0, y: 26 });
      apply();

      const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
      tl.to({}, { duration: 0.7 })   // HOLD on card 1 — give it scroll room to be read before switching
        .to(state, { r: -120, duration: 1, onUpdate: apply })
        .to(panels[0], { autoAlpha: 0, y: -26, duration: 0.4 }, "<")
        .to(panels[1], { autoAlpha: 1, y: 0, duration: 0.45 }, "<0.25")
        .to({}, { duration: 0.7 })   // HOLD on card 2
        .to(state, { r: -240, duration: 1, onUpdate: apply })
        .to(panels[1], { autoAlpha: 0, y: -26, duration: 0.4 }, "<")
        .to(panels[2], { autoAlpha: 1, y: 0, duration: 0.45 }, "<0.25")
        .to({}, { duration: 0.7 });  // HOLD on card 3

      const snap = { snapTo: [0, 0.5, 1], duration: { min: 0.25, max: 0.7 }, ease: "power1.inOut" };
      if (isSmall) {
        // MOBILE: the stage is held by CSS position:sticky (see styles.css) — NO JS
        // pin, so no enter/exit jump and no scroll-engine takeover (native smooth
        // scroll stays). ScrollTrigger only scrubs the spin. The tall container
        // height gives the sticky stage the scroll distance it freezes for.
        el.style.height = (window.innerHeight + 1500) + "px";
        ST.create({
          animation: tl,
          trigger: el,
          start: "top top",
          end: "bottom bottom",
          scrub: 1,
          snap,
        });
      } else {
        // DESKTOP: unchanged — ScrollTrigger's pin (smooth with Lenis wheel).
        ST.create({
          animation: tl,
          trigger: el,
          start: "top top",
          end: "+=2600",
          pin: stage.current,
          scrub: 1,
          snap,
        });
      }

      ST.refresh();
      return () => { el.classList.remove("is-pinned", "is-mobile"); el.style.height = ""; };
    });

    return () => mm.revert();
  }, []);

  return (
    <div className="svc-scroll" ref={root}>
      <div className="svc-stage" ref={stage}>
        <div className="svc-panels">
          <div className="svc-steps" aria-hidden="true">
            {svc.map((s, i) => <span className={"svc-dot" + (i === 0 ? " on" : "")} key={s.no}></span>)}
          </div>
          {svc.map((s) => (
            <article className="svc-panel" key={s.no}>
              <div className="svc-no">{s.no}{s.tag ? " · " + s.tag : ""}</div>
              <h3>{s.title}</h3>
              <p>{s.blurb}</p>
              <ul>{s.points.map((p) => <li key={p}>{p}</li>)}</ul>
              <a href="#contact" className="btn btn-ghost btn-sm">Start with {s.title.split(" ")[0]} <span className="arr"><Icon name="arrow" size={15} /></span></a>
            </article>
          ))}
        </div>
        <div className="svc-blob-wrap">
          <div className="svc-blob" ref={blob}>
            <svg viewBox="0 0 600 600" width="600" height="600" aria-hidden="true">
              <path className="svc-blob-path" fill="#34d399" transform="translate(300 300) scale(0.5)" d="M421.5,-310.5C535.5,-238,613.5,-119,599.5,-8C585.5,103,479.5,206,365.5,288.5C251.5,371,129.5,433,8.5,421C-112.5,409,-225,323,-313.5,219.5C-402,116,-466.5,-5,-447,-110.5C-427.5,-216,-324,-305.5,-216.5,-372.5C-109,-439.5,3.5,-484,116.5,-470.5C229.5,-457,307.5,-383,421.5,-310.5Z" />
              <path className="svc-blob-hi" fill="#ffffff" opacity="0.18" d="M236 120 C300 114 348 158 346 220 C344 284 300 318 234 316 C170 314 130 268 134 210 C138 156 180 126 236 120 Z" />
            </svg>
          </div>
          <div className="svc-wheel">
            {svc.map((s) => (
              <div className="svc-ic" key={s.no}>
                <span className="svc-ic-badge"><Icon name={s.icon} size={46} /></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Stats() {
  return (
    <section className="section" style={{ paddingBlock: "clamp(30px,5vw,70px)" }}>
      <div className="container">
        <div className="stats">
          {window.STATS.map((s, i) => (
            <div className="stat reveal" style={{ "--d": (i * 80) + "ms" }} key={i}>
              <Counter to={s.v} unit={s.unit} zero={s.zero} />
              <div className="k">{s.k}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Animated "how we work" illustration: a line that draws + illuminates on scroll,
   with each step icon coming to life as the drawing front reaches it. */
const PROC_PATH = "M150 38 C 70 112, 70 162, 150 232 C 230 302, 230 352, 150 422 C 70 492, 70 542, 150 588";
const PROC_FRACS = [0.06, 0.37, 0.63, 0.94];
const PROC_ICONS = [
  // Discover — magnifier
  (<g key="d"><circle cx="-3" cy="-3" r="6.5" /><line x1="1.5" y1="1.5" x2="8.5" y2="8.5" /></g>),
  // Design — pencil
  (<g key="g"><path d="M -7 7 l 9 -9 l 4 4 l -9 9 z" /><path d="M 2 -2 l 4 4" /></g>),
  // Build — code brackets
  (<g key="b"><path d="M -2.5 -7 l -7 7 l 7 7" /><path d="M 2.5 -7 l 7 7 l -7 7" /></g>),
  // Ship — paper plane
  (<g key="s"><path d="M 9 -8 L -8 -2 L -1 1.5 L 2.5 9 Z" /><path d="M -1 1.5 L 9 -8" /></g>),
];

function ProcessArt() {
  const ref = React.useRef(null);
  React.useLayoutEffect(() => {
    const svg = ref.current;
    if (!svg) return;
    const line = svg.querySelector(".proc-line");
    const glow = svg.querySelector(".proc-glow");
    const nodes = Array.from(svg.querySelectorAll(".proc-node"));
    const L = line.getTotalLength();

    // Place each node exactly on the path so the line threads through them.
    nodes.forEach((n, i) => {
      const pt = line.getPointAtLength(L * PROC_FRACS[i]);
      n.setAttribute("transform", `translate(${pt.x} ${pt.y})`);
    });

    const gsap = window.gsap, ST = window.ScrollTrigger;
    const ic = (n) => n.querySelector(".proc-ic");
    const ring = (n) => n.querySelector(".proc-ring");
    const halo = (n) => n.querySelector(".proc-halo");

    // Fallback / reduced-motion: show everything fully lit, no animation.
    const showAll = () => {
      [glow, line].forEach((p) => { p.style.strokeDasharray = "none"; p.style.strokeDashoffset = "0"; });
      nodes.forEach((n) => n.classList.add("lit"));
    };
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!gsap || !ST || reduce) { showAll(); return; }
    gsap.registerPlugin(ST);

    const LIT = "#22c55e"; // matches the line gradient's green (don't read --accent here: it's set in a later effect)
    gsap.set([glow, line], { strokeDasharray: L, strokeDashoffset: L });
    nodes.forEach((n) => {
      gsap.set(n, { opacity: 0.4 });
      gsap.set(ic(n), { scale: 0.78, transformOrigin: "50% 50%" });
    });

    const tl = gsap.timeline({ defaults: { ease: "none" } });
    tl.to([glow, line], { strokeDashoffset: 0, duration: 1 }, 0);
    nodes.forEach((n, i) => {
      const at = PROC_FRACS[i];
      tl.to(n, { opacity: 1, duration: 0.06 }, at)
        .to(halo(n), { opacity: 0.85, duration: 0.14 }, at)
        .to(ring(n), { stroke: LIT, duration: 0.12 }, at)
        .to(ic(n), { stroke: "#ffffff", scale: 1, duration: 0.16, ease: "back.out(2)" }, at);
    });

    const st = ST.create({ trigger: svg, start: "top 82%", end: "bottom 58%", scrub: 0.6, animation: tl });
    ST.refresh();
    return () => { st.kill(); tl.kill(); };
  }, []);

  return (
    <svg ref={ref} className="proc-svg" viewBox="0 0 300 620" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Our process, from discovery through launch">
      <defs>
        <linearGradient id="procGrad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="620">
          <stop offset="0" stopColor="#22c55e" />
          <stop offset="0.5" stopColor="#18bfa6" />
          <stop offset="1" stopColor="#1fa2d6" />
        </linearGradient>
        <filter id="procGlow" x="-80%" y="-80%" width="260%" height="260%">
          <feGaussianBlur stdDeviation="5" result="b" />
          <feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge>
        </filter>
      </defs>
      <path className="proc-track" d={PROC_PATH} />
      <path className="proc-glow" d={PROC_PATH} />
      <path className="proc-line" d={PROC_PATH} />
      {PROC_ICONS.map((glyph, i) => (
        <g className="proc-node" key={i}>
          <circle className="proc-halo" r="26" />
          <circle className="proc-ring" r="20" />
          <g className="proc-ic">{glyph}</g>
        </g>
      ))}
    </svg>
  );
}

function Process() {
  return (
    <section className="section" id="process">
      <div className="container">
        <div className="proc-layout">
          <div className="proc-copy">
            <div className="section-head reveal proc-head">
              <div className="kicker"><span className="idx">02 /</span> How we work</div>
              <h2 className="display title">No black boxes.<br/>You see every step.</h2>
              <p className="lead">A clear, calm process from first call to launch, and beyond. You always know what's happening and what's next.</p>
            </div>
            <div className="proc">
              {window.PROCESS.map((p, i) => (
                <div className="step reveal" style={{ "--d": (i * 80) + "ms" }} key={p.no}>
                  <div className="no">{p.no}</div>
                  <h4>{p.title}</h4>
                  <p>{p.p}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="proc-art reveal" style={{ "--d": "120ms" }}>
            <img className="proc-girl" src="proc-girl.svg" alt="" aria-hidden="true" loading="lazy" />
            <ProcessArt />
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkThumb({ item }) {
  if (item.embed) {
    return (
      <div className="ph ph-embed">
        <iframe src={item.url} title={item.title} loading="lazy" sandbox="allow-scripts allow-same-origin allow-popups allow-forms"></iframe>
        <a className="ph-visit" href={item.url} target="_blank" rel="noopener noreferrer">Visit site <Icon name="arrow" size={14} /></a>
      </div>
    );
  }
  const inner = item.img
    ? <img src={item.img} alt={item.title} loading="lazy" />
    : <span className="ph-tag">[ {item.title} ]</span>;
  if (item.url) {
    return (
      <a className="ph" href={item.url} target="_blank" rel="noopener noreferrer">
        {inner}
        <span className="ph-go"><Icon name="arrow" size={16} /></span>
      </a>
    );
  }
  return <div className="ph">{inner}</div>;
}

function Work() {
  const w = window.WORK;
  return (
    <section className="section" id="work">
      <div className="container">
        <div className="section-head reveal eyebrow-row" style={{ maxWidth: "100%" }}>
          <div style={{ maxWidth: "640px" }}>
            <div className="kicker"><span className="idx">03 /</span> Selected work</div>
            <h2 className="display title">Recent builds.</h2>
            <p className="lead">A few recent builds. Click any card to open the live site.</p>
          </div>
        </div>
        <div className="work-grid">
          <article className="work tall reveal" style={{ "--d": "0ms" }}>
            <WorkThumb item={w[0]} />
            <WorkInfo item={w[0]} />
          </article>
          <div style={{ display: "grid", gridTemplateRows: "1fr 1fr", gap: "18px" }}>
            <article className="work reveal" style={{ "--d": "80ms" }}>
              <WorkThumb item={w[1]} />
              <WorkInfo item={w[1]} />
            </article>
            <article className="work reveal" style={{ "--d": "160ms" }}>
              <WorkThumb item={w[2]} />
              <WorkInfo item={w[2]} />
            </article>
          </div>
          <div className="work-note reveal">
            <p><b>This space fills up fast.</b> Want to be one of the first case studies, and get founder-level attention while we're hungry for it?</p>
            <a href="#contact" className="btn btn-primary btn-sm">Be an early client <span className="arr"><Icon name="arrow" size={16}/></span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkInfo({ item }) {
  return (
    <div className="work-info">
      <div className="row"><h3>{item.title}</h3><span className="yr">{item.year}</span></div>
      <p>{item.desc}</p>
      <div className="chips">{item.chips.map((c) => <span className="chip" key={c}>{c}</span>)}</div>
    </div>
  );
}

function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker"><span className="idx">04 /</span> Engagement models</div>
          <h2 className="display title">Pick how you<br/>want to work.</h2>
          <p className="lead">Transparent starting points. Every project gets a fixed quote after a quick scope call. No surprise invoices, ever.</p>
        </div>
        <div className="price-grid">
          {window.PLANS.map((pl, i) => (
            <article className={"plan reveal" + (pl.feat ? " feat" : "")} style={{ "--d": (i * 160) + "ms" }} key={pl.name}>
              <svg className="plan-wave" viewBox="0 0 320 92" preserveAspectRatio="none" aria-hidden="true">
                <path d="M0,46 C50,18 110,66 172,44 C232,22 288,58 320,40 L320,92 L0,92 Z" />
                <path className="w2" d="M0,62 C60,40 120,74 190,54 C250,38 300,62 320,56 L320,92 L0,92 Z" />
              </svg>
              <div className="plan-c">
                <div className="plan-name">{pl.name}<span>{pl.tag}</span></div>
                <div className="plan-price">{pl.price}<span className="per">{pl.per}</span></div>
                <ul>{pl.points.map((p) => <li key={p}>{p}</li>)}</ul>
                <a href="#contact" className="plan-btn">{pl.cta}</a>
              </div>
            </article>
          ))}
        </div>
        <p className="reveal" style={{ textAlign: "center", marginTop: "26px", color: "var(--muted-2)", fontFamily: "var(--font-mono)", fontSize: "13px", letterSpacing: ".04em" }}>
          Indicative pricing · final quote after a free scope call · currency to your region
        </p>
      </div>
    </section>
  );
}

function FaqItem({ item, open, onToggle }) {
  return (
    <div className="faq-item" data-open={open ? "1" : "0"}>
      <button className="faq-q" onClick={onToggle}>
        <span>{item.q}</span>
        <span className="faq-ic"></span>
      </button>
      <div className="faq-a">
        <div className="faq-a-inner">{item.a}</div>
      </div>
    </div>
  );
}

function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker"><span className="idx">05 /</span> Questions</div>
          <h2 className="display title">The honest answers.</h2>
        </div>
        <div className="faq reveal">
          {window.FAQS.map((f, i) => (
            <FaqItem key={i} item={f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ContactForm() {
  const [vals, setVals] = React.useState({ name: "", email: "", need: "Web design / development", msg: "" });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendErr, setSendErr] = React.useState("");
  const set = (k) => (e) => setVals({ ...vals, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!vals.name.trim()) er.name = "Your name?";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(vals.email)) er.email = "Valid email needed";
    if (vals.msg.trim().length < 8) er.msg = "Tell us a little more";
    setErrs(er);
    if (Object.keys(er).length !== 0) return;
    setSending(true); setSendErr("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: vals.name, email: vals.email, interest: `[dev.nonames] ${vals.need}`, message: vals.msg }),
      });
      if (!res.ok) throw new Error("send failed");
      setSent(true);
    } catch (err) {
      setSendErr("Couldn't send that just now — please email hello@dev.nonames.lk directly.");
    } finally {
      setSending(false);
    }
  };
  if (sent) {
    return (
      <div className="form-ok reveal">
        <div className="check"><Icon name="check" size={26}/></div>
        <div className="big">Got it, {vals.name.split(" ")[0]}.</div>
        <p>We'll reply within one business day with next steps and a scope call link. Talk soon.</p>
      </div>
    );
  }
  return (
    <form className="form reveal" onSubmit={submit} noValidate>
      <div className="form-row">
        <div className={"field" + (errs.name ? " invalid" : "")}>
          <label>Name</label>
          <input value={vals.name} onChange={set("name")} placeholder="Jane Doe" />
          <span className="err">{errs.name}</span>
        </div>
        <div className={"field" + (errs.email ? " invalid" : "")}>
          <label>Email</label>
          <input value={vals.email} onChange={set("email")} placeholder="jane@company.com" />
          <span className="err">{errs.email}</span>
        </div>
      </div>
      <div className="field">
        <label>What do you need?</label>
        <select value={vals.need} onChange={set("need")}>
          <option>Web design / development</option>
          <option>E-commerce store</option>
          <option>Custom software</option>
          <option>A full revamp</option>
          <option>Not sure yet, help me figure it out</option>
        </select>
      </div>
      <div className={"field" + (errs.msg ? " invalid" : "")}>
        <label>The project</label>
        <textarea value={vals.msg} onChange={set("msg")} placeholder="A line or two about your business and what you're trying to build…"></textarea>
        <span className="err">{errs.msg}</span>
      </div>
      <button type="submit" className="btn btn-primary" disabled={sending}>
        {sending ? "Sending…" : <>Send it over <span className="arr"><Icon name="arrow" size={17}/></span></>}
      </button>
      {sendErr && <div className="form-senderr">{sendErr}</div>}
    </form>
  );
}

function Contact() {
  return (
    <section className="section cta" id="contact">
      <div className="container">
        <div className="cta-card reveal">
          <div className="glow"></div>
          <div className="cta-grid">
            <div>
              <div className="kicker">Let's build the thing</div>
              <h2 style={{ marginTop: "20px" }}>Tell us what<br/>you're building.</h2>
              <p className="sub">No sales fluff. A quick scope call, an honest quote, and a clear plan to ship. You stay in front, we do the heavy lifting.</p>
              <div className="cta-contact">
                <a href="mailto:hello@dev.nonames.lk"><span className="ic"><Icon name="mail" size={17}/></span> hello@dev.nonames.lk</a>
                <a href="#contact"><span className="ic"><Icon name="chat" size={17}/></span> Book a 20-min scope call</a>
              </div>
            </div>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <a href="#top" className="brand"><span className="dot"></span><span>dev<span className="lo">.</span><b>NoNames</b></span></a>
        <div className="links">
          <a href="#services">Services</a>
          <a href="#work">Work</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
          <a href="#contact">Contact</a>
          <a href="https://nonames.lk" className="foot-cross">Creative Agency ↗</a>
        </div>
        <div className="cr">© {new Date().getFullYear()} dev.NoNames</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Counter, Capabilities, Services, ServiceScroll, Stats, Process, Work, Pricing, Faq, Contact, Footer });