// VeloraTech — Main app
const { useState: useStateApp, useEffect: useEffectApp } = React;

// Logo mark — orange hex with lightning bolt V (re-drawn from supplied logo)
function LogoMark({ size = 38 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <polygon points="50,4 90,26 90,74 50,96 10,74 10,26" fill="#FF6B1A" opacity="0.10"/>
      <polygon points="50,10 84,29 84,71 50,90 16,71 16,29" fill="none" stroke="#FF6B1A" strokeWidth="2.5"/>
      <polyline points="28,30 50,72 72,30" fill="none" stroke="#FF6B1A" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="50" cy="72" r="3.5" fill="#FF6B1A"/>
    </svg>
  );
}

function Header({ onBookTech, onBookCall }) {
  const [open, setOpen] = useStateApp(false);
  useEffectApp(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const NAV = [
    { href: 'services.html', label: 'Services' },
    { href: '#how', label: 'How it works' },
    { href: 'about.html', label: 'About' },
    { href: 'faq.html', label: 'FAQ' },
    { href: 'contact.html', label: 'Contact' },
  ];
  const handleNav = (href) => {
    setOpen(false);
    if (href.startsWith('#')) { setTimeout(() => { window.location.hash = href; }, 50); }
    else { setTimeout(() => { window.location.href = href; }, 50); }
  };
  return (
    <>
      <header className="header">
        <div className="header__inner">
          <a className="brand" href="#">
            <LogoMark size={38}/>
            <div className="brand__name">Velora<span>Tech</span></div>
          </a>
          <nav className="nav">
            <div className="nav__links">
              {NAV.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
            </div>
            <a className="btn btn--ink btn--sm nav__cta nav__cta--desktop" href="consult.html">
              Book a free call <Icon.Arrow/>
            </a>
            <button className="burger" aria-label="Open menu" aria-expanded={open} onClick={() => setOpen(true)}>
              <span></span><span></span><span></span>
            </button>
          </nav>
        </div>
      </header>

      <div className={'mobile-menu' + (open ? ' open' : '')} role="dialog" aria-modal="true" aria-hidden={!open}>
        <div className="mobile-menu__head">
          <a className="brand" href="#" onClick={() => setOpen(false)}>
            <LogoMark size={34}/>
            <div className="brand__name">Velora<span>Tech</span></div>
          </a>
          <button className="modal__close" aria-label="Close menu" onClick={() => setOpen(false)}>
            <Icon.Close/>
          </button>
        </div>
        <nav className="mobile-menu__nav">
          {NAV.map((n, i) => (
            <a key={n.href} href={n.href} onClick={() => handleNav(n.href)} style={{transitionDelay: open ? `${0.05 + i * 0.04}s` : '0s'}}>
              <span className="mobile-menu__idx">0{i + 1}</span>
              <span className="mobile-menu__label">{n.label}</span>
              <span className="mobile-menu__arr"><Icon.Arrow/></span>
            </a>
          ))}
        </nav>
        <div className="mobile-menu__foot">
          <a className="btn btn--primary btn--lg" href="consult.html">
            <Icon.Calendar/> Book a free 30-min call
          </a>
          <a className="btn btn--ghost btn--lg" href="book.html">
            <Icon.Tools/> Book a technician
          </a>
          <div className="mobile-menu__contact">
            <a href="tel:0449991572"><Icon.Phone/> 0449 991 572</a>
            <a href="mailto:info@veloratech.com.au"><Icon.Mail/> info@veloratech.com.au</a>
          </div>
        </div>
      </div>
    </>
  );
}

function Hero({ onBookTech, onBookCall }) {
  const [showVideo, setShowVideo] = useStateApp(false);
  useEffectApp(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return;
    const mq = window.matchMedia('(min-width: 920px)');
    const update = (e) => setShowVideo(e ? e.matches : mq.matches);
    update();
    if (mq.addEventListener) mq.addEventListener('change', update);
    else mq.addListener(update);
    return () => {
      if (mq.removeEventListener) mq.removeEventListener('change', update);
      else mq.removeListener(update);
    };
  }, []);

  // Defensive: some browsers refuse autoplay until told explicitly.
  // Also: reveal the video only once it has actual frames, so any
  // network failure leaves the soft CSS fallback in place.
  const videoRef = React.useRef(null);
  useEffectApp(() => {
    if (!showVideo) return;
    const v = videoRef.current;
    if (!v) return;
    const reveal = () => { if (v.readyState >= 2) v.classList.add('is-ready'); };
    const tryPlay = () => v.play().then(reveal).catch(err => console.warn('[VT] video play() rejected:', err && err.message));
    const onErr = () => {
      console.warn('[VT] video failed — keeping CSS fallback.', { net: v.networkState, ready: v.readyState });
      v.classList.remove('is-ready');
    };
    tryPlay();
    v.addEventListener('canplay', tryPlay);
    v.addEventListener('loadeddata', reveal);
    v.addEventListener('playing', reveal);
    v.addEventListener('error', onErr);
    // Stalled / no source after a beat — give up quietly so the fallback shows.
    const stalledCheck = setTimeout(() => {
      if (v.networkState === 3 || v.readyState === 0) onErr();
    }, 4000);
    return () => {
      clearTimeout(stalledCheck);
      v.removeEventListener('canplay', tryPlay);
      v.removeEventListener('loadeddata', reveal);
      v.removeEventListener('playing', reveal);
      v.removeEventListener('error', onErr);
    };
  }, [showVideo]);

  return (
    <section className="hero">
      {showVideo && (
        <div className="hero__bg" aria-hidden="true">
          <video ref={videoRef} autoPlay muted playsInline webkit-playsinline="true" preload="auto">
            <source src="hero-bg.mp4" type="video/mp4"/>
          </video>
          <div className="hero__scrim"></div>
        </div>
      )}
      <div className="container">
        <div className="hero__grid">
          <div className="hero__content">
            <div className="hero__kicker"><span className="dot"></span>Local · Reliable · Connected</div>
            <h1 className="hero__title">
              Websites, IT &amp; <em>home tech</em> — handled by humans next door.
            </h1>
            <p className="hero__sub">
              VeloraTech builds and maintains websites for local businesses and tradies, and sends a real technician to your door for everything from a wonky Wi-Fi to a brand-new CCTV install.
            </p>
            <div className="hero__ctas">
              <a className="btn btn--primary btn--lg" href="book.html">
                <Icon.Tools/> Book a technician
              </a>
              <a className="btn btn--ghost btn--lg" href="consult.html">
                <Icon.Phone/> Free 30-min consult
              </a>
            </div>
            <div className="hero__meta">
              <div className="hero__meta-item">
                <div className="n">30<span className="accent">+</span></div>
                <div className="l">Local jobs done</div>
              </div>
              <div className="hero__meta-item">
                <div className="n">7<span className="accent">/</span>7</div>
                <div className="l">Weekend visits</div>
              </div>
              <div className="hero__meta-item">
                <div className="n">6<span className="accent">hr</span></div>
                <div className="l">Avg response</div>
              </div>
              <div className="hero__meta-item">
                <div className="n">4.9<span className="accent">★</span></div>
                <div className="l">Customer rating</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = [
    "Websites for tradies", "Home Wi-Fi", "CCTV install", "Office IT setup",
    "Google Business profiles", "Smart-home help", "Printer & PC fixes", "Website maintenance",
    "Same-week visits", "Websites for local business",
  ];
  const loop = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {loop.map((t, i) => (
          <div key={i} className="marquee__item">
            <span className="pip"></span>{t}
          </div>
        ))}
      </div>
    </div>
  );
}

function Services({ onBookTech, onBookCall }) {
  const [expandedCard, setExpandedCard] = useStateApp(null);
  const [someElseText, setSomeElseText] = useStateApp('');

  const items = [
    {
      n: '01', icon: 'Globe', title: 'Web Design & Ongoing Care',
      desc: 'We build clean, professional websites for local businesses and tradies — then stick around to keep them fast, secure and up to date. No lock-in contracts, no tech headaches.',
      bullets: ['Custom design in your brand', 'Google Business + local SEO', 'Monthly updates & hosting care'],
      price: 'from $375', cta: 'call', href: 'book.html?service=website'
    },
    {
      n: '02', icon: 'Wifi', title: 'Home Internet & Wi-Fi Setup',
      desc: "Slow speeds, dead zones or a brand-new modem you can't figure out — we come to you and get your home connected properly, first time.",
      bullets: ['Modem & router setup', 'Dead zone fixes & mesh Wi-Fi', 'Family & parental controls'],
      price: 'from $140', cta: 'tech', href: 'book.html?service=wifi'
    },
    {
      n: '03', icon: 'Camera', title: 'CCTV & Smart Home Installation',
      desc: 'From security cameras to smart lighting, doorbells and home automation — we install, configure and show you exactly how to use it all.',
      bullets: ['Cameras, doorbells & sensors', 'Smart lighting & automation', 'App setup on all your devices'],
      price: 'from $220', cta: 'tech', href: 'book.html?service=cctv'
    },
    {
      n: '04', icon: 'Building', title: 'Business IT Support',
      desc: "On-call tech support for your team, network, printers and day-to-day IT needs. We keep your business running so you can focus on what matters.",
      bullets: ['Network, email & printer setup', 'Day-to-day IT troubleshooting', 'On-call when things break'],
      price: 'from $100', cta: 'tech', href: 'book.html?service=business-it'
    },
    {
      n: '05', icon: 'Tv', title: 'Computer & Printer Help',
      desc: "Slow computer, dodgy printer, software that won't behave — we troubleshoot, repair and set things up so everything just works again.",
      bullets: ['PC & Mac diagnostics', 'Printer setup & connectivity', 'Software installs & speed-ups'],
      price: 'from $110', cta: 'tech', href: 'book.html?service=computer'
    },
    {
      n: '06', icon: 'Hand', title: 'Something Else?',
      desc: "Not sure what you need? Tell us what's going on and we'll figure it out together. No jargon, no judgement — just friendly local help.",
      bullets: [],
      price: "Let's talk", cta: 'other', href: 'book.html?service=something-else'
    },
  ];

  return (
    <section className="section services" id="services">
      <div className="container">
        <div className="services__head">
          <div>
            <span className="eyebrow">What we do</span>
            <h2 className="section-title">Two sides of the same business — <span className="accent">online</span> and <span className="accent">at your door.</span></h2>
          </div>
          <p className="section-lede">
            Pick a service to get a quote, or book a free 30-minute call and we'll help you figure out what you actually need. No upsells, no jargon.
          </p>
        </div>

        <div className="services__grid">
          {items.map((s) => {
            const Ico = Icon[s.icon];
            const isOther = s.cta === 'other';
            const isExpanded = expandedCard === s.n;
            return (
              <article
                key={s.n}
                className={'service' + (isOther ? ' service--special' : '') + (isExpanded ? ' service--expanded' : '')}
                onClick={() => {
                  if (isOther) { setExpandedCard(isExpanded ? null : s.n); return; }
                  window.location.href = s.href;
                }}
              >
                <div className="service__num">{s.n} / 06</div>
                <div className="service__icon"><Ico/></div>
                <h3 className="service__title">{s.title}</h3>
                <p className="service__desc">{s.desc}</p>
                {s.bullets.length > 0 && (
                  <ul className="service__list">
                    {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
                  </ul>
                )}
                <div className="service__foot">
                  <div className="service__price">
                    <small>{isOther ? 'Chat' : s.cta === 'tech' ? 'Visit' : 'Project'}</small>
                    {s.price}
                  </div>
                  <div className="service__arrow"><Icon.Arrow/></div>
                </div>
                {isOther && isExpanded && (
                  <div className="service__dialogue" onClick={e => e.stopPropagation()}>
                    <label className="service__dialogue-label">Tell us what you need</label>
                    <textarea
                      className="service__dialogue-input"
                      value={someElseText}
                      onChange={e => setSomeElseText(e.target.value)}
                      placeholder="e.g. I need help setting up my new iPad, or I'm not sure if I need a website yet"
                      rows={3}
                    />
                    <a
                      className="btn btn--primary service__dialogue-cta"
                      href={`consult.html${someElseText.trim() ? '?notes=' + encodeURIComponent(someElseText.trim()) : ''}`}
                    >
                      Get in Touch <Icon.Arrow/>
                    </a>
                  </div>
                )}
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Tell us what you need', d: 'Book a free 30-min call or fill out a quick brief. We listen — no scripts, no upsells.', time: '~5 min' },
    { n: '02', t: 'Get a clear, fixed quote', d: 'For websites and projects you get a written scope and price within 1 business day. No "from $X" surprises.', time: '< 24 hr' },
    { n: '03', t: 'We do the work', d: 'A technician comes to your door, or our team builds and ships your site. You always know who you\'re dealing with.', time: 'On schedule' },
    { n: '04', t: 'We stick around', d: 'Need a small update or your TV remote stops talking to your soundbar? You text, we sort it.', time: 'Ongoing' },
  ];
  return (
    <section className="section how" id="how">
      <div className="container">
        <div className="how__inner">
          <div>
            <span className="eyebrow" style={{color: 'var(--orange)'}}>How it works</span>
            <h2 className="section-title how__title">A simple way to get <span className="accent">good tech help.</span></h2>
            <p className="section-lede how__lede">Whether it's a brand-new website or a TV that won't pair with the Apple TV, the path looks the same — talk, quote, fix, follow up.</p>
          </div>
          <div className="how__steps">
            {steps.map(s => (
              <div key={s.n} className="step">
                <div className="step__num">{s.n}</div>
                <div className="step__body">
                  <h3>{s.t}</h3>
                  <p>{s.d}</p>
                </div>
                <div className="step__time">{s.time}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Promise() {
  const items = [
    { icon: 'MapPin', t: 'Local & turning up', d: 'Local team covering Brisbane, Gold Coast and Tweed Heads. Same-week bookings. We show up when we say we will.' },
    { icon: 'Tag', t: 'No-surprise pricing', d: 'Fixed quotes on every job. You see the full price before we lift a screwdriver.' },
    { icon: 'Shield', t: 'Backed by guarantees', d: 'Workmanship warranty on every visit. Free fixes if something we set up stops working.' },
    { icon: 'Hand', t: 'No tech-bro talk', d: 'We explain things in plain English. If you can text, you can use what we leave behind.' },
  ];
  return (
    <section className="section" id="why">
      <div className="container">
        <div style={{maxWidth: 720, marginBottom: 56}}>
          <span className="eyebrow">Why VeloraTech</span>
          <h2 className="section-title">A small team that <span className="accent">picks up the phone.</span></h2>
        </div>
        <div className="promise__grid">
          {items.map((p, i) => {
            const Ico = Icon[p.icon];
            return (
              <div key={i} className="promise">
                <div className="promise__icon"><Ico/></div>
                <h4>{p.t}</h4>
                <p>{p.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function BookBand({ onBookTech, onBookCall }) {
  return (
    <section className="section bookband">
      <div className="container">
        <div className="bookband__inner">
          <div>
            <span className="eyebrow eyebrow--plain" style={{color:'var(--ink)'}}>Ready when you are</span>
            <h2><em>Two ways</em> to get started.</h2>
            <p>Book a technician to come to your home or business, or schedule a free 30-minute call to talk through a website or IT project. Weekend slots are open.</p>
          </div>
          <div className="bookband__options">
            <a className="bookopt" href="book.html">
              <div className="bookopt__icon"><Icon.Tools/></div>
              <div>
                <h4 className="bookopt__title">Book a technician visit</h4>
                <p className="bookopt__sub">Home, business, or site — pick a date, even weekends.</p>
              </div>
              <div className="bookopt__arrow"><Icon.Arrow/></div>
            </a>
            <a className="bookopt" href="consult.html">
              <div className="bookopt__icon"><Icon.Phone/></div>
              <div>
                <h4 className="bookopt__title">Free 30-minute consult</h4>
                <p className="bookopt__sub">A no-obligation call to scope your website or IT project.</p>
              </div>
              <div className="bookopt__arrow"><Icon.Arrow/></div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const items = [
    { q: 'Built our café site in a week and it actually shows up on Google now. They text back faster than my own staff.', n: 'Mira Tan', where: 'Folk & Foam · West End, Brisbane' },
    { q: 'Sorted the Wi-Fi we\'d been fighting for a year and stayed until everything worked. Worth every dollar.', n: 'Dave Costa', where: 'Homeowner · Burleigh Heads, Gold Coast' },
    { q: 'Their monthly care plan means I never think about my website. New menu? Send a photo, it\'s up by the afternoon.', n: 'Jordan Pirelli', where: 'Pirelli Plumbing · Tweed Heads' },
  ];
  return (
    <section className="section" style={{paddingTop: 0}}>
      <div className="container">
        <div style={{maxWidth: 720, marginBottom: 40}}>
          <span className="eyebrow">Word of mouth</span>
          <h2 className="section-title">People who'd <span className="accent">hand us their keys.</span></h2>
        </div>
        <div className="testimonials__grid">
          {items.map((t, i) => (
            <div key={i} className="tmonial">
              <div className="tmonial__stars">
                {Array.from({length:5}).map((_, j) => <Icon.Star key={j}/>)}
              </div>
              <p className="tmonial__quote">"{t.q}"</p>
              <div className="tmonial__author">
                <div className="tmonial__avatar">{t.n.split(' ').map(x => x[0]).slice(0,2).join('')}</div>
                <div>
                  <div className="tmonial__name">{t.n}</div>
                  <div className="tmonial__where">{t.where}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'Where do you cover?', a: 'We\'re based on the Brisbane–Gold Coast–Tweed Heads corridor. That covers all of greater Brisbane, the full Gold Coast and the Tweed region across the NSW border. Further out? Ask us — we travel for larger jobs.' },
    { q: 'How quickly can a technician come out?', a: 'Most bookings made before midday get a next-day slot. Same-week is the norm for everything, including weekend appointments.' },
    { q: 'Do you really build the whole website?', a: 'Yep — design, copy guidance, build, hosting and updates. Most local-business sites launch within 5 to 10 working days from sign-off.' },
    { q: 'What does the free consult actually include?', a: 'A 30-minute call with a human. We\'ll listen to what you need, give honest advice (even if that means "you don\'t need us"), and follow up with a clear quote within 24 hours.' },
    { q: 'How does pricing work for technician visits?', a: 'You see a fixed quote before we start. Travel within our service area is included. If anything changes on-site we tell you first — never a surprise bill.' },
    { q: 'Do you keep our site running once it\'s live?', a: 'Optional Care plan starts at $59/month — hosting, security, backups, and small content tweaks each month. Cancel anytime.' },
  ];
  const [open, setOpen] = useStateApp(0);
  return (
    <section className="section" id="faq" style={{background: 'var(--paper)'}}>
      <div className="container">
        <div className="faq__inner">
          <div>
            <span className="eyebrow">Common questions</span>
            <h2 className="section-title">Answers, before <span className="accent">you ask.</span></h2>
            <p className="section-lede">Still wondering? Book the free call — it's the fastest way to get a straight answer.</p>
          </div>
          <div className="faq__list">
            {items.map((item, i) => (
              <div key={i} className={'faq__item' + (open === i ? ' open' : '')}>
                <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{item.q}</span>
                  <span className="faq__plus"><Icon.Plus/></span>
                </button>
                <div className="faq__a">{item.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact({ onBookCall }) {
  return (
    <section className="section contact" id="contact">
      <div className="container">
        <div className="contact__inner">
          <div>
            <span className="eyebrow" style={{color:'var(--orange)'}}>Get in touch</span>
            <h2 className="section-title contact__title">Let's get your <em>tech sorted.</em></h2>
            <p className="section-lede contact__lede">Call, email, or grab a free 30-minute slot in the diary. We reply within a few hours during the working week — usually faster.</p>
            <div className="mt-24">
              <a className="btn btn--primary btn--lg" href="consult.html">
                <Icon.Calendar/> Book a free 30-min call
              </a>
            </div>
          </div>
          <div className="contact__details">
            <a className="contact__row" href="tel:0449991572">
              <Icon.Phone/>
              <div>
                <div className="l">Phone</div>
                <div className="v">0449 991 572</div>
              </div>
            </a>
            <a className="contact__row" href="mailto:info@veloratech.com.au">
              <Icon.Mail/>
              <div>
                <div className="l">Email</div>
                <div className="v">info@veloratech.com.au</div>
              </div>
            </a>
            <div className="contact__row">
              <Icon.MapPin/>
              <div>
                <div className="l">Service area</div>
                <div className="v">Brisbane · Gold Coast · Tweed Heads</div>
              </div>
            </div>
            <div className="contact__row">
              <Icon.Clock/>
              <div>
                <div className="l">Hours</div>
                <div className="v">Mon–Fri 8am–8pm · Sat–Sun 9am–6pm</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const FLINKS = [
    { href: 'services.html', label: 'Services' },
    { href: 'about.html', label: 'About' },
    { href: 'faq.html', label: 'FAQ' },
    { href: 'contact.html', label: 'Contact' },
    { href: 'book.html', label: 'Book' },
    { href: 'consult.html', label: 'Consult' },
    { href: 'privacy.html', label: 'Privacy Policy' },
  ];
  return (
    <footer className="footer">
      <nav className="footer__links" style={{ display: 'flex', flexWrap: 'wrap', gap: '18px', justifyContent: 'center', padding: '0 20px 22px', borderBottom: '1px solid var(--line-2)' }}>
        {FLINKS.map(l => (
          <a key={l.href} href={l.href} style={{ color: 'rgba(255,255,255,0.6)', fontSize: 13, textDecoration: 'none' }}>{l.label}</a>
        ))}
      </nav>
      <div className="container footer__inner" style={{ paddingTop: 22 }}>
        <div className="brand">
          <LogoMark size={28}/>
          <div className="brand__name">Velora<span>Tech</span></div>
        </div>
        <div className="footer__meta">ABN 99 698 738 724 · © 2026 VeloraTech</div>
        <div style={{fontSize:13}}>Brisbane · Gold Coast · Tweed Heads</div>
      </div>
    </footer>
  );
}

// ----- App -----
function App() {
  const [modal, setModal] = useStateApp(null); // 'tech' | 'call' | null
  const openTech = () => setModal('tech');
  const openCall = () => setModal('call');
  const close = () => setModal(null);

  // Scroll to a #hash section after the SPA has painted (e.g. arriving from
  // services.html → index.html#how). Native scroll fires before React renders.
  useEffectApp(() => {
    const scrollToHash = () => {
      const id = (window.location.hash || '').replace('#', '');
      if (!id) return;
      let tries = 0;
      const tick = () => {
        const el = document.getElementById(id);
        if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
        else if (tries++ < 20) { setTimeout(tick, 100); }
      };
      setTimeout(tick, 80);
    };
    scrollToHash();
    window.addEventListener('hashchange', scrollToHash);
    return () => window.removeEventListener('hashchange', scrollToHash);
  }, []);

  return (
    <>
      <Header onBookTech={openTech} onBookCall={openCall}/>
      <Hero onBookTech={openTech} onBookCall={openCall}/>
      <Marquee/>
      <Services onBookTech={openTech} onBookCall={openCall}/>
      <HowItWorks/>
      <Promise/>
      <BookBand onBookTech={openTech} onBookCall={openCall}/>
      <Testimonials/>
      <FAQ/>
      <Contact onBookCall={openCall}/>
      <Footer/>

      {modal === 'tech' && <TechnicianBooking onClose={close}/>}
      {modal === 'call' && <ConsultationBooking onClose={close}/>}
    </>
  );
}

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