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

// =================== SCROLL RAIL ===================
function ScrollRail() {
  const items = [
  { id: "hero", label: "Takeoff" },
  { id: "how", label: "How it Works" },
  { id: "why", label: "Aotearoa" },
  { id: "pricing", label: "Pricing" },
  { id: "how-tokens", label: "Tokens" },
  { id: "faq", label: "FAQ" }];

  return (
    <div className="scroll-rail" aria-hidden="true">
      {items.map((it) =>
      <a
        key={it.id}
        className="scroll-rail-dot"
        data-label={it.label}
        href={"#" + it.id} />

      )}
    </div>);

}

// =================== MARQUEE ===================
function Marquee() {
  const items = [
  "Bunnings", "PlaceMakers", "ITM", "Carters", "Mico",
  "Plumbing World", "Mitre 10", "Bowers Brothers", "Fletcher"];

  // Render twice for seamless loop
  const all = [...items, ...items];
  return (
    <section className="marquee" aria-label="Pricebook integrations">
      <div className="marquee-track">
        {all.map((m, i) =>
        <span key={i} className="marquee-item">
            <span className="sep" />
            {m}
          </span>
        )}
      </div>
    </section>);

}

// =================== NAV ===================
function Nav({ logoText }) {
  const [scrolled, setScrolled] = useState(false);
  const [tradesOpen, setTradesOpen] = useState(false);
  const tradesRef = useRef(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Close dropdown when clicking outside
  useEffect(() => {
    const onClick = (e) => {
      if (tradesRef.current && !tradesRef.current.contains(e.target)) {
        setTradesOpen(false);
      }
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const trades = [
  "Building", "Roofing", "Plumbing",
  "Electrical", "Concrete", "Painting",
  "Decking", "Drainage", "Tiling"];


  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#" className="logo">
          <img src="uploads/Logo 1.png" alt="Markup" style={{ height: 64, width: "auto", display: "block" }} />
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#why">Why local</a>
          <div className="nav-dropdown" ref={tradesRef}>
            <button
              className="nav-dropdown-btn"
              onClick={() => setTradesOpen((o) => !o)}
              aria-expanded={tradesOpen}>

              Tradies We Support
              <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ marginLeft: 4, transition: "transform 0.2s", transform: tradesOpen ? "rotate(180deg)" : "rotate(0deg)" }}>
                <path d="M3 6l5 5 5-5" />
              </svg>
            </button>
            {tradesOpen &&
            <div className="nav-dropdown-menu">
                {trades.map((t) =>
              <span key={t} className="nav-dropdown-item" onClick={() => setTradesOpen(false)}>{t}</span>
              )}
              </div>
            }
          </div>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-right">
          <a href="/login" className="btn btn-link">Sign in</a>
          <a href="/signup" className="btn btn-primary">Get started</a>
        </div>
      </div>
    </nav>);
}

// =================== HERO ===================
function Hero({ headline, sub, cta }) {
  return (
    <section className="hero" id="hero">
      <div className="container hero-grid">
        <div className="reveal reveal-blur in">
          <span className="eyebrow">Takeoff to quote · Built for NZ tradies</span>
          <h1>{headline}</h1>
          <p className="hero-lead">{sub}</p>
          <div className="hero-ctas">
            <a href="/signup" className="btn btn-primary btn-lg">
              {cta}
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M3 8h10M9 4l4 4-4 4" />
              </svg>
            </a>
            <a href="#how" className="btn btn-ghost btn-lg">See how it works</a>
          </div>
          <div className="hero-meta">
            <span><span className="dot-mini" /> Wellington, NZ</span>
            <span><span className="dot-mini" /> No lock-in</span>
            <span><span className="dot-mini" /> </span>
          </div>
        </div>
        <div className="reveal reveal-scale in delay-2" data-parallax="0.06">
          <HeroDemo />
        </div>
      </div>
    </section>);

}

// =================== HOW IT WORKS ===================
function HowItWorks() {
  const steps = [
  {
    n: "01",
    title: "Drop your pricebook in",
    body: "Excel, CSV, or PDF — your rates, your suppliers. No pricebook organised? Use our blank template.",
    art: <ArtPricebook />
  },
  {
    n: "02",
    title: "Add the takeoff",
    body: "You've done the measuring. Drop your takeoff spreadsheet in. Plans, aerials, or site photos as reference.",
    art: <ArtTakeoff />
  },
  {
    n: "03",
    title: "Markup builds the quote",
    body: "Every line matched to your pricebook. Labour, markup, GST — applied automatically. Every number traces back to your file.",
    art: <ArtBuild />
  },
  {
    n: "04",
    title: "Send it to the customer",
    body: "Branded PDF in your format. Out the door in minutes, not days.",
    art: <ArtSend />
  }];

  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head section-head-center reveal" style={{ textAlign: "left" }}>
          <span className="eyebrow eyebrow-center">How it works</span>
          <h2>From pricebook to quote in four steps.</h2>
          <p>
</p>
        </div>
        <div className="steps">
          {steps.map((s, i) => <div key={s.n} className={`step reveal reveal-left delay-${i + 1}`}>
              <div className="step-num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="step-icon">{s.art}</div>
            </div>)}
        </div>
      </div>
    </section>);

}

// Step illustrations — abstract, monochrome with one orange accent
function ArtPricebook() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 110" fill="none">
      <rect x="20" y="20" width="160" height="14" rx="2" fill="var(--s2)" stroke="var(--b2)" />
      <rect x="20" y="40" width="160" height="14" rx="2" fill="var(--s2)" stroke="var(--b2)" />
      <rect x="20" y="60" width="160" height="14" rx="2" fill="var(--s2)" stroke="var(--orange)" />
      <rect x="20" y="80" width="160" height="14" rx="2" fill="var(--s2)" stroke="var(--b2)" />
      <rect x="135" y="63" width="40" height="8" rx="1" fill="var(--orange)" opacity="0.85" />
    </svg>);

}
function ArtTakeoff() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 110" fill="none">
      <path d="M30 80 L50 30 L100 25 L160 50 L170 90 Z" stroke="var(--t3)" strokeWidth="1.2" fill="var(--s2)" />
      <line x1="50" y1="30" x2="100" y2="25" stroke="var(--orange)" strokeWidth="1.5" strokeDasharray="3 3" />
      <line x1="100" y1="25" x2="160" y2="50" stroke="var(--orange)" strokeWidth="1.5" strokeDasharray="3 3" />
      <circle cx="50" cy="30" r="3" fill="var(--orange)" />
      <circle cx="100" cy="25" r="3" fill="var(--orange)" />
      <circle cx="160" cy="50" r="3" fill="var(--orange)" />
      <text x="105" y="20" fontSize="8" fill="var(--t2)" fontFamily="Geist Mono">62 lm</text>
    </svg>);

}
function ArtBuild() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 110" fill="none">
      <rect x="40" y="20" width="120" height="74" rx="4" fill="var(--s2)" stroke="var(--b2)" />
      <rect x="40" y="20" width="120" height="3" fill="var(--orange)" />
      <line x1="52" y1="38" x2="120" y2="38" stroke="var(--t3)" strokeWidth="1" />
      <line x1="130" y1="38" x2="148" y2="38" stroke="var(--t1)" strokeWidth="1.5" />
      <line x1="52" y1="50" x2="115" y2="50" stroke="var(--t3)" strokeWidth="1" />
      <line x1="125" y1="50" x2="148" y2="50" stroke="var(--t1)" strokeWidth="1.5" />
      <line x1="52" y1="62" x2="105" y2="62" stroke="var(--t3)" strokeWidth="1" />
      <line x1="115" y1="62" x2="148" y2="62" stroke="var(--t1)" strokeWidth="1.5" />
      <line x1="52" y1="80" x2="80" y2="80" stroke="var(--orange)" strokeWidth="1.5" />
      <line x1="100" y1="80" x2="148" y2="80" stroke="var(--orange)" strokeWidth="2" />
    </svg>);

}
function ArtSend() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 110" fill="none">
      <rect x="30" y="20" width="80" height="74" rx="4" fill="var(--s2)" stroke="var(--b2)" />
      <rect x="30" y="20" width="80" height="3" fill="var(--orange)" />
      <line x1="40" y1="36" x2="90" y2="36" stroke="var(--t3)" strokeWidth="1" />
      <line x1="40" y1="46" x2="80" y2="46" stroke="var(--t3)" strokeWidth="1" />
      <line x1="40" y1="56" x2="85" y2="56" stroke="var(--t3)" strokeWidth="1" />
      <path d="M120 55 L160 55 M150 47 L160 55 L150 63" stroke="var(--orange)" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
      <rect x="165" y="32" width="20" height="46" rx="3" fill="var(--s2)" stroke="var(--b2)" />
      <rect x="165" y="32" width="20" height="3" fill="var(--orange)" />
      <line x1="170" y1="42" x2="180" y2="42" stroke="var(--t3)" strokeWidth="0.8" />
      <line x1="170" y1="48" x2="178" y2="48" stroke="var(--t3)" strokeWidth="0.8" />
    </svg>);

}

// =================== WHY NZ ===================
function WhyNZ() {
  return (
    <section className="section" id="why">
      <div className="container nz-grid">
        <div className="reveal reveal-left">
          <span className="eyebrow">BUILT HERE, IN AOTEAROA</span>
          <h2>Made for NZ tradies, not adapted from somewhere else.</h2>
          <p>
</p>

          <div className="nz-points">
            <Point idx={0} title="Built for your pricebook, not generic supplier feeds">
              Drop in your pricebook with your negotiated rates. No supplier feeds to break, no rate sheets to argue with.
            </Point>
            <Point idx={1} title="GST handled properly">
              15% NZ GST applied automatically on every quote. No workarounds, no US-style sales-tax confusion.
            </Point>
            <Point idx={2} title="A phone call away">
              Wellington-based. Talk to the people who built it. No support queue, no time zones.
            </Point>
            <Point idx={3} title="No lock-in, no per-job fees">
              Flat monthly subscription. Cancel anytime.
            </Point>
          </div>
        </div>

        <div className="reveal reveal-right delay-2" data-parallax="0.04" style={{ transform: "translate3d(0px, -1.8px, 0px)" }}>
          <NZVisual />
        </div>
      </div>
    </section>);
}

function Point({ title, children, idx = 0 }) {
  return (
    <div className={"nz-point reveal delay-" + (idx + 1)}>
      <div className="check">
        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5">
          <path d="M3.5 8.5l3 3 6-7" />
        </svg>
      </div>
      <div>
        <h4>{title}</h4>
        <p>{children}</p>
      </div>
    </div>);

}

function NZVisual() {
  return (
    <div className="nz-visual">
      <div style={{ fontSize: "11px", height: "510.682px", fontWeight: "600", width: "700.114px" }}>
        <div className="nz-map-wrap" style={{ position: "relative", display: "block", width: "100%" }}>
          <img src="uploads/nz outline.svg" alt="New Zealand outline" className="nz-map-img" style={{ display: "block", filter: "grayscale(1) brightness(0.55) opacity(0.55)", width: "450px", height: "450.497px" }} />
          {/* Wellington dot — percentage positioned so it always lands on the city */}
          <div style={{ position: "absolute", left: "305px", top: "225px", transform: "translate(-50%,-50%)", pointerEvents: "none" }}>
            <div style={{ position: "relative", width: 14, height: 14 }}>
              <div style={{ position: "absolute", inset: 0, borderRadius: "50%", background: "var(--orange)", zIndex: 2 }} />
              <div style={{ position: "absolute", inset: -8, borderRadius: "50%", border: "2px solid var(--orange)", animation: "wgnPulse 2.4s ease-out infinite" }} />
              <div style={{ position: "absolute", inset: -8, borderRadius: "50%", border: "2px solid var(--orange)", animation: "wgnPulse 2.4s ease-out 1.2s infinite" }} />
              <div style={{ position: "absolute", left: 20, top: "50%", transform: "translateY(-50%)", whiteSpace: "nowrap" }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: "var(--t1)", letterSpacing: "0.04em" }}>Wellington</span>
                <span style={{ fontSize: 10, fontWeight: 600, color: "var(--orange)", letterSpacing: "0.1em", marginLeft: 5 }}>HQ</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// =================== TRADES ===================
function Trades() {
  const trades = [
  "Building", "Roofing", "Plumbing",
  "Electrical", "Concrete", "Painting",
  "Decking", "Drainage", "Tiling"];

  return (
    <section className="section" id="trades">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Trades supported</span>
          <h2>If you take off from a job, Markup quotes it.</h2>
          <p>Configured for the trades that quote from materials and measurements. Don't see yours? Get in touch — we add new trades regularly.</p>
        </div>
        <div className="trades">
          {trades.map((t, i) =>
          <a key={t} href="#" className={`trade reveal reveal-scale delay-${i % 6 + 1}`}>
              <span className="trade-name">{t}</span>
              <span className="trade-arrow">
                <svg width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <path d="M6 3l5 5-5 5" />
                </svg>
              </span>
            </a>
          )}
        </div>
      </div>
    </section>);

}

// =================== PRICING ===================
function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 48px" }}>
          <div className="eyebrow-centered">
            <span className="eyebrow-line" />
            <span className="eyebrow" style={{ fontSize: "16px" }}>PRICING</span>
            <span className="eyebrow-line" />
          </div>
          <h2>Plans built for tradies of all sizes.</h2>
          <p style={{ fontSize: "13px" }}>Every plan includes AI quote generation from your takeoffs, branded PDF quotes with every line traceable to its source. Tokens are consumed as you chat.</p>
        </div>

        <div className="pricing">
          <Plan idx={0}
          name="Standard"
          price="129"
          tokens="200"
          perToken="65"
          features={[
          <>For <b>sole traders</b> doing 5-10 quotes a month</>,
          <><b>200 tokens</b> per month</>,
          <>65¢ per token</>,
          <>AI quote generation from Excel or PDF takeoffs</>,
          <>Branded PDF quotes with full line-item editing</>,
          <>Email support</>]
          } />

          <Plan
            idx={1}
            name="Pro"
            price="249"
            tokens="500"
            perToken="50"
            popular
            features={[
            <>For <b>small crews</b> doing 10-25 quotes a month</>,
            <><b>500 tokens</b> per month — best rate before Elite</>,
            <>50¢ per token</>,
            <>AI quote generation from Excel or PDF takeoffs</>,
            <>Branded PDF quotes with full line-item editing</>,
            <>Priority email + phone support</>]
            } />

          <Plan
            idx={2}
            name="Elite"
            price="500"
            tokens="1,200"
            perToken="42"
            features={[
            <>For <b>big teams</b> running 30+ quotes a month</>,
            <><b>1,200 tokens</b> per month — lowest rate</>,
            <>42¢ per token</>,
            <>Fergus integration <i>(book a call to set up)</i></>,
            <>Branded PDF quotes with full line-item editing</>,
            <>Dedicated account manager + phone support</>]
            } />

        </div>

        <p style={{ fontSize: 12, color: "var(--t4)", marginTop: 24, letterSpacing: "0.04em", textAlign: "center" }}>
          All prices in NZD. Tokens scale with the size of the job — a small Excel quote uses ~5; a big multi-page architect quote uses ~50+.
        </p>
      </div>
    </section>);

}

// =================== HOW TOKENS WORK ===================
function HowTokensWork() {
  const cards = [
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
        <path d="M2 4a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H7l-3 3v-3a2 2 0 01-2-2V4z" />
      </svg>),
    title: "You drop, tokens flow",
    body: "Tokens get used as Markup reads your files — pricebook, takeoff, plans. A small Excel-only quote uses fewer tokens than a multi-page architect PDF."
  },
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="2" width="10" height="12" rx="1.2" />
        <line x1="5.5" y1="6" x2="10.5" y2="6" />
        <line x1="5.5" y1="9" x2="10.5" y2="9" />
        <line x1="5.5" y1="12" x2="9" y2="12" />
      </svg>),
    title: "Bigger jobs use more",
    body: "More files, more chat, more revisions = more tokens. A handful of small renovation quotes costs less than three commercial reroofs — like phone data, you pay for the work you actually do."
  },
  {
    icon: (
      <svg width="22" height="22" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 8a5 5 0 0 1 9.5-2" />
        <polyline points="13 3 13 6 10 6" />
        <path d="M13 8a5 5 0 0 1-9.5 2" />
        <polyline points="3 13 3 10 6 10" />
      </svg>),
    title: "Top up anytime",
    body: "Running low? Buy 60 more tokens for $39, no plan change required. Your balance is always visible — we never charge a surprise."
  }];

  return (
    <section className="section section-tokens" id="how-tokens">
      <div className="container">
        <div className="section-head section-head-center reveal" style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 48px" }}>
          <div className="eyebrow-centered">
            <span className="eyebrow-line" />
            <span className="eyebrow" style={{ fontSize: "16px" }}>HOW TOKENS WORK</span>
            <span className="eyebrow-line" />
          </div>
          <h2>Like phone data, but for quotes.</h2>
          <p style={{ fontSize: "14px" }}>Your plan gives you a monthly token allowance. Each quote uses tokens based on its size and complexity — you only pay for the work you actually do.</p>
        </div>

        <div className="tokens-grid">
          {cards.map((c, i) =>
          <div key={i} className={"tokens-card reveal delay-" + (i + 1)}>
              <div className="tokens-icon">{c.icon}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          )}
        </div>

        <div className="enterprise-card reveal">
          <h3>Running 100+ quotes a month?</h3>
          <p>For high-volume tradies we offer custom pricing, dedicated onboarding, and Fergus integration. Talk to us about a plan that fits.</p>
          <a href="#enterprise-quote" className="btn btn-ghost btn-lg enterprise-cta">Request Enterprise Pricing</a>
        </div>

        <p className="tokens-tagline reveal">
          Start free with 30 trial tokens — no credit card required. Need more? Top up or subscribe at any time.
        </p>
      </div>
    </section>);

}

function Plan({ name, price, tokens, perToken, features, popular, idx = 0 }) {
  return (
    <div className={"plan reveal reveal-scale delay-" + (idx + 1) + (popular ? " plan-popular" : "")}>
      {popular && <span className="plan-tag">Most popular</span>}
      <div className="plan-name">{name}</div>
      <div className="plan-price">
        <span className="currency">$</span>
        <span className="num">{price}</span>
        <span className="per">/ month</span>
      </div>
      <div className="plan-gst">{tokens} tokens · {perToken}¢ per token</div>
      <ul className="plan-feats">
        {features.map((f, i) =>
        <li key={i}>
            <span className="check">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M3.5 8.5l3 3 6-7" />
              </svg>
            </span>
            <span>{f}</span>
          </li>
        )}
      </ul>
      <a href={"/signup/" + name.toLowerCase()} className={"btn " + (popular ? "btn-primary" : "btn-ghost")} style={{ width: "100%", justifyContent: "center" }}>
        Choose {name}
      </a>
    </div>);

}

// =================== FAQ ===================
function FAQ() {
  const faqs = [
  {
    q: "Do I need to use a specific pricebook?",
    a: "No — Markup uses your pricebook, not generic supplier feeds. Drop in your existing rates as Excel, CSV, or PDF and Markup reads every line. Don't have one organised? Use our blank template — fill it in, upload it, and you're set."
  },
  {
    q: "Does Markup measure off architect plans?",
    a: "No — you do the measuring (that's your expertise and your liability). Markup reads the takeoff you've already done. Drop in your takeoff spreadsheet or PDF and Markup matches every priced line against your pricebook. Plans and aerial photos can come along as reference."
  },
  {
    q: "What's a token, and how many do I need?",
    a: "A token is a unit of AI work. A small Excel-based quote uses around 5 tokens. A typical mid-size job with a PDF takeoff uses ~20-30. A big architect job with multiple drawings can use 50+. Your balance is always visible, and you can top up anytime — we never charge a surprise."
  },
  {
    q: "Does it integrate with Fergus?",
    a: "Yes, on the Elite plan. Fergus integration is custom-set-up per business, so book a call with us once you're on Elite and we'll wire your accepted quotes to push straight into Fergus as jobs. No double entry."
  },
  {
    q: "Can I cancel anytime?",
    a: "Yes. Monthly billing, no contract, no lock-in. Cancel from your dashboard. Your pricebook and quote history stay yours and you can export everything."
  },
  {
    q: "Is there a free trial?",
    a: "Yes — sign up gets you 30 free trial tokens on the house, no credit card required. That's enough to build a real Excel-based quote start to finish, or sample a couple of smaller quotes. Pick a plan or top up when you're ready."
  }];

  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Frequently asked</span>
          <h2>Questions, answered.</h2>
        </div>
        <div className="faq-list reveal">
          {faqs.map((f, i) =>
          <details className="faq-item" key={i}>
              <summary className="faq-q">
                <span className="faq-q-text">{f.q}</span>
                <span className="faq-toggle">
                  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                    <line x1="8" y1="3" x2="8" y2="13" />
                    <line x1="3" y1="8" x2="13" y2="8" />
                  </svg>
                </span>
              </summary>
              <div className="faq-a">{f.a}</div>
            </details>
          )}
        </div>
      </div>
    </section>);

}

// =================== MONEY ON THE TABLE — closing CTA ===================
function MoneyOnTable() {
  return (
    <section className="money-cta" id="cta">
      <div className="container">
        <div className="money-cta-inner reveal">
          <h2>Your team is leaving money on the table. Let's fix that.</h2>
          <p>Start free. No credit card required.</p>
          <a href="/signup" className="btn money-cta-btn">
            Try it free
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M3 8h10M9 4l4 4-4 4" />
            </svg>
          </a>
        </div>
      </div>
    </section>);

}

function Footer({ logoText }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#" className="logo">
              <img src="uploads/Logo 1.png" alt="Markup" style={{ height: 64, width: "auto", display: "block" }} />
            </a>
            <p className="footer-tag">Takeoff to quote, built for NZ tradies. Made in Wellington.</p>
          </div>
          <div className="footer-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#why">Why local</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Get in touch</h5>
            <ul>
              <li><a href="mailto:info@unbox.co.nz">info@unbox.co.nz</a></li>
              <li>Wellington, NZ</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Markup Ltd. All rights reserved.</span>
          <span>Powered by <a href="https://unbox.co.nz" target="_blank" rel="noreferrer" className="footer-credit-link">Unbox Digital</a></span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, HowItWorks, WhyNZ, Trades, Pricing, HowTokensWork, FAQ, MoneyOnTable, Footer });