// Page sections. Romanian copy. WhatsApp CTA wired via WA_URL constant.

const WA_MSG = "Bună! Am văzut catalogul vostru și aș dori să comand o carte.";

// WhatsApp settings (number + base message) live in the `settings` table and are
// editable from the dashboard. Loaded once, shared across all CTA components.
const _wa = { number: "", message: WA_MSG };
let _waLoaded = false;
const _waSubs = new Set();
function loadWaSettings() {
  if (_waLoaded || !window.sb) return;
  _waLoaded = true;
  window.sb.from("settings").select("key,value").in("key", ["wa_number", "wa_message"]).then(({ data }) => {
    if (!data) return;
    data.forEach((r) => {
      if (r.key === "wa_number") _wa.number = (r.value || "").replace(/\D/g, "");
      if (r.key === "wa_message" && r.value) _wa.message = r.value;
    });
    _waSubs.forEach((fn) => fn());
  });
}
function useWa() {
  const [, force] = React.useState(0);
  React.useEffect(() => {
    const fn = () => force((n) => n + 1);
    _waSubs.add(fn);
    loadWaSettings();
    return () => _waSubs.delete(fn);
  }, []);
  return _wa;
}
function waLink(book) {
  if (!_wa.number) return "#whatsapp";
  let msg = _wa.message;
  if (book && book.title) {
    msg = `Bună! Aș dori să comand „${book.title}"` + (book.author ? ` de ${book.author}` : "") + ".";
  }
  return `https://wa.me/${_wa.number}?text=${encodeURIComponent(msg)}`;
}

// ─── NAV ─────────────────────────────────────────────────────────────────────
function Nav() {
  useWa();
  return (
    <div className="nav-wrap">
      <nav className="nav">
        <button className="menu-btn" aria-label="Meniu"><IconMenu /></button>
        <a href="#" className="brand">
          <span className="mark"><IconLogoMark /></span>
          <span>House <em style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--brand)", fontWeight: 400 }}>of</em> Books</span>
        </a>
        <a href={waLink()} className="btn btn-primary right" target="_blank" rel="noopener">
          <IconWA size={14} /> Comandă pe WhatsApp
        </a>
      </nav>
    </div>
  );
}

// ─── HERO ────────────────────────────────────────────────────────────────────
function Hero() {
  useWa();
  const heroBooks = useBooks("hero", HERO_BOOKS);
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-inner">
          <div className="hero-glow"></div>
          <span className="tag tag-with-avatars">
            <span className="avatars">
              <span className="av" style={{ background: "linear-gradient(135deg,#d4a574,#8f6a3a)" }} />
              <span className="av" style={{ background: "linear-gradient(135deg,#5a4e8c,#2d245a)" }} />
              <span className="av" style={{ background: "linear-gradient(135deg,#c44d4d,#7a1f1f)" }} />
            </span>
            <span>+2.000 cititori fericiți</span>
          </span>

          <h1 className="display h-xl">
            Cărți alese cu <em>grijă</em>,<br/>
            livrate pe <em>WhatsApp</em>
          </h1>

          <p className="lede">
            O librărie mică, cu suflet mare. Îți recomandăm cărți potrivite pentru tine
            și ți le aducem direct acasă, după o conversație simplă pe WhatsApp.
          </p>

          <div className="hero-ctas">
            <a href={waLink()} className="btn btn-primary" target="_blank" rel="noopener">
              <IconWA size={14} /> Scrie-ne pe WhatsApp
            </a>
            <a href="#catalog" className="btn btn-secondary">Vezi catalogul</a>
          </div>
        </div>
      </div>

      {/* Arc of book covers */}
      <div className="wrap" style={{ maxWidth: 1280 }}>
        <div className="hero-arc">
          <div className="row">
            {heroBooks.slice(0, 5).map((book, i) => (
              <div key={book.id || i} className={`slot s${i+1}`}>
                <BookCover book={book} idx={i} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FEATURED BOOK ───────────────────────────────────────────────────────────
function Featured() {
  useWa();
  const book = useBooks("featured", FEATURED_SEED)[0];
  if (!book) return null;
  return (
    <section id="featured" style={{ paddingTop: 64 }}>
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <span className="tag solid">Cartea săptămânii</span>
          <h2 className="display h-md">
            O alegere <em>specială</em><br/>din raftul nostru
          </h2>
        </div>

        <div className="card" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 0, overflow: "hidden", alignItems: "stretch" }}>
          <div style={{ background: "linear-gradient(160deg, #e9e2d4 0%, #d4c4a8 100%)", padding: "56px", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div style={{ width: "min(280px, 100%)", transform: "rotate(-3deg)", filter: "drop-shadow(0 30px 40px rgba(0,0,0,.18))" }}>
              <BookCover book={book} idx={2} />
            </div>
          </div>
          <div style={{ padding: "48px", display: "flex", flexDirection: "column", gap: 18, justifyContent: "center" }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <span className="tag">Recomandată de Andra</span>
              {scarcityOption(book.scarcity) && (
                <span className="tag" style={{ background: "#fdecec", color: "#c4453d", borderColor: "#f3c9c9" }}>
                  🔥 {scarcityOption(book.scarcity).label}
                </span>
              )}
            </div>
            <h3 className="display" style={{ fontSize: "clamp(28px, 3.4vw, 44px)", margin: 0 }}>
              <em>„{book.title}"</em><br/>{book.author}
            </h3>
            <p className="lede" style={{ margin: 0 }}>
              {book.description}
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 8, flexWrap: "wrap" }}>
              <span style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-.02em" }}>{book.price}</span>
              {stockOption(book.stock_status) && (
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14, fontWeight: 600, color: stockOption(book.stock_status).color }}>
                  <span style={{ width: 8, height: 8, borderRadius: 999, background: stockOption(book.stock_status).color, display: "inline-block" }} />
                  {stockOption(book.stock_status).label}
                </span>
              )}
              {book.delivery && <span style={{ color: "var(--muted)", fontSize: 14 }}>· {book.delivery}</span>}
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
              <a href={waLink(book)} className="btn btn-primary" target="_blank" rel="noopener">
                <IconWA size={14} /> Vreau să o comand
              </a>
              <a href="#catalog" className="btn btn-ghost" style={{ color: "var(--muted)" }}>Vezi alte recomandări →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── HOW IT WORKS ────────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: "01",
      title: "Alegi cartea",
      desc: "Răsfoiești catalogul nostru sau ne spui ce cauți. Dacă nu o avem, o căutăm pentru tine.",
      ill: (
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "end", justifyContent: "center", gap: 8, padding: 16 }}>
          {[0,3,5].map((i, k) => (
            <div key={k} style={{ width: 56, transform: `rotate(${(k-1)*4}deg) translateY(${Math.abs(k-1)*-6}px)` }}>
              <BookCover book={BOOKS[i]} idx={i} />
            </div>
          ))}
        </div>
      ),
    },
    {
      n: "02",
      title: "Scrii pe WhatsApp",
      desc: "Ne trimiți un mesaj cu titlul. Îți confirmăm stocul, prețul și detaliile de livrare în câteva minute.",
      ill: (
        <div style={{ position: "absolute", inset: 0, padding: 18, display: "flex", flexDirection: "column", justifyContent: "end", gap: 8 }}>
          <div style={{ alignSelf: "start", background: "#fff", padding: "10px 14px", borderRadius: "14px 14px 14px 4px", fontSize: 13, color: "var(--ink-2)", boxShadow: "0 1px 2px rgba(0,0,0,.06)", maxWidth: "80%" }}>
            Bună! Aveți „Solenoid" pe stoc?
          </div>
          <div style={{ alignSelf: "end", background: "#DCF8C6", padding: "10px 14px", borderRadius: "14px 14px 4px 14px", fontSize: 13, color: "#0a0a0a", maxWidth: "80%" }}>
            Avem! 89 lei, livrare mâine 🌿
          </div>
        </div>
      ),
    },
    {
      n: "03",
      title: "O primești acasă",
      desc: "Plătești cash la livrare sau prin transfer. Cartea ajunge la tine ambalată cu grijă, ca un mic cadou.",
      ill: (
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{ width: 130, height: 100, background: "#c89c6a", borderRadius: 6, position: "relative", boxShadow: "0 20px 30px -15px rgba(0,0,0,.3)", transform: "rotate(-4deg)" }}>
            <div style={{ position: "absolute", left: "50%", top: 0, bottom: 0, width: 10, background: "#8a5a2a", transform: "translateX(-50%)" }}></div>
            <div style={{ position: "absolute", left: "50%", top: "50%", width: 10, height: 10, background: "#fff", border: "2px solid #8a5a2a", borderRadius: "50%", transform: "translate(-50%,-50%)" }}></div>
          </div>
        </div>
      ),
    },
  ];

  return (
    <section id="how">
      <div className="wrap">
        <div className="section-head">
          <span className="tag solid">Cum funcționează</span>
          <h2 className="display h-lg">
            Comanzi o carte<br/>în <em>trei pași</em> simpli
          </h2>
        </div>

        <div className="steps">
          {steps.map((s) => (
            <div key={s.n} className="card step">
              <div className="num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="ill">{s.ill}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CATALOGUE ───────────────────────────────────────────────────────────────
function Catalogue() {
  useWa();
  const books = useBooks("catalogue", CATALOGUE_SEED);
  return (
    <section id="catalog">
      <div className="wrap">
        <div className="section-head">
          <span className="tag solid">Cataloguul nostru</span>
          <h2 className="display h-lg">
            Cărți care <em>așteaptă</em><br/>să fie citite
          </h2>
          <p className="lede" style={{ textAlign: "center" }}>
            Alegem fiecare titlu cu mâna, nu cu algoritmul. De la clasici români la nume contemporane.
          </p>
        </div>

        <div className="cat-grid">
          {books.map((b, i) => (
            <div key={i} className="book-card">
              <div className="cover-wrap">
                <BookCover book={b} idx={i} />
                {(b.badge || scarcityOption(b.scarcity)) && (
                  <div className="badges">
                    {b.badge && <span className="pill">{b.badge}</span>}
                    {scarcityOption(b.scarcity) && (
                      <span className="pill" style={{ background: "#c4453d" }}>🔥 {scarcityOption(b.scarcity).label}</span>
                    )}
                  </div>
                )}
              </div>
              <div className="meta-row">
                <div>
                  <h4>{b.title}</h4>
                  <div className="author">{b.author}</div>
                  {stockOption(b.stock_status) && (
                    <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 600, color: stockOption(b.stock_status).color, marginTop: 4 }}>
                      <span style={{ width: 7, height: 7, borderRadius: 999, background: stockOption(b.stock_status).color, display: "inline-block" }} />
                      {stockOption(b.stock_status).label}
                    </div>
                  )}
                </div>
                <div className="price">{b.price}</div>
              </div>
              <a href={waLink(b)} className="wa-link" target="_blank" rel="noopener">
                <IconWA size={13} /> Comandă pe WhatsApp
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── ABOUT ───────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="about">
      <div className="wrap">
        <div className="about-grid">
          <div className="about-image">
            {/* Stylised "shop" placeholder */}
            <div style={{ position: "absolute", inset: 0, background:
              "linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35)),\
               radial-gradient(60% 50% at 50% 40%, rgba(255,220,180,.5), rgba(255,220,180,0) 70%),\
               linear-gradient(160deg, #c8a376 0%, #8b6438 60%, #5a3e1c 100%)" }} />
            {/* faux bookshelf lines */}
            <div style={{ position: "absolute", inset: "20% 12% 30% 12%", display: "flex", flexDirection: "column", gap: 22 }}>
              {[0,1,2,3].map(r => (
                <div key={r} style={{ display: "flex", gap: 4, height: 38 }}>
                  {Array.from({length: 10}).map((_, c) => (
                    <div key={c} style={{
                      flex: 1, borderRadius: "2px 2px 0 0",
                      background: `linear-gradient(180deg, ${PALETTES[(r*10+c) % PALETTES.length].bg.match(/#[0-9a-f]+/i)[0]}, rgba(0,0,0,.2))`,
                      opacity: .9,
                      height: `${70 + ((r*7+c*13) % 30)}%`,
                      alignSelf: "end",
                    }} />
                  ))}
                </div>
              ))}
            </div>
            <div className="label">
              <span style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 22 }}>Librăria noastră</span>
              <span style={{ opacity: .8 }}>București · din 2017</span>
            </div>
          </div>

          <div>
            <span className="tag solid" style={{ marginBottom: 18 }}>Despre noi</span>
            <h2 className="display h-md" style={{ marginTop: 10 }}>
              Pasiunea pentru <em>cărți</em>,<br/>de peste 8 ani
            </h2>
            <p className="lede" style={{ marginTop: 18 }}>
              House of Books a început dintr-un raft de cărți preferate și o conversație lungă pe WhatsApp.
              Astăzi suntem o mică librărie cu suflet, fără magazin online complicat, fără coșuri și parole.
              Ne scrii, vorbim, îți recomandăm — și cartea pleacă spre tine, ambalată cu grijă.
            </p>

            <div className="stats">
              <div className="stat">
                <div className="n">+8.000</div>
                <div className="lbl">Cărți livrate</div>
              </div>
              <div className="stat">
                <div className="n">98<span style={{ fontSize: ".55em", color: "var(--muted)" }}>%</span></div>
                <div className="lbl">Cititori care revin</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── TESTIMONIALS ────────────────────────────────────────────────────────────
function Testimonials() {
  return (
    <section id="testi">
      <div className="wrap">
        <div className="section-head">
          <span className="tag solid">Cititorii noștri</span>
          <h2 className="display h-lg">
            Cuvinte de la<br/>cei care <em>citesc cu noi</em>
          </h2>
        </div>

        <div className="testi-grid">
          <div className="card testi">
            <div className="stars">{[1,2,3,4,5].map(i => <IconStar key={i} />)}</div>
            <p>„Cea mai caldă experiență de cumpărat o carte. Andra mi-a recomandat trei titluri exact pe gustul meu, deși nu îmi explicasem foarte bine ce caut."</p>
            <div className="who">
              <div className="av"><IconUser size={20} /></div>
              <div>
                <div className="name">Ioana Marinescu</div>
                <div className="role">Profesoară · Cluj</div>
              </div>
            </div>
          </div>

          <div className="card testi feature">
            <div className="photo"></div>
            <div className="content">
              <div className="stars">{[1,2,3,4,5].map(i => <IconStar key={i} />)}</div>
              <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: "clamp(20px, 2vw, 28px)", lineHeight: 1.3 }}>
                „Comand de la ei de aproape doi ani. E ca și cum ai avea un prieten care îți alege cărțile — și mereu nimerește."
              </p>
              <div className="who">
                <div className="av"><IconUser size={20} /></div>
                <div>
                  <div className="name">Andrei Popescu</div>
                  <div className="role">Cititor împătimit · București</div>
                </div>
              </div>
            </div>
          </div>

          <div className="card testi">
            <div className="stars">{[1,2,3,4].map(i => <IconStar key={i} />)}<IconStar filled={false} /></div>
            <p>„Ambalajul a fost o surpriză plăcută — cu un bilețel scris de mână. Detalii care contează. Voi mai comanda."</p>
            <div className="who">
              <div className="av"><IconUser size={20} /></div>
              <div>
                <div className="name">Diana Stoica</div>
                <div className="role">Studentă · Iași</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── NEWSLETTER ──────────────────────────────────────────────────────────────
function Newsletter() {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  async function subscribe(e) {
    e.preventDefault();
    const addr = email.trim().toLowerCase();
    if (!addr) return;
    setBusy(true); setErr(null);
    const { error } = await window.sb.from("subscribers").insert({ email: addr });
    setBusy(false);
    // 23505 = email already subscribed; from the visitor's view that's still fine.
    if (error && error.code !== "23505") { setErr("Ceva n-a mers. Încearcă din nou."); return; }
    setSent(true);
  }

  return (
    <section id="news" className="compact">
      <div className="wrap-narrow">
        <div className="card" style={{ padding: "clamp(36px, 5vw, 64px)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <span className="tag solid" style={{ marginBottom: 18 }}>Recomandări lunare</span>
            <h2 className="display h-md" style={{ marginTop: 10 }}>
              O scrisoare<br/>cu <em>cărți bune</em>,<br/>o dată pe lună
            </h2>
            <p className="lede" style={{ marginTop: 18 }}>
              Trei titluri alese cu grijă, o poveste scurtă din librărie și uneori un cod de reducere.
              Fără spam, fără tracking — promitem.
            </p>
          </div>
          <div>
            <form onSubmit={subscribe}
              style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <label style={{ fontSize: 13, fontWeight: 500, color: "var(--ink-2)" }}>Adresa ta de email</label>
              <div style={{ display: "flex", gap: 8, background: "var(--bg-2)", padding: 6, borderRadius: 999 }}>
                <input
                  type="email" required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={sent}
                  placeholder="ana@exemplu.ro"
                  style={{ flex: 1, border: 0, background: "transparent", padding: "10px 16px", fontSize: 15, outline: "none", color: "var(--ink)", fontFamily: "inherit" }}
                />
                <button type="submit" className="btn btn-primary" style={{ padding: "10px 18px" }} disabled={busy || sent}>
                  {sent ? "Mulțumim! ✓" : busy ? "Se trimite…" : "Mă abonez"}
                </button>
              </div>
              {err
                ? <p style={{ fontSize: 12, color: "#c4453d", margin: 0 }}>{err}</p>
                : <p style={{ fontSize: 12, color: "var(--muted)", margin: 0 }}>
                    Te poți dezabona oricând cu un singur clic. Datele rămân la noi, doar la noi.
                  </p>}
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER CTA + FOOTER ─────────────────────────────────────────────────────
function FooterCTA() {
  useWa();
  return (
    <section className="compact">
      <div className="wrap">
        <div className="footer-cta">
          <span className="tag solid" style={{ background: "rgba(44,126,248,.18)", color: "#a3c4ff" }}>Hai să citim împreună</span>
          <h2 className="display h-lg" style={{ color: "#fff" }}>
            Următoarea ta carte preferată<br/>e la un <em>mesaj</em> distanță
          </h2>
          <p className="lede" style={{ color: "rgba(255,255,255,.7)", textAlign: "center" }}>
            Scrie-ne pe WhatsApp și hai să vorbim despre cărți. Răspundem de luni până sâmbătă, 10:00–19:00.
          </p>
          <a href={waLink()} className="btn btn-primary" target="_blank" rel="noopener" style={{ padding: "14px 24px", fontSize: 16 }}>
            <IconWA size={16} /> Scrie-ne pe WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

function Foot() {
  useWa();
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="row">
          <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--ink)" }}>
            <span style={{ color: "var(--brand)" }}><IconLogoMark size={20} /></span>
            <span style={{ fontWeight: 600 }}>House of Books</span>
          </div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#catalog">Catalog</a>
            <a href="#how">Cum comand</a>
            <a href="#about">Despre noi</a>
            <a href={waLink()}>Contact</a>
          </div>
          <div>© {new Date().getFullYear()} House of Books · București</div>
        </div>
      </div>
    </footer>
  );
}

function WaFab() {
  useWa();
  return (
    <a href={waLink()} className="wa-fab" target="_blank" rel="noopener" aria-label="WhatsApp">
      <IconWA size={26} />
    </a>
  );
}

Object.assign(window, { Nav, Hero, Featured, HowItWorks, Catalogue, About, Testimonials, Newsletter, FooterCTA, Foot, WaFab });