// La Vida Es Bella — single-page mobile landing
// Mobile-first column, letterboxed on desktop. Tweakable palette / type / layout / imagery.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm-gold",
  "type": "didone",
  "layout": "centered",
  "imagery": "ingredients",
  "noteShape": "arch",
  "showInspiredBy": true,
  "showTrustStrip": true,
  "showFAQ": true,
  "showReviews": false,
  "showUrgency": false
}/*EDITMODE-END*/;

// ─── tokens ─────────────────────────────────────────────────────────────────

const PALETTES = {
  "warm-gold": {
    bg:        "#f4ecdd",
    surface:   "#efe4cf",
    fg:        "#28201a",
    fgSoft:    "#4a3f33",
    muted:     "#8a7b66",
    rule:      "rgba(40,32,26,.14)",
    accent:    "#c79a4b",
    ctaBg:     "#28201a",
    ctaFg:     "#f4ecdd",
    onDark:    false,
    swatch:    ["#f4ecdd","#28201a","#c79a4b"],
  },
  "editorial": {
    bg:        "#f6f3ec",
    surface:   "#efeae0",
    fg:        "#141210",
    fgSoft:    "#3a3530",
    muted:     "#8a8278",
    rule:      "rgba(20,18,16,.12)",
    accent:    "#141210",
    ctaBg:     "#141210",
    ctaFg:     "#f6f3ec",
    onDark:    false,
    swatch:    ["#f6f3ec","#141210","#8a8278"],
  },
  "champagne": {
    bg:        "#eadfca",
    surface:   "#e3d5ba",
    fg:        "#3a2d20",
    fgSoft:    "#5a4838",
    muted:     "#9a8870",
    rule:      "rgba(58,45,32,.14)",
    accent:    "#a87f4a",
    ctaBg:     "#3a2d20",
    ctaFg:     "#eadfca",
    onDark:    false,
    swatch:    ["#eadfca","#3a2d20","#a87f4a"],
  },
  "dark-luxe": {
    bg:        "#15110d",
    surface:   "#1f1812",
    fg:        "#ece1cb",
    fgSoft:    "#b8ab94",
    muted:     "#7a6e5b",
    rule:      "rgba(236,225,203,.12)",
    accent:    "#c79a4b",
    ctaBg:     "#ece1cb",
    ctaFg:     "#15110d",
    onDark:    true,
    swatch:    ["#15110d","#ece1cb","#c79a4b"],
  },
};

const TYPES = {
  "didone":     { display: '"Bodoni Moda", serif',         body: '"DM Sans", sans-serif',  dw: 400, dtrack: "-0.01em" },
  "oldstyle":   { display: '"Cormorant Garamond", serif',  body: '"DM Sans", sans-serif',  dw: 400, dtrack: "0em"     },
  "modern-sans":{ display: '"Manrope", sans-serif',        body: '"Manrope", sans-serif',  dw: 300, dtrack: "-0.03em" },
  "mix":        { display: '"Italiana", serif',            body: '"DM Sans", sans-serif',  dw: 400, dtrack: "0.005em" },
};

// ─── data ───────────────────────────────────────────────────────────────────

const PRODUCT = {
  house:    "Fragrance World",
  name:     "La Vida Es Bella",
  type:     "Eau de Parfum",
  size:     "100 ml",
  price:    "€29.99",
  tagline:  "Уханието на радостта от живота.",
  pitch:    "Сочен касис, пудрен ирис и кадифена ванилия — аромат за жената, която не се извинява за своята женственост.",
  inspired: "Вдъхновен от Lancôme",
  ctaLabel: "Поръчай сега",
  trust: [
    { icon: "→", label: "Доставка 1–2 дни" },
    { icon: "↻", label: "14-дневно връщане" },
    { icon: "○", label: "Сигурно плащане" },
  ],
  rating:  { stars: 4.8, count: 1247 },
  urgency: "Ограничено количество · 27 бутилки на склад",
  notes: {
    top:   { label: "Връхни нотки",  items: ["Касис", "Круша"],                         hint: "Сочно, игриво, пролетно" },
    heart: { label: "Сърце",          items: ["Ирис", "Жасмин", "Портокалов цвят"],     hint: "Пудрено, цветно, изискано" },
    base:  { label: "База",           items: ["Ванилия", "Пралине", "Пачули"],          hint: "Кадифено, кехлибарено, дълготрайно" },
  },
  story: "Свежа експлозия от касис и круша, която разцъфва в букет от ирис, жасмин и портокалов цвят — за да завърши в топлата прегръдка на ванилия, пралине и пачули. Аромат, който се помни.",
  forWho: "Подходящ за пролетта и есента — когато въздухът е най-романтичен.",
  faq: [
    { q: "Колко се задържа ароматът?",        a: "6–8 часа на кожата и до 24 часа върху дрехите." },
    { q: "Каква е концентрацията?",         a: "Eau de Parfum — 18% ароматни масла. Изразен и дълготраен." },
    { q: "Кога ще пристигне поръчката?",    a: "1–2 работни дни за България. Безплатна доставка над €40." },
    { q: "Мога ли да върна поръчката?",       a: "Да — в рамките на 14 дни от получаването, при условие че продуктът е неотворен (целофанът на опаковката не е премахнат)." },
  ],
  stripeUrl: "#checkout",
};

// ─── helpers ────────────────────────────────────────────────────────────────

function applyTheme(p, t) {
  const r = document.documentElement;
  r.style.setProperty("--bg",       p.bg);
  r.style.setProperty("--surface",  p.surface);
  r.style.setProperty("--fg",       p.fg);
  r.style.setProperty("--fg-soft",  p.fgSoft);
  r.style.setProperty("--muted",    p.muted);
  r.style.setProperty("--rule",     p.rule);
  r.style.setProperty("--accent",   p.accent);
  r.style.setProperty("--cta-bg",   p.ctaBg);
  r.style.setProperty("--cta-fg",   p.ctaFg);
  r.style.setProperty("--font-display", t.display);
  r.style.setProperty("--font-body",    t.body);
  r.style.setProperty("--display-weight",   String(t.dw));
  r.style.setProperty("--display-tracking", t.dtrack);
  document.body.style.background = p.onDark ? "#0a0805" : "#0c0a08";
}

// ─── pieces ─────────────────────────────────────────────────────────────────

function Hero({ palette, layout }) {
  // Bottle hero — composition shifts subtly by layout
  const onDark = palette.onDark;

  if (layout === "asymmetric") {
    return (
      <section style={{position:"relative", paddingTop: 28}}>
        <div className="fadeUp d1" style={{
          padding:"0 24px", display:"flex", justifyContent:"space-between", alignItems:"baseline"
        }}>
          <div className="eyebrow">{PRODUCT.house}</div>
          <div className="eyebrow" style={{textAlign:"right"}}>Eau de Parfum<br/>100 ml</div>
        </div>

        <div className="fadeUp d2" style={{
          position:"relative", marginTop:8, padding:"0 16px",
          minHeight: 440,
        }}>
          <h1 className="display" style={{
            position:"absolute", left:24, top:24, right:24, margin:0,
            fontSize:"64px", lineHeight:.98, zIndex:2,
            mixBlendMode: onDark ? "normal" : "multiply",
          }}>
            La Vida<br/><em style={{fontStyle:"italic", opacity:.85}}>es</em> Bella
          </h1>
          <div style={{position:"relative", marginTop: 70}}>
            {onDark ? <div className="spotlight"/> : <div className="glow"/>}
            <img className={"bottle " + (onDark ? "on-dark":"")}
                 src="assets/bottle.jpeg" alt="La Vida Es Bella eau de parfum"
                 style={{width:"100%"}}/>
          </div>
        </div>
      </section>
    );
  }

  if (layout === "full-bleed") {
    return (
      <section style={{position:"relative"}}>
        <div className="fadeUp d1" style={{
          padding:"24px 24px 0", display:"flex", justifyContent:"space-between", alignItems:"baseline"
        }}>
          <div className="eyebrow">{PRODUCT.house}</div>
          <div className="eyebrow">N°01</div>
        </div>

        <div className="fadeUp d2" style={{position:"relative", marginTop:-12}}>
          {onDark ? <div className="spotlight"/> : <div className="glow"/>}
          <img className={"bottle " + (onDark ? "on-dark":"")}
               src="assets/bottle.jpeg" alt="La Vida Es Bella eau de parfum"
               style={{width:"100%"}}/>
        </div>

        <div className="fadeUp d3" style={{padding:"4px 24px 0", textAlign:"center"}}>
          <h1 className="display" style={{margin:"0 0 6px", fontSize:"54px", lineHeight:.98}}>
            La Vida es Bella
          </h1>
          <div className="eyebrow" style={{marginTop:10}}>{PRODUCT.type} · {PRODUCT.size}</div>
        </div>
      </section>
    );
  }

  // centered (default)
  return (
    <section style={{position:"relative", paddingTop:32}}>
      <div className="fadeUp d1" style={{textAlign:"center", padding:"0 24px"}}>
        <div className="eyebrow">{PRODUCT.house}</div>
      </div>

      <div className="fadeUp d2" style={{position:"relative", marginTop:4}}>
        {onDark ? <div className="spotlight"/> : <div className="glow"/>}
        <img className={"bottle " + (onDark ? "on-dark":"")}
             src="assets/bottle.jpeg" alt="La Vida Es Bella eau de parfum"
             style={{width:"100%"}}/>
      </div>

      <div className="fadeUp d3" style={{padding:"4px 24px 0", textAlign:"center"}}>
        <h1 className="display" style={{margin:"0 0 12px", fontSize:"56px", lineHeight:.98}}>
          La Vida<br/><em style={{fontStyle:"italic"}}>es</em> Bella
        </h1>
        <hr className="rule-short" style={{margin:"14px auto"}}/>
        <div className="eyebrow">{PRODUCT.type} · {PRODUCT.size}</div>
      </div>
    </section>
  );
}

function BuyBlock({ showInspiredBy, showReviews, showUrgency, showTrustStrip }) {
  return (
    <section className="fadeUp d3" style={{padding:"34px 28px 0", textAlign:"center"}}>
      <p className="display" style={{
        margin:0, fontSize:"26px", lineHeight:1.15, fontStyle:"italic",
        fontWeight: 400, letterSpacing:"0.005em",
      }}>
        {PRODUCT.tagline}
      </p>
      <p className="body-copy" style={{margin:"16px auto 0", maxWidth: 320}}>
        {PRODUCT.pitch}
      </p>

      {showReviews && (
        <div style={{
          display:"flex", alignItems:"center", justifyContent:"center", gap:8,
          marginTop:18,
        }}>
          <Stars value={PRODUCT.rating.stars} />
          <span className="eyebrow" style={{fontSize:10}}>
            {PRODUCT.rating.stars.toFixed(1)} · {PRODUCT.rating.count.toLocaleString("bg-BG")} отзива
          </span>
        </div>
      )}

      {showInspiredBy && (
        <div className="eyebrow" style={{marginTop:20, opacity:.6}}>{PRODUCT.inspired}</div>
      )}

      {/* primary conversion block — price + CTA in one tight unit */}
      <div style={{marginTop:28, display:"flex", flexDirection:"column", alignItems:"center", gap:14}}>
        <div style={{display:"flex", alignItems:"baseline", gap:10}}>
          <div className="display" style={{fontSize:"38px", lineHeight:1, fontWeight:400}}>
            {PRODUCT.price}
          </div>
          <div className="eyebrow" style={{fontSize:10, opacity:.6}}>
            {PRODUCT.size}
          </div>
        </div>

        <a className="cta" href={PRODUCT.stripeUrl}
           style={{width:"100%", maxWidth:340}}
           aria-label="Поръчай La Vida Es Bella">
          <span>{PRODUCT.ctaLabel}</span>
          <span className="cta-arrow">→</span>
        </a>

        {showUrgency && (
          <div className="eyebrow" style={{fontSize:10, opacity:.7, color:"var(--accent)"}}>
            • {PRODUCT.urgency}
          </div>
        )}

        {showTrustStrip && (
          <div style={{
            display:"flex", justifyContent:"center", gap:18, flexWrap:"wrap",
            marginTop:6,
          }}>
            {PRODUCT.trust.map((tr, i) => (
              <div key={i} className="eyebrow" style={{
                fontSize:9, opacity:.6, display:"inline-flex", alignItems:"center", gap:5,
              }}>
                <span style={{fontSize:11, opacity:.8}}>{tr.icon}</span>
                <span>{tr.label}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

function Stars({ value }) {
  const full = Math.floor(value);
  const half = value - full >= 0.4 && value - full < 0.9;
  return (
    <span style={{display:"inline-flex", gap:1, color:"var(--accent)", fontSize:14, lineHeight:1}}>
      {[0,1,2,3,4].map(i => {
        const ch = i < full ? "★" : (i === full && half ? "☆" : "☆");
        return <span key={i}>{ch}</span>;
      })}
    </span>
  );
}

function NotesPyramid() {
  const rows = [
    { ...PRODUCT.notes.top,   tier: "TOP",   width: 56 },
    { ...PRODUCT.notes.heart, tier: "HEART", width: 78 },
    { ...PRODUCT.notes.base,  tier: "BASE",  width: 100 },
  ];
  return (
    <section className="fadeUp d4" style={{padding:"40px 28px 8px"}}>
      <div style={{textAlign:"center", marginBottom: 26}}>
        <div className="eyebrow">Композиция</div>
        <h2 className="display" style={{
          margin:"6px 0 0", fontSize:"30px", letterSpacing:"-0.005em", fontWeight: 400,
        }}>
          Ароматна пирамида
        </h2>
      </div>

      <div style={{display:"flex", flexDirection:"column", gap:18}}>
        {rows.map((r, i) => (
          <div key={r.tier} style={{
            display:"grid",
            gridTemplateColumns:"56px 1fr",
            gap:18, alignItems:"start",
          }}>
            <div>
              <div className="eyebrow" style={{fontSize:9.5, opacity:.55}}>{r.tier}</div>
              <div style={{
                marginTop:8, height:1,
                background:"var(--accent)",
                width:`${r.width}%`, opacity:.5,
              }}/>
            </div>
            <div>
              <div className="display" style={{
                fontSize:"22px", lineHeight:1.15, fontWeight:400, fontStyle: i===1?"italic":"normal",
              }}>
                {r.items.join(" · ")}
              </div>
              <div className="body-copy" style={{marginTop:4, fontSize:13, color:"var(--muted)"}}>
                {r.hint}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Story() {
  return (
    <section className="fadeUp d4" style={{padding:"40px 28px 8px", textAlign:"center"}}>
      <hr className="rule-short" style={{margin:"0 auto 18px"}}/>
      <div className="eyebrow" style={{marginBottom:14}}>Историята</div>
      <p className="body-copy" style={{margin:"0 auto", maxWidth:320}}>{PRODUCT.story}</p>
      <p className="body-copy" style={{
        margin:"18px auto 0", maxWidth: 320,
        fontStyle:"italic", color:"var(--fg)",
      }}>
        {PRODUCT.forWho}
      </p>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(null);
  return (
    <section className="fadeUp d5" style={{padding:"40px 28px 0"}}>
      <div style={{textAlign:"center", marginBottom:18}}>
        <hr className="rule-short" style={{margin:"0 auto 14px"}}/>
        <div className="eyebrow">Чести въпроси</div>
      </div>
      <ul style={{listStyle:"none", padding:0, margin:0}}>
        {PRODUCT.faq.map((item, i) => {
          const isOpen = open === i;
          return (
            <li key={i} style={{borderTop:"1px solid var(--rule)"}}>
              <button
                onClick={() => setOpen(isOpen ? null : i)}
                aria-expanded={isOpen}
                style={{
                  width:"100%",
                  padding:"16px 0",
                  display:"flex", justifyContent:"space-between", alignItems:"center",
                  textAlign:"left", gap:12,
                  fontFamily:"var(--font-body)", fontSize:14, fontWeight:500,
                  color:"var(--fg)", cursor:"pointer",
                }}
              >
                <span>{item.q}</span>
                <span style={{
                  fontFamily:'"DM Mono", monospace', fontSize:14,
                  opacity:.55, transition:"transform .2s ease",
                  transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                }}>+</span>
              </button>
              <div style={{
                maxHeight: isOpen ? 160 : 0,
                overflow:"hidden", transition:"max-height .25s ease",
              }}>
                <p className="body-copy" style={{
                  margin:0, padding:"0 0 16px", fontSize:13.5,
                }}>
                  {item.a}
                </p>
              </div>
            </li>
          );
        })}
        <li style={{borderTop:"1px solid var(--rule)", height:0}} />
      </ul>
    </section>
  );
}

function Imagery({ kind, palette, noteShape }) {
  if (kind === "bottle-only") return null;

  if (kind === "mood") {
    return (
      <section className="fadeUp d4" style={{padding:"36px 24px 0"}}>
        <div className="ph" style={{aspectRatio:"4 / 5", borderRadius:2}}>
          <div className="ph-label">lifestyle / mood shot</div>
        </div>
        <div className="eyebrow" style={{marginTop:14, textAlign:"center"}}>
          За жената, която живее със сърце
        </div>
      </section>
    );
  }

  if (kind === "ingredients") {
    const tiles = [
      { tier: "TOP",   label: "Касис · Круша",        cls: "ing-top"   },
      { tier: "HEART", label: "Ирис · Жасмин",         cls: "ing-heart" },
      { tier: "BASE",  label: "Ванилия · Пралине",     cls: "ing-base"  },
    ];
    return (
      <section className="fadeUp d4" style={{padding:"36px 24px 0"}}>
        <div style={{textAlign:"center", marginBottom:18}}>
          <div className="eyebrow">Палитра на нотките</div>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10}}>
          {tiles.map(it => (
            <div key={it.tier}>
              <div className={"ing-tile shape-" + (noteShape || "arch") + " " + it.cls} />
              <div className="eyebrow" style={{
                marginTop:10, fontSize:8.5, letterSpacing:".16em", textAlign:"center",
              }}>
                <div style={{opacity:.55, marginBottom:3}}>{it.tier}</div>
                <div>{it.label}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  if (kind === "angle") {
    return (
      <section className="fadeUp d4" style={{padding:"36px 24px 0"}}>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
          <div className="ph" style={{aspectRatio:"3 / 4", borderRadius:2}}>
            <div className="ph-label">side angle</div>
          </div>
          <div className="ph" style={{aspectRatio:"3 / 4", borderRadius:2}}>
            <div className="ph-label">cap detail</div>
          </div>
        </div>
      </section>
    );
  }

  return null;
}

function SecondaryCTA() {
  return (
    <section className="fadeUp d5" style={{padding:"36px 28px 0", textAlign:"center"}}>
      <hr className="rule-short" style={{margin:"0 auto 22px"}}/>
      <p className="display" style={{
        margin:"0 0 18px", fontSize:"22px", lineHeight:1.2, fontStyle:"italic",
      }}>
        Готова ли си?
      </p>
      <a className="cta" href={PRODUCT.stripeUrl}
         style={{width:"100%", maxWidth:340, margin:"0 auto"}}>
        <span>{PRODUCT.ctaLabel} · {PRODUCT.price}</span>
        <span className="cta-arrow">→</span>
      </a>
      <div className="eyebrow" style={{marginTop:14, opacity:.55, fontSize:9.5}}>
        Сигурно плащане · Stripe
      </div>
    </section>
  );
}

function StickyCTA() {
  return (
    <div className="sticky-cta">
      <a className="cta" href={PRODUCT.stripeUrl} aria-label="Поръчай La Vida Es Bella">
        <span>{PRODUCT.ctaLabel} · {PRODUCT.price}</span>
        <span className="cta-arrow">→</span>
      </a>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{
      padding:"40px 28px 28px", textAlign:"center",
    }}>
      <div className="display" style={{
        fontSize:"18px", letterSpacing:"0.04em", marginBottom:8,
      }}>
        Fragrance World
      </div>
      <div className="eyebrow" style={{opacity:.6, fontSize:9}}>
        Dubai · 2026
      </div>
    </footer>
  );
}

// ─── tweaks panel ───────────────────────────────────────────────────────────

function Panel({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakColor
        label="Color story"
        value={PALETTES[t.palette].swatch}
        options={Object.keys(PALETTES).map(k => PALETTES[k].swatch)}
        onChange={(v) => {
          const match = Object.keys(PALETTES).find(k =>
            PALETTES[k].swatch.every((c, i) => c === v[i])
          );
          if (match) setTweak("palette", match);
        }}
      />
      <TweakSelect
        label="Named"
        value={t.palette}
        options={[
          {value:"warm-gold",  label:"Warm gold"},
          {value:"editorial",  label:"Editorial cream"},
          {value:"champagne",  label:"Soft champagne"},
          {value:"dark-luxe",  label:"Dark luxe"},
        ]}
        onChange={(v) => setTweak("palette", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Family"
        value={t.type}
        options={[
          {value:"didone",      label:"Didone (Bodoni)"},
          {value:"oldstyle",    label:"Old-style serif"},
          {value:"modern-sans", label:"Modern sans"},
          {value:"mix",         label:"Italiana × DM Sans"},
        ]}
        onChange={(v) => setTweak("type", v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Hero"
        value={t.layout}
        options={[
          {value:"centered",    label:"Center"},
          {value:"asymmetric",  label:"Asym."},
          {value:"full-bleed",  label:"Bleed"},
        ]}
        onChange={(v) => setTweak("layout", v)}
      />

      <TweakSection label="Imagery" />
      <TweakSelect
        label="Add"
        value={t.imagery}
        options={[
          {value:"bottle-only", label:"Just the bottle"},
          {value:"mood",        label:"+ Mood / lifestyle"},
          {value:"ingredients", label:"+ Note ingredients"},
          {value:"angle",       label:"+ Second angle"},
        ]}
        onChange={(v) => setTweak("imagery", v)}
      />
      <TweakRadio
        label="Note shape"
        value={t.noteShape}
        options={[
          {value:"arch",    label:"Arch"},
          {value:"circle",  label:"Circle"},
          {value:"capsule", label:"Pill"},
          {value:"square",  label:"Square"},
        ]}
        onChange={(v) => setTweak("noteShape", v)}
      />

      <TweakSection label="Copy & conversion" />
      <TweakToggle
        label="'Вдъхновен от'"
        value={t.showInspiredBy}
        onChange={(v) => setTweak("showInspiredBy", v)}
      />
      <TweakToggle
        label="Trust strip"
        value={t.showTrustStrip}
        onChange={(v) => setTweak("showTrustStrip", v)}
      />
      <TweakToggle
        label="FAQ section"
        value={t.showFAQ}
        onChange={(v) => setTweak("showFAQ", v)}
      />
      <TweakToggle
        label="Ratings (mock)"
        value={t.showReviews}
        onChange={(v) => setTweak("showReviews", v)}
      />
      <TweakToggle
        label="Urgency"
        value={t.showUrgency}
        onChange={(v) => setTweak("showUrgency", v)}
      />
    </TweaksPanel>
  );
}

// ─── app ────────────────────────────────────────────────────────────────────

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const palette = PALETTES[t.palette] || PALETTES["warm-gold"];
  const type    = TYPES[t.type]       || TYPES["didone"];

  React.useEffect(() => { applyTheme(palette, type); }, [palette, type]);

  return (
    <div className="stage">
      <div className="page">
        <Hero palette={palette} layout={t.layout} />
        <BuyBlock
          showInspiredBy={t.showInspiredBy}
          showReviews={t.showReviews}
          showUrgency={t.showUrgency}
          showTrustStrip={t.showTrustStrip}
        />
        {t.imagery !== "bottle-only" && <Imagery kind={t.imagery} palette={palette} noteShape={t.noteShape}/>}
        <NotesPyramid />
        <Story />
        {t.showFAQ && <FAQ />}
        <Footer />
        <StickyCTA />
      </div>
      <Panel t={t} setTweak={setTweak} />
    </div>
  );
}

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