/* eslint-disable */
// Landing page sections

function NavBar({ onGotoApp }) {
  const { t, lang, setLang } = useI18n();
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="brand" onClick={(e) => e.preventDefault()}>
          <span className="brand-mark">A</span>
          ARHIVAR
        </a>
        <div className="nav-links">
          <a href="#features">{t("nav_features")}</a>
          <a href="#insights">{t("nav_insights")}</a>
          <a href="#pricing">{t("nav_pricing")}</a>
          <a href="#faq">{t("nav_faq")}</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch" role="group">
            <button className={lang === "ro" ? "on" : ""} onClick={() => setLang("ro")}>RO</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a href="#" className="btn btn-ghost" onClick={(e) => { e.preventDefault(); }}>
            {t("nav_signin")}
          </a>
          <a href="#" className="btn btn-primary" onClick={(e) => { e.preventDefault(); onGotoApp(); }}>
            {t("nav_demo")} <Icon.ArrowRight size={14}/>
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ onGotoApp }) {
  const { t } = useI18n();
  return (
    <section className="hero">
      <div className="container">
        <div className="eyebrow"><span className="dot"></span>{t("hero_eyebrow")}</div>
        <h1 className="h1">
          {t("hero_h1_a")} <em>{t("hero_h1_em")}</em><br/>{t("hero_h1_b")}
        </h1>
        <p className="lede">{t("hero_lede")}</p>
        <div className="hero-cta">
          <button className="btn btn-primary btn-lg" onClick={onGotoApp}>
            {t("hero_cta_primary")} <Icon.ArrowRight size={14}/>
          </button>
          <button className="btn btn-ghost btn-lg" onClick={onGotoApp}>
            {t("hero_cta_secondary")}
          </button>
        </div>
        <div className="hero-meta">
          <span className="item"><Icon.Shield size={15}/>{t("hero_meta_1")}</span>
          <span className="item"><Icon.Lock size={15}/>{t("hero_meta_2")}</span>
          <span className="item"><Icon.Building size={15}/>{t("hero_meta_3")}</span>
        </div>
      </div>

      <div className="container preview-wrap" onClick={onGotoApp} style={{cursor:"pointer"}}>
        <div className="preview-frame">
          <PreviewDashboard />
        </div>
      </div>
    </section>
  );
}

/* ---------- Preview dashboard (visual only) ---------- */
function PreviewDashboard() {
  const { t, lang } = useI18n();
  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "220px 1fr",
      minHeight: 560,
      pointerEvents: "none",
    }}>
      <div style={{borderRight: "1px solid var(--line)", background: "var(--paper-2)", padding: "16px 12px"}}>
        <div style={{display:"flex", alignItems:"center", gap:10, padding:"6px 6px 16px", borderBottom:"1px solid var(--line)", marginBottom: 8}}>
          <span className="brand-mark" style={{width:24, height:24, fontSize:14}}>A</span>
          <span style={{fontFamily:"var(--serif)", fontSize:20, letterSpacing:"-0.01em"}}>ARHIVAR</span>
        </div>
        {[
          { i: <Icon.Grid size={15}/>,         l: t("s_dash"),       a: true  },
          { i: <Icon.Building size={15}/>,     l: t("s_companies") },
          { i: <Icon.File size={15}/>,         l: t("s_invoices") },
          { i: <Icon.MessageRound size={15}/>, l: t("s_anaf") },
          { i: <Icon.Truck size={15}/>,        l: t("s_suppliers") },
          { i: <Icon.Chart size={15}/>,        l: t("s_stats") },
          { i: <Icon.Box size={15}/>,          l: t("s_exports") },
        ].map((it, idx) => (
          <div key={idx} className={"nav-item" + (it.a ? " active" : "")}>{it.i}{it.l}</div>
        ))}
      </div>

      <div style={{padding: 24}}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"end", marginBottom: 18}}>
          <div>
            <h2 className="page-title" style={{fontSize:28}}>{t("d_greeting")} Andrei</h2>
            <div className="page-sub">{t("d_subtitle")}</div>
          </div>
          <div style={{display:"flex", gap:8}}>
            <div className="btn btn-ghost" style={{height:34, fontSize:13}}><Icon.Download size={14}/>{t("d_export_month")}</div>
            <div className="btn btn-primary" style={{height:34, fontSize:13}}><Icon.Plus size={14}/>{t("d_add_company")}</div>
          </div>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:10, marginBottom:14}}>
          <div className="kpi">
            <div className="label">{t("kpi_received")}</div>
            <div className="value tnum">137</div>
            <div className="trend"><span className="up">↑ 15%</span> vs. {lang === "ro" ? "luna trecută" : "last month"}</div>
          </div>
          <div className="kpi">
            <div className="label">{t("kpi_issued")}</div>
            <div className="value tnum">47</div>
            <div className="trend"><span className="up">↑ 14%</span> vs. {lang === "ro" ? "luna trecută" : "last month"}</div>
          </div>
          <div className="kpi">
            <div className="label">{t("kpi_tva")}</div>
            <div className="value tnum">18.420</div>
            <div className="trend"><span className="down">↓ 10%</span> RON</div>
          </div>
          <div className="kpi">
            <div className="label">{t("kpi_archive")}</div>
            <div className="value tnum">184</div>
            <div className="trend">1,2 / 5,0 GB</div>
          </div>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr", gap:14}}>
          <div className="card" style={{padding:18}}>
            <div className="card-head">
              <div>
                <div className="card-title">{t("cashflow_t")}</div>
                <div className="card-sub">{t("cashflow_s")}</div>
              </div>
              <div className="legend">
                <span><span className="sw" style={{background:"var(--green)"}}></span>{t("legend_in")}</span>
                <span><span className="sw" style={{background:"var(--amber)"}}></span>{t("legend_out")}</span>
              </div>
            </div>
            <BarChart compact />
          </div>
          <div className="card" style={{padding:18}}>
            <div className="card-head">
              <div>
                <div className="card-title">{t("supp_t")}</div>
                <div className="card-sub">{t("supp_s")}</div>
              </div>
            </div>
            <div>
              {TOP_SUPPLIERS.slice(0, 4).map(s => (
                <div key={s.rank} className="supplier-row" style={{padding:"8px 0"}}>
                  <div className="n">
                    <span className="rank">{s.rank}</span>
                    <div>
                      <div className="name-line" style={{fontSize:13}}>{s.name}</div>
                      <small>{s.n} {lang === "ro" ? "facturi" : "invoices"}</small>
                    </div>
                  </div>
                  <div className="amt" style={{fontSize:13}}>{fmtRON(s.amount)} RON</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- How it works ---------- */
function HowItWorks() {
  const { t } = useI18n();
  return (
    <section id="how">
      <div className="container">
        <div className="section-eyebrow">{t("how_eyebrow")}</div>
        <h2 className="section-title">{t("how_title")}</h2>
        <div className="steps">
          {[1, 2, 3].map(n => (
            <div className="step" key={n}>
              <div className="step-num">{String(n).padStart(2, "0")}</div>
              <h3>{t(`how_step${n}_t`)}</h3>
              <p>{t(`how_step${n}_p`)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Features ---------- */
function Features() {
  const { t } = useI18n();
  const items = [
    { k: "f1", icon: <Icon.Building/>,    dark: false, wide: false },
    { k: "f2", icon: <Icon.Shield/>,      dark: true,  wide: true  },
    { k: "f3", icon: <Icon.Chart/>,       dark: false, wide: false },
    { k: "f4", icon: <Icon.Download/>,    dark: false, wide: true  },
    { k: "f5", icon: <Icon.Bell/>,        dark: false, wide: false },
    { k: "f6", icon: <Icon.Zap/>,         dark: false, wide: false },
  ];
  return (
    <section id="features" style={{background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)"}}>
      <div className="container">
        <div className="section-eyebrow">{t("features_eyebrow")}</div>
        <h2 className="section-title">{t("features_title")}</h2>
        <div className="feature-grid">
          {items.map(it => (
            <div key={it.k} className={"feature" + (it.dark ? " dark" : "") + (it.wide ? " wide" : "")}>
              <div className="icon">{it.icon}</div>
              <h4>{t(`${it.k}_t`)}</h4>
              <p>{t(`${it.k}_p`)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Insights showcase ---------- */
function Insights() {
  const { t, lang } = useI18n();
  return (
    <section id="insights">
      <div className="container">
        <div className="insights-showcase">
          <div>
            <div className="section-eyebrow">{t("insights_eyebrow")}</div>
            <h2 className="section-title">{t("insights_title")}</h2>
            <p className="section-sub">{t("insights_p")}</p>
            <div style={{display:"flex", flexDirection:"column", gap:14, marginTop:32}}>
              {[
                { i: <Icon.Sparkle size={16}/>, t: lang === "ro" ? "Anomalii detectate automat — factură de 18.000 RON de la furnizor nou? Te anunțăm." : "Auto-detected anomalies — a 18,000 RON invoice from a new supplier? We flag it.", c: "var(--amber)"},
                { i: <Icon.Gauge size={16}/>,   t: lang === "ro" ? "Praguri pe categorie — combustibil peste 12k, depășire bugetar pe consultanță." : "Per-category thresholds — fuel over 12k, consulting over budget.", c: "var(--blue)" },
                { i: <Icon.Calendar size={16}/>,t: lang === "ro" ? "Comparație lunară — ce s-a schimbat față de aceeași lună anul trecut." : "Month-on-month — what changed vs. the same month last year.", c: "var(--green)" },
              ].map((row, i) => (
                <div key={i} style={{display:"flex", gap:12, alignItems:"flex-start"}}>
                  <span style={{
                    width: 30, height: 30, borderRadius: 8,
                    background: "var(--paper)",
                    color: row.c,
                    display:"grid", placeItems:"center", flexShrink:0
                  }}>{row.i}</span>
                  <p style={{margin:0, fontSize:15, color:"var(--ink-2)", lineHeight:1.55}}>{row.t}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="insight-stack">
            <div className="insight-card">
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:10}}>
                <div className="card-title">{t("cats_t")}</div>
                <span className="card-sub">{t("cats_s")}</span>
              </div>
              <CategoryList compact />
            </div>
            <div className="insight-card" style={{background: "var(--ink)", color: "var(--paper-2)", border: "1px solid var(--ink)"}}>
              <div style={{display:"flex", alignItems:"center", gap:12}}>
                <div style={{
                  width:36, height:36, borderRadius:8,
                  background:"rgba(255,255,255,0.08)",
                  display:"grid", placeItems:"center", color:"var(--amber-2)"
                }}><Icon.Bell size={16}/></div>
                <div>
                  <div style={{fontWeight:500, fontSize:14}}>
                    {lang === "ro" ? "Prag depășit: Combustibil" : "Threshold hit: Fuel"}
                  </div>
                  <div style={{fontSize:13, color:"#C9C3B4"}}>
                    {lang === "ro"
                      ? "12.680 RON din 12.000 RON · mai 2026"
                      : "12,680 RON of 12,000 RON · May 2026"}
                  </div>
                </div>
              </div>
              <div style={{height: 6, background:"rgba(255,255,255,0.1)", borderRadius:999, marginTop:14, overflow:"hidden"}}>
                <div style={{height:"100%", width:"105%", background:"var(--amber)", borderRadius:999}}></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Compliance ---------- */
function Compliance() {
  const { t } = useI18n();
  return (
    <section className="tight">
      <div className="container">
        <div className="compliance">
          <div>
            <h2>{t("comp_title")}</h2>
            <p>{t("comp_p")}</p>
          </div>
          <div className="compliance-meta">
            {[1,2,3,4].map(i => (
              <div key={i}>
                <div className="k">{t(`comp_k${i}`)}</div>
                <div className="l">{t(`comp_l${i}`)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing ---------- */
function Pricing({ onGotoApp }) {
  const { t } = useI18n();
  return (
    <section id="pricing">
      <div className="container">
        <div className="section-eyebrow">{t("pricing_eyebrow")}</div>
        <h2 className="section-title">{t("pricing_title")}</h2>
        <div className="pricing-grid">
          <PriceCard
            name={t("p1_name")} price={t("p1_price")} unit={t("p1_d")} sub={t("p1_sub")}
            items={[t("p1_l1"), t("p1_l2"), t("p1_l3"), t("p1_l4")]}
            cta={t("p_cta_free")} onClick={onGotoApp}
          />
          <PriceCard
            featured
            name={t("p2_name")} price={t("p2_price")} unit={t("p2_d")} sub={t("p2_sub")}
            items={[t("p2_l1"), t("p2_l2"), t("p2_l3"), t("p2_l4"), t("p2_l5")]}
            cta={t("p_cta_pro")} onClick={onGotoApp}
          />
          <PriceCard
            name={t("p3_name")} price={t("p3_price")} unit={t("p3_d")} sub={t("p3_sub")}
            items={[t("p3_l1"), t("p3_l2"), t("p3_l3"), t("p3_l4")]}
            cta={t("p_cta_ent")} onClick={onGotoApp}
          />
        </div>
      </div>
    </section>
  );
}

function PriceCard({ name, price, unit, sub, items, cta, featured, onClick }) {
  const { lang } = useI18n();
  return (
    <div className={"price-card" + (featured ? " featured" : "")}>
      {featured && <span className="featured-tag">{lang === "ro" ? "Recomandat" : "Recommended"}</span>}
      <div>
        <div className="name">{name}</div>
        <div className="card-sub" style={{marginTop:4}}>{sub}</div>
      </div>
      <div>
        <span className="price">{price === "Contact" ? <span className="serif" style={{fontSize:40}}>{price}</span> : <>{price}<small> {unit}</small></>}</span>
        {price !== "Contact" && <div className="card-sub" style={{marginTop:4}}>{unit}</div>}
      </div>
      <ul>
        {items.map((it, i) => (
          <li key={i}>
            <Icon.Check size={15}/> <span>{it}</span>
          </li>
        ))}
      </ul>
      <button
        className={featured ? "btn btn-amber" : "btn btn-ghost"}
        onClick={onClick}
        style={{marginTop:"auto", justifyContent:"center"}}
      >
        {cta} <Icon.ArrowRight size={14}/>
      </button>
    </div>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const { t } = useI18n();
  const [open, setOpen] = React.useState(0);
  const items = [1,2,3,4,5,6];
  return (
    <section id="faq" style={{background:"var(--paper-2)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)"}}>
      <div className="container" style={{maxWidth: 900}}>
        <div className="section-eyebrow">{t("faq_eyebrow")}</div>
        <h2 className="section-title">{t("faq_title")}</h2>
        <div className="faq">
          {items.map(i => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{t(`faq_q${i}`)}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{t(`faq_a${i}`)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const { t } = useI18n();
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="#" className="brand" onClick={(e)=>e.preventDefault()}>
              <span className="brand-mark">A</span>
              ARHIVAR
            </a>
            <p style={{color:"var(--ink-2)", fontSize:14, lineHeight:1.55, marginTop:16, maxWidth:280}}>
              {t("foot_lede")}
            </p>
          </div>
          <div>
            <h5>{t("foot_product")}</h5>
            <ul>
              <li><a href="#features">{t("foot_features")}</a></li>
              <li><a href="#pricing">{t("foot_pricing")}</a></li>
              <li><a href="#">{t("foot_changelog")}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t("foot_company")}</h5>
            <ul>
              <li><a href="#">{t("foot_about")}</a></li>
              <li><a href="#">{t("foot_contact")}</a></li>
              <li><a href="#">{t("foot_blog")}</a></li>
            </ul>
          </div>
          <div>
            <h5>{t("foot_legal")}</h5>
            <ul>
              <li><a href="#">{t("foot_terms")}</a></li>
              <li><a href="#">{t("foot_privacy")}</a></li>
              <li><a href="#">{t("foot_dpa")}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t("foot_copy")}</span>
          <span>contact@arhivar.ro · +40 740 000 000</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Shared bits ---------- */
function fmtRON(n) {
  // Romanian number formatting: 12.345,67
  const abs = Math.abs(n);
  const sign = n < 0 ? "-" : "";
  return sign + abs.toLocaleString("ro-RO", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function BarChart({ compact = false }) {
  const max = Math.max(...CASHFLOW.map(c => Math.max(c.in, c.out)));
  const { lang } = useI18n();
  return (
    <>
      <div className="bars" style={{ height: compact ? 160 : 220 }}>
        {CASHFLOW.map((c, i) => (
          <div key={i} className="bar-col">
            <div className="bar-pair">
              <div className="bar in"  style={{ height: `${(c.in  / max) * 100}%` }} title={`In: ${fmtRON(c.in)}`}></div>
              <div className="bar out" style={{ height: `${(c.out / max) * 100}%` }} title={`Out: ${fmtRON(c.out)}`}></div>
            </div>
          </div>
        ))}
      </div>
      <div style={{display:"grid", gridTemplateColumns:`repeat(${CASHFLOW.length}, 1fr)`, gap: 24}}>
        {CASHFLOW.map((c, i) => (
          <div key={i} className="bar-label">{lang === "ro" ? c.m : c.mEn}</div>
        ))}
      </div>
    </>
  );
}

function CategoryList({ compact = false }) {
  const { lang } = useI18n();
  const total = CATEGORIES.reduce((s, c) => s + c.amount, 0);
  const sorted = [...CATEGORIES].sort((a, b) => b.amount - a.amount);
  const list = compact ? sorted.slice(0, 5) : sorted;
  return (
    <div className="cat-list">
      {list.map(c => (
        <div key={c.id} style={{position:"relative"}}>
          <div className="cat-row">
            <span className="cat-dot" style={{ background: c.color }}></span>
            <span className="cat-name">{lang === "ro" ? c.ro : c.en}</span>
            <span className="cat-amount">{fmtRON(c.amount)} RON</span>
          </div>
          <div className="cat-bar">
            <div style={{ width: `${(c.amount / total) * 100}%`, background: c.color }}></div>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, {
  NavBar, Hero, HowItWorks, Features, Insights, Compliance, Pricing, FAQ, Footer,
  PreviewDashboard, BarChart, CategoryList, fmtRON
});