// Graylight — single-page site, Bento direction, solo founder framing.

const Arrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
);

const Logo = () => (
  <a href="#top" className="logo">
    <span className="mark"></span>
    <span>Graylight</span>
  </a>
);

const NavBar = () => (
  <nav className="site">
    <div className="inner">
      <Logo />
      <div className="nav-links">
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#process">Process</a>
        <a href="#contact">Contact</a>
      </div>
      <a href="#contact" className="btn btn-ghost" style={{ padding: "9px 16px", fontSize: 13 }}>
        Start a project <Arrow />
      </a>
    </div>
  </nav>
);

// ────────────────── HERO ──────────────────

const Hero = () => (
  <section id="top" className="hero">
    <div className="hero-glow" aria-hidden></div>
    <div className="container" style={{ position: "relative" }}>
      <div className="hero-top">
        <h1 className="display">
          Software, AI,<br />
          and the <em>growth</em><br />
          that pays for both.
        </h1>
        <div>
          <span className="eyebrow" style={{ marginBottom: 14 }}><span className="dot"></span> A studio of one — by design</span>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--muted)", margin: "14px 0 24px", maxWidth: 460 }}>
            Graylight is one senior engineer — twenty years of shipping software for the
            DOD, public companies, and founders who'd rather not assemble a thirty-person
            org to build the thing in their head.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a href="#contact" className="btn btn-primary">Tell me about your project <Arrow /></a>
            <a href="#services" className="btn btn-ghost">See what I do</a>
          </div>
        </div>
      </div>

      {/* Bento */}
      <div className="bento">
        {/* Big intro tile */}
        <div className="card span-5 row-2" style={{ padding: 32, position: "relative", overflow: "hidden", background: "linear-gradient(160deg, #1E293B, #0f172a)" }}>
          <div aria-hidden style={{ position: "absolute", top: -60, right: -60, width: 280, height: 280, background: "radial-gradient(circle, var(--accent-soft), transparent 70%)" }}></div>
          <span className="eyebrow"><span className="dot"></span> What I do</span>
          <div style={{ fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1.05, marginTop: 56, letterSpacing: "-0.02em" }}>
            I'm the engineer you call when the <em style={{ color: "var(--accent)", fontStyle: "italic" }}>"how"</em> is the hard part.
          </div>
          <div style={{ marginTop: 24, fontSize: 14, color: "var(--muted)", lineHeight: 1.6 }}>
            Custom builds, AI integration, and the marketing that makes them compound — handled by the same person, end to end.
          </div>
        </div>

        {/* Code preview */}
        <div className="card span-4 row-2" style={{ padding: 0, overflow: "hidden", background: "#0a0f1a" }}>
          <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ef4444" }}></span>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#f59e0b" }}></span>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#22c55e" }}></span>
            <span style={{ marginLeft: 10, fontFamily: "var(--mono)", fontSize: 11, color: "var(--dim)" }}>spatial/tile_pipeline.ts</span>
          </div>
          <pre style={{ margin: 0, padding: 18, fontFamily: "var(--mono)", fontSize: 12, lineHeight: 1.7, color: "#cbd5e1", overflow: "hidden" }}>
{`// 18M points → 60fps map.
// Quadtree + worker pool + WASM
// decode. No magic, just patience.

`}<span style={{ color: "#a78bfa" }}>export async function</span>{` `}<span style={{ color: "#fbbf24" }}>tilePipeline</span>{`(src) {
  `}<span style={{ color: "#94a3b8", fontStyle: "italic" }}>// stream &gt; load. always.</span>{`
  `}<span style={{ color: "#a78bfa" }}>const</span>{` chunks = src`}
            <span style={{ background: "var(--accent)", color: "#1a1208", padding: "0 4px", borderRadius: 3, marginLeft: 4 }}>.lazyDecode()</span>
{`
}`}
          </pre>
        </div>

        {/* AI tile */}
        <div className="card span-3 row-2" style={{ padding: 24, position: "relative", overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span className="tag">03 / AI</span>
            <Arrow />
          </div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 28, lineHeight: 1.1, marginTop: 24, letterSpacing: "-0.01em" }}>
            AI that <em style={{ color: "var(--accent)", fontStyle: "italic" }}>earns</em> its line item.
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: "var(--muted)", lineHeight: 1.55 }}>
            Used well, AI cuts months off a build. Used badly, it's a slogan. I treat it like a tool, not a brand.
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 18, flexWrap: "wrap" }}>
            {["LLMs", "Agents", "RAG", "Eval"].map((t) => (
              <span key={t} style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", border: "1px solid var(--border-strong)", borderRadius: 999, padding: "3px 8px" }}>{t}</span>
            ))}
          </div>
        </div>

        {/* Experience tile */}
        <div className="card span-5" style={{ padding: 24, display: "flex", alignItems: "center", gap: 24 }}>
          <div style={{ fontFamily: "var(--serif)", fontSize: 56, lineHeight: 1, color: "var(--accent)", letterSpacing: "-0.02em" }}>20<span style={{ fontSize: 32 }}>yrs</span></div>
          <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}>
            of shipping desktop, mobile, and web software — including GIS and data-heavy systems for the DOD and public companies.
          </div>
        </div>

        {/* Process tile */}
        <div className="card span-4" style={{ padding: 24 }}>
          <span className="eyebrow">How it goes</span>
          <div style={{ marginTop: 14, fontFamily: "var(--serif)", fontSize: 24, lineHeight: 1.2, letterSpacing: "-0.01em" }}>
            One call. One plan. Working software in week one.
          </div>
        </div>

        {/* Marketing tile */}
        <div className="card span-3" style={{ padding: 24, position: "relative", overflow: "hidden" }}>
          <span className="tag">05 / Growth</span>
          <div style={{ marginTop: 14, fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.15, letterSpacing: "-0.01em" }}>
            Social &amp; content that compounds.
          </div>
          <svg viewBox="0 0 200 50" style={{ marginTop: 14, width: "100%", height: 32 }}>
            <path d="M0 40 Q 40 38, 60 30 T 120 18 T 200 4" stroke="var(--accent)" fill="none" strokeWidth="2" />
            <path d="M0 40 Q 40 38, 60 30 T 120 18 T 200 4 L 200 50 L 0 50 Z" fill="var(--accent-soft)" />
          </svg>
        </div>
      </div>
    </div>
  </section>
);

// ────────────────── SERVICES ──────────────────

const SERVICES = [
  { n: "01", title: "Custom software", blurb: "Desktop, mobile, web, backend. You bring the idea — I architect, build, and ship it. Twenty years of doing this means I know which corners cut and which ones don't.", icon: <path d="M8 6 2 12l6 6M16 6l6 6-6 6M14 4l-4 16" /> },
  { n: "02", title: "Hard problems", blurb: "GIS pipelines, data-heavy systems, scaling walls, legacy migrations. The work most agencies politely turn down — that's where I tend to do my best.", icon: <><circle cx="12" cy="12" r="9" /><path d="M9 9c0-1.7 1.3-3 3-3s3 1.3 3 3-3 2-3 4M12 17v.01" /></> },
  { n: "03", title: "AI integration", blurb: "Real wins from LLMs, agents, and ML — built where they actually move a number for your business. Not a sticker on the homepage.", icon: <><path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8" /><circle cx="12" cy="12" r="4" /></> },
  { n: "04", title: "Cost & efficiency", blurb: "An engineer's audit of your stack and process. The line items quietly draining your budget — and leaner replacements that don't hurt to use.", icon: <path d="M3 17l6-6 4 4 8-8M14 7h7v7" /> },
  { n: "05", title: "Social marketing", blurb: "Strategy, content, and analytics across the channels your customers actually live on. Engineering rigor applied to a part of the business that usually doesn't get it.", icon: <path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z" /> },
  { n: "06", title: "Growth, end-to-end", blurb: "Positioning, funnels, retention loops. Treated like engineering — measured, iterated, compounding — not a one-off campaign.", icon: <path d="M3 3v18h18M7 14l4-4 3 3 6-7" /> },
];

const Services = () => (
  <section id="services">
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow"><span className="dot"></span> Services</span>
          <h2 className="display" style={{ marginTop: 18 }}>
            Six things,<br />done <em>well</em>.
          </h2>
        </div>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--muted)", maxWidth: 560, alignSelf: "end" }}>
          I don't pretend to do everything. I picked the problems I'm best at — building,
          fixing, and growing software products — and stayed there.
        </p>
      </div>

      <div className="bento" style={{ gridAutoRows: "auto" }}>
        {SERVICES.map((s) => (
          <div key={s.n} className="card span-4" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 16, minHeight: 240 }}>
            <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">{s.icon}</svg>
              </div>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--dim)" }}>{s.n}</span>
            </div>
            <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.25 }}>{s.title}</div>
            <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.55, flex: 1 }}>{s.blurb}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ────────────────── ABOUT ──────────────────

const About = () => (
  <section id="about">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" }} className="about-grid">
        <div className="card" style={{ padding: 0, overflow: "hidden", aspectRatio: "4 / 5", position: "relative", background: "linear-gradient(135deg, #1E293B, #0f172a)" }}>
          {/* Portrait placeholder */}
          <div aria-hidden style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(circle at 35% 40%, hsl(28 55% 45%), hsl(220 30% 15%) 60%)",
          }}></div>
          <svg viewBox="0 0 400 500" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.5 }}>
            <ellipse cx="200" cy="200" rx="80" ry="90" fill="rgba(0,0,0,0.45)" />
            <path d="M60 500 Q60 320 200 320 Q340 320 340 500 Z" fill="rgba(0,0,0,0.45)" />
          </svg>
          <div style={{ position: "absolute", inset: 0, background: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E\")", mixBlendMode: "overlay", opacity: 0.4 }}></div>
          <div style={{ position: "absolute", left: 24, bottom: 24, right: 24, color: "white" }}>
            <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>Founder &amp; sole engineer</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 30, marginTop: 4, letterSpacing: "-0.01em" }}>Zak Nixon</div>
            <div style={{ marginTop: 14, fontSize: 13, color: "rgba(255,255,255,0.7)" }}>Cullman, Alabama · works remote</div>
          </div>
        </div>

        <div>
          <span className="eyebrow"><span className="dot"></span> About</span>
          <h2 className="display" style={{ marginTop: 18, marginBottom: 24 }}>
            A <em>deliberately</em> small studio.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--text)", marginBottom: 18 }}>
            Hi, I'm <span style={{ fontWeight: 500 }}>Zak</span>. Graylight is me — twenty
            plus years of software development and architecture, packaged into a consultancy
            small enough to actually answer the phone.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--muted)", marginBottom: 28 }}>
            I've built desktop and mobile applications for the Department of Defense and public
            companies, mostly tackling GIS and data-heavy problems where the wrong architecture
            decision quietly costs years. These days I bring that experience to founders who
            need a senior engineer in their corner — not a fifteen-person agency with a
            project manager standing between them and the work.
          </p>

          <div className="bento" style={{ gridAutoRows: "auto", gap: 12 }}>
            <div className="card span-6" style={{ padding: 18 }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Specialties</div>
              <div style={{ fontSize: 14, color: "var(--text)", lineHeight: 1.55 }}>GIS · spatial pipelines · data-heavy systems · desktop &amp; mobile</div>
            </div>
            <div className="card span-6" style={{ padding: 18 }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Worked with</div>
              <div style={{ fontSize: 14, color: "var(--text)", lineHeight: 1.55 }}>Department of Defense · public companies · early-stage founders</div>
            </div>
            <div className="card span-12" style={{ padding: 18, display: "flex", alignItems: "center", gap: 12 }}>
              <span className="live-dot"></span>
              <div style={{ fontSize: 14, color: "var(--muted)" }}>Currently <span style={{ color: "var(--text)" }}>taking new projects</span> — usually one or two at a time so each gets the attention it deserves.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

// ────────────────── PROCESS ──────────────────

const Process = () => (
  <section id="process" style={{ paddingTop: 0 }}>
    <div className="container">
      <div className="card" style={{ padding: 48, background: "linear-gradient(135deg, rgba(245,158,11,0.06), transparent 60%), var(--card)" }}>
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 40, gap: 24, flexWrap: "wrap" }}>
          <div>
            <span className="eyebrow"><span className="dot"></span> How a project goes</span>
            <div style={{ fontFamily: "var(--serif)", fontSize: 40, marginTop: 12, letterSpacing: "-0.02em", lineHeight: 1.05 }}>
              From <em style={{ color: "var(--accent)", fontStyle: "italic" }}>"I have an idea"</em><br />to <em style={{ color: "var(--accent)", fontStyle: "italic" }}>"it's live"</em>.
            </div>
          </div>
          <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)" }}>typical timeline · 6–14 weeks</div>
        </div>

        <div className="bento" style={{ gridAutoRows: "auto", gap: 16 }}>
          {[
            { n: "01", t: "Listen", b: "One call, one written brief. I mirror back what I heard so you can correct me before time gets burned." },
            { n: "02", t: "Shape", b: "A short, opinionated plan. Real estimates, real tradeoffs, no consultant-speak." },
            { n: "03", t: "Build", b: "Weekly demos, direct communication, working software in your environment from week one." },
            { n: "04", t: "Hand off", b: "Docs, runbooks, and an engineer who's actually on call until you don't need one." },
          ].map((p) => (
            <div key={p.n} className="span-3" style={{ borderLeft: "1px solid var(--border)", paddingLeft: 20 }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--accent)", marginBottom: 12 }}>{p.n}</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 8 }}>{p.t}</div>
              <div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.55 }}>{p.b}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ────────────────── CONTACT ──────────────────

const Contact = () => {
  const [form, setForm] = React.useState({
    name: "", email: "", phone: "", service: "", timeline: "", source: "", msg: "",
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [touched, setTouched] = React.useState({});

  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const touch = (k) => () => setTouched({ ...touched, [k]: true });

  const emailValid = /^[^@]+@[^@]+\.[^@]+$/.test(form.email);
  const valid = form.name && emailValid && form.service;

  const submit = (e) => {
    e.preventDefault();
    if (!valid) {
      setTouched({ name: true, email: true, service: true });
      return;
    }
    setSubmitted(true);
  };

  return (
    <section id="contact">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 40, alignItems: "start" }} className="contact-grid">
          {/* Form column */}
          <div>
            <span className="eyebrow"><span className="dot"></span> Let's figure it out together</span>
            <h2 className="display" style={{ marginTop: 18, marginBottom: 16 }}>
              Tell me what you're<br />trying to <em>build</em>.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--muted)", maxWidth: 560, marginBottom: 32 }}>
              Even half-formed ideas are fine — that's often where the best work starts.
              I'll reply within one business day with thoughts and next steps, never a sales script.
            </p>

            {submitted ? (
              <div className="card" style={{ padding: 40, textAlign: "center", borderColor: "var(--accent)" }}>
                <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--accent-soft)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 13l4 4L19 7" /></svg>
                </div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 32, marginBottom: 10, letterSpacing: "-0.01em" }}>Got it, {form.name.split(" ")[0]}.</div>
                <div style={{ color: "var(--muted)", fontSize: 15, maxWidth: 420, margin: "0 auto", lineHeight: 1.55 }}>
                  I'll be in touch at <span style={{ color: "var(--text)" }}>{form.email}</span> within one business day.
                  In the meantime, feel free to reply with anything else that comes to mind.
                </div>
              </div>
            ) : (
              <form onSubmit={submit} className="card" style={{ padding: 32 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                  <div>
                    <label className="field-label">Name <span style={{ color: "var(--accent)" }}>*</span></label>
                    <input className={"field" + (touched.name && !form.name ? " field-error" : "")}
                      placeholder="Ada Reyes" value={form.name} onChange={set("name")} onBlur={touch("name")} />
                  </div>
                  <div>
                    <label className="field-label">Email <span style={{ color: "var(--accent)" }}>*</span></label>
                    <input type="email" className={"field" + (touched.email && !emailValid ? " field-error" : "")}
                      placeholder="ada@company.com" value={form.email} onChange={set("email")} onBlur={touch("email")} />
                  </div>
                  <div>
                    <label className="field-label">Phone</label>
                    <input className="field" placeholder="+1 (555) 123-4567" value={form.phone} onChange={set("phone")} />
                  </div>
                  <div>
                    <label className="field-label">What can I help with? <span style={{ color: "var(--accent)" }}>*</span></label>
                    <select className={"field" + (touched.service && !form.service ? " field-error" : "")}
                      value={form.service} onChange={set("service")} onBlur={touch("service")}>
                      <option value="">Pick a service…</option>
                      <option>Custom software development</option>
                      <option>Hard problem / technical untangling</option>
                      <option>AI integration & automation</option>
                      <option>Cost & efficiency audit</option>
                      <option>Social & content marketing</option>
                      <option>Growth strategy</option>
                      <option>Not sure yet</option>
                    </select>
                  </div>
                  <div>
                    <label className="field-label">Timeline</label>
                    <select className="field" value={form.timeline} onChange={set("timeline")}>
                      <option value="">When do you need this?</option>
                      <option>ASAP — already on fire</option>
                      <option>Within a month</option>
                      <option>Next quarter</option>
                      <option>Just exploring</option>
                    </select>
                  </div>
                  <div>
                    <label className="field-label">How did you hear about Graylight?</label>
                    <input className="field" placeholder="A friend, a podcast, a search…" value={form.source} onChange={set("source")} />
                  </div>
                </div>

                <div style={{ marginTop: 20 }}>
                  <label className="field-label">A few sentences about the project</label>
                  <textarea rows={5} className="field"
                    placeholder="What are you trying to build, fix, or grow? What's worked? What hasn't?"
                    value={form.msg} onChange={set("msg")}></textarea>
                </div>

                <div style={{ marginTop: 28, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>
                    I reply within one business day. Your details stay between us.
                  </div>
                  <button type="submit" className="btn btn-primary">Send to Graylight <Arrow /></button>
                </div>
              </form>
            )}
          </div>

          {/* Contact info column */}
          <aside style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="card" style={{ padding: 28 }}>
              <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span> Talk to a human</div>

              <a href="mailto:zak@graylight.io" className="contact-row">
                <div className="contact-icon">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><path d="m22 6-10 7L2 6" /></svg>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>Email</div>
                  <div style={{ fontWeight: 500 }}>zak@graylight.io</div>
                </div>
              </a>

              <a href="tel:+12567146899" className="contact-row">
                <div className="contact-icon">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><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>
                <div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>Phone</div>
                  <div style={{ fontWeight: 500 }}>(256) 714-6899</div>
                </div>
              </a>

              <div className="contact-row">
                <div className="contact-icon">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 1 1 18 0z" /><circle cx="12" cy="10" r="3" /></svg>
                </div>
                <div>
                  <div style={{ fontSize: 12, color: "var(--muted)" }}>Based in</div>
                  <div style={{ fontWeight: 500 }}>Cullman, Alabama · remote-first</div>
                </div>
              </div>
            </div>

            <div className="card" style={{ padding: 28 }}>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 18 }}>Hours</div>
              <div style={{ fontSize: 14, lineHeight: 1.7, color: "var(--text)" }}>
                Mon — Fri · 9:00 to 18:00<br />
                <span style={{ color: "var(--muted)" }}>US Central Time</span>
              </div>
              <div style={{ marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 10 }}>
                <span className="live-dot"></span>
                <span style={{ fontSize: 13, color: "var(--muted)" }}>Currently taking projects.</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
};

// ────────────────── FOOTER ──────────────────

const Footer = () => (
  <footer className="site">
    <div className="container">
      <div className="inner">
        <Logo />
        <div>© 2026 Graylight Consulting · Cullman, AL</div>
        <div style={{ display: "flex", gap: 20 }}>
          <a href="mailto:zak@graylight.io">zak@graylight.io</a>
          <a href="tel:+12567146899">(256) 714-6899</a>
        </div>
      </div>
    </div>
  </footer>
);

// ────────────────── APP ──────────────────

const App = () => (
  <>
    <NavBar />
    <Hero />
    <Services />
    <About />
    <Process />
    <Contact />
    <Footer />
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
