// sections.jsx — Hero, Services, Gallery, Reviews, About, Footer

function Logo({ inFooter }) {
  return (
    <a href="#" className="logo" aria-label="RAHmen Haushaltsservice">
      <img
        className="logo-img"
        src={inFooter ? "assets/rahmen-logo-light.png" : "assets/rahmen-logo-dark.png"}
        alt="RAHmen Haushaltsservice"
      />
    </a>
  );
}

function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="wrap nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="Umzug.html">{t.nav.umzug}</a>
          <a href="Entruempelung.html">{t.nav.entruempelung}</a>
          <a href="Gebaeudereinigung.html">{t.nav.reinigung}</a>
          <a href="Gartenpflege.html">{t.nav.garten}</a>
          <a href="#about">{t.nav.about}</a>
        </div>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={lang === "de" ? "active" : ""} onClick={() => setLang("de")}>DE</button>
            <button className={lang === "ar" ? "active" : ""} onClick={() => setLang("ar")}>AR</button>
          </div>
          <a href="#quote" className="btn btn-primary">{t.cta_quote} →</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ lang, t, accent }) {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">
            <span className="dot" style={{background: accent}}></span>
            {t.hero.eyebrow}
          </div>
          <h1>
            {t.hero.title_a}<br/>
            {t.hero.title_b} <span className="it">{t.hero.title_b_it}</span> {t.hero.title_c}
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-ctas">
            <a href="#quote" className="btn btn-primary" style={{background: accent}}>{t.hero.cta1} →</a>
            <a href="https://wa.me/491775017060" className="btn btn-ghost">{t.hero.cta2}</a>
          </div>
        </div>

        <aside className="hero-side">
          <div className="region-tag">
            <span className="pulse" style={{background: accent}}></span>
            {t.region}
          </div>
          <div>
            <div className="hero-side-h">
              {t.hero_side.h} <span className="muted">— {t.hero_side.muted}</span>
            </div>
          </div>
          <ul className="hero-list">
            {t.hero_side.list.map((it, i) => (
              <li key={i}><span className="hero-list-dot" style={{background: accent}}></span>{it}</li>
            ))}
          </ul>
          <div className="hero-stats">
            <div className="hero-stat"><b>{t.hero_side.stat1_n}</b><span>{t.hero_side.stat1_l}</span></div>
            <div className="hero-stat"><b>{t.hero_side.stat2_n}</b><span>{t.hero_side.stat2_l}</span></div>
            <div className="hero-stat"><b>{t.hero_side.stat3_n}</b><span>{t.hero_side.stat3_l}</span></div>
            <div className="hero-stat"><b>{t.hero_side.stat4_n}</b><span>{t.hero_side.stat4_l}</span></div>
          </div>
        </aside>
      </div>
    </section>
  );
}

function Marquee({ t }) {
  const items = [...t.marquee, ...t.marquee, ...t.marquee, ...t.marquee];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>
          {items.map((it, i) => (
            <React.Fragment key={i}>
              <span>{it}</span>
              <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="2" fill="currentColor"/></svg>
            </React.Fragment>
          ))}
        </span>
      </div>
    </div>
  );
}

function SectionHead({ num, title_a, title_b_it, sub }) {
  return (
    <div className="section-head">
      <div className="section-num">{num}</div>
      <div>
        <h2 className="section-title">{title_a} <span className="it">{title_b_it}</span></h2>
        {sub && <p className="section-sub">{sub}</p>}
      </div>
    </div>
  );
}

function Services({ lang, t, accent }) {
  return (
    <section className="section" id="services">
      <div className="wrap">
        <SectionHead {...t.services_head} />
        <div className="services">
          {SERVICES.map((s, i) => (
            <article key={s.id} className={"service" + ((i === 0 || i === 3) ? " feature" : "")}>
              <div className="service-num">{String(i + 1).padStart(2, "0")} / {String(SERVICES.length).padStart(2, "0")}</div>
              <div className="service-icon">{s.icon}</div>
              <div>
                <h3>{s[lang].title}</h3>
                <p className="service-desc" style={{marginTop: 12}}>{s[lang].desc}</p>
              </div>
              <svg className="service-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M5 12h14M13 6l6 6-6 6"/>
              </svg>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ lang, t }) {
  return (
    <section className="section" id="ablauf" style={{background: "var(--paper)"}}>
      <div className="wrap">
        <SectionHead {...t.process_head} />
        <div className="process">
          {t.process.map((s, i) => (
            <article key={i} className="proc-step">
              <div className="proc-n">{s.n}</div>
              <h4>{s.h}</h4>
              <p>{s.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Reviews({ lang, t, accent }) {
  const items = lang === "ar" ? [
    {
      stars: 5,
      txt: "فريق محترم وسريع. أخلوا شقة جدتي في زاربروكن خلال يوم. السعر متل ما اتفقنا، بدون مفاجآت. منصح فيهم.",
      name: "كريم ع.", role: "زاربروكن"
    },
    {
      stars: 5,
      txt: "نقل من زاربروكن لزارلوي تمّ بشكل مرتّب جداً. تركيب الخزائن كان دقيق وما في شي انخرب. خلّصوا قبل الموعد!",
      name: "ليلى م.", role: "زارلوي"
    },
    {
      stars: 5,
      txt: "كأم لثلاثة ولاد، ما كنت أقدر أعمل الموضوع لحالي. أخدوا كل شي بهدوء، حتى لعب الأولاد لفّوها بحذر. شكراً.",
      name: "أنّا K.", role: "هومبورغ"
    }
  ] : [
    {
      stars: 5,
      txt: "Sehr professionelles Team. Haushaltsauflösung meiner Großmutter in Saarbrücken in einem Tag erledigt. Preis wie vereinbart, keine Überraschungen. Klare Empfehlung.",
      name: "Karim A.", role: "Saarbrücken"
    },
    {
      stars: 5,
      txt: "Umzug von Saarbrücken nach Saarlouis perfekt organisiert. Die Schrankmontage war präzise, nichts beschädigt. Schneller fertig als geplant!",
      name: "Leila M.", role: "Saarlouis"
    },
    {
      stars: 5,
      txt: "Als Mutter von drei Kindern hätte ich das nie allein geschafft. Alles wurde sorgfältig eingepackt, selbst das Spielzeug. Vielen Dank!",
      name: "Anna K.", role: "Homburg"
    }
  ];

  return (
    <section className="section" id="reviews">
      <div className="wrap">
        <SectionHead {...t.reviews_head} />
        <div className="reviews">
          {items.map((r, i) => (
            <article key={i} className="review">
              <div className="review-stars" style={{color: accent}}>
                {Array.from({length: r.stars}).map((_, j) => (
                  <svg key={j} width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="12,2 15,9 22,9 17,14 19,22 12,17 5,22 7,14 2,9 9,9"/></svg>
                ))}
              </div>
              <p>"{r.txt}"</p>
              <div className="review-author">
                <div className="review-avatar">{r.name.charAt(0)}</div>
                <div>
                  <b>{r.name}</b>
                  <span>{r.role}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function About({ lang, t, accent }) {
  return (
    <section className="section" id="about" style={{background: "var(--paper)"}}>
      <div className="wrap">
        <SectionHead {...t.about_head} />
        <div className="about">
          <div className="about-panel">
            <div className="about-panel-top">
              <img className="about-monogram" src="assets/rahmen-icon-light.png" alt="RAHmen" />
              <span className="about-panel-tag">{t.about_panel.tag}</span>
            </div>
            <p className="about-quote">{t.about_panel.quote}</p>
            <dl className="about-facts">
              {t.about_panel.facts.map((f, i) => (
                <div key={i}><dt>{f[0]}</dt><dd>{f[1]}</dd></div>
              ))}
            </dl>
          </div>
          <div className="about-body">
            <p>{t.about_p1}</p>
            <p>{t.about_p2}</p>
            <div className="about-bullets">
              {t.about_bullets.map((b, i) => (
                <div key={i} className="about-bullet">
                  <b style={{color: accent}}>{b.n}</b>
                  <span>{b.t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang, t, accent }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <p className="footer-cta">
              {t.footer_cta_a} <span className="it">{t.footer_cta_it}</span>
            </p>
            <div style={{marginTop: 24}}>
              <Logo inFooter />
            </div>
          </div>
          <div>
            <h5>{t.footer.contact}</h5>
            <ul>
              <li><a href="tel:+491775017060">0177 5017060</a></li>
              <li><a href="https://wa.me/491775017060">WhatsApp ↗</a></li>
              <li><a href="mailto:info@rahmen-haushaltsservice.de">info@rahmen-haushaltsservice.de</a></li>
              <li>Aachener Straße 8</li>
              <li>66115 Saarbrücken</li>
              <li>{t.region}</li>
            </ul>
          </div>
          <div>
            <h5>{t.footer.services}</h5>
            <ul>
              <li><a href="Umzug.html">{lang === "ar" ? "نقل وتوصيل" : "Umzug & Transport"}</a></li>
              <li><a href="Entruempelung.html">{lang === "ar" ? "إخلاء وتصفية" : "Entrümpelung"}</a></li>
              <li><a href="Gebaeudereinigung.html">{lang === "ar" ? "تنظيف المباني" : "Gebäudereinigung"}</a></li>
              <li><a href="Gartenpflege.html">{lang === "ar" ? "العناية بالحديقة" : "Gartenpflege"}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t.footer.legal}</h5>
            <ul>
              <li><a href="Impressum.html">{t.footer.impressum}</a></li>
              <li><a href="Datenschutz.html">{t.footer.privacy}</a></li>
              <li><a href="AGB.html">{t.footer.agb}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 RAHmen Haushaltsservice — {t.footer.rights}</div>
          <div>{lang === "ar" ? "زارلاند · مصنوع بعناية" : "Saarland · Made with care"}</div>
        </div>
      </div>
    </footer>
  );
}

function CookieBanner({ lang }) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    try {
      if (!localStorage.getItem("rahmen_cookie_ok")) setVisible(true);
    } catch (e) { setVisible(true); }
  }, []);

  const accept = () => {
    try { localStorage.setItem("rahmen_cookie_ok", "1"); } catch (e) {}
    setVisible(false);
  };

  if (!visible) return null;

  const L = lang === "ar" ? {
    text: "منستعمل بس الكوكيز الضرورية تقنياً (متل حفظ اللغة) لتشغيل الموقع. ما في تتبّع ولا إعلانات.",
    more: "تفاصيل في سياسة الخصوصية",
    accept: "تمام"
  } : {
    text: "Wir verwenden nur technisch notwendige Cookies (z. B. zum Speichern der Sprache), damit die Website funktioniert. Kein Tracking, keine Werbung.",
    more: "Mehr in der Datenschutzerklärung",
    accept: "Verstanden"
  };

  return (
    <div className="cookie-banner" role="dialog" aria-label="Cookie-Hinweis">
      <div className="cookie-inner">
        <p className="cookie-text">
          {L.text} <a href="Datenschutz.html">{L.more} →</a>
        </p>
        <button className="cookie-btn" onClick={accept}>{L.accept}</button>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Nav, Hero, Marquee, Services, Process, Reviews, About, Footer, SectionHead, CookieBanner });