// ============================================================
// HOME PAGE — Hero + ServicesPreview + Packages + Cert + Portfolio + Stats + About + Contact
// Requires shared.jsx loaded first (window-globals)
// ============================================================

// ============================================================
// SERVICES PREVIEW — 4 carduri featured + buton "Vezi toate"
// ============================================================
function ServicesPreview({ lang }) {
  const t = i18n[lang];
  const featured = SERVICES.filter((s) => FEATURED_SERVICE_IDS.includes(s.id));
  return (
    <section id="services" className="border-b border-line">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16" data-comment-anchor="13506fd569-div-14-7">
        <SectionHeader num={t.services_num} title={t.services_title} meta={t.services_meta} />
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {featured.map((s) =>
          <a key={s.id} href={`servicii.html#${s.id}`}
          className="group rounded-xl border border-line bg-paper p-7 hover:border-navy/40 hover:shadow-[0_8px_24px_rgba(14,42,71,0.06)] transition-all">
              <div className="w-14 h-14 rounded-full bg-navy/5 group-hover:bg-yel/30 flex items-center justify-center transition-colors">
                <ServiceIcon path={s.path} size={28} />
              </div>
              <h3 className="font-sora font-semibold text-[18px] mt-5 leading-tight tracking-[-0.01em]">
                {lang === 'ro' ? s.label_ro : s.label_en}
              </h3>
              <p className="mt-2 text-[13.5px] leading-relaxed text-ink/70">
                {lang === 'ro' ? s.desc_ro : s.desc_en}
              </p>
              <div className="mt-5 inline-flex items-center gap-1.5 text-[13px] font-sora font-semibold text-navy/80 group-hover:text-yel-700 transition-colors">
                <span style={{ borderBottom: '2px solid #F5C518' }}>{t.services_more}</span>
                <ArrowRightIcon />
              </div>
            </a>
          )}
        </div>
        <div className="mt-10 flex justify-center">
          <a href="servicii.html"
          className="inline-flex items-center gap-2 bg-navy text-paper font-sora font-semibold px-7 py-3.5 rounded-full hover:bg-ink transition-colors focus-yel">
            <span>{t.services_see_all}</span>
            <ArrowRightIcon />
          </a>
        </div>
      </div>
    </section>);

}

// ============================================================
// PACKAGES
// ============================================================
function PackagesGrid({ lang, prefillContact }) {
  const t = i18n[lang];
  return (
    <section id="packages" className="border-b border-line">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16">
        <SectionHeader num={t.packages_num} title={t.packages_title} meta={t.packages_meta} />
        <Mono className="block mb-8" style={{ color: '#0E2A47' }}>
          <span className="inline-block w-3 h-3 bg-yel rounded-full mr-2 align-middle" />
          {t.packages_label}
        </Mono>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {PACKAGES.map((p) =>
          <article key={p.id}
          className={`relative rounded-2xl border ${p.highlight ? 'border-navy bg-navy text-paper' : 'border-line bg-paper'} p-7 md:p-8 flex flex-col`}>
              {p.highlight &&
            <div className="absolute -top-3 left-7 px-3 py-1 bg-yel text-navy font-mono text-[10px] tracking-[0.22em] rounded-full">★ TOP</div>
            }
              <div className="flex items-center gap-2">
                <div className={`w-12 h-12 rounded-full flex items-center justify-center ${p.highlight ? 'bg-paper/10' : 'bg-navy/5'}`}>
                  <ServiceIcon path={SERVICES.find((s) => s.id === 'camera').path} size={26} color={p.highlight ? '#F4F1EA' : '#0E2A47'} />
                </div>
                <div className={`w-12 h-12 -ml-3 rounded-full flex items-center justify-center ${p.highlight ? 'bg-paper/10' : 'bg-navy/5'} ring-4 ${p.highlight ? 'ring-navy' : 'ring-paper'}`}>
                  <ServiceIcon path={SERVICES.find((s) => s.id === 'lock').path} size={26} color={p.highlight ? '#F4F1EA' : '#0E2A47'} />
                </div>
              </div>
              <Mono className={`mt-6 ${p.highlight ? 'text-yel' : 'text-muted'}`}>{p.tag}</Mono>
              <h3 className="font-sora font-semibold text-[22px] md:text-[24px] tracking-[-0.01em] mt-2 leading-tight">
                {lang === 'ro' ? p.title_ro : p.title_en}
              </h3>
              <ul className="mt-5 space-y-2.5 text-[14.5px] leading-relaxed">
                {(lang === 'ro' ? p.items_ro : p.items_en).map((it, i) =>
              <li key={i} className="flex gap-3">
                    <span className={`shrink-0 mt-2 w-1.5 h-1.5 rounded-full ${p.highlight ? 'bg-yel' : 'bg-navy'}`} />
                    <span className={p.highlight ? 'text-paper/85' : 'text-ink/80'}>{it}</span>
                  </li>
              )}
              </ul>
              <div className={`my-6 border-t ${p.highlight ? 'border-paper/15' : 'border-line'}`} />
              <div className="flex items-baseline gap-2">
                <span className="font-sora font-semibold text-[36px] tracking-[-0.02em] leading-none">
                  {p.price.toLocaleString('ro-RO')}
                </span>
                <span className="font-mono text-[12px] tracking-[0.2em] opacity-70">{t.packages_currency}</span>
              </div>
              <Mono className={`mt-1 ${p.highlight ? 'text-paper/60' : 'text-muted'}`}>{t.packages_vat}</Mono>
              <button
              onClick={() => prefillContact(lang === 'ro' ? `Cerere ofertă - ${p.title_ro}` : `Quote request - ${p.title_en}`, 'Pachet rezidențial')}
              className={`mt-7 inline-flex items-center justify-center gap-2 rounded-full font-sora font-semibold px-6 py-3.5 transition-colors focus-yel
                           ${p.highlight ? 'bg-yel text-navy hover:bg-yel/90' : 'bg-navy text-paper hover:bg-ink'}`}>
                <span>{t.packages_cta}</span><ArrowRightIcon />
              </button>
            </article>
          )}
        </div>
      </div>
    </section>);

}

// ============================================================
// CERTIFICATIONS
// ============================================================
function CertificationsGrid({ lang }) {
  const t = i18n[lang];
  return (
    <section id="certifications" className="border-b border-line">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16" data-comment-anchor="286c65ab16-div-117-7">
        <SectionHeader num={t.cert_num} title={t.cert_title} meta={t.cert_meta} />
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {CERTIFICATIONS.map((c) => {
            const hasPdf = c.pdf_url && c.pdf_url !== '#';
            return (
              <div key={c.id} className="group rounded-xl border border-line bg-paper hover:border-navy/40 transition-colors flex flex-col overflow-hidden">
                <div className="relative aspect-[2/1] bg-[#e9e3d2] border-b border-line overflow-hidden">
                  <div className="absolute inset-0 opacity-30" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(14,42,71,.18) 1px, transparent 0)', backgroundSize: '14px 14px' }} />
                  {hasPdf ? (
                    <div className="absolute inset-x-5 top-5 bottom-5 rounded-[3px] shadow-[0_4px_18px_rgba(14,42,71,0.12)] overflow-hidden bg-white">
                      <iframe
                        src={`${c.pdf_url}#toolbar=0&navpanes=0&scrollbar=0`}
                        style={{ width: '794px', height: '420px', transform: 'scale(0.33)', transformOrigin: 'top left', border: 'none', pointerEvents: 'none' }}
                        title={lang === 'ro' ? c.title_ro : c.title_en}
                      />
                    </div>
                  ) : (
                    <div className="absolute inset-x-5 top-5 bottom-5 bg-white shadow-[0_4px_18px_rgba(14,42,71,0.12)] rounded-[3px] flex flex-col">
                      <div className="absolute top-0 right-0 w-5 h-5" style={{ background: '#e9e3d2', clipPath: 'polygon(100% 0, 0 0, 100% 100%)' }} />
                      <div className="px-3 pt-3 pb-2 border-b border-line/70">
                        <div className="font-mono text-[7px] tracking-[0.2em] text-navy/55">{c.tag}</div>
                        <div className="font-sora font-semibold text-[8px] mt-1 leading-tight text-navy line-clamp-2">
                          {lang === 'ro' ? c.title_ro : c.title_en}
                        </div>
                      </div>
                      <div className="px-3 py-2.5 space-y-1.5 flex-1">
                        <div className="h-[3px] bg-navy/20 rounded-full w-full" />
                        <div className="h-[3px] bg-navy/15 rounded-full w-[92%]" />
                        <div className="h-[3px] bg-navy/15 rounded-full w-[88%]" />
                        <div className="h-[3px] bg-navy/10 rounded-full w-[60%]" />
                        <div className="h-[6px]" />
                        <div className="h-[3px] bg-navy/15 rounded-full w-full" />
                        <div className="h-[3px] bg-navy/15 rounded-full w-[80%]" />
                        <div className="h-[3px] bg-navy/10 rounded-full w-[70%]" />
                        <div className="flex items-end justify-between pt-3">
                          <div className="flex flex-col gap-1">
                            <div className="h-[3px] bg-navy/15 rounded-full w-12" />
                            <div className="h-[3px] bg-navy/10 rounded-full w-10" />
                          </div>
                          <div className="w-9 h-9 rounded-full border-[1.5px] border-yel/80 flex items-center justify-center text-yel font-mono font-semibold text-[7px]">
                            {c.tag.split(' ')[0].slice(0, 4)}
                          </div>
                        </div>
                      </div>
                      <div className="px-3 py-1.5 border-t border-line/70 flex items-center justify-between">
                        <div className="font-mono text-[6px] tracking-[0.2em] text-navy/40">EPT · ROMÂNIA</div>
                        <div className="font-mono text-[6px] tracking-[0.2em] text-navy/40">P.1</div>
                      </div>
                    </div>
                  )}
                  <div className="absolute top-3 left-3 px-2 py-1 bg-navy text-paper font-mono text-[9px] tracking-[0.2em] rounded">PDF</div>
                  {hasPdf && (
                    <a href={c.pdf_url} target="_blank" rel="noopener noreferrer"
                      className="absolute inset-0 bg-navy/0 group-hover:bg-navy/35 transition-colors flex items-end justify-center pb-4 opacity-0 group-hover:opacity-100">
                      <div className="flex items-center gap-2 px-3 py-1.5 bg-yel text-navy rounded-full font-mono text-[10px] tracking-[0.18em]">
                        <DownloadIcon /><span>{t.cert_download}</span>
                      </div>
                    </a>
                  )}
                </div>
                <div className="p-5 flex flex-col flex-1">
                  <Mono className="text-muted">{c.tag}</Mono>
                  <h4 className="font-sora font-semibold text-[17px] mt-1.5 leading-tight tracking-[-0.01em]">
                    {lang === 'ro' ? c.title_ro : c.title_en}
                  </h4>
                  <p className="mt-2 text-[13px] leading-relaxed text-ink/70 flex-1">
                    {lang === 'ro' ? c.desc_ro : c.desc_en}
                  </p>
                  {hasPdf ? (
                    <a href={c.pdf_url} target="_blank" rel="noopener noreferrer"
                      className="mt-4 inline-flex items-center gap-1.5 text-[13px] font-sora font-semibold text-navy hover:text-yel-700 transition-colors">
                      <span style={{ borderBottom: '1px solid #F5C518' }}>{t.cert_download}</span>
                      <DownloadIcon />
                    </a>
                  ) : (
                    <span className="mt-4 inline-flex items-center gap-1.5 text-[13px] font-sora font-semibold text-navy/30 cursor-not-allowed select-none">
                      <span>{t.cert_download}</span>
                      <DownloadIcon />
                    </span>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>);

}

// ============================================================
// PORTFOLIO
// ============================================================
function PortfolioGrid({ lang }) {
  const t = i18n[lang];
  const cats = { res: t.portfolio_filter_res, com: t.portfolio_filter_com, ind: t.portfolio_filter_ind, pv: t.portfolio_filter_pv };
  const featured = PROJECTS.slice(0, 3);
  return (
    <section id="portfolio" className="border-b border-line">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16">
        <SectionHeader num={t.portfolio_num} title={t.portfolio_title} meta={t.portfolio_meta} />
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {featured.map((p) =>
          <a key={p.id} href={`portofoliu.html#${p.id}`}
          className="group rounded-xl overflow-hidden border border-line bg-paper hover:border-yel transition-all hover:scale-[1.01] block">
              <div className="aspect-[16/10] bg-navy overflow-hidden">
                <img src={p.image} alt={lang === 'ro' ? p.title_ro : p.title_en}
              className="w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-500" />
              </div>
              <div className="p-6">
                <Mono className="text-muted">{cats[p.category]} · {lang === 'ro' ? p.loc_ro : p.loc_en}</Mono>
                <h4 className="font-sora font-semibold text-[18px] mt-2 leading-tight tracking-[-0.01em]">
                  {lang === 'ro' ? p.title_ro : p.title_en}
                </h4>
                <p className="mt-2 text-[14px] leading-relaxed text-ink/70">
                  {lang === 'ro' ? p.desc_ro : p.desc_en}
                </p>
                <span className="mt-4 inline-flex items-center gap-1 text-[13px] font-sora font-semibold text-navy group-hover:text-yel-700 transition-colors">
                  {t.portfolio_view} →
                </span>
              </div>
            </a>
          )}
        </div>
        <div className="mt-10 flex justify-center">
          <a href="portofoliu.html"
          className="inline-flex items-center gap-2 text-[14px] font-sora font-semibold text-navy hover:text-yel-700"
          style={{ borderBottom: '2px solid #F5C518', paddingBottom: '2px' }}>
            {lang === 'ro' ? 'Vezi toate proiectele' : 'See all projects'} <ArrowRightIcon />
          </a>
        </div>
      </div>
    </section>);

}

// ============================================================
// STATS
// ============================================================
function StatsBand({ lang }) {
  const t = i18n[lang];
  return (
    <section className="bg-navy text-paper relative overflow-hidden">
      <div className="absolute inset-0 dot-pattern-light pointer-events-none" />
      <div className="relative max-w-7xl mx-auto px-6 md:px-10 py-10 md:py-14 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4">
        {STATS.map((s) =>
        <div key={s.key} className="text-center md:text-left">
            <div className="font-sora font-semibold text-yel text-[44px] md:text-[60px] leading-none tracking-[-0.02em]">{s.value}</div>
            <div className="font-mono uppercase tracking-[0.22em] text-[11px] mt-3 text-paper/60">{t[s.key]}</div>
          </div>
        )}
      </div>
    </section>);

}

// ============================================================
// ABOUT
// ============================================================
function About({ lang }) {
  const t = i18n[lang];
  return (
    <section id="about" className="border-b border-line">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20" data-comment-anchor="043d4f9d21-div-262-7">
        <div>
          <SectionHeader num={t.about_num} title={t.about_title} />
          <p className="text-[17px] leading-relaxed text-ink/80">{t.about_p1}</p>
          <p className="text-[17px] leading-relaxed text-ink/80 mt-5">{t.about_p2}</p>
        </div>
        <div className="relative bg-navy rounded-2xl overflow-hidden min-h-[420px] flex items-center justify-center p-10">
          <div className="absolute inset-0 dot-pattern-light pointer-events-none" />
          <div className="relative flex flex-col items-center gap-6">
            <Logo size="L" dark />
            <div className="text-center font-sora">
              <div className="text-[22px] font-semibold tracking-tight text-paper">
                Energy<span style={{ color: '#F5C518' }}>.</span>
              </div>
              <div className="text-[22px] font-light tracking-tight text-paper">Profi Team</div>
            </div>
          </div>
          <div className="absolute bottom-8 left-8 right-8 flex items-center gap-3">
            <div className="w-10 h-px bg-yel" />
            <Mono className="text-paper/70">{t.hero_tagline}</Mono>
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// PARTNERS — marquee with logos
// ============================================================
const PARTNERS = [
  { name: 'Hikvision',       logo: 'logos/hikvision.png' },
  { name: 'Ajax',            logo: 'logos/ajax.png' },
  { name: 'Schrack Seconet', logo: 'logos/schrack-seconet.png' },
  { name: 'Schrack Technik', logo: 'logos/schrack-technik.png' },
  { name: 'Legrand',         logo: 'logos/legrand.png' },
  { name: 'Gewiss',          logo: 'logos/gewiss.png' },
  { name: 'Huawei',          logo: 'logos/huawei.png' },
  { name: 'Polon-Alfa',      logo: 'logos/polon-alfa.png' },
  { name: 'Bosch',           logo: 'logos/bosch.png' },
  { name: 'Honeywell',       logo: 'logos/honeywell.png' },
  { name: 'Axis',            logo: 'logos/axis.png' },
  { name: 'Hanwha Vision',   logo: 'logos/hanwha-vision.png' },
  { name: 'Inim',            logo: 'logos/inim.png' },
];

function PartnersSection({ lang }) {
  return (
    <section className="border-b border-line bg-paper">
      <div className="max-w-7xl mx-auto px-6 md:px-10 pt-12 md:pt-16 pb-3">
        <div className="font-mono uppercase tracking-[0.22em] text-[12px] opacity-55">
          {lang === 'ro' ? 'PARTENERI' : 'PARTNERS'}
        </div>
      </div>
      <div className="relative marquee-mask overflow-hidden pb-10 md:pb-12">
        <div className="flex items-center w-max marquee-track">
          {[...PARTNERS, ...PARTNERS].map((p, i) => (
            <div key={i} className="shrink-0 h-14 md:h-16 px-7 md:px-10 flex items-center justify-center">
              <img src={p.logo} alt={p.name}
                   loading="lazy"
                   draggable="false"
                   className="max-h-full max-w-[180px] md:max-w-[220px] object-contain select-none pointer-events-none" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CONTACT
// ============================================================
function Field({ label, error, children, className = '' }) {
  return (
    <label className={`block ${className}`}>
      <span className="block font-mono uppercase tracking-[0.18em] text-[11px] text-muted mb-2">{label}</span>
      {children}
      {error && <span className="block text-red-700 text-[12px] mt-1.5">{error}</span>}
    </label>);

}

function InfoRow({ icon, label, value, href }) {
  const inner =
  <>
      <div className="w-10 h-10 rounded-full bg-navy/5 flex items-center justify-center shrink-0">{icon}</div>
      <div className="min-w-0">
        <div className="font-mono uppercase tracking-[0.2em] text-[11px] text-muted">{label}</div>
        <div className="font-sora font-medium text-[15px] mt-1 truncate">{value}</div>
      </div>
    </>;

  return href ?
  <a href={href} className="flex items-start gap-4 hover:text-yel-700 transition-colors group">{inner}</a> :

  <div className="flex items-start gap-4">{inner}</div>;

}

function ContactForm({ lang, form, setForm }) {
  const t = i18n[lang];
  const C = window.CONTACT || {};
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const update = (k, v) => setForm({ ...form, [k]: v });

  const sendToTelegram = (f) => {
    const cfg = window.EPT_TELEGRAM;
    if (!cfg || !cfg.bot_token || !cfg.chat_id) return;
    const text = [
      '📩 *Solicitare nouă — energyprofiteam.ro*', '',
      `*Nume:* ${f.name}`,
      `*Email:* ${f.email}`,
      f.phone ? `*Telefon:* ${f.phone}` : null,
      `*Subiect:* ${f.subject}`,
      `*Mesaj:*\n${f.message}`
    ].filter(Boolean).join('\n');
    fetch(`https://api.telegram.org/bot${cfg.bot_token}/sendMessage`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ chat_id: cfg.chat_id, text, parse_mode: 'Markdown' })
    }).catch(() => {});
  };

  const sendToNetlify = (f) => {
    const body = new URLSearchParams({ 'form-name': 'contact', ...f }).toString();
    fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body })
      .catch(() => {});
  };

  const submit = () => {
    const e = {};
    if (!form.name.trim()) e.name = t.contact_form_required;
    if (!form.email.trim()) e.email = t.contact_form_required;else
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = t.contact_form_email_invalid;
    if (!form.subject) e.subject = t.contact_form_required;
    if (!form.message.trim()) e.message = t.contact_form_required;
    if (!form.gdpr) e.gdpr = t.contact_form_required;
    setErrors(e);
    if (Object.keys(e).length === 0) {
      sendToTelegram(form);
      sendToNetlify(form);
      setSent(true);
    }
  };
  const inputCls = "w-full bg-paper border border-line rounded-lg px-4 py-3 text-[15px] text-ink placeholder-ink/40 focus:outline-none focus:border-navy transition-colors";
  return (
    <section id="contact" className="border-b border-line bg-paper">
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-12 md:py-16">
        <SectionHeader num={t.contact_num} title={t.contact_title} meta={t.contact_meta} />
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-16">
          <div className="lg:col-span-2 space-y-7">
            <InfoRow icon={<MapIcon />} label={t.contact_address} value={t.contact_address_v} />
            <InfoRow icon={<PhoneIcon />} label={t.contact_phone} value={C.phone || '+40 700 000 000'} href={C.phone_link || 'tel:+40700000000'} />
            <InfoRow icon={<MailIcon />} label={t.contact_email} value={C.email || 'contact@energyprofiteam.ro'} href={`mailto:${C.email || 'contact@energyprofiteam.ro'}`} />
            <InfoRow icon={<ClockIcon />} label={t.contact_hours} value={t.contact_hours_v} />
            <div className="pt-4 border-t border-line flex items-center gap-3">
              <a href="#" aria-label="Facebook" className="w-10 h-10 rounded-full border border-line flex items-center justify-center hover:bg-navy hover:text-paper hover:border-navy transition-colors"><FacebookIcon /></a>
              <a href="#" aria-label="LinkedIn" className="w-10 h-10 rounded-full border border-line flex items-center justify-center hover:bg-navy hover:text-paper hover:border-navy transition-colors"><LinkedInIcon /></a>
            </div>
          </div>
          <div className="lg:col-span-3">
            {sent ?
            <div className="rounded-2xl border-2 border-yel bg-paper p-10 fade-up">
                <div className="w-14 h-14 rounded-full bg-yel flex items-center justify-center mb-5"><CheckIcon /></div>
                <h3 className="font-sora font-semibold text-[22px] tracking-tight">{t.contact_form_success}</h3>
              </div> :

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <Field label={`${t.contact_form_name} *`} error={errors.name}>
                  <input className={inputCls} value={form.name} onChange={(e) => update('name', e.target.value)} />
                </Field>
                <Field label={`${t.contact_form_email} *`} error={errors.email}>
                  <input type="email" className={inputCls} value={form.email} onChange={(e) => update('email', e.target.value)} />
                </Field>
                <Field label={t.contact_form_phone}>
                  <input type="tel" className={inputCls} value={form.phone} onChange={(e) => update('phone', e.target.value)} />
                </Field>
                <Field label={`${t.contact_form_subject} *`} error={errors.subject}>
                  <select className={inputCls} value={form.subject} onChange={(e) => update('subject', e.target.value)}>
                    <option value="">{t.contact_form_subject_choose}</option>
                    {t.contact_form_subject_opts.map((o, i) => <option key={i} value={o}>{o}</option>)}
                  </select>
                </Field>
                <Field label={`${t.contact_form_message} *`} error={errors.message} className="sm:col-span-2">
                  <textarea rows="5" className={inputCls + ' resize-none'} value={form.message} onChange={(e) => update('message', e.target.value)} />
                </Field>
                <label className="sm:col-span-2 flex items-start gap-3 text-[14px] text-ink/75 cursor-pointer select-none">
                  <input type="checkbox" checked={form.gdpr} onChange={(e) => update('gdpr', e.target.checked)} className="mt-1 w-4 h-4 accent-navy" />
                  <span>{t.contact_form_gdpr} {errors.gdpr && <span className="text-red-700 text-[12px] ml-2">{errors.gdpr}</span>}</span>
                </label>
                <div className="sm:col-span-2 mt-2">
                  <button onClick={submit}
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2 bg-yel text-navy font-sora font-semibold px-8 py-4 rounded-full hover:bg-yel/90 transition-colors focus-yel">
                    <span>{t.contact_form_submit}</span><ArrowRightIcon />
                  </button>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

// ============================================================
// APP
// ============================================================
// ============================================================
// UX HELPERS — Back-to-top, Sticky CTA, Scroll progress
// ============================================================
function ScrollProgress() {
  const [pct, setPct] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setPct(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className="fixed top-0 left-0 right-0 z-[100] h-[3px] bg-transparent pointer-events-none">
      <div className="h-full bg-yel transition-[width] duration-100" style={{ width: `${pct}%` }} />
    </div>
  );
}

function BackToTop() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      aria-label="Back to top"
      className={`fixed bottom-6 right-6 z-40 w-12 h-12 rounded-full bg-navy text-paper flex items-center justify-center shadow-[0_10px_30px_rgba(14,42,71,0.30)] transition-all hover:bg-ink hover:scale-105
        ${show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4 pointer-events-none'}`}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 19V5" /><path d="M5 12l7-7 7 7" />
      </svg>
    </button>
  );
}

function StickyMobileCTA({ lang }) {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      // Hide near very top (hero CTAs are visible) and at very bottom (contact form visible)
      const y = window.scrollY;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setShow(y > 500 && y < max - 700);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href="#contact"
      className={`lg:hidden fixed bottom-6 left-1/2 -translate-x-1/2 z-40 inline-flex items-center gap-2 bg-yel text-navy font-sora font-semibold px-6 py-3 rounded-full shadow-[0_10px_30px_rgba(14,42,71,0.30)] transition-all
        ${show ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8 pointer-events-none'}`}>
      <PhoneIcon />
      <span className="text-[14px]">{lang === 'ro' ? 'Solicită ofertă' : 'Get a quote'}</span>
    </a>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scrollProgress": true,
  "backToTop": true,
  "stickyMobileCta": true
}/*EDITMODE-END*/;

// ============================================================
// APP
// ============================================================
function App() {
  const [lang, setLang] = useState('ro');
  const [mobileOpen, setMobileOpen] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', phone: '', subject: '', message: '', gdpr: false });
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Accept ?subject=...&tag=... from oferte.html prefill
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const subject = params.get('subject');
    const tag = params.get('tag');
    if (subject) {
      setForm((f) => ({ ...f, subject: tag || subject, message: subject }));
      setTimeout(() => {
        const el = document.getElementById('contact');
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 300);
    }
  }, []);

  const prefillContact = (msg, subject) => {
    setForm((f) => ({ ...f, subject, message: msg }));
    setTimeout(() => {
      const el = document.getElementById('contact');
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 50);
  };
  return (
    <div className="bg-paper text-navy min-h-screen" style={{ textAlign: "justify" }}>
      {tweaks.scrollProgress && <ScrollProgress />}
      {tweaks.backToTop && <BackToTop />}
      {tweaks.stickyMobileCta && <StickyMobileCTA lang={lang} />}
      <Header lang={lang} setLang={setLang} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
      <main>
        <Hero lang={lang} />
        <ServicesPreview lang={lang} />
        <PortfolioGrid lang={lang} />
        <StatsBand lang={lang} />
        <About lang={lang} />
        <PartnersSection lang={lang} />
        <CertificationsGrid lang={lang} />
        <ContactForm lang={lang} form={form} setForm={setForm} />
      </main>
      <Footer lang={lang} />

      <TweaksPanel title={lang === 'ro' ? 'Tweaks UX' : 'UX Tweaks'}>
        <TweakSection label={lang === 'ro' ? 'Asistenți de navigare' : 'Navigation helpers'}>
          <TweakToggle
            label={lang === 'ro' ? 'Bară progres derulare' : 'Scroll progress bar'}
            description={lang === 'ro' ? 'Linie galbenă sus, vizibilă cât derulezi pagina.' : 'Yellow bar at top, visible while you scroll.'}
            value={tweaks.scrollProgress}
            onChange={(v) => setTweak('scrollProgress', v)} />
          <TweakToggle
            label={lang === 'ro' ? 'Buton înapoi sus' : 'Back-to-top button'}
            description={lang === 'ro' ? 'Apare după 600px de scroll.' : 'Appears after 600px of scrolling.'}
            value={tweaks.backToTop}
            onChange={(v) => setTweak('backToTop', v)} />
          <TweakToggle
            label={lang === 'ro' ? 'CTA mobil flotant' : 'Floating mobile CTA'}
            description={lang === 'ro' ? 'Buton "Solicită ofertă" pe mobil, vizibil când derulezi.' : '"Get a quote" button on mobile, visible while scrolling.'}
            value={tweaks.stickyMobileCta}
            onChange={(v) => setTweak('stickyMobileCta', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>);

}

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