const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Main app — tweaks panel, all sections assembled
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F80000",
  "heroVariant": "split",
  "cardStyle": "classic",
  "density": "roomy",
  "fontPair": "noto-mono",
  "showWhyElectric": true,
  "showSEO": true,
  "showSafety": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // apply tweaks as CSS vars on root
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", tweaks.accent);
    r.dataset.density = tweaks.density;
    r.dataset.fontPair = tweaks.fontPair;
    r.dataset.cardStyle = tweaks.cardStyle;
  }, [tweaks]);

  return (
    <>
      <StickyNav />
      <Hero tweaks={tweaks} />

      {/* Section 2 — Brand Story */}
      <section className="section section-story" id="story">
        <div className="container">
          <SectionLabel num="02">ვინ არის RFN?</SectionLabel>
          <Reveal>
            <div className="story-grid">
              <div className="story-text">
                <h2 className="h2">დაბადებულია რბოლაში.<br/><span className="muted">იმუხტება მომავლისთვის.</span></h2>
                <p>RFN არის ელექტრო მოტოციკლების საერთაშორისო ბრენდი, რომელიც დაარსდა 2020 წელს და შექმნილია racing გამოცდილების, დიზაინისა და ელექტრო ტექნოლოგიის გაერთიანებით. ბრენდის იდეა მარტივია: riding უნდა იყოს უფრო სუფთა, ჩუმი, სწრაფი და ხელმისაწვდომი — ბავშვებისთვისაც, მოზარდებისთვისაც და ზრდასრული rider-ებისთვისაც.</p>
                <p>RFN-ის დნმ არის <strong>Racing Fears Nothing</strong> — მიდგომა, რომელიც აერთიანებს სიჩქარეს, კონტროლს, გამძლეობას და მუდმივ წინსვლას.</p>
                <div className="awards">
                  <div className="award"><div className="award-y">2022</div><div className="award-n">German Design Award</div></div>
                  <div className="award"><div className="award-y">2023</div><div className="award-n">CF Design Award</div></div>
                  <div className="award"><div className="award-y">2024</div><div className="award-n">Automotive Brand Contest</div></div>
                  <div className="award"><div className="award-y">2026</div><div className="award-n">German Design Award</div></div>
                </div>
              </div>
              <div className="story-visual">
                <img src="assets/900x1200.webp" alt="RFN — Born in Racing" className="story-img" loading="lazy" width="900" height="1200" />
                <div className="story-quote">
                  <span className="qmark">"</span>
                  RFN არ ქმნის უბრალოდ ელექტრო ბაიკებს — RFN ქმნის riding confidence-ს.
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Section 3 — Why Electric */}
      {tweaks.showWhyElectric && (
        <section className="section section-electric" id="why-electric">
          <div className="container">
            <SectionLabel num="03">რატომ ელექტრო Dirt Bike?</SectionLabel>
            <Reveal>
              <h2 className="h2 h2-wide">მყისიერი torque. ნულოვანი ხმაური.<br/><span className="accent-text">სრული თავისუფლება.</span></h2>
            </Reveal>
            <div className="why-grid">
              {[
                { t: "მყისიერი torque", d: "ელექტრო ძრავი rider-ს აძლევს სწრაფ რეაქციას და ძალას მაშინვე, როცა throttle იხსნება — გადაცემების გარეშე." },
                { t: "ნაკლები ხმაური", d: "ბენზინის ძრავის ხმაურის გარეშე — უფრო მშვიდი გარემო ოჯახისთვის, ეზოსთვის, track-ისთვის." },
                { t: "ნულოვანი გამონაბოლქვი", d: "სუფთა riding გამოცდილება, ნებისმიერი outdoor და indoor სივრცისთვის." },
                { t: "მარტივი მოვლა", d: "ბენზინის ძრავთან შედარებით ბევრად ნაკლები მოძრავი ნაწილი — ნაკლები სერვისი, მეტი riding." },
                { t: "Beginner → Advanced", d: "კონტროლირებადი power delivery პირველ ცდაზე და ნამდვილი performance pro-level rider-ისთვის." },
                { t: "უკეთესი კონტროლი", d: "ელექტრო throttle საშუალებას აძლევს rider-ს იგრძნოს ბაიკი მაშინვე, პირველი წუთიდან." }
              ].map((b, i) => (
                <Reveal key={b.t} delay={i * 60} className="why-card">
                  <div className="why-num">0{i + 1}</div>
                  <div className="why-t">{b.t}</div>
                  <div className="why-d">{b.d}</div>
                </Reveal>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Section 4+5 — Product families */}
      <section className="section section-families" id="families">
        <div className="container">
          <SectionLabel num="04">პროდუქტის ხაზი</SectionLabel>
          <Reveal>
            <div className="families-intro">
              <h2 className="h2">ხუთი ხაზი.<br/>ერთი racing დნმ.</h2>
              <p>აირჩიე RFN მოდელი rider-ის ასაკის, სიმაღლისა და გამოცდილების მიხედვით — პირველი საბავშვო ბაიკიდან flagship all-terrain მოდელებამდე.</p>
            </div>
          </Reveal>

          <div className="families-list">
            {window.RFN_DATA.families.map((f, i) => (
              <ProductFamily key={f.id} family={f} index={i} cardStyle={tweaks.cardStyle} />
            ))}
          </div>
        </div>
      </section>

      {/* Section 6 — Find Your RFN */}
      <section className="section section-finder" id="finder">
        <div className="container">
          <SectionLabel num="06">Find Your RFN</SectionLabel>
          <Reveal>
            <div className="finder-head">
              <h2 className="h2">რომელი RFN მოდელი<br/>შეგეფერება?</h2>
              <p>უპასუხე სამ კითხვას — ჩვენ შემოგთავაზებთ ხაზს, რომელიც მორგებულია rider-ის ასაკზე, სიმაღლეზე და გამოცდილებაზე.</p>
            </div>
          </Reveal>
          <Reveal delay={120}><Finder /></Reveal>
        </div>
      </section>

      {/* Section 7 — Technology */}
      <section className="section section-tech" id="tech">
        <div className="container">
          <SectionLabel num="07">ტექნოლოგია</SectionLabel>
          <Reveal>
            <h2 className="h2">RFN ტექნოლოგია<br/>და riding კონტროლი</h2>
          </Reveal>
          <div className="tech-grid">
            {[
              { k: "HyperDrive", t: "Instant electric power", d: "ელექტრო ძრავი მყისიერ torque-ს იძლევა — სწრაფი რეაქცია, გლუვი power delivery, გადაცემების გარეშე." },
              { k: "Beginner Control", t: "Control for beginners", d: "დამწყები მოდელები ფოკუსირებულია დაბალ წონაზე, მარტივ კონტროლსა და უსაფრთხო learning curve-ზე." },
              { k: "Off-Road", t: "Off-road durability", d: "RFN-ის კონსტრუქცია გათვლილია trail-ზე, bumps-ზე, uneven terrain-ზე და აქტიურ riding-ზე." },
              { k: "Suspension", t: "Suspension & braking", d: "Long-travel front suspension და hydraulic disc brakes — beginner-იდან pro-grade-მდე scaled performance." }
            ].map((b, i) => (
              <Reveal key={b.k} delay={i * 80} className="tech-card">
                <div className="tech-k">{b.k}</div>
                <div className="tech-t">{b.t}</div>
                <div className="tech-d">{b.d}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Section 8 — Safety */}
      {tweaks.showSafety && (
        <section className="section section-safety" id="safety">
          <div className="container">
            <SectionLabel num="08">უსაფრთხოება</SectionLabel>
            <Reveal>
              <div className="safety-grid">
                <div>
                  <h2 className="h2">უსაფრთხოება ბავშვებისთვის.<br/><span className="muted">სიმშვიდე მშობლებისთვის.</span></h2>
                  <p>RFN-ის საბავშვო და ახალგაზრდული მოდელები შექმნილია იმისთვის, რომ პირველი riding გამოცდილება იყოს კონტროლირებადი, პროგრესული და მშობლისთვის უფრო მშვიდი.</p>
                  <ul className="safety-list">
                    <li><span>01</span>კონტროლირებადი ძალა დამწყები rider-ისთვის</li>
                    <li><span>02</span>Speed control switch — Low / Medium / High</li>
                    <li><span>03</span>Safety lanyard დაცემის შემთხვევაში</li>
                    <li><span>04</span>დაბალი seat height პირველი ცდისთვის</li>
                    <li><span>05</span>Off-road საბურავები და სტაბილური კონსტრუქცია</li>
                    <li><span>06</span>მშობლის ზედამხედველობა აუცილებელია</li>
                  </ul>
                  <div className="safety-disclaimer">
                    <strong>მნიშვნელოვანია:</strong> RFN ბაიკი ყოველთვის უნდა გამოიყენებოდეს შესაბამისი დამცავი ეკიპირებით, უსაფრთხო სივრცეში და ზრდასრული პირის ზედამხედველობით.
                  </div>
                </div>
                <div className="safety-visual">
                  <img src="assets/960x1200.webp" alt="RFN — უსაფრთხო riding" className="safety-img" loading="lazy" width="960" height="1200" />
                </div>
              </div>
            </Reveal>
          </div>
        </section>
      )}

      {/* Section 9 — Distributor */}
      <section className="section section-distributor" id="contact">
        <div className="container">
          <SectionLabel num="09">ოფიციალური დისტრიბუტორი</SectionLabel>
          <Reveal>
            <div className="dist-card">
              <div className="dist-left">
                <div className="dist-tag">Official RFN Distributor in Georgia</div>
                <h2 className="h2">Zava Motors</h2>
                <p>RFN საქართველოში ოფიციალურად წარმოდგენილია Zava Motors-ის მიერ. ჩვენი მიზანია ქართულ ბაზარზე შემოვიტანოთ ახალი თაობის ელექტრო Dirt Bike-ები ბავშვებისთვის, მოზარდებისთვის და off-road მოყვარულებისთვის.</p>
                <p>Zava Motors მომხმარებელს ეხმარება სწორი მოდელის შერჩევაში ასაკის, სიმაღლის, გამოცდილებისა და riding მიზნის მიხედვით.</p>
                <div className="dist-cta">
                  <a className="btn btn-primary" href="https://zava.ge" target="_blank" rel="noreferrer">გადადი Zava.ge-ზე</a>
                  <a className="btn btn-ghost" href="#finder">შეარჩიე მოდელი</a>
                </div>
              </div>
              <div className="dist-right">
                <div className="dist-channel"><div className="dc-k">WEB</div><div className="dc-v"><a href="https://zava.ge" target="_blank" rel="noopener">zava.ge</a></div></div>
                <div className="dist-channel"><div className="dc-k">PHONE</div><div className="dc-v"><a href="tel:+995555373667">+995 555 373 667</a></div></div>
                <div className="dist-channel"><div className="dc-k">EMAIL</div><div className="dc-v"><a href="mailto:info@zava.ge">info@zava.ge</a></div></div>
                <div className="dist-channel"><div className="dc-k">SOCIAL</div><div className="dc-v"><a href="https://www.facebook.com/rfngeorgia" target="_blank" rel="noopener">Facebook</a> · <a href="https://www.instagram.com/rfngeorgia/" target="_blank" rel="noopener">Instagram</a></div></div>
                <div className="dist-channel"><div className="dc-k">SHOWROOM</div><div className="dc-v">თბილისი — სიმონ კანდელაკის 22</div></div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Section 10 — SEO */}
      {tweaks.showSEO && (
        <section className="section section-seo" id="seo">
          <div className="container">
            <SectionLabel num="10">RFN საქართველოში</SectionLabel>
            <Reveal>
              <div className="seo-block">
                <h2 className="h2">RFN ელექტრო Dirt Bike-ები საქართველოში</h2>
                <p>RFN არის ელექტრო Dirt Bike-ებისა და all-terrain ელექტრო მოტოციკლების ბრენდი, რომელიც საქართველოში ოფიციალურად წარმოდგენილია Zava Motors-ის მიერ. RFN-ის პროდუქტის ხაზი მოიცავს საბავშვო ელექტრო მოტოციკლებს, მოზარდებისთვის განკუთვნილ Dirt Bike-ებს, advanced off-road მოდელებს და flagship all-terrain ელექტრო ბაიკებს.</p>
                <p>თუ ეძებთ საბავშვო ელექტრო მოტოციკლს საქართველოში, RFN Warrior Kids ხაზი კარგი არჩევანია პირველი riding გამოცდილებისთვის. მოზარდებისთვის RFN Warrior Youth სთავაზობს მეტ ძალას, range-ს და უფრო სერიოზულ riding შესაძლებლობას. უფრო გამოცდილი rider-ებისთვის RFN Warrior და Warrior Pro ხაზები ქმნის advanced performance გამოცდილებას off-road terrain-ზე.</p>
                <p>RFN Ares არის ბრენდის flagship all-terrain ხაზი, რომელიც შექმნილია adventure riding-ისთვის, trail-ისთვის, outdoor გამოყენებისთვის და სხვადასხვა ტიპის ზედაპირზე გადაადგილებისთვის. საქართველოში RFN-ის მოდელების შერჩევა შესაძლებელია Zava Motors-ის დახმარებით.</p>
                <div className="seo-tags">
                  {["RFN საქართველო","RFN Georgia","Zava Motors","ელექტრო Dirt Bike","საბავშვო ელექტრო მოტოციკლი","Dirt Bike საქართველო","off-road electric bike","RFN Warrior Kids","RFN Warrior Youth","RFN SX-E500","RFN SX-E2","RFN SX-E8","RFN Ares"].map((t) => <span key={t} className="seo-tag">{t}</span>)}
                </div>
              </div>
            </Reveal>
          </div>
        </section>
      )}

      {/* Section 11 — FAQ */}
      <section className="section section-faq" id="faq">
        <div className="container">
          <SectionLabel num="11">FAQ</SectionLabel>
          <Reveal>
            <h2 className="h2">ხშირად დასმული<br/>კითხვები</h2>
          </Reveal>
          <Reveal delay={100}><FAQ /></Reveal>
        </div>
      </section>

      {/* Final CTA */}
      <section className="section section-final" id="final">
        <div className="container">
          <Reveal>
            <div className="final-cta">
              <div className="final-eyebrow">დაიწყე ელექტრო თავგადასავალი</div>
              <h2 className="h1-display">შეარჩიე<br/>შენი RFN.</h2>
              <p>RFN-ის ოფიციალური დისტრიბუტორი საქართველოში — Zava Motors. მიიღე კონსულტაცია და შეარჩიე სწორი მოდელი.</p>
              <div className="final-buttons">
                <a className="btn btn-primary btn-lg" href="#finder">Find Your RFN</a>
                <a className="btn btn-ghost btn-lg" href="https://zava.ge" target="_blank" rel="noreferrer">გადადი Zava.ge-ზე</a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <footer className="footer">
        <div className="container">
          <div className="footer-grid">
            <div>
              <img src="assets/rfn-logo.svg" alt="RFN" className="footer-logo" />
              <div className="footer-tag">Born in Racing. Charging the Future.</div>
            </div>
            <div className="footer-cols">
              <div>
                <div className="fc-h">პროდუქტი</div>
                <a href="#warrior-kids">Warrior Kids</a>
                <a href="#warrior-youth">Warrior Youth</a>
                <a href="#warrior">Warrior</a>
                <a href="#warrior-pro">Warrior Pro</a>
                <a href="#ares">Ares</a>
              </div>
              <div>
                <div className="fc-h">გვერდი</div>
                <a href="#story">ბრენდი</a>
                <a href="#finder">Find Your RFN</a>
                <a href="#faq">FAQ</a>
                <a href="#contact">კონტაქტი</a>
              </div>
              <div>
                <div className="fc-h">დისტრიბუტორი</div>
                <a href="https://zava.ge" target="_blank" rel="noreferrer">Zava.ge</a>
                <a href="#contact">კონსულტაცია</a>
              </div>
            </div>
          </div>
          <div className="footer-bottom">
            <span>© 2026 RFN Georgia · Distributed by Zava Motors</span>
            <span>RFN is a registered international electric motorcycle brand.</span>
          </div>
        </div>
      </footer>

      <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Brand">
            <window.TweakColor
              label="Accent color"
              value={tweaks.accent}
              options={["#F80000", "#E63946", "#FF4D1A", "#0066FF", "#111111"]}
              onChange={(v) => setTweak("accent", v)}
            />
            <window.TweakRadio
              label="Font pair"
              value={tweaks.fontPair}
              options={[
                { value: "noto-mono", label: "Noto + Mono" },
                { value: "noto-only", label: "Noto only" }
              ]}
              onChange={(v) => setTweak("fontPair", v)}
            />
          </window.TweakSection>

          <window.TweakSection title="Layout">
            <window.TweakRadio
              label="Hero"
              value={tweaks.heroVariant}
              options={[
                { value: "split", label: "Split" },
                { value: "type", label: "Type" },
                { value: "image", label: "Image" }
              ]}
              onChange={(v) => setTweak("heroVariant", v)}
            />
            <window.TweakRadio
              label="Cards"
              value={tweaks.cardStyle}
              options={[
                { value: "classic", label: "Classic" },
                { value: "minimal", label: "Minimal" },
                { value: "data", label: "Data" }
              ]}
              onChange={(v) => setTweak("cardStyle", v)}
            />
            <window.TweakRadio
              label="Density"
              value={tweaks.density}
              options={[
                { value: "compact", label: "Compact" },
                { value: "roomy", label: "Roomy" }
              ]}
              onChange={(v) => setTweak("density", v)}
            />
          </window.TweakSection>

          <window.TweakSection title="Sections">
            <window.TweakToggle label="Why Electric" value={tweaks.showWhyElectric} onChange={(v) => setTweak("showWhyElectric", v)} />
            <window.TweakToggle label="Safety" value={tweaks.showSafety} onChange={(v) => setTweak("showSafety", v)} />
            <window.TweakToggle label="SEO block" value={tweaks.showSEO} onChange={(v) => setTweak("showSEO", v)} />
          </window.TweakSection>
        </window.TweaksPanel>
    </>
  );
}

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