const { useState, useEffect } = React;

const API_BASE = window.NKG_API || localStorage.getItem('nkg_api') || (
  ['localhost', '127.0.0.1'].includes(location.hostname) ? 'http://localhost:4000' : 'https://api.nkgoldsterren.nl'
);

const NAV = [
  ['/', 'Home', 'home'],
  ['/diensten/', 'Diensten', 'diensten'],
  ['/galerij/', 'Galerij', 'galerij'],
  ['/projecten/', 'Projecten', 'projecten'],
  ['/over-ons/', 'Over ons', 'over-ons'],
  ['/contact/', 'Contact', 'contact'],
];

const ICONS = {
  building: '<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4M10 10h4M10 14h4M10 18h4"/>',
  mail: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
  msg: '<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>',
  pin: '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
  send: '<path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/>',
  shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
  hat: '<path d="M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"/><path d="M14 6a6 6 0 0 1 6 6v3"/><path d="M4 15v-3a6 6 0 0 1 6-6"/><rect x="2" y="15" width="20" height="4" rx="1"/>',
  phone: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>',
  menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
  x: '<path d="M18 6 6 18M6 6l12 12"/>',
};

const defaultSettings = {
  site_name: 'NK GOLDSTERREN',
  site_tagline: 'Exclusief Bouwbedrijf',
  site_description: 'Hoogwaardige nieuwbouw, renovatie en infrastructuur. Vakmanschap van fundering tot afwerking.',
  hero_badge: 'Vakmanschap · Kwaliteit · Vertrouwen',
  hero_title: 'NK GOLDSTERREN',
  hero_subtitle: 'BOUWBEDRIJF & INFRASTRUCTUUR',
  hero_text: 'Van luxe renovatie tot complete nieuwbouw: wij realiseren projecten met precisie, duurzame materialen en een afwerking die het verschil maakt.',
  hero_image: 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=2000&q=80',
  hero_cta: 'Offerte aanvragen',
  hero_cta2: 'Bekijk galerij',
  about_title: 'Over ons',
  about_text: 'NK Goldsterren is een exclusief bouwbedrijf gespecialiseerd in hoogwaardige renovatie, nieuwbouw en infrastructuurwerken. Wij combineren vakmanschap met moderne technieken.',
  services_title: 'Onze diensten',
  services_text: 'Van fundering tot afwerking: één aanspreekpunt voor uw complete bouwtraject.',
  gallery_title: 'Fotogalerij',
  gallery_text: 'Een selectie van onze recente werken. Elke foto vertelt het verhaal van vakmanschap op locatie.',
  contact_title: 'Plan uw project',
  contact_text: 'Vertel ons kort over uw wensen. Wij nemen zo snel mogelijk contact met u op.',
  phone: '+31 6 34733042',
  whatsapp: '31634733042',
  email: 'info@nkgoldsterren.nl',
  address: 'Nederland',
  footer_text: '© NK GOLDSTERREN. Alle rechten voorbehouden.',
};

const defaultServices = [
  { id: '1', title: 'Exclusieve Bouw & Renovatie', description: 'Hoogwaardige afwerking en vakmanschap voor uw woning, bedrijfspand en luxe verbouwingen.', icon: 'building' },
  { id: '2', title: 'Infrastructuur & Projecten', description: 'Professionele uitvoering van grond-, weg- en waterbouw met uiterste precisie.', icon: 'hat' },
  { id: '3', title: 'Kwaliteit & Garantie', description: 'Duurzame materialen, heldere afspraken en oplevering volgens de hoogste standaarden.', icon: 'shield' },
];

const defaultGallery = [
  { id: 'g1', title: 'Luxe woningrenovatie', description: 'Volledige transformatie van een herenhuis: nieuwe indeling, natuursteen en maatwerk interieur.', image_url: 'https://images.unsplash.com/photo-1600210492493-0946911123ea?auto=format&fit=crop&w=1600&q=80', category: 'Renovatie' },
  { id: 'g2', title: 'Nieuwbouw villa', description: 'Sleutelklare villa met duurzame installaties, grote glaspartijen en strakke gevelafwerking.', image_url: 'https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&w=1600&q=80', category: 'Nieuwbouw' },
  { id: 'g3', title: 'Bedrijfspand & afbouw', description: 'Hoogwaardige afbouw van kantoor- en bedrijfsruimte, van casco tot representatieve entree.', image_url: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1600&q=80', category: 'Utiliteit' },
  { id: 'g4', title: 'Grondwerken & infra', description: 'Precisie in grond-, weg- en waterbouw: fundering, terrein en ontsluiting in één traject.', image_url: 'https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80', category: 'Infrastructuur' },
  { id: 'g5', title: 'Gevel & metselwerk', description: 'Ambachtelijk metselwerk en gevelrestauratie met oog voor detail en historische lijnen.', image_url: 'https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=80', category: 'Afwerking' },
  { id: 'g6', title: 'Interieur op maat', description: 'Keukens, trappen en inbouwkasten — afwerking tot in de puntjes.', image_url: 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1600&q=80', category: 'Interieur' },
];

function Icon({ name }) {
  return (
    <svg className="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" dangerouslySetInnerHTML={{ __html: ICONS[name] || ICONS.building }} />
  );
}

function mediaUrl(url) {
  if (!url) return '';
  if (url.startsWith('http')) return url;
  return API_BASE + url;
}

function useSite() {
  const [data, setData] = useState({
    settings: defaultSettings,
    services: defaultServices,
    projects: [],
    gallery: defaultGallery,
    fromApi: false,
  });

  useEffect(() => {
    let cancelled = false;
    fetch(API_BASE + '/api/content/public')
      .then((r) => {
        if (!r.ok) throw new Error('api');
        return r.json();
      })
      .then((payload) => {
        if (cancelled) return;
        setData({
          settings: { ...defaultSettings, ...(payload.settings || {}) },
          services: Array.isArray(payload.services) ? payload.services : defaultServices,
          projects: Array.isArray(payload.projects) ? payload.projects : [],
          gallery: Array.isArray(payload.gallery) ? payload.gallery : defaultGallery,
          fromApi: true,
        });
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  return data;
}

function Header({ settings, page }) {
  const [open, setOpen] = useState(false);
  const wa = settings.whatsapp || '31634733042';
  return (
    <header className="site-header">
      <div className="wrap header-inner">
        <a className="brand" href="/">
          <span className="brand-mark"><Icon name="building" /></span>
          <span>
            <div className="brand-name">{settings.site_name}</div>
            <div className="brand-tag">{settings.site_tagline}</div>
          </span>
        </a>
        <nav className="nav">
          {NAV.map(([href, label, id]) => (
            <a key={id} href={href} className={page === id ? 'active' : ''} aria-current={page === id ? 'page' : undefined}>{label}</a>
          ))}
          <a className="btn btn-wa nav-wa" href={'https://wa.me/' + wa} target="_blank" rel="noreferrer"><Icon name="msg" /> WhatsApp</a>
        </nav>
        <button className="menu-btn" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
          <Icon name={open ? 'x' : 'menu'} />
        </button>
      </div>
      <div className={open ? 'mobile-nav open' : 'mobile-nav'}>
        {NAV.map(([href, label, id]) => (
          <a key={id} href={href} onClick={() => setOpen(false)}>{label}</a>
        ))}
        <a href={'https://wa.me/' + wa} target="_blank" rel="noreferrer">WhatsApp</a>
      </div>
    </header>
  );
}

function Footer({ settings }) {
  return (
    <footer className="site-footer">
      <div className="wrap footer-inner">
        <div>
          <div>{settings.footer_text}</div>
          <div className="footer-meta">
            {settings.email && <a href={'mailto:' + settings.email}>{settings.email}</a>}
            {settings.phone && <a href={'tel:' + settings.phone}>{settings.phone}</a>}
            {settings.address && <span>{settings.address}</span>}
          </div>
        </div>
        <div className="footer-links">
          {NAV.map(([href, label, id]) => <a key={id} href={href}>{label}</a>)}
        </div>
      </div>
    </footer>
  );
}

function WhatsApp({ settings }) {
  const wa = settings.whatsapp || '31634733042';
  return (
    <a className="wa-float" href={'https://wa.me/' + wa} target="_blank" rel="noreferrer" aria-label="WhatsApp">
      <Icon name="msg" />
    </a>
  );
}

function Lightbox({ item, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  if (!item) return null;
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lightbox-close" aria-label="Sluiten" onClick={onClose}>×</button>
      <div className="lightbox-inner" onClick={(e) => e.stopPropagation()}>
        <img src={mediaUrl(item.image_url)} alt={item.title || ''} />
        {item.category && <p className="eyebrow">{item.category}</p>}
        <h3>{item.title}</h3>
        {item.description && <p>{item.description}</p>}
      </div>
    </div>
  );
}

function PageHero({ image, eyebrow, title, text }) {
  return (
    <section className="page-hero">
      <div className="page-hero-media">
        <img src={mediaUrl(image)} alt="" />
        <div className="page-hero-overlay"></div>
      </div>
      <div className="wrap page-hero-content">
        {eyebrow && <p className="eyebrow">{eyebrow}</p>}
        <h1>{title}</h1>
        {text && <p className="lead">{text}</p>}
      </div>
    </section>
  );
}

function ServiceCard({ item }) {
  return (
    <article className="card">
      {item.image_url && <img className="card-img" src={mediaUrl(item.image_url)} alt="" />}
      <div className="card-body">
        <div className="icon-box"><Icon name={item.icon || 'building'} /></div>
        <h3>{item.title}</h3>
        <p>{item.description}</p>
      </div>
    </article>
  );
}

function GalleryGrid({ items }) {
  const [open, setOpen] = useState(null);
  if (!items.length) return <p className="empty">Binnenkort nieuwe foto's.</p>;
  return (
    <>
      <div className="grid-3">
        {items.map((g) => (
          <button key={g.id} type="button" className="card gallery-btn" onClick={() => setOpen(g)}>
            <div className="shot">
              <img src={mediaUrl(g.image_url)} alt={g.title || ''} />
              {g.category && <span className="cat">{g.category}</span>}
            </div>
            <div className="card-body">
              <h3>{g.title}</h3>
              {g.description && <p>{g.description}</p>}
            </div>
          </button>
        ))}
      </div>
      <Lightbox item={open} onClose={() => setOpen(null)} />
    </>
  );
}

function ProjectGrid({ items }) {
  if (!items.length) {
    return (
      <div className="card"><div className="card-body">
        <h3>Nog geen projecten</h3>
        <p>Nieuwe projecten verschijnen hier zodra ze in het adminpaneel zijn toegevoegd.</p>
      </div></div>
    );
  }
  return (
    <div className="grid-3">
      {items.map((p) => (
        <article key={p.id} className="card">
          {p.image_url && <img className="card-img" src={mediaUrl(p.image_url)} alt={p.title || ''} />}
          <div className="card-body">
            <h3>{p.title}</h3>
            {(p.location || p.category) && <div className="meta">{[p.location, p.category].filter(Boolean).join(' · ')}</div>}
            {p.description && <p>{p.description}</p>}
          </div>
        </article>
      ))}
    </div>
  );
}

function ContactForm() {
  const [f, setF] = useState({ name: '', phone: '', email: '', type: 'Bouw & Renovatie', message: '' });
  const [done, setDone] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const set = (key) => (e) => setF((prev) => ({ ...prev, [key]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    fetch(API_BASE + '/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name: f.name,
        email: f.email,
        phone: f.phone || 'Niet opgegeven',
        type: f.type,
        message: f.message || 'Geen details opgegeven',
      }),
    })
      .then((r) => r.text().then((txt) => {
        let data = {};
        try { data = JSON.parse(txt); } catch (_) {}
        if (r.ok && data.success) setDone(true);
        else setError(data.error || 'Er is iets misgegaan. Probeer het opnieuw.');
      }))
      .catch(() => setError('Verbinding mislukt. Controleer uw netwerk.'))
      .finally(() => setLoading(false));
  };

  if (done) {
    return (
      <div className="card"><div className="card-body success">
        <div className="success-mark">✓</div>
        <h3>Bedankt!</h3>
        <p>Uw aanvraag is ontvangen. Wij nemen zo snel mogelijk contact met u op.</p>
      </div></div>
    );
  }

  return (
    <form className="form" onSubmit={submit}>
      <div className="fields-2">
        <div>
          <label htmlFor="name">Naam *</label>
          <input id="name" required value={f.name} onChange={set('name')} placeholder="Uw naam" />
        </div>
        <div>
          <label htmlFor="phone">Telefoon</label>
          <input id="phone" value={f.phone} onChange={set('phone')} placeholder="+31 6 ..." />
        </div>
      </div>
      <div>
        <label htmlFor="email">E-mail *</label>
        <input id="email" type="email" required value={f.email} onChange={set('email')} placeholder="naam@email.nl" />
      </div>
      <div>
        <label htmlFor="type">Type project</label>
        <select id="type" value={f.type} onChange={set('type')}>
          <option>Bouw & Renovatie</option>
          <option>Infrastructuur</option>
          <option>Grondwerken</option>
          <option>Anders</option>
        </select>
      </div>
      <div>
        <label htmlFor="message">Bericht</label>
        <textarea id="message" value={f.message} onChange={set('message')} placeholder="Korte omschrijving van uw project..." />
      </div>
      {error && <p className="form-error">{error}</p>}
      <button className="btn btn-gold btn-block" type="submit" disabled={loading}>
        <Icon name="send" /> {loading ? 'Verzenden...' : 'Offerte aanvragen'}
      </button>
    </form>
  );
}

function Home({ settings, services, gallery, projects }) {
  return (
    <>
      <section className="hero">
        <div className="hero-media">
          <img src={mediaUrl(settings.hero_image)} alt="" />
          <div className="hero-overlay"></div>
        </div>
        <div className="wrap hero-content">
          <div className="badge"><i></i><span>{settings.hero_badge}</span></div>
          <h1>{settings.hero_title}</h1>
          <p className="hero-sub">{settings.hero_subtitle}</p>
          <p className="hero-text">{settings.hero_text}</p>
          <div className="btn-row">
            <a className="btn btn-gold" href="/contact/">{settings.hero_cta || 'Offerte aanvragen'}</a>
            <a className="btn btn-outline" href="/galerij/">{settings.hero_cta2 || 'Bekijk galerij'}</a>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <p className="eyebrow">Wat wij doen</p>
              <h2 className="h2">{settings.services_title}</h2>
              {settings.services_text && <p className="lead">{settings.services_text}</p>}
            </div>
            <a className="btn btn-outline" href="/diensten/">Alle diensten</a>
          </div>
          <div className="grid-3">
            {services.slice(0, 3).map((s) => <ServiceCard key={s.id} item={s} />)}
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="wrap">
          <div className="section-head">
            <div>
              <p className="eyebrow">Ons werk</p>
              <h2 className="h2">{settings.gallery_title}</h2>
              {settings.gallery_text && <p className="lead">{settings.gallery_text}</p>}
            </div>
            <a className="btn btn-outline" href="/galerij/">Hele galerij</a>
          </div>
          <GalleryGrid items={gallery.slice(0, 3)} />
        </div>
      </section>

      {projects.length > 0 && (
        <section className="section">
          <div className="wrap">
            <div className="section-head">
              <div>
                <p className="eyebrow">Projecten</p>
                <h2 className="h2">Recente projecten</h2>
              </div>
              <a className="btn btn-outline" href="/projecten/">Alle projecten</a>
            </div>
            <ProjectGrid items={projects.slice(0, 3)} />
          </div>
        </section>
      )}

      <section className="section">
        <div className="wrap grid-2">
          <div>
            <p className="eyebrow">Wie wij zijn</p>
            <h2 className="h2">{settings.about_title}</h2>
            <p className="about-copy">{settings.about_text}</p>
            <div className="btn-row">
              <a className="btn btn-outline" href="/over-ons/">Meer over ons</a>
            </div>
          </div>
          <div className="about-photo">
            <img src={mediaUrl(gallery[0]?.image_url || settings.hero_image)} alt="" />
          </div>
        </div>
      </section>

      <div className="cta-band">
        <div>
          <h2 className="h2">Klaar om te starten?</h2>
          <p>Vraag een vrijblijvende offerte aan. Wij reageren zo snel mogelijk.</p>
        </div>
        <a className="btn btn-gold" href="/contact/">Naar contact</a>
      </div>
    </>
  );
}

function ServicesPage({ settings, services }) {
  return (
    <>
      <PageHero image={settings.hero_image} eyebrow="Wat wij doen" title={settings.services_title} text={settings.services_text} />
      <section className="section"><div className="wrap">
        {services.length ? <div className="grid-3">{services.map((s) => <ServiceCard key={s.id} item={s} />)}</div> : <p className="empty">Nog geen diensten.</p>}
      </div></section>
    </>
  );
}

function GalleryPage({ settings, gallery }) {
  return (
    <>
      <PageHero image={gallery[0]?.image_url || settings.hero_image} eyebrow="Ons werk" title={settings.gallery_title} text={settings.gallery_text} />
      <section className="section"><div className="wrap"><GalleryGrid items={gallery} /></div></section>
    </>
  );
}

function ProjectsPage({ settings, projects, gallery }) {
  return (
    <>
      <PageHero image={projects[0]?.image_url || gallery[0]?.image_url || settings.hero_image} eyebrow="Portfolio" title="Projecten" text="Een overzicht van uitgevoerde en lopende werken." />
      <section className="section"><div className="wrap"><ProjectGrid items={projects} /></div></section>
    </>
  );
}

function AboutPage({ settings, gallery }) {
  return (
    <>
      <PageHero image={gallery[0]?.image_url || settings.hero_image} eyebrow="Wie wij zijn" title={settings.about_title} text="" />
      <section className="section"><div className="wrap grid-2">
        <div>
          <p className="about-copy">{settings.about_text}</p>
          <div className="contact-links">
            {settings.phone && <a href={'tel:' + settings.phone}><Icon name="phone" /> {settings.phone}</a>}
            {settings.email && <a href={'mailto:' + settings.email}><Icon name="mail" /> {settings.email}</a>}
            {settings.address && <span><Icon name="pin" /> {settings.address}</span>}
          </div>
          <div className="btn-row"><a className="btn btn-gold" href="/contact/">Neem contact op</a></div>
        </div>
        <div className="about-photo"><img src={mediaUrl(gallery[1]?.image_url || settings.hero_image)} alt="" /></div>
      </div></section>
    </>
  );
}

function ContactPage({ settings }) {
  return (
    <>
      <PageHero image={settings.hero_image} eyebrow="Contact" title={settings.contact_title} text={settings.contact_text} />
      <section className="section"><div className="wrap split">
        <div>
          <h2 className="h2">Direct contact</h2>
          <p className="lead">Liever meteen spreken? Bel, mail of stuur een WhatsApp.</p>
          <div className="info-list">
            {settings.phone && <a href={'tel:' + settings.phone}><Icon name="phone" /> {settings.phone}</a>}
            {settings.email && <a href={'mailto:' + settings.email}><Icon name="mail" /> {settings.email}</a>}
            {settings.address && <span><Icon name="pin" /> {settings.address}</span>}
            {settings.whatsapp && <a href={'https://wa.me/' + settings.whatsapp} target="_blank" rel="noreferrer"><Icon name="msg" /> WhatsApp</a>}
          </div>
        </div>
        <ContactForm />
      </div></section>
    </>
  );
}

function App() {
  const page = window.NKG_PAGE || 'home';
  const { settings, services, projects, gallery } = useSite();

  useEffect(() => {
    if (page !== 'home') return;
    const id = (location.hash || '').replace('#', '');
    const map = { diensten: '/diensten/', galerij: '/galerij/', projecten: '/projecten/', 'over-ons': '/over-ons/', contact: '/contact/' };
    if (map[id]) location.replace(map[id]);
  }, [page]);

  useEffect(() => {
    const name = settings.site_name || 'NK GOLDSTERREN';
    const titles = {
      home: name + ' — ' + (settings.site_tagline || 'Bouwbedrijf'),
      diensten: (settings.services_title || 'Diensten') + ' — ' + name,
      galerij: (settings.gallery_title || 'Galerij') + ' — ' + name,
      projecten: 'Projecten — ' + name,
      'over-ons': (settings.about_title || 'Over ons') + ' — ' + name,
      contact: (settings.contact_title || 'Contact') + ' — ' + name,
    };
    document.title = titles[page] || name;
    const meta = document.querySelector('meta[name="description"]');
    if (meta && settings.site_description) meta.setAttribute('content', settings.site_description);
  }, [settings, page]);

  let body = <Home settings={settings} services={services} gallery={gallery} projects={projects} />;
  if (page === 'diensten') body = <ServicesPage settings={settings} services={services} />;
  if (page === 'galerij') body = <GalleryPage settings={settings} gallery={gallery} />;
  if (page === 'projecten') body = <ProjectsPage settings={settings} projects={projects} gallery={gallery} />;
  if (page === 'over-ons') body = <AboutPage settings={settings} gallery={gallery} />;
  if (page === 'contact') body = <ContactPage settings={settings} />;

  return (
    <div className="site">
      <Header settings={settings} page={page} />
      <main>{body}</main>
      <Footer settings={settings} />
      <WhatsApp settings={settings} />
    </div>
  );
}

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