// ============================================================
// LUNARC AI — Landing Page
// Melbourne AI automation agency — founded by Tika
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#4a5cff", "#e85d3a", "#f6f5f1"],
  "density": "comfy",
  "showTicker": true
} /*EDITMODE-END*/;

// ---------- Nav ----------
const Nav = () =>
<nav className="nav">
    <div className="container nav-inner">
      <a className="brand" href="#">
        <span className="brand-mark"></span>
        <span style={{ fontSize: "16px", color: "rgb(74, 92, 255)" }}>LUNARC<span style={{ color: "var(--accent-a)" }}></span> AI</span>
      </a>
      <div className="nav-links">
        <a href="#why">Why Us</a>
        <a href="#services">Services</a>
        <a href="#process">How It Works</a>
        <a href="#contact">Contact</a>
      </div>
      <div className="nav-cta">
        <span className="nav-status"><span className="dot"></span>Taking new clients</span>
        <a href="#contact" className="btn btn-primary">
          Book a call
          <svg className="arrow" viewBox="0 0 14 14" fill="none">
            <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </div>
  </nav>;


// ---------- Hero ----------
const Hero = () =>
<section className="hero" style={{ padding: "100px 0px 110px" }}>
    <div className="container hero-grid">
      <div>
        <span className="eyebrow">AI automation · Melbourne · serving globally</span>
        <h1>
          AI Automation Agency <span className="em">Beyond&nbsp;Limits.</span>
        </h1>
        <p className="hero-sub">
          Custom AI operating systems and intelligent workflows — deployed in 48 hours,
          running 24/7, without growing your headcount.
        </p>
        <div className="hero-cta">
          <a href="#contact" className="btn btn-primary">
            Book a Free Strategy Call
            <svg className="arrow" viewBox="0 0 14 14" fill="none">
              <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <a href="#services" className="btn btn-ghost">See What We Build</a>
        </div>
        <div className="hero-meta">
          <div className="stat"><span className="num">48 hr</span><span className="lbl">Avg deployment</span></div>
          <div className="stat"><span className="num">10×</span><span className="lbl">Productivity gains</span></div>
          <div className="stat"><span className="num">AU</span><span className="lbl">Privacy compliant</span></div>
        </div>
      </div>
      <HeroDiagram />
    </div>
  </section>;


// ---------- Capability marquee ----------
const MARQUEE_ITEMS = [
["AI Operating Systems", "AIOS"],
["Workflow Automation", "24/7"],
["Intelligent Chatbots", "Multi-channel"],
["CRM Integration", "HubSpot · Xero"],
["AI Analytics", "Live Dashboards"],
["Systems Integration", "Slack · GSuite"],
["Lead Qualification", "Auto-book"],
["Melbourne Based", "Global Reach"]];


const MarqueeGroup = () =>
<div className="marquee-group" aria-hidden="false">
    {MARQUEE_ITEMS.map((it, i) =>
  <span className="marquee-item" key={i}>
        <span>{it[0]}</span>
        <span className="hl">{it[1]}</span>
        <span className="dot"></span>
      </span>
  )}
  </div>;


const Ticker = () =>
<section className="marquee" aria-label="Capabilities">
    <div className="marquee-track">
      <MarqueeGroup />
      <MarqueeGroup />
    </div>
  </section>;


// ---------- Why Us ----------
const WhyUs = () => {
  const cards = [
  {
    n: "01",
    t: "Outcome-Obsessed",
    d: "We measure success in revenue gained, hours saved and costs eliminated — not deliverables handed over.",
    m: ["+ revenue", "− hours", "− cost"]
  },
  {
    n: "02",
    t: "48-Hour Deployment",
    d: "No 6-month enterprise timelines. Most AI systems are live within two business days.",
    m: ["day 0 · scope", "day 1 · build", "day 2 · live"]
  },
  {
    n: "03",
    t: "Ongoing Partnership",
    d: "Direct access to your specialist — not a helpdesk — for the lifetime of your system.",
    m: ["one number", "one human", "no tickets"]
  }];

  return (
    <section className="section" id="why" style={{ padding: "100px 0px" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Why Us / 01</span>
            <h2>Why LUNARC AI.</h2>
          </div>
          <p>
            A small, technical studio with one job: ship AI that pays for itself.
            No agency overhead, no vendor lock-in, no hand-off to a junior team.
          </p>
        </div>

        <div className="why-grid">
          {cards.map((c) =>
          <article className="why-card" key={c.n}>
              <span className="why-num">— {c.n}</span>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
              <ul className="why-meta">
                {c.m.map((x) => <li key={x}>{x}</li>)}
              </ul>
            </article>
          )}
        </div>
      </div>
    </section>);

};


// ---------- The Opportunity ----------
const Opportunity = () => {
  const stats = [
  { n: "10×", l: "Average productivity gain", s: "across teams that adopt AI workflows" },
  { n: "70%", l: "Reduction in operational costs", s: "on the processes we automate" },
  { n: "48 hr", l: "Average deployment time", s: "from kickoff to live system" }];

  return (
    <section className="section opp-section" id="opportunity" style={{ padding: "100px 0px" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">The Opportunity / 02</span>
            <h2>Why AI automation. <span className="ink-3">Why now.</span></h2>
          </div>
          <p>
            Businesses deploying AI today are building an unfair advantage that compounds
            every month. The longer you wait, the further the gap widens.
          </p>
        </div>

        <div className="opp-grid">
          {stats.map((s, i) =>
          <div className="opp-stat" key={s.n}>
              <span className="opp-idx">{String(i + 1).padStart(2, "0")}</span>
              <span className="opp-num">{s.n}</span>
              <span className="opp-lbl">{s.l}</span>
              <span className="opp-sub">{s.s}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

};


// ---------- Service card ----------
const ServiceCard = ({ index, title, blurb, capabilities, className = "", tag, children }) =>
<article className={`service-card ${className}`}>
    {tag && <span className="tag">{tag}</span>}
    <span className="index">{index}</span>
    <h3>{title}</h3>
    <p>{blurb}</p>
    <div className="visual">{children}</div>
    <div className="reveal">
      <ul className="reveal-list">
        {capabilities.map((c, i) => <li key={i}>{c}</li>)}
      </ul>
    </div>
  </article>;


// AIOS visual — flagship control plane
const AIOSVisual = () =>
<div style={{
  background: "var(--bg)",
  border: "1px solid var(--line)",
  borderRadius: "var(--r-md)",
  padding: 16,
  fontFamily: "var(--font-mono)",
  fontSize: 11
}}>
    <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-4)", marginBottom: 10 }}>
      <span>aios · control plane</span><span style={{ color: "var(--accent-a)" }}>● healthy</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
      {[
    ["Tools", "Configurable", "var(--ink-2)"],
    ["Agents", "On demand", "var(--accent-a)"],
    ["Sources", "Xero · HubSpot · GSuite", "var(--ink-2)"],
    ["Audit log", "every event", "var(--ink-2)"]].
    map(([k, v, c]) =>
    <div key={k} style={{ borderTop: "1px solid var(--line)", paddingTop: 6 }}>
          <div style={{ color: "var(--ink-4)", fontSize: 10 }}>{k}</div>
          <div style={{ color: c, fontFamily: "var(--font-display)", fontSize: 13, marginTop: 2 }}>{v}</div>
        </div>
    )}
    </div>
  </div>;


const WorkflowVisual = () =>
<div style={{
  background: "var(--bg)",
  border: "1px solid var(--line)",
  borderRadius: "var(--r-md)",
  padding: 14,
  fontFamily: "var(--font-mono)",
  fontSize: 11,
  color: "var(--ink-2)"
}}>
    <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-4)", marginBottom: 8 }}>
      <span>flow.invoice-onboard.ts</span>
      <span>v1.4 · 99.9% sla</span>
    </div>
    {[
  { n: "01", t: "watch.inbox('@accounts')", c: "var(--ink-3)" },
  { n: "02", t: "extract({ schema: InvoiceV3 })", c: "var(--accent-a)" },
  { n: "03", t: "match.xero({ vendor, po })", c: "var(--ink-2)" },
  { n: "04", t: "approve · 92% · auto", c: "var(--accent-a)" },
  { n: "05", t: "exception → review queue", c: "var(--ink-4)" }].
  map((r, i) =>
  <div key={i} style={{ display: "flex", gap: 12, padding: "4px 0", color: r.c }}>
        <span style={{ color: "var(--ink-4)" }}>{r.n}</span>
        <span>{r.t}</span>
      </div>
  )}
  </div>;


const ChatbotVisual = () =>
<div className="chat-preview">
    <div className="chat-msg">
      <div className="avatar">L</div>
      <div className="bubble">Hi 👋 — what brings you in today?</div>
    </div>
    <div className="chat-msg user">
      <div className="avatar">U</div>
      <div className="bubble">I need a quote for a 3-bed listing photoshoot</div>
    </div>
    <div className="chat-msg">
      <div className="avatar">L</div>
      <div className="chat-typing"><span></span><span></span><span></span></div>
    </div>
    <div style={{
    display: "flex", justifyContent: "space-between",
    fontFamily: "var(--font-mono)", fontSize: 10,
    color: "var(--ink-4)", padding: "4px 4px 0"
  }}>
      <span>tools: hubspot · calendar · stripe</span>
      <span>conf 0.94</span>
    </div>
  </div>;


const AnalyticsVisual = () => {
  const bars = [38, 52, 44, 68, 60, 82, 74, 90];
  return (
    <div style={{
      background: "var(--bg)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-md)",
      padding: 14,
      fontFamily: "var(--font-mono)",
      fontSize: 11
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-4)", marginBottom: 10 }}>
        <span>dash.weekly · revenue</span>
        <span style={{ color: "var(--accent-a)" }}>+ 24.6%</span>
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 6, height: 64 }}>
        {bars.map((h, i) =>
        <div key={i} style={{
          flex: 1,
          height: `${h}%`,
          background: i === bars.length - 1 ? "var(--accent-a)" : "var(--ink-2)",
          borderRadius: 2,
          opacity: i === bars.length - 1 ? 1 : 0.18 + i * 0.08
        }}></div>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-4)", fontSize: 10, marginTop: 8 }}>
        <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span><span>Today</span>
      </div>
    </div>);

};


const IntegrationVisual = () => {
  const tools = [
  ["Xero", "var(--accent-a)"],
  ["HubSpot", "var(--ink-2)"],
  ["Slack", "var(--ink-2)"],
  ["GSuite", "var(--ink-2)"],
  ["Stripe", "var(--ink-2)"],
  ["WhatsApp", "var(--ink-2)"]];

  return (
    <div style={{
      background: "var(--bg)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-md)",
      padding: 14,
      fontFamily: "var(--font-mono)",
      fontSize: 11
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-4)", marginBottom: 10 }}>
        <span>middleware · sync</span>
        <span>realtime · 0 lag</span>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
        {tools.map(([t, c]) =>
        <div key={t} style={{
          border: "1px solid var(--line-strong)",
          borderRadius: 6,
          padding: "8px 10px",
          display: "flex",
          alignItems: "center",
          gap: 8
        }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: c }}></span>
            <span style={{ color: "var(--ink-2)", fontFamily: "var(--font-display)", fontSize: 12 }}>{t}</span>
          </div>
        )}
      </div>
    </div>);

};


// ---------- Services ----------
const Services = () =>
<section className="section" id="services" style={{ padding: "100px 0px" }}>
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow">Services / 03</span>
          <h2>Five ways AI transforms<br />your operations.</h2>
        </div>
        <p>
          Every engagement ships measurable production automation, monitored end-to-end,
          with full ownership transferred to your team. No vendor lock-in.
        </p>
      </div>

      <div className="services-grid">
        <ServiceCard
        index="A · AIOS"
        tag="Flagship"
        title="AI Operating Systems"
        blurb="A complete AI backbone connecting your tools, data and workflows into one intelligent layer that acts on your behalf."
        capabilities={[
        "Unified agent registry",
        "Tool & data connectors",
        "Role-based access",
        "Observability & traces",
        "Cost / quota controls",
        "Audit + compliance logs"]
        }
        className="card-wide feature">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "center" }}>
            <AIOSVisual />
            <div style={{ display: "grid", gap: 10, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)" }}>
              {[
            ["Connectors", "Custom", "var(--accent-a)"],
            ["Live agents", "Per build", "var(--ink)"],
            ["Events / day", "Scalable", "var(--ink)"],
            ["Uptime", "Monitored", "var(--ink)"]].
            map(([k, v, c]) =>
            <div key={k} style={{
              display: "flex", justifyContent: "space-between",
              borderBottom: "1px solid var(--line)", paddingBottom: 6
            }}>
                  <span>{k}</span>
                  <span style={{ color: c, fontFamily: "var(--font-display)", fontSize: 14 }}>{v}</span>
                </div>
            )}
            </div>
          </div>
        </ServiceCard>

        <ServiceCard
        index="B · WORKFLOW"
        title="Workflow Automation"
        blurb="Eliminate every repetitive task. Invoicing, onboarding, follow-ups — fully automated, fully audited."
        capabilities={[
        "Document AI / extraction",
        "Multi-system orchestration",
        "Exception routing",
        "Auditable run logs",
        "Cost & latency monitoring",
        "Drop-in for n8n / Zapier"]
        }>
          <WorkflowVisual />
        </ServiceCard>

        <ServiceCard
        index="C · CHATBOTS"
        title="Intelligent AI Chatbots"
        blurb="24/7 agents on your website or WhatsApp that qualify leads and book appointments automatically."
        capabilities={[
        "Web + WhatsApp + SMS",
        "Lead qualification",
        "Calendar + CRM hand-off",
        "RAG over your docs",
        "Human-in-the-loop",
        "PII redaction · AU compliant"]
        }>
          <ChatbotVisual />
        </ServiceCard>

        <ServiceCard
        index="D · ANALYTICS"
        title="AI Analytics & Dashboards"
        blurb="Raw data into live intelligent dashboards. AI surfaces what matters so decisions happen faster."
        capabilities={[
        "Live executive dashboards",
        "Anomaly detection",
        "Natural-language queries",
        "Slack / email digests",
        "Forecast + scenario models",
        "Connect any source"]
        }>
          <AnalyticsVisual />
        </ServiceCard>

        <ServiceCard
        index="E · INTEGRATION"
        title="Systems Integration"
        blurb="Xero, HubSpot, Slack, Google Workspace — connected by AI middleware that keeps everything in sync."
        capabilities={[
        "Bi-directional sync",
        "Smart field mapping",
        "Conflict resolution",
        "Zero-downtime cutover",
        "Self-healing on schema drift",
        "Observability built-in"]
        }>
          <IntegrationVisual />
        </ServiceCard>
      </div>
    </div>
  </section>;


// ---------- How it works ----------
const Process = () =>
<section className="section process-section" id="process" style={{ padding: "100px 0px 10px" }}>
    <div className="container">
      <div className="section-head">
        <div>
          <span className="eyebrow">How It Works / 04</span>
          <h2>From conversation to live AI<br />system in days.</h2>
        </div>
        <p>
          A focused four-step engagement. You see working software within 48 hours
          and a production system inside the week.
        </p>
      </div>

      <div className="process">
        {[
      { n: "01", t: "Discovery", d: "A focused 30-minute call to map your processes and identify where AI creates maximum leverage.", dur: "30 min" },
      { n: "02", t: "Architecture", d: "We design your tailored AI solution. You approve everything before we build a single line.", dur: "Day 1" },
      { n: "03", t: "Build", d: "Rapid development with live demos at each milestone. Your existing stack stays intact.", dur: "Day 2" },
      { n: "04", t: "Launch & Evolve", d: "Go live with full training and documentation. We monitor and optimise as you grow.", dur: "Ongoing" }].
      map((s) =>
      <div className="process-step" key={s.n}>
            <span className="num">— {s.n}</span>
            <h4>{s.t}</h4>
            <p>{s.d}</p>
            <span className="duration">{s.dur}</span>
          </div>
      )}
      </div>

      <div style={{ marginTop: 32 }}>
        <WorkflowDiagram />
      </div>
    </div>
  </section>;


// ---------- Mission (dark full-width) ----------
const Mission = () =>
<section className="mission" id="mission">
    <div className="container mission-inner">
      <div className="mission-head">
        <span className="eyebrow eyebrow-dark">Our Mission / 05</span>
        <span className="mission-mark">
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
            <circle cx="14" cy="14" r="11" fill="#f6f5f1" />
            <circle cx="19" cy="12" r="11" fill="#0e0e10" />
          </svg>
        </span>
      </div>
      <blockquote className="mission-quote">
        We drive Australian businesses to the forefront of their industries through
        intelligent AI automation — building systems that let
        <span className="mission-em"> ambitious founders scale without scaling their headcount.</span>
      </blockquote>
      <div className="mission-foot">
        <span>TIKA RIJAL · FOUNDER, LUNARC AI</span>
        <span>Melbourne · Australia</span>
      </div>
    </div>
  </section>;


// ---------- Contact ----------
const Contact = () => {
  const [form, setForm] = React.useState({
    firstName: "", lastName: "", email: "",
    industry: "Real estate", message: ""
  });
  const [submitted, setSubmitted] = React.useState(false);
  const [errors, setErrors] = React.useState({});

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.firstName.trim()) errs.firstName = true;
    if (!form.lastName.trim()) errs.lastName = true;
    if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = true;
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSubmitted(true);
  };

  return (
    <section className="section contact" id="contact" style={{ padding: "10px 0px 140px" }}>
      <div className="container contact-grid">
        <div>
          <span className="eyebrow">Contact / 06</span>
          <h2>Let's map your AI<br />opportunity.</h2>
          <p style={{ color: "var(--ink-3)", maxWidth: "44ch", margin: "0 0 32px" }}>
            Tell us about the workflow that's costing you the most time.
            We'll come back with a plan, an effort estimate, and an honest take.
          </p>

          <div className="contact-detail">
            <span className="k">Email</span>
            <span className="v"><a href="mailto:tika@lunarc.ai">tika@lunarc.ai</a></span>
          </div>
          <div className="contact-detail">
            <span className="k">Based</span>
            <span className="v">Melbourne, Australia — serving clients globally</span>
          </div>
          <div className="contact-detail">
            <span className="k">Hours</span>
            <span className="v">Mon–Fri · 9am–6pm AEST</span>
          </div>
          <div className="contact-detail">
            <span className="k">Domain</span>
            <span className="v">lunarc.ai</span>
          </div>

          <div className="contact-callout">
            <div className="callout-mark">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 8l3 3 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div>
              <div className="callout-title">Free 30-Min Discovery Call</div>
              <div className="callout-sub">No pitch. No pressure. Just clarity.</div>
            </div>
          </div>
        </div>

        <form className="contact-form" onSubmit={submit}>
          {submitted ?
          <div className="form-success">
              <div className="check">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M4 9l3 3 7-7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              Thanks {form.firstName} — we'll be in touch within one business day.
              <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--ink-3)", marginTop: 12, letterSpacing: "0.06em"
            }}>
                ref #LNC-{new Date().getFullYear()}-{Math.floor(Math.random() * 9000 + 1000)}
              </div>
            </div> :
          <>
              <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--ink-3)", letterSpacing: "0.1em",
              textTransform: "uppercase", marginBottom: 4, margin: "0px 0px 20px"
            }}>
                Strategy call request · est. 60 sec
              </div>
              <div className="field-row">
                <div className="field">
                  <label>First name</label>
                  <input
                  type="text"
                  value={form.firstName}
                  onChange={(e) => setForm({ ...form, firstName: e.target.value })}
                  placeholder="Jane"
                  style={{ ...(errors.firstName ? { borderColor: "var(--accent-b)" } : {}), padding: "5px 0px 10px" }} />
                </div>
                <div className="field">
                  <label>Last name</label>
                  <input
                  type="text"
                  value={form.lastName}
                  onChange={(e) => setForm({ ...form, lastName: e.target.value })}
                  placeholder="Smith"
                  style={{ ...(errors.lastName ? { borderColor: "var(--accent-b)" } : {}), padding: "5px 0px" }} />
                </div>
              </div>
              <div className="field">
                <label style={{ padding: "10px 0px 0px" }}>Work email</label>
                <input
                type="email"
                value={form.email}
                onChange={(e) => setForm({ ...form, email: e.target.value })}
                placeholder="you@company.com.au"
                style={{ ...(errors.email ? { borderColor: "var(--accent-b)" } : {}), padding: "5px 0px 0px" }} />
              </div>
              <div className="field">
                <label style={{ padding: "10px" }}>Industry</label>
                <select value={form.industry} onChange={(e) => setForm({ ...form, industry: e.target.value })}>
                  <option>Real estate</option>
                  <option>Professional services</option>
                  <option>E-commerce / Retail</option>
                  <option>Finance / Accounting</option>
                  <option>Trades & construction</option>
                  <option>Healthcare</option>
                  <option>SaaS / Tech</option>
                  <option>Manufacturing</option>
                  <option>Other</option>
                </select>
              </div>
              <div className="field">
                <label style={{ padding: "11px" }}>What workflow is costing you the most time?</label>
                <textarea
                value={form.message}
                onChange={(e) => setForm({ ...form, message: e.target.value })}
                placeholder="One paragraph is plenty…" style={{ padding: "10px 0px 100px" }} />
              </div>
              <button className="btn btn-primary submit" type="submit">
                Send Message
                <svg className="arrow" viewBox="0 0 14 14" fill="none">
                  <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </button>
            </>
          }
        </form>
      </div>
    </section>);
};


// ---------- Footer ----------
const Footer = () =>
<footer className="footer">
    <div className="container">
      <div className="footer-top">
        <div className="footer-brand">
          <a className="brand" href="#">
            <span className="brand-mark"></span>
            <span>LUNARC<span style={{ color: "var(--accent-a)" }}>·</span>AI</span>
          </a>
          <p className="footer-tag">
            Intelligent automation for modern Australian businesses.<br />
            Built in Melbourne. Deployed globally.
          </p>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <span className="footer-col-h">Site</span>
            <a href="#services">Services</a>
            <a href="#why">Why Us</a>
            <a href="#process">How It Works</a>
            <a href="#contact">Contact</a>
          </div>
          <div className="footer-col">
            <span className="footer-col-h">Connect</span>
            <a href="mailto:tika@lunarc.ai">tika@lunarc.ai</a>
          </div>
        </div>
      </div>
      <div className="footer-row">
        <span className="footer-mono">© 2026 LUNARC AI. All rights reserved.</span>
        <span className="footer-mono">lunarc.ai · Melbourne, AU</span>
      </div>
    </div>
  </footer>;


// ---------- Tweaks ----------
const Tweaks = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.body.style;
    if (Array.isArray(t.accent)) {
      root.setProperty("--accent-a", t.accent[0]);
      root.setProperty("--accent-b", t.accent[1]);
    }
    document.body.dataset.density = t.density;
  }, [t.accent, t.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Aesthetic" />
      <TweakColor
        label="Accent palette"
        value={t.accent}
        onChange={(v) => setTweak("accent", v)}
        options={[
        ["#4a5cff", "#e85d3a", "#f6f5f1"],
        ["#0a8c6e", "#c47b1f", "#f6f5f1"],
        ["#1a1a1c", "#4a5cff", "#f6f5f1"],
        ["#6442e0", "#e8a93a", "#f6f5f1"]]
        } />
      <TweakRadio
        label="Density"
        value={t.density}
        onChange={(v) => setTweak("density", v)}
        options={["comfy", "cozy"]} />
      <TweakSection label="Sections" />
      <TweakToggle
        label="Show capability ticker"
        value={t.showTicker}
        onChange={(v) => setTweak("showTicker", v)} />
    </TweaksPanel>);
};


// ---------- App ----------
const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    const root = document.body.style;
    if (Array.isArray(tweaks.accent)) {
      root.setProperty("--accent-a", tweaks.accent[0]);
      root.setProperty("--accent-b", tweaks.accent[1]);
    }
    document.body.dataset.density = tweaks.density;
  }, [tweaks.accent, tweaks.density]);

  return (
    <>
      <Nav />
      <Hero />
      {tweaks.showTicker && <Ticker />}
      <WhyUs />
      <Opportunity />
      <Services />
      <Process />
      <Mission />
      <Contact />
      <Footer />
      <Tweaks />
    </>);
};

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