/* UI — Apple „Buy Mac" stiliaus vienlapė forma. Tie patys klausimai, kitas dizainas.
   Vienas klausimas per ekraną; grafika užima visą kairę pusę; pasirinkus auto-scroll.
   Naudoja: PRICING, MODULE_OPTS, MODULE_PRICE, MODULE_DESCS, WORDS (data.js);
            priceLines, total, planTier, briefText, sendLead, emailOk (logic.js). */
const { useState, useEffect, useRef, useMemo } = React;

const SEC = {
  contact:  { kicker:"Kontaktai.", title:"Kaip tave pasiekti?",           img:"assets/hero-0.jpg" },
  plan:     { kicker:"Planas.",    title:"Pasirink kryptį.",              img:"assets/hero-1.jpg" },
  modules:  { kicker:"Funkcijos.", title:"Ko reikės svetainei?",          img:"assets/hero-2.jpg" },
  style:    { kicker:"Stilius.",   title:"Koks įvaizdis artimiausias?",   img:"assets/hero-3.jpg" },
  logo:     { kicker:"Logotipas.", title:"Reikės logotipo?",              img:"assets/hero-4.jpg" },
  describe: { kicker:"Projektas.", title:"Aprašyk, ko reikia.",           img:"assets/hero-2.jpg" },
  summary:  { kicker:"Užsakymas.", title:"Tavo orientacinis pasiūlymas.", img:"assets/hero-0.jpg" },
};

const PLAN_OPTS = [
  { key:"simple", tier:"Mini", title:"Reprezentacinė svetainė",  desc:"Vizitinė — kelios sekcijos, be papildomų funkcijų.", price:`nuo €${PRICING.base}` },
  { key:"func",   tier:"Midi", title:"Su užsakymu, rezervacija ar pardavimu", desc:"Vienas modulis įskaičiuotas — pvz. užsakymo forma, rezervacija ar mokėjimai.", price:`nuo €${PRICING.midi}` },
  { key:"custom", tier:"Maxi", title:"Didelis projektas",        desc:"El. parduotuvė, sistema, integracijos.", price:`€${PRICING.hourly}/val.` },
];
const LOGO_OPTS = [
  { key:"none",   title:"Nereikia / pasidarysiu pats", desc:"",                       tag:"€0" },
  { key:"ai",     title:"AI logotipas",                desc:"Greitai ir nebrangiai",  tag:`+${PRICING.logo.ai}€` },
  { key:"custom", title:"Dizainerio logotipas",        desc:"Unikalus, rankų darbo",  tag:`+${PRICING.logo.custom}€` },
  { key:"brand",  title:"Brando identitetas",          desc:"Visas firminis stilius", tag:`+${PRICING.logo.brand}€` },
];
const LOGO_LABEL = { none:"Nereikia / pasidarysiu pats", ai:"AI logotipas", custom:"Dizainerio logotipas", brand:"Brando identitetas" };
const isCustom = a => a.intent === "custom";

/* Populiariausi moduliai — iškeliami į viršų ir pažymimi ženkliuku */
const POPULAR_MOD = ["Užsakymo forma","Rezervacija / kalendorius","Mokėjimai svetainėje","Mini parduotuvė"];
const modName = o => o.replace(/\s*\+\d+€$/,"");
const isPopular = o => POPULAR_MOD.includes(modName(o));
const ORDERED_MODULES = (typeof MODULE_OPTS!=="undefined" ? [...MODULE_OPTS] : []).sort((x,y)=>(isPopular(y)?1:0)-(isPopular(x)?1:0));

/* ── Maži komponentai ─────────────────────────────────────────── */
function OptionCard({active,onClick,title,desc,right,rightSub}){
  return (
    <button type="button" onClick={onClick}
      className={"relative text-left w-full rounded-2xl border bg-white px-5 py-4 transition-all duration-150 focus:outline-none "+
        (active ? "border-[#0a0a0a] ring-2 ring-[#0a0a0a]" : "border-[#d2d2d7] hover:border-[#86868b]")}>
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0">
          <div className="font-semibold text-[17px] text-[#1d1d1f] leading-tight">{title}</div>
          {desc && <div className="text-[14px] text-[#6e6e73] mt-1 leading-snug">{desc}</div>}
        </div>
        {right && <div className="text-right shrink-0">
          <div className="text-[15px] font-medium text-[#1d1d1f] whitespace-nowrap">{right}</div>
          {rightSub && <div className="text-[12px] text-[#6e6e73] whitespace-nowrap">{rightSub}</div>}
        </div>}
      </div>
    </button>
  );
}
function CheckTile({active,onClick,title,desc,tag,badge}){
  return (
    <button type="button" onClick={onClick}
      className={"relative text-left rounded-2xl border bg-white px-4 py-3 transition-all duration-150 focus:outline-none "+
        (active ? "border-[#0a0a0a] ring-2 ring-[#0a0a0a]" : "border-[#d2d2d7] hover:border-[#86868b]")}>
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-semibold text-[15px] text-[#1d1d1f] leading-tight">{title}</span>
            {badge && <span className="rounded-full bg-[#FEF100] text-[#0a0a0a] text-[10px] font-semibold px-2 py-0.5 uppercase tracking-wide">Populiaru</span>}
          </div>
          {desc && <div className="text-[12px] text-[#6e6e73] mt-0.5 leading-snug">{desc}</div>}
        </div>
        {tag!=null && <span className="text-[14px] font-medium text-[#1d1d1f] whitespace-nowrap">{tag}</span>}
      </div>
    </button>
  );
}
function SectionHead({kicker,title}){
  return <h2 className="text-[28px] sm:text-[34px] font-semibold tracking-tight leading-tight mb-6">
    <span className="text-[#1d1d1f]">{kicker} </span><span className="text-[#86868b]">{title}</span>
  </h2>;
}
/* Mygtukas: juodas → hover geltonas su juodu tekstu */
const Btn = ({children,onClick,disabled,className=""}) => (
  <button type="button" onClick={onClick} disabled={disabled}
    className={"rounded-full bg-[#0a0a0a] text-white px-7 py-3 text-[16px] font-medium transition-colors duration-150 hover:bg-[#FEF100] hover:text-[#0a0a0a] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-[#0a0a0a] disabled:hover:text-white "+className}>{children}</button>
);

/* Stiliaus žodžių slug'ai paveikslėliams (assets/styles/<slug>.jpg) */
const STYLE_SLUG = {
  "patikimas":"patikimas","modernus":"modernus","jaukus":"jaukus","profesionalus":"profesionalus",
  "drąsus":"drasus","žaismingas":"zaismingas","prabangus":"prabangus","paprastas":"paprastas",
  "ekspertiškas":"ekspertiskas","draugiškas":"draugiskas","minimalistinis":"minimalistinis",
  "energingas":"energingas","natūralus":"naturalus","technologiškas":"technologiskas",
  "tradicinis":"tradicinis","retro":"retro","žurnalinis":"zurnalinis"
};
const styleImg = w => "assets/styles/"+(STYLE_SLUG[w]||w)+".jpg";

/* Stiliaus kortelė: paveikslėlis + ant užvedus rodom aprašymą ir brandus */
const styleMeta = w => ({
  desc: (typeof CHIP_DESCS!=="undefined" && CHIP_DESCS.words && CHIP_DESCS.words[w]) || "",
  brands: (typeof WORD_BRANDS!=="undefined" && WORD_BRANDS[w]) || []
});
const Check = () => <span className="absolute top-2.5 right-2.5 z-10 w-6 h-6 rounded-full bg-[#0a0a0a] text-white flex items-center justify-center text-[12px]">✓</span>;

/* Desktop: minimalus mygtukas (vienas žodis); užvedus pelę iškyla kortelė su paveikslėliu, aprašymu, brandais */
/* Desktop: minimalus mygtukas; užvedus pelę stiliaus paveikslėlis parodomas didelėje kairės grafikoje */
function StylePill({w,active,onClick,onHover}){
  return (
    <button type="button" onClick={onClick}
      onMouseEnter={()=>onHover&&onHover(w)} onMouseLeave={()=>onHover&&onHover(null)}
      onFocus={()=>onHover&&onHover(w)} onBlur={()=>onHover&&onHover(null)}
      className={"rounded-full border px-4 py-2 text-[14px] font-medium transition-all focus:outline-none first-letter:uppercase "+
        (active ? "border-[#0a0a0a] ring-2 ring-[#0a0a0a] bg-[#FEF100]/25 text-[#0a0a0a]" : "border-[#d2d2d7] text-[#1d1d1f] hover:border-[#86868b]")}>{w}</button>
  );
}
/* Mobile: paveikslėlio kortelė horizontaliam skrolui */
function StyleCardMobile({w,active,onClick}){
  return (
    <button type="button" onClick={onClick}
      className={"relative shrink-0 w-[200px] snap-start rounded-2xl overflow-hidden border-2 bg-white transition-all focus:outline-none "+
        (active ? "border-[#0a0a0a]" : "border-[#e5e5e5]")}>
      <div className="relative aspect-video bg-[#f5f5f7]">
        <div className="absolute inset-0 flex items-center justify-center text-[#c7c7cc] text-[12px]">paveikslėlis</div>
        <img src={styleImg(w)} alt={w} onError={e=>{e.currentTarget.style.display="none";}} className="absolute inset-0 w-full h-full object-contain"/>
        {active && <Check/>}
      </div>
      <div className="px-3 py-2 text-[13px] font-medium text-[#1d1d1f] first-letter:uppercase text-left">{w}</div>
    </button>
  );
}

/* ════════════════════════════════════════════════════════════ */
function App(){
  const [a,setA] = useState({});
  const [active,setActive] = useState("contact");
  const [hoverWord,setHoverWord] = useState(null);
  const [leadSent,setLeadSent] = useState(false);
  const [done,setDone] = useState(false);
  const [sending,setSending] = useState(false);
  const refs = useRef({});
  const scrollRef = useRef(null);
  const setRef = id => el => { if(el) refs.current[id]=el; };

  const set = (k,v) => setA(p=>({...p,[k]:v}));
  const toggle = (k,v,lim) => setA(p=>{
    const arr=p[k]||[];
    if(arr.includes(v)) return {...p,[k]:arr.filter(x=>x!==v)};
    if(lim && arr.length>=lim) return p;
    return {...p,[k]:[...arr,v]};
  });

  // srautas priklauso nuo plano: Maxi -> tik aprašymas
  const flow = isCustom(a) ? ["contact","plan","describe","summary"] : ["contact","plan","modules","style","logo","summary"];

  // matomos sekcijos sekimas -> kairės grafika
  useEffect(()=>{
    const obs=new IntersectionObserver(es=>{
      es.forEach(e=>{ if(e.isIntersecting && SEC[e.target.dataset.sec]) setActive(e.target.dataset.sec); });
    },{ root:scrollRef.current||null, rootMargin:"-45% 0px -45% 0px", threshold:0 });
    Object.values(refs.current).forEach(el=>el&&obs.observe(el));
    return ()=>obs.disconnect();
  },[a.intent]);

  const scrollTo = id => { const el=refs.current[id]; if(el) el.scrollIntoView({behavior:"smooth",block:"start"}); };

  const fireLead = () => {
    if(leadSent || !emailOk(a.email)) return;
    setLeadSent(true);
    sendLead("Naujas kontaktas — "+a.email,
      "Lankytojas paliko el. paštą užsakymo formoje:\n\nEl. paštas: "+a.email+"\n\n(Pildymas tęsiamas — jei užbaigs, atskirai ateis pilna užklausa su pasiūlymu.)",
      a.email, "");
  };

  const lines = useMemo(()=>priceLines(a),[a]);
  const tot = useMemo(()=>total(a),[a]);
  const plan = planTier(a);
  const planLabel = isCustom(a) ? "Maxi" : plan;
  const modNames = (()=>{ const m=(a.modules||[]).map(x=>x.replace(/\s*\+\d+€$/,"")); if((a.modules_other||"").trim()) m.push(a.modules_other.trim()); return m; })();
  const styleNames = [...(a.words||[]), (a.words_other||"").trim()].filter(Boolean);

  const submit = async () => {
    setSending(true);
    if(emailOk(a.email)){
      // Laiškas — TIK tai, ką žmogus realiai užpildė šioje formoje
      const L = [
        "NAUJA UŽKLAUSA (object.lt)",
        "──────────────────────────────",
        "El. paštas: " + a.email,
        "Planas: " + planLabel,
      ];
      if(isCustom(a)){
        L.push("Tipas: Didelis projektas (Maxi) — kaina pagal valandą (€" + PRICING.hourly + "/val.)");
        L.push("");
        L.push("PROJEKTO APRAŠYMAS:");
        L.push((a.custom_desc||"").trim() || "—");
      } else {
        L.push("Funkcijos: " + (modNames.length ? modNames.join(", ") : "—"));
        L.push("Stilius: " + (styleNames.length ? styleNames.join(", ") : "—"));
        L.push("Logotipas: " + (LOGO_LABEL[a.logo] || "—"));
        L.push("");
        L.push("ORIENTACINĖ KAINA:");
        lines.forEach(l => L.push("  • " + l[0] + ": " + (l[1] < 0 ? "sutartinė" : l[1] === 0 ? "įskaičiuota" : "€" + l[1])));
        L.push("  ──────");
        L.push("  Iš viso: €" + tot);
      }
      L.push("");
      L.push("(Užklausa neįpareigojanti — apmokėti nereikia.)");
      const subject = "Nauja užklausa — " + a.email + " — " + (isCustom(a) ? "Maxi (sutartinė)" : plan + " €" + tot);
      sendLead(subject, L.join("\n"), a.email, "");
      // Google Ads konversija — forma pateikta (fiksuojasi tik jei vartotojas sutiko su slapukais)
      try { if (window.gtag) gtag("event", "conversion", { send_to: "AW-18283124314/62B4CMLblswcENqsiY5E" }); } catch (e) {}
    }
    setSending(false);
    setDone(true);
  };

  if(done) return (
    <div className="min-h-screen flex items-center justify-center px-6 bg-white">
      <div className="max-w-md text-center fade">
        <div className="w-16 h-16 rounded-full bg-[#1d1d1f] text-white flex items-center justify-center text-3xl mx-auto mb-5">✓</div>
        <h1 className="text-[28px] font-semibold tracking-tight mb-2">Gavome tavo užklausą!</h1>
        <p className="text-[#6e6e73] text-[17px] leading-relaxed">Ačiū. Peržiūrėsim ir susisieksim el. paštu <span className="text-[#1d1d1f] font-medium">{a.email}</span> su konkrečiu pasiūlymu. Tai neįpareigoja — apmokėti dabar nereikia.</p>
        <a href="https://object.lt" className="inline-block mt-7 text-[15px] font-medium text-[#0a0a0a] underline underline-offset-2 hover:opacity-70">← Grįžti į object.lt</a>
      </div>
    </div>
  );

  const priceText = isCustom(a) ? "Pagal valandą" : "≈ €"+tot;
  const canSubmit = emailOk(a.email) && !!a.intent && (!isCustom(a) || (a.custom_desc||"").trim());
  const secWrap = "min-h-screen lg:h-screen snap-start flex flex-col justify-center py-16";
  const secWrapTall = "min-h-screen snap-start flex flex-col justify-center py-16";

  return (
    <div className="bg-white text-[#1d1d1f] lg:h-screen lg:overflow-hidden">
      {/* KAIRĖ — grafika per visą kairę pusę */}
      <div className="hidden lg:block fixed top-0 left-0 w-1/2 h-screen bg-[#0a0a0a] overflow-hidden">
        {flow.map(id=>(
          <img key={id} src={SEC[id].img} alt="" onError={e=>{e.currentTarget.style.display="none";}}
            className={"absolute inset-0 w-full h-full object-cover transition-opacity duration-700 "+(id===active&&!hoverWord?"opacity-100":"opacity-0")}/>
        ))}
        {/* Stiliaus peržiūra: užvedus pelę ant stiliaus mygtuko — paveikslėlis visu dydžiu */}
        {hoverWord && (()=>{ const {desc,brands}=styleMeta(hoverWord); return (
          <div className="absolute inset-0 bg-[#0a0a0a] flex flex-col fade">
            <div className="flex-1 flex items-center justify-center px-10 pt-16 pb-4">
              <img src={styleImg(hoverWord)} alt={hoverWord} onError={e=>{e.currentTarget.style.display="none";}} className="max-w-full max-h-full object-contain rounded-xl shadow-2xl"/>
            </div>
            <div className="px-10 pb-14">
              <div className="text-white text-[26px] font-semibold tracking-tight first-letter:uppercase">{hoverWord}</div>
              {desc && <div className="text-white/70 text-[15px] mt-1">{desc}</div>}
              {brands.length>0 && <div className="flex flex-wrap gap-2 mt-3">
                {brands.map(b=>(<span key={b} className="rounded-md bg-white/10 text-white/90 px-2.5 py-1 text-[12px] font-medium">{b}</span>))}
              </div>}
            </div>
          </div>
        ); })()}
        <a href="/" className="absolute top-7 left-9 z-10"><img src="assets/object_logo_white.svg" alt="OBJECT" className="h-5 w-auto"/></a>
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2 z-10">
          {flow.map(id=>(<span key={id} className={"h-1.5 rounded-full transition-all "+(id===active?"bg-white w-6":"bg-white/40 w-1.5")}/>))}
        </div>
      </div>

      {/* viršutinis info — kaina */}
      <div className="fixed top-0 right-0 z-30 lg:w-1/2 w-full flex items-center justify-between lg:justify-end gap-4 px-5 sm:px-10 py-4 pointer-events-none">
        <a href="/" className="lg:hidden pointer-events-auto"><img src="assets/object_logo_white.svg" alt="OBJECT" className="h-4 w-auto" style={{filter:"brightness(0)"}}/></a>
        <span className="rounded-full bg-white/90 backdrop-blur border border-[#e8e8ed] px-4 py-1.5 text-[14px] font-semibold tabular-nums shadow-sm pointer-events-auto">{priceText}</span>
      </div>

      {/* DEŠINĖ — slenkami klausimai, po vieną per ekraną */}
      <div ref={scrollRef} className="lg:ml-[50%] lg:w-1/2 lg:h-screen lg:overflow-y-auto lg:snap-y lg:snap-mandatory">
        <div className="px-6 sm:px-12 lg:px-16">

          {/* 1. KONTAKTAI */}
          <section data-sec="contact" ref={setRef("contact")} className={secWrap}>
            <div className="max-w-md w-full">
              <SectionHead kicker={SEC.contact.kicker} title={SEC.contact.title}/>
              <label className="block">
                <span className="text-[13px] font-medium text-[#1d1d1f]">El. paštas <span className="text-[#86868b]">*</span></span>
                <input type="email" value={a.email||""} onChange={e=>set("email",e.target.value)} onBlur={fireLead} placeholder="vardas@pastas.lt"
                  className="mt-1.5 w-full rounded-xl border border-[#d2d2d7] bg-white px-4 py-3.5 text-[16px] outline-none focus:border-[#0a0a0a] focus:ring-2 focus:ring-[#0a0a0a]/20 transition-all"/>
              </label>
              <p className="text-[14px] text-[#86868b] mt-3">El. paštu atsiųsim pasiūlymą. Pasirink toliau — viskas viename ekrane.</p>
              <Btn onClick={()=>scrollTo("plan")} disabled={!emailOk(a.email)} className="mt-7">Toliau</Btn>
            </div>
          </section>

          {/* 2. PLANAS */}
          <section data-sec="plan" ref={setRef("plan")} className={secWrap}>
            <div className="max-w-lg w-full">
              <SectionHead kicker={SEC.plan.kicker} title={SEC.plan.title}/>
              <div className="space-y-3">
                {PLAN_OPTS.map(o=>(
                  <OptionCard key={o.key} active={a.intent===o.key}
                    onClick={()=>{ set("intent",o.key); setTimeout(()=>scrollTo(o.key==="custom"?"describe":"modules"),200); }}
                    title={o.title} desc={o.desc} right={o.price} rightSub={o.tier}/>
                ))}
              </div>
              <Btn onClick={()=>scrollTo(isCustom(a)?"describe":"modules")} disabled={!a.intent} className="mt-6">Toliau</Btn>
            </div>
          </section>

          {/* 3. FUNKCIJOS (tik ne Maxi) */}
          {!isCustom(a) && <section data-sec="modules" ref={setRef("modules")} className={secWrap}>
            <div className="max-w-lg w-full">
              <SectionHead kicker={SEC.modules.kicker} title={SEC.modules.title}/>
              <p className="text-[14px] text-[#6e6e73] -mt-3 mb-4">Pridėjus funkciją planas tampa Midi — brangiausia funkcija įskaičiuota. <span className="text-[#1d1d1f] font-medium">Populiariausi: užsakymo forma, rezervacija, mokėjimai.</span></p>
              <div className="grid sm:grid-cols-2 gap-2.5">
                {ORDERED_MODULES.map(o=>{ const name=modName(o);
                  return <CheckTile key={o} active={(a.modules||[]).includes(o)} onClick={()=>toggle("modules",o)}
                    title={name} desc={MODULE_DESCS[name]} tag={"+"+MODULE_PRICE[o]+"€"} badge={isPopular(o)}/>; })}
              </div>
              <input value={a.modules_other||""} onChange={e=>set("modules_other",e.target.value)} placeholder="Kita funkcija — įrašyk savo (kainą suderinsim)"
                className="mt-3 w-full rounded-xl border border-[#d2d2d7] bg-white px-4 py-2.5 text-[15px] outline-none focus:border-[#0a0a0a] focus:ring-2 focus:ring-[#0a0a0a]/20 transition-all"/>
              <Btn onClick={()=>scrollTo("style")} className="mt-6">Toliau</Btn>
            </div>
          </section>}

          {/* 4. STILIUS (tik ne Maxi) */}
          {!isCustom(a) && <section data-sec="style" ref={setRef("style")} className={secWrapTall}>
            <div className="max-w-xl w-full">
              <SectionHead kicker={SEC.style.kicker} title={SEC.style.title}/>
              <p className="text-[14px] text-[#6e6e73] -mt-3 mb-5">Pasirink iki 3 krypčių. <span className="hidden lg:inline">Užvedęs pelę matysi stiliaus paveikslėlį.</span></p>
              {/* mobile: horizontalus paveikslėlių skrolas */}
              <div className="lg:hidden -mx-6 px-6 flex gap-3 overflow-x-auto snap-x snap-mandatory pb-3 no-sb">
                {WORDS.map(w=>(
                  <StyleCardMobile key={w} w={w} active={(a.words||[]).includes(w)} onClick={()=>toggle("words",w,3)}/>
                ))}
              </div>
              {/* desktop: minimalūs mygtukai; užvedus pelę — kortelė su paveikslėliu/aprašymu/brandais */}
              <div className="hidden lg:flex flex-wrap gap-2">
                {WORDS.map(w=>(
                  <StylePill key={w} w={w} active={(a.words||[]).includes(w)} onClick={()=>toggle("words",w,3)} onHover={setHoverWord}/>
                ))}
              </div>
              <input value={a.words_other||""} onChange={e=>set("words_other",e.target.value)} placeholder="Kita — įrašyk savo stilių"
                className="mt-3 w-full max-w-md rounded-xl border border-[#d2d2d7] bg-white px-4 py-2.5 text-[15px] outline-none focus:border-[#0a0a0a] focus:ring-2 focus:ring-[#0a0a0a]/20 transition-all"/>
              {(a.words||[]).length>0
                ? <div className="mt-5">
                    <div className="text-[13px] text-[#86868b] mb-2">Pasirinkti stiliai ({(a.words||[]).length} iš 3)</div>
                    <div className="flex flex-wrap gap-3">
                      {(a.words||[]).map(w=>(
                        <div key={w} className="relative w-[132px] rounded-xl overflow-hidden border border-[#e5e5e5] bg-white">
                          <div className="aspect-video bg-[#f5f5f7]"><img src={styleImg(w)} alt={w} onError={e=>{e.currentTarget.style.display="none";}} className="w-full h-full object-contain"/></div>
                          <div className="px-2 py-1.5 text-[12px] font-medium text-[#1d1d1f] first-letter:uppercase truncate">{w}</div>
                          <button type="button" onClick={()=>toggle("words",w)} title="Pašalinti" className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-black/65 text-white text-[13px] leading-none flex items-center justify-center hover:bg-red-600 transition-colors">×</button>
                        </div>
                      ))}
                    </div>
                  </div>
                : <div className="text-[13px] text-[#86868b] mt-4">Pasirink iki 3 stilių</div>}
              <Btn onClick={()=>scrollTo("logo")} className="mt-6">Toliau</Btn>
            </div>
          </section>}

          {/* 5. LOGOTIPAS (tik ne Maxi) */}
          {!isCustom(a) && <section data-sec="logo" ref={setRef("logo")} className={secWrap}>
            <div className="max-w-lg w-full">
              <SectionHead kicker={SEC.logo.kicker} title={SEC.logo.title}/>
              <div className="space-y-3">
                {LOGO_OPTS.map(o=>(
                  <OptionCard key={o.key} active={a.logo===o.key}
                    onClick={()=>{ set("logo",o.key); setTimeout(()=>scrollTo("summary"),200); }}
                    title={o.title} desc={o.desc} right={o.tag}/>
                ))}
              </div>
              <Btn onClick={()=>scrollTo("summary")} disabled={!a.logo} className="mt-6">Toliau</Btn>
            </div>
          </section>}

          {/* MAXI — projekto aprašymas vietoj klausimų */}
          {isCustom(a) && <section data-sec="describe" ref={setRef("describe")} className={secWrap}>
            <div className="max-w-lg w-full">
              <SectionHead kicker={SEC.describe.kicker} title={SEC.describe.title}/>
              <p className="text-[14px] text-[#6e6e73] -mt-3 mb-4">Didelis projektas — vietoj klausimų tiesiog aprašyk, ką nori sukurti (apimtis, funkcijos, integracijos, terminai).</p>
              <textarea value={a.custom_desc||""} onChange={e=>set("custom_desc",e.target.value)} rows={7}
                placeholder="Pvz.: Reikia el. parduotuvės su ~500 prekių, atsiskaitymais, vartotojų paskyromis, integracija su sandėliu…"
                className="w-full rounded-xl border border-[#d2d2d7] bg-white px-4 py-3 text-[15px] outline-none focus:border-[#0a0a0a] focus:ring-2 focus:ring-[#0a0a0a]/20 transition-all resize-none"/>
              <Btn onClick={()=>scrollTo("summary")} disabled={!(a.custom_desc||"").trim()} className="mt-5">Toliau</Btn>
            </div>
          </section>}

          {/* 6. SANTRAUKA */}
          <section data-sec="summary" ref={setRef("summary")} className={secWrap}>
            <div className="max-w-lg w-full">
              <SectionHead kicker={SEC.summary.kicker} title={SEC.summary.title}/>
              <p className="text-[14px] text-[#6e6e73] -mt-3 mb-5">Štai ką pasirinkai. Užklausa neįpareigoja — apmokėti dabar nereikia.</p>
              <div className="rounded-2xl border border-[#d2d2d7] bg-[#f5f5f7] p-5 space-y-3">
                <Row label="Planas" value={planLabel}/>
                {isCustom(a)
                  ? <Row label="Aprašymas" value={(a.custom_desc||"").trim()||"—"}/>
                  : <>
                      <Row label="Funkcijos" value={modNames.length?modNames.join(", "):"Be papildomų funkcijų (Mini)"}/>
                      <Row label="Stilius" value={styleNames.length?styleNames.join(", "):"—"}/>
                      <Row label="Logotipas" value={LOGO_LABEL[a.logo]||"—"}/>
                    </>}
              </div>
              {!isCustom(a) ? (
                <div className="mt-3 rounded-2xl border border-[#1d1d1f] bg-[#1d1d1f] text-white p-5">
                  <div className="text-[12px] uppercase tracking-wide text-white/50 mb-2 font-medium">Orientacinė kaina · {plan}</div>
                  <ul className="space-y-1 text-[14px] text-white/80 mb-3">{lines.map((l,i)=>(<li key={i} className="flex justify-between gap-4"><span>{l[0]}</span><span>{l[1]<0?"sutartinė":l[1]===0?"įskaičiuota":"€"+l[1]}</span></li>))}</ul>
                  <div className="flex justify-between border-t border-white/20 pt-2 text-[18px] font-semibold"><span>Iš viso</span><span>€{tot}</span></div>
                </div>
              ) : (
                <div className="mt-3 rounded-2xl border border-[#1d1d1f] bg-[#1d1d1f] text-white p-5 text-[14px] text-white/80">
                  Didelis projektas skaičiuojamas pagal valandą (€{PRICING.hourly}/val.). Tikslią apimtį ir kainą suderinsim susisiekę.
                </div>
              )}
              <Btn onClick={submit} disabled={!canSubmit||sending} className="mt-6 w-full sm:w-auto">{sending?"Siunčiama…":"Siųsti užklausą"}</Btn>
              {!canSubmit && <p className="text-[13px] text-[#86868b] mt-2">{isCustom(a)?"Įvesk el. paštą ir aprašyk projektą, kad galėtum siųsti.":"Įvesk el. paštą ir pasirink planą, kad galėtum siųsti."}</p>}
            </div>
          </section>

        </div>
      </div>
    </div>
  );
}
function Row({label,value}){
  return <div className="flex justify-between gap-4">
    <span className="text-[13px] uppercase tracking-wide text-[#86868b] font-medium pt-0.5 shrink-0">{label}</span>
    <span className="text-[15px] text-[#1d1d1f] text-right">{value}</span>
  </div>;
}

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