/* global React */ const { useState, useEffect, useRef } = React; // ============================== ICONS (hairline geometric) ============================== function Arrow({ rotate = 0, size = 16 }) { return ( ); } // ============================== NAV ============================== function Nav({ t, lang, setLang, theme, setTheme, openDemoModal }) { const [shrunk, setShrunk] = useState(false); useEffect(() => { const onScroll = () => setShrunk(window.scrollY > 24); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const logo = theme === "dark" ? "/prosoft_ai_studio_gradient_text_svg/prosoft-ai-studio-gradient-prosoft-titlecase-transparent.svg?v=2" : "/prosoft_ai_studio_gradient_text_svg/prosoft-ai-studio-gradient-prosoft-titlecase-transparent.svg?v=2"; return ( ); } // ============================== HERO ============================== function Hero({ t, openDemoModal }) { return (
{t.hero_eyebrow}

{t.hero_title_a} {t.hero_title_em} {t.hero_title_b}

{t.hero_sub}

{t.hero_cta_ghost}
{t.hero_image_label}
↓87%
{t.hero_metric_1}
↑14×
{t.hero_metric_2}
0
{t.hero_metric_3}
100%
{t.hero_metric_4}
); } // ============================== PROOF ============================== function Proof({ t }) { const logos = ["Atelier Çift", "Maison Nahil", "Studio Verda", "Bey Knit", "Halia Couture", "Form & Loom", "Tarz Atölye", "House of Lale"]; return (
{t.proof_kicker}
{logos.concat(logos).map((l, i) => {l})}
); } // ============================== PROBLEM/SOLUTION ============================== function ProblemSolution({ t }) { return (
{t.ps_eyebrow}

{t.ps_title}

{t.ps_old_title}
{t.ps_old_total}
{t.ps_steps_old.map((s, i) => (
{s[0]} {s[1]}
))}
{t.ps_new_title}
{t.ps_new_total}
{t.ps_steps_new.map((s, i) => (
{s[0]} {s[1]}
))}
); } // ============================== MODULES ============================== function Modules({ t }) { return (
{t.modules_eyebrow}

{t.modules_title_a}13 {t.modules_title_em.replace("13 ", "")}{t.modules_title_b}

{t.modules_intro}

{t.modules.map((m, i) => { const n = String(i + 1).padStart(2, "0"); const reverse = i % 2 === 1; const wide = i === 1 || i === 6 || i === 10; return (
{n} / 13

{m.name}

{m.desc}

    {m.bullets.map((b, j) =>
  • {b}
    • )}
{m.metric}
{i === 0 ? ( {m.name} ) : i === 1 ? ( {m.name} ) : i === 2 ? ( {m.name} ) : i === 3 ? ( {m.name} ) : i === 4 ? ( {m.name} ) : i === 5 ? ( {m.name} ) : i === 6 ? ( {m.name} ) : i === 7 ? ( {m.name} ) : i === 8 ? ( {m.name} ) : i === 9 ? ( {m.name} ) : i === 10 ? ( {m.name} ) : i === 11 ? ( {m.name} ) : i === 12 ? ( {m.name} ) : (
module {n} · ui {wide ? "16 / 11" : "4 / 5"}
)}
); })}
); } // ============================== WORKFLOW DIAGRAM ============================== function WorkflowDiagram({ t }) { return ( ); } // ============================== METRICS BANNER ============================== function MetricsBanner({ t }) { return (
{t.metrics_eyebrow}
{t.metrics.map((m, i) => (
{m[0]}
{m[1]}
))}
); } // ============================== PRICING ============================== function Pricing({ t }) { const moduleNames = t.modules.map(m => m.name); return (
{t.price_eyebrow}

{t.price_title_a}{t.price_title_em}

{t.price_intro}

{t.price_credit_packs}
{t.price_packages.map((p, i) => { const n = String(i + 1).padStart(2, "0"); const planKeys = ["starter", "growth", "scale"]; const buyPlan = () => window.location.href = "/aistudio.html?plan=" + planKeys[i] + "&cycle=monthly"; return (
{n} / 03
{p.popular && {t.price_popular}}

{p.name}

{p.price} {p.unit}
{t.price_for}
{p.for}
{t.price_includes}
    {moduleNames.map((name, j) => (
  • {String(j + 1).padStart(2, "0")}{name}●
    • ))}
); })}
{t.price_byok_title}

{t.price_byok.name}

{t.price_byok_sub}

{t.price_for}
{t.price_byok.for}
{t.price_byok.price} {t.price_byok.unit}
{t.price_includes}
    {moduleNames.map((name, j) => (
  • {String(j + 1).padStart(2, "0")}{name}●
    • ))}
); } // ============================== USE CASES ============================== function UseCases({ t }) { return (
{t.uc_eyebrow}

{t.uc_title}

{t.uc_cases.map((c, i) => (
0{i+1} / 03

{c.role}

{c.story}

{c.roi}
))}
); } // ============================== SUSTAINABILITY ============================== function Sustainability({ t }) { return (
{t.sus_eyebrow}

{t.sus_quote}

{t.sus_caption}

{t.sus_metrics.map((m, i) => (
{m[0]}
{m[1]}
))}
); } // ============================== TESTIMONIAL ============================== function Testimonial({ t }) { return (
{t.test_eyebrow}

{t.test_quote}

Customer Portrait
); } // ============================== CTA ============================== function CTA({ t, openDemoModal }) { return (

{t.cta_title_a}{t.cta_title_em}

{t.cta_sub}

{t.cta_ghost}
); } // ============================== FOOTER ============================== function Footer({ t, theme, openLegalModal }) { const logo = theme === "dark" ? "/prosoft_ai_studio_gradient_text_svg/prosoft-ai-studio-gradient-prosoft-titlecase-transparent.png" : "/prosoft_ai_studio_gradient_text_svg/prosoft-ai-studio-gradient-prosoft-titlecase-transparent.png"; return ( ); } // ============================== DEMO MODAL ============================== function DemoModal({ isOpen, onClose, lang }) { const [status, setStatus] = useState("idle"); const [message, setMessage] = useState(""); if (!isOpen) return null; const handleSubmit = async (e) => { e.preventDefault(); setStatus("loading"); const formData = new FormData(e.target); const object = Object.fromEntries(formData); const json = JSON.stringify(object); try { const response = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: json }); const result = await response.json(); if (response.status === 200) { setStatus("success"); setMessage(lang === "tr" ? "Talebiniz başarıyla alınmıştır. En kısa sürede iletişime geçeceğiz." : "Request received successfully. We will contact you shortly."); setTimeout(() => { onClose(); setTimeout(() => setStatus("idle"), 500); }, 3000); } else { setStatus("error"); setMessage((lang === "tr" ? "Bir hata oluştu: " : "An error occurred: ") + result.message); } } catch (error) { setStatus("error"); setMessage(lang === "tr" ? "Bağlantı hatası oluştu. Lütfen tekrar deneyin." : "Connection error. Please try again."); } }; const isTr = lang === "tr"; return (

Demo {isTr ? "Talep Et" : "Request"}

{isTr ? "Lütfen aşağıdaki bilgileri eksiksiz doldurun. En kısa sürede sizinle iletişime geçeceğiz." : "Please fill out the details below. We will get in touch with you shortly."}

{status === "success" && (
{message}
)} {status === "error" && (
{message}
)}