// Smith Development & Construction landing page
// Mobile-first, single page, all sections on one scroll

const { useState, useEffect, useRef } = React;

// ──────────────────────────────────────────────────────────────────
// Tweakable defaults — host rewrites this block on persist
// ──────────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "headingFont": "Outfit",
  "heroLayout": "split",
  "showSectionNumbers": true,
  "denseProjects": false
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  blue:    { primary: "#4054B2", primaryDeep: "#2E3F8F", primarySoft: "#EEF1FB", contrast: "#FFFFFF" },
  navy:    { primary: "#1E2A55", primaryDeep: "#0F172A", primarySoft: "#E8EAF1", contrast: "#FFFFFF" },
  amber:   { primary: "#4054B2", primaryDeep: "#2E3F8F", primarySoft: "#FBF3E5", contrast: "#FFFFFF", spark: "#C68A2E" },
};

// ──────────────────────────────────────────────────────────────────
// Data
// ──────────────────────────────────────────────────────────────────
const SERVICES = [
  {
    n: "01",
    title: "General Construction",
    blurb: "Working with the project architect, we provide quality construction services—from building permits to site development and construction to final landscaping.",
    icon: "frame",
  },
  {
    n: "02",
    title: "Design-Build",
    blurb: "A single source for all your facility construction needs. Combines design and build functions to maximize communication and put your project on the fast track.",
    icon: "compass",
  },
  {
    n: "03",
    title: "Construction Management",
    blurb: "Cost efficiency, quality control, and representation of your best interests. We manage complex on-site activity to meet critical schedules and budgets.",
    icon: "clipboard",
  },
  {
    n: "04",
    title: "Roof Maintenance",
    blurb: "Well-engineered, long-term solutions for your roofing needs.",
    icon: "roof",
  },
  {
    n: "05",
    title: "Butler Building Systems",
    blurb: "World-class pre-engineered building system for any type of construction.",
    icon: "warehouse",
  },
  {
    n: "06",
    title: "Sustainable / Green Building",
    blurb: "LEED Accredited Professionals on staff. Steel buildings make sustainable building affordable.",
    icon: "leaf",
  },
];

const TEAM = [
  { name: "John Risser", title: "President", initials: "JR", photo: "assets/john-risser.jpg", bio: "30+ years in construction and design." },
  { name: "Daniel Smith", title: "Business Development Executive", initials: "DS", photo: "assets/daniel-smith.jpg", bio: "Client partnerships and project intake." },
  { name: "Bobby Furnish", title: "Project Manager", initials: "BF", photo: "assets/bobby-furnish.jpg", bio: "On-site coordination, quality control." },
];

const NOTABLE = [
  "ArvinMeritor",
  "Aqua Systems",
  "Village Square",
  "Worrell Corporation",
  "Allied Automation",
  "Kipp Brothers",
  "Vistacom",
  "Prospect Development",
  "Indiana Blood Center",
  "Crawford Group",
];

const BENEFITS = [
  "Single-source responsibility",
  "Project costs established sooner",
  "Condensed construction schedules",
  "More innovative solutions",
  "Greater control",
  "Unequaled quality",
  "Improved risk management",
];

const FEATURED_PROJECTS = [
  { src: "assets/project-1.jpg", caption: "Stanley Chevrolet", type: "Automotive Dealership" },
  { src: "assets/project-2.jpg", caption: "Bob's Discount Furniture", type: "Retail Storefront" },
  { src: "assets/project-3.jpg", caption: "Fishers Imports", type: "Showroom & Service" },
];

// ──────────────────────────────────────────────────────────────────
// Icons (simple stroke geometry)
// ──────────────────────────────────────────────────────────────────
function Icon({ kind, size = 28, stroke = "currentColor" }) {
  const common = { width: size, height: size, viewBox: "0 0 32 32", fill: "none", stroke, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "frame":
      return (
        <svg {...common}>
          <rect x="4" y="4" width="24" height="24" />
          <line x1="4" y1="11" x2="28" y2="11" />
          <line x1="11" y1="11" x2="11" y2="28" />
        </svg>
      );
    case "compass":
      return (
        <svg {...common}>
          <circle cx="16" cy="16" r="12" />
          <path d="M16 4 L20 16 L16 28 L12 16 Z" />
          <circle cx="16" cy="16" r="1.2" fill={stroke} />
        </svg>
      );
    case "clipboard":
      return (
        <svg {...common}>
          <rect x="7" y="6" width="18" height="22" />
          <rect x="11" y="3" width="10" height="5" />
          <line x1="11" y1="14" x2="21" y2="14" />
          <line x1="11" y1="18" x2="21" y2="18" />
          <line x1="11" y1="22" x2="17" y2="22" />
        </svg>
      );
    case "roof":
      return (
        <svg {...common}>
          <path d="M3 16 L16 5 L29 16" />
          <path d="M6 16 V27 H26 V16" />
          <line x1="13" y1="27" x2="13" y2="20" />
          <line x1="19" y1="27" x2="19" y2="20" />
        </svg>
      );
    case "warehouse":
      return (
        <svg {...common}>
          <path d="M3 12 L16 5 L29 12 V27 H3 Z" />
          <rect x="11" y="17" width="10" height="10" />
          <line x1="11" y1="22" x2="21" y2="22" />
        </svg>
      );
    case "leaf":
      return (
        <svg {...common}>
          <path d="M5 27 C5 14 14 5 27 5 C27 18 18 27 5 27 Z" />
          <path d="M5 27 L20 12" />
        </svg>
      );
    case "check":
      return (
        <svg {...common}>
          <path d="M6 16 L13 23 L26 9" />
        </svg>
      );
    case "phone":
      return (
        <svg {...common}>
          <path d="M7 4 H12 L14 10 L11 12 C12 16 16 20 20 21 L22 18 L28 20 V25 C28 26 27 27 26 27 C14 27 5 18 5 6 C5 5 6 4 7 4 Z" />
        </svg>
      );
    case "mail":
      return (
        <svg {...common}>
          <rect x="4" y="7" width="24" height="18" />
          <path d="M4 9 L16 18 L28 9" />
        </svg>
      );
    case "pin":
      return (
        <svg {...common}>
          <path d="M16 4 C21 4 25 8 25 13 C25 20 16 28 16 28 C16 28 7 20 7 13 C7 8 11 4 16 4 Z" />
          <circle cx="16" cy="13" r="3" />
        </svg>
      );
    case "arrow":
      return (
        <svg {...common}>
          <line x1="6" y1="16" x2="26" y2="16" />
          <path d="M20 10 L26 16 L20 22" />
        </svg>
      );
    default:
      return null;
  }
}

// ──────────────────────────────────────────────────────────────────
// Header
// ──────────────────────────────────────────────────────────────────
function Header({ palette, onCta }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { href: "#services", label: "Services" },
    { href: "#about", label: "About" },
    { href: "#projects", label: "Projects" },
    { href: "#contact", label: "Contact" },
  ];
  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <div className="container header-inner">
        <a href="#top" className="brand" aria-label="Smith Development & Construction — home">
          <span className="brand-mark" aria-hidden="true">
            <span style={{ color: palette.primary }}>S</span>
            <span>D</span>
            <span style={{ color: palette.primary }}>C</span>
          </span>
          <span className="brand-text">
            <span className="brand-line1">Smith Development</span>
            <span className="brand-line2">&amp; Construction Co.</span>
          </span>
        </a>
        <nav className="nav-desktop" aria-label="Primary">
          {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </nav>
        <div className="header-cta">
          <a href="tel:+13177732803" className="header-phone" aria-label="Call (317) 773-2803">
            <Icon kind="phone" size={16} />
            <span>(317) 773-2803</span>
          </a>
          <a href="#contact" className="btn btn-primary btn-sm">Request Consultation</a>
        </div>
        <button className={"hamburger" + (open ? " open" : "")} aria-label="Toggle menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <span /><span /><span />
        </button>
      </div>
      <div className={"mobile-drawer" + (open ? " open" : "")}>
        <nav>
          {links.map(l => <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>)}
        </nav>
        <div className="drawer-actions">
          <a href="tel:+13177732803" className="btn btn-ghost btn-block"><Icon kind="phone" size={16} /> (317) 773-2803</a>
          <a href="#contact" className="btn btn-primary btn-block" onClick={() => setOpen(false)}>Request Consultation</a>
        </div>
      </div>
    </header>
  );
}

// ──────────────────────────────────────────────────────────────────
// Hero
// ──────────────────────────────────────────────────────────────────
function Hero({ layout, palette }) {
  return (
    <section id="top" className={"hero hero-" + layout}>
      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="eyebrow">
            <span className="eyebrow-bar" />
            Central Indiana · Since 1994
          </div>
          <h1 className="hero-title">
            Discover the <em>Building</em> Difference.
          </h1>
          <p className="hero-sub">
            Smith Development &amp; Construction has been a part of the Central Indiana community for over 25 years.
            Our president, John Risser, has over 30 years of experience in construction and design.
          </p>
          <div className="hero-actions">
            <a href="#contact" className="btn btn-primary btn-lg">
              Request a Consultation
              <Icon kind="arrow" size={18} />
            </a>
            <a href="tel:+13177732803" className="btn btn-outline btn-lg">
              <Icon kind="phone" size={18} />
              Call (317) 773-2803
            </a>
          </div>
          <dl className="hero-stats">
            <div><dt>30+</dt><dd>Years experience</dd></div>
            <div><dt>60+</dt><dd>Combined staff years</dd></div>
            <div><dt>1994</dt><dd>Founded in Noblesville</dd></div>
          </dl>
        </div>
        <div className="hero-visual">
          <div className="hero-photo hero-photo-main" role="img" aria-label="Recent commercial construction project — Stanley Chevrolet dealership">
            <img src="assets/project-1.jpg" alt="" loading="eager" />
            <div className="hero-photo-tag">
              <span className="tag-dot" />
              Recent Build · Stanley Chevrolet
            </div>
          </div>
          <div className="hero-photo hero-photo-2" role="img" aria-label="Recent commercial project — Fishers Imports">
            <img src="assets/project-3.jpg" alt="" loading="eager" />
          </div>
          <div className="hero-badge">
            <div className="hero-badge-num">25+</div>
            <div className="hero-badge-txt">Years building<br/>Central Indiana</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────
// Section header
// ──────────────────────────────────────────────────────────────────
function SectionHead({ num, label, title, kicker, showNumbers }) {
  return (
    <div className="section-head">
      <div className="section-eyebrow">
        {showNumbers && <span className="section-num">{num}</span>}
        <span className="section-label">{label}</span>
      </div>
      <h2 className="section-title">{title}</h2>
      {kicker && <p className="section-kicker">{kicker}</p>}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────
// Services
// ──────────────────────────────────────────────────────────────────
function Services({ showNumbers }) {
  return (
    <section id="services" className="section section-services">
      <div className="container">
        <SectionHead
          num="01"
          label="Services"
          title="What we build, end-to-end."
          kicker="From permitting through landscaping, every phase under one roof — coordinated, accountable, and on schedule."
          showNumbers={showNumbers}
        />
        <div className="services-grid">
          {SERVICES.map(s => (
            <article key={s.title} className="service-card">
              <div className="service-card-top">
                <div className="service-icon"><Icon kind={s.icon} size={32} /></div>
                <span className="service-num">{s.n}</span>
              </div>
              <h3 className="service-title">{s.title}</h3>
              <p className="service-blurb">{s.blurb}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────
// About
// ──────────────────────────────────────────────────────────────────
function About({ showNumbers }) {
  return (
    <section id="about" className="section section-about">
      <div className="container about-grid">
        <div className="about-copy">
          <SectionHead
            num="02"
            label="About"
            title="Built on Central Indiana for three decades."
            showNumbers={showNumbers}
          />
          <p className="prose">
            Smith Development &amp; Construction has been a part of the Central Indiana community since 1994.
            Our President, John Risser, has over 30 years of experience in construction and design, and our
            qualified staff adds 60+ years of combined experience. Each member of our construction team is
            dedicated to providing a safe job site and the best quality and performance for our customers.
          </p>
          <div className="mission">
            <div className="mission-label">Our mission</div>
            <p className="mission-text">
              To provide the best quality, finish on time, and stay within budget — a commitment to
              excellence in every project.
            </p>
          </div>
        </div>
        <div className="about-stats">
          <div className="stat-block">
            <div className="stat-num">1994</div>
            <div className="stat-cap">Founded in Noblesville, IN</div>
          </div>
          <div className="stat-block">
            <div className="stat-num">30+</div>
            <div className="stat-cap">Years President's experience</div>
          </div>
          <div className="stat-block">
            <div className="stat-num">60+</div>
            <div className="stat-cap">Combined staff experience</div>
          </div>
          <div className="stat-block accent">
            <div className="stat-num">10+</div>
            <div className="stat-cap">Notable Indiana clients</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────
// Team
// ──────────────────────────────────────────────────────────────────
function Team({ showNumbers }) {
  return (
    <section id="team" className="section section-team">
      <div className="container">
        <SectionHead
          num="03"
          label="Team"
          title="The people you'll work with."
          showNumbers={showNumbers}
        />
        <div className="team-grid">
          {TEAM.map(p => (
            <article key={p.name} className="team-card">
              <div className="team-photo">
                {p.photo ? (
                  <img src={p.photo} alt={p.name} style={{width:'100%',height:'100%',objectFit:'cover'}} loading="lazy" />
                ) : (
                  <>
                    <div className="team-photo-stripes" aria-hidden="true" />
                    <div className="team-initials">{p.initials}</div>
                  </>
                )}
              </div>
              <div className="team-meta">
                <h3 className="team-name">{p.name}</h3>
                <div className="team-title">{p.title}</div>
                <p className="team-bio">{p.bio}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────
// Projects
// ──────────────────────────────────────────────────────────────────
function Projects({ showNumbers, dense }) {
  return (
    <section id="projects" className="section section-projects">
      <div className="container">
        <SectionHead
          num="04"
          label="Notable Projects"
          title="A track record across Central Indiana."
          kicker="A selection of community buildings and commercial projects we've delivered."
          showNumbers={showNumbers}
        />
        <div className="featured-grid">
          {FEATURED_PROJECTS.map((p, i) => (
            <figure key={i} className={"featured-card" + (i === 0 ? " featured-card-lg" : "")}>
              <div className="featured-img">
                <img src={p.src} alt={p.caption} loading="lazy" />
              </div>
              <figcaption>
                <div className="featured-type">{p.type}</div>
                <div className="featured-name">{p.caption}</div>
              </figcaption>
            </figure>
          ))}
        </div>
        <div className={"clients-grid" + (dense ? " dense" : "")}>
          {NOTABLE.map((n, i) => (
            <div key={n} className="client-cell">
              <span className="client-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="client-name">{n}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────
// Design-Build Benefits
// ──────────────────────────────────────────────────────────────────
function Benefits({ showNumbers }) {
  return (
    <section id="benefits" className="section section-benefits">
      <div className="container benefits-grid">
        <div className="benefits-head">
          <SectionHead
            num="05"
            label="Design-Build"
            title="Why choose design-build."
            kicker="One team, one contract, one accountable partner — from concept to keys."
            showNumbers={showNumbers}
          />
          <a href="#contact" className="btn btn-outline-light btn-lg">
            Start a project
            <Icon kind="arrow" size={18} />
          </a>
        </div>
        <ul className="benefits-list">
          {BENEFITS.map((b, i) => (
            <li key={b}>
              <span className="benefit-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="benefit-text">{b}</span>
              <Icon kind="check" size={20} />
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────
// Contact
// ──────────────────────────────────────────────────────────────────
function Contact({ showNumbers }) {
  const [form, setForm] = useState({ name: "", email: "", phone: "", company: "", message: "" });
  const [errs, setErrs] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = "Please enter your name.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) next.email = "Please enter a valid email.";
    if (!form.message.trim()) next.message = "Please tell us about your project.";
    setErrs(next);
    if (Object.keys(next).length === 0) {
      setSent(true);
    }
  };

  return (
    <section id="contact" className="section section-contact">
      <div className="container contact-grid">
        <div className="contact-info">
          <SectionHead
            num="06"
            label="Contact"
            title="Let's talk about your project."
            kicker="Reach us by phone, email, or the form — typical reply within one business day."
            showNumbers={showNumbers}
          />
          <ul className="contact-list">
            <li>
              <div className="contact-icon"><Icon kind="phone" size={22} /></div>
              <div>
                <div className="contact-label">Phone</div>
                <a className="contact-value" href="tel:+13177732803">(317) 773-2803</a>
              </div>
            </li>
            <li>
              <div className="contact-icon"><Icon kind="mail" size={22} /></div>
              <div>
                <div className="contact-label">Email</div>
                <a className="contact-value" href="mailto:jrisser@sdcco.com">jrisser@sdcco.com</a>
              </div>
            </li>
            <li>
              <div className="contact-icon"><Icon kind="pin" size={22} /></div>
              <div>
                <div className="contact-label">Office</div>
                <div className="contact-value">10330 Pleasant St. #100<br/>Noblesville, IN 46060</div>
              </div>
            </li>
          </ul>
        </div>
        <div className="contact-card">
          {sent ? (
            <div className="contact-success">
              <div className="success-mark"><Icon kind="check" size={32} /></div>
              <h3>Thanks, {form.name.split(" ")[0]}.</h3>
              <p>Your message is on its way. We'll be in touch within one business day at <strong>{form.email}</strong>.</p>
              <button className="btn btn-ghost" onClick={() => { setSent(false); setForm({ name: "", email: "", phone: "", company: "", message: "" }); }}>
                Send another message
              </button>
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit} noValidate>
              <h3 className="form-title">Request a consultation</h3>
              <div className="form-row">
                <Field label="Name" required value={form.name} onChange={v => set("name", v)} error={errs.name} />
                <Field label="Email" type="email" required value={form.email} onChange={v => set("email", v)} error={errs.email} />
              </div>
              <div className="form-row">
                <Field label="Phone" type="tel" value={form.phone} onChange={v => set("phone", v)} />
                <Field label="Company" value={form.company} onChange={v => set("company", v)} />
              </div>
              <Field label="Tell us about your project" textarea required value={form.message} onChange={v => set("message", v)} error={errs.message} />
              <button type="submit" className="btn btn-primary btn-lg btn-block">
                Send message
                <Icon kind="arrow" size={18} />
              </button>
              <p className="form-fine">By submitting you agree to be contacted regarding your inquiry. We never share your information.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Field({ label, type = "text", textarea, required, value, onChange, error }) {
  const id = "f-" + label.toLowerCase().replace(/[^a-z]+/g, "-");
  return (
    <div className={"field" + (error ? " has-error" : "")}>
      <label htmlFor={id}>
        {label}{required && <span className="req"> *</span>}
      </label>
      {textarea ? (
        <textarea id={id} rows="5" value={value} onChange={e => onChange(e.target.value)} />
      ) : (
        <input id={id} type={type} value={value} onChange={e => onChange(e.target.value)} />
      )}
      {error && <div className="field-error">{error}</div>}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────
// Footer
// ──────────────────────────────────────────────────────────────────
function Footer({ palette }) {
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div className="footer-brand">
          <div className="footer-mark">
            <span style={{ color: palette.primary }}>S</span>
            <span>D</span>
            <span style={{ color: palette.primary }}>C</span>
          </div>
          <div className="footer-name">Smith Development<br/>&amp; Construction Co, Inc.</div>
          <p className="footer-tag">Discover the building difference.</p>
        </div>
        <div className="footer-col">
          <div className="footer-h">Contact</div>
          <a href="tel:+13177732803">(317) 773-2803</a>
          <a href="mailto:jrisser@sdcco.com">jrisser@sdcco.com</a>
          <address>10330 Pleasant St. #100<br/>Noblesville, IN 46060</address>
        </div>
        <div className="footer-col">
          <div className="footer-h">Explore</div>
          <a href="#services">Services</a>
          <a href="#about">About</a>
          <a href="#projects">Projects</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="footer-col">
          <div className="footer-h">Capabilities</div>
          <span>General Construction</span>
          <span>Design-Build</span>
          <span>Construction Management</span>
          <span>LEED Sustainable Building</span>
        </div>
      </div>
      <div className="footer-bar">
        <div className="container footer-bar-inner">
          <div>© 2026 Smith Development &amp; Construction Co, Inc. All rights reserved.</div>
          <div>Noblesville, Indiana</div>
        </div>
      </div>
    </footer>
  );
}

// ──────────────────────────────────────────────────────────────────
// Tweaks
// ──────────────────────────────────────────────────────────────────
function PageTweaks({ tweaks, setTweak }) {
  const ColorSwatch = ({ name, hex }) => (
    <button
      key={name}
      className={"swatch" + (tweaks.accent === name ? " active" : "")}
      onClick={() => setTweak("accent", name)}
      aria-label={name}
    >
      <span className="swatch-dot" style={{ background: hex }} />
      <span className="swatch-name">{name}</span>
    </button>
  );
  return (
    <TweaksPanel>
      <TweakSection title="Accent palette">
        <div className="tw-swatches">
          <ColorSwatch name="blue" hex="#4054B2" />
          <ColorSwatch name="navy" hex="#1E2A55" />
          <ColorSwatch name="amber" hex="#C68A2E" />
        </div>
      </TweakSection>
      <TweakRadio
        label="Heading font"
        value={tweaks.headingFont}
        onChange={v => setTweak("headingFont", v)}
        options={[
          { label: "Outfit", value: "Outfit" },
          { label: "Manrope", value: "Manrope" },
          { label: "Space Grotesk", value: "Space Grotesk" },
        ]}
      />
      <TweakRadio
        label="Hero layout"
        value={tweaks.heroLayout}
        onChange={v => setTweak("heroLayout", v)}
        options={[
          { label: "Split", value: "split" },
          { label: "Stacked", value: "stacked" },
          { label: "Editorial", value: "editorial" },
        ]}
      />
      <TweakToggle label="Show section numbers" value={tweaks.showSectionNumbers} onChange={v => setTweak("showSectionNumbers", v)} />
      <TweakToggle label="Dense client grid" value={tweaks.denseProjects} onChange={v => setTweak("denseProjects", v)} />
    </TweaksPanel>
  );
}

// ──────────────────────────────────────────────────────────────────
// App
// ──────────────────────────────────────────────────────────────────
function App() {
  const palette = ACCENT_PALETTES.blue;

  return (
    <>
      <Header palette={palette} />
      <main>
        <Hero layout="split" palette={palette} />
        <Services showNumbers={true} />
        <About showNumbers={true} />
        <Team showNumbers={true} />
        <Projects showNumbers={true} dense={false} />
        <Benefits showNumbers={true} />
        <Contact showNumbers={true} />
      </main>
      <Footer palette={palette} />
    </>
  );
}

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