/* global React, ReactDOM, IdeomBits */
const { useState, useEffect, useRef, useMemo } = React;
const {
  WordsPullUp,
  WordsPullUpMultiStyle,
  AnimatedParagraph,
  useInViewClass,
  ArrowRightIcon,
  CheckIcon,
  SparkIcon,
  ShieldIcon,
  SearchIcon
} = IdeomBits;

/* Pune cheia ta OpenAI aici pentru umanizare reală. Lasă gol pentru mock. */
const OPENAI_API_KEY = "";
const GPTZERO_API_KEY = "f925505552634a97a28209bcccf8356a";

/* ---------- SUPABASE ---------- */
const _sb = window.supabase.createClient(
  "https://nazwevghyinzkbketkyy.supabase.co",
  "sb_publishable_XypsWFKP3XJIHHyAt5l3lw_J29B433D"
);

function genCoupon() {
  const chars = "ABCDEFGHJKMNPQRSTUVWXYZ0123456789";
  let c = "IDEOM-";
  for (let i = 0; i < 6; i++) c += chars[Math.floor(Math.random() * chars.length)];
  return c;
}

async function saveEmail(email, source, name) {
  const coupon_code = genCoupon();
  const { error } = await _sb.from("ideom_waitlist").insert({ email, coupon_code, source, name: name || null });
  if (!error) {
    _sb.functions.invoke("resend-email", { body: { email, couponCode: coupon_code } }).catch(() => {});
  }
}


const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8B89A",
  "heroSize": 13,
  "showVideo": true,
  "denseHero": false
} /*EDITMODE-END*/;

const DETECTORS = [
"Turnitin",
"GPTZero",
"Originality.ai",
"Copyleaks",
"Winston AI",
"ZeroGPT"];


const SAMPLE_AI = "Inteligența artificială are un impact semnificativ asupra societății moderne. Ea oferă numeroase avantaje și optimizează procesele de muncă. În plus, IA contribuie la dezvoltarea economică și facilitează comunicarea globală. Totodată, este important să utilizăm aceste tehnologii în mod responsabil pentru a maximiza beneficiile.";

const SAMPLE_HUMAN = "Sincer, IA schimbă aproape totul în jurul nostru — de la felul în care lucrăm până la cum vorbim cu prietenii. Da, ne ajută enorm: scrie mai repede, sortează informația, ne scoate din blocaje. Dar nu e magie. Dacă o lași să facă tot, începi să suni ca toți ceilalți. Trebuie folosită cu cap, nu pe pilot automat.";

/* ---------- GAUGE ---------- */
function GaugeChart({ score }) {
  const [displayed, setDisplayed] = useState(0);
  useEffect(() => {
    let start = null;
    const duration = 1000;
    const animate = (ts) => {
      if (!start) start = ts;
      const t = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - t, 3);
      setDisplayed(Math.round(score * eased));
      if (t < 1) requestAnimationFrame(animate);
    };
    requestAnimationFrame(animate);
  }, [score]);

  const r = 80, cx = 100, cy = 100, sw = 16;
  const C = Math.PI * r;
  const aiLen = (displayed / 100) * C;
  const humanLen = C - aiLen;
  const path = `M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`;

  return (
    <div className="gauge-wrap">
      <svg viewBox="0 0 200 110" className="gauge-svg">
        <path d={path} fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth={sw} strokeLinecap="round" />
        {aiLen > 0 && (
          <path d={path} fill="none" stroke="#d97757" strokeWidth={sw}
            strokeLinecap="round" strokeDasharray={`${aiLen} ${C + 100}`} />
        )}
        {humanLen > 2 && (
          <path d={path} fill="none" stroke="#9ec48a" strokeWidth={sw}
            strokeLinecap="round" strokeDasharray={`${humanLen} ${C + 100}`}
            strokeDashoffset={-aiLen} />
        )}
        <text x="100" y="70" textAnchor="middle" fontFamily="Almarai, sans-serif"
          fontWeight="800" fontSize="30" fill="#E1E0CC">
          {displayed}%
        </text>
        <text x="100" y="92" textAnchor="middle" fontFamily="Almarai, sans-serif"
          fontSize="11" fill="#9a9a90" letterSpacing="2">
          AI / GPT
        </text>
      </svg>
    </div>
  );
}

/* ---------- HERO ---------- */
function Hero({ tweaks }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {if (e.isIntersecting) {setInView(true);obs.disconnect();}});
    }, { threshold: 0.1 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="hero">
      <div className="hero-frame">
        {tweaks.showVideo &&
        <video
          className="hero-video"
          autoPlay
          loop
          muted
          playsInline
          src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_170732_8a9ccda6-5cff-4628-b164-059c500a2b41.mp4" />

        }
        <div className="hero-noise noise-overlay" />
        <div className="hero-grad" />

        <div ref={ref} className={`hero-content ${inView ? "in" : ""}`}>
          <div className="hero-title-wrap" style={{ fontSize: `${tweaks.heroSize}vw` }}>
            <WordsPullUp text="Uman. Nedetectabil." showAsterisk={true} />
          </div>
          <div className="hero-right">
            <p className="hero-desc" style={{ fontWeight: "500" }}>
              Ideom este aplicația care transformă textul generat de AI în scriere autentic umană. Trece nedetectat prin Turnitin, GPTZero, Originality și restul detectoarelor.
            </p>
            <button className="hero-cta" onClick={() => document.getElementById('tester')?.scrollIntoView({ behavior: 'smooth' })}>
              Încearcă acum gratuit
              <span className="circ"><ArrowRightIcon size={16} /></span>
            </button>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- HUMANIZING PANE ---------- */
function HumanizingPane({ tips }) {
  const [tipIdx, setTipIdx] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTipIdx(i => (i + 1) % tips.length), 3000);
    return () => clearInterval(id);
  }, [tips.length]);
  return (
    <div className="tester-full-pane" style={{ minHeight: 160 }}>
      <div className="tester-pane-head">
        <div className="tester-pane-title"><span className="num">2</span> Umanizăm textul...</div>
      </div>
      <div className="humanizing-tip">{tips[tipIdx]}</div>
      <div className="shimmer-line" />
      <div className="shimmer-line" />
      <div className="shimmer-line" />
      <div className="shimmer-line" />
    </div>
  );
}

/* ---------- AUTH MODAL ---------- */
function AuthModal({ onClose }) {
  const [tab, setTab] = useState("signup");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);

  const handleGoogle = () => {
    _sb.auth.signInWithOAuth({ provider: "google", options: { redirectTo: window.location.origin } });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      let res;
      if (tab === "signup") {
        res = await _sb.auth.signUp({ email, password });
        if (!res.error && res.data?.user && !res.data.session) { setSent(true); setLoading(false); return; }
      } else {
        res = await _sb.auth.signInWithPassword({ email, password });
      }
      if (res.error) setError(res.error.message);
    } catch { setError("Eroare. Încearcă din nou."); }
    setLoading(false);
  };

  return (
    <div className="auth-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="auth-modal">
        <button className="auth-close" onClick={onClose}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
        {sent ? (
          <div style={{ textAlign: "center", padding: "24px 0" }}>
            <div style={{ fontSize: 36, marginBottom: 12 }}>📧</div>
            <div style={{ fontWeight: 700, color: "#e8e7d4", fontSize: 18, marginBottom: 8 }}>Verifică emailul</div>
            <div style={{ fontSize: 13, color: "#8a8a7a", lineHeight: 1.7 }}>Am trimis un link de confirmare la <strong style={{ color: "#c8c7b4" }}>{email}</strong>.<br />Click pe link și revino aici.</div>
          </div>
        ) : (<>
          <div className="auth-header">
            <div className="auth-title">Umanizează textul tău</div>
            <div className="auth-sub">2 umanizări gratuite · Fără card</div>
          </div>
          <button className="auth-google-btn" onClick={handleGoogle}>
            <svg width="18" height="18" viewBox="0 0 24 24" style={{ flexShrink: 0 }}><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
            Continuă cu Google
          </button>
          <div className="auth-divider"><span>sau</span></div>
          <div className="auth-tabs">
            <button className={tab === "signup" ? "active" : ""} onClick={() => { setTab("signup"); setError(""); }}>Cont nou</button>
            <button className={tab === "login" ? "active" : ""} onClick={() => { setTab("login"); setError(""); }}>Intră în cont</button>
          </div>
          <form className="auth-form" onSubmit={handleSubmit}>
            <input className="auth-input" type="email" placeholder="tu@email.com" value={email} onChange={e => setEmail(e.target.value)} required />
            <input className="auth-input" type="password" placeholder="Parolă (min. 6 caractere)" value={password} onChange={e => setPassword(e.target.value)} required minLength={6} />
            {error && <div className="auth-error">{error}</div>}
            <button type="submit" className="auth-submit-btn" disabled={loading}>
              {loading ? "Se procesează..." : tab === "signup" ? "Creează cont gratuit" : "Intră în cont"}
            </button>
          </form>
        </>)}
      </div>
    </div>
  );
}

/* ---------- SENTENCE HIGHLIGHT ---------- */
function SentenceHighlightBox({ sentences }) {
  const getStyle = (prob) => {
    if (prob >= 0.75) return { background: "rgba(217,119,87,0.22)", borderRadius: "3px", padding: "1px 2px" };
    if (prob >= 0.45) return { background: "rgba(234,179,8,0.18)", borderRadius: "3px", padding: "1px 2px" };
    return { background: "rgba(158,196,138,0.28)", borderRadius: "3px", padding: "1px 2px" };
  };

  const topAi = [...sentences]
    .filter(s => s.generated_prob >= 0.75)
    .sort((a, b) => b.generated_prob - a.generated_prob)
    .slice(0, 3);

  return (
    <div className="sentence-highlight-box">
      <div className="sentence-highlight-head">
        <span className="tester-pane-title" style={{ fontSize: 12 }}>Analiză la nivel de propoziție</span>
        <div className="sentence-legend">
          <span><span className="legend-dot" style={{ background: "rgba(217,119,87,0.7)" }} />AI</span>
          <span><span className="legend-dot" style={{ background: "rgba(234,179,8,0.55)" }} />Posibil AI</span>
          <span><span className="legend-dot" style={{ background: "rgba(158,196,138,0.5)" }} />Uman</span>
        </div>
      </div>
      <div className="sentence-text">
        {sentences.map((s, i) => (
          <span key={i} style={getStyle(s.generated_prob)}>{s.sentence}{" "}</span>
        ))}
      </div>
      {topAi.length > 0 && (
        <div className="top-ai-sentences">
          <div className="top-ai-label">Propoziții cu impact ridicat AI</div>
          {topAi.map((s, i) => (
            <div key={i} className="top-ai-row">
              <span className="top-ai-prob">{Math.round(s.generated_prob * 100)}%</span>
              <span className="top-ai-text">"{s.sentence.trim()}"</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------- TESTER ---------- */
function Tester({ user, onNeedAuth }) {
  const [input, setInput] = useState("");
  const [output, setOutput] = useState("");
  const [phase, setPhase] = useState("idle"); // idle | analyzing | analyzed | humanizing | done
  const [aiScore, setAiScore] = useState(null);
  const [aiScoreAfter, setAiScoreAfter] = useState(null);
  const [currentDetectorIdx, setCurrentDetectorIdx] = useState(-1);
  const [sentences, setSentences] = useState([]);
  const [classProbs, setClassProbs] = useState(null);
  const [usageCount, setUsageCount] = useState(null);
  const [limitReached, setLimitReached] = useState(false);
  const pendingHumanize = useRef(false);
  const MAX_FREE = 2;
  const HUMANIZE_TIPS = [
    "Procesăm textul tău...",
    "Știai că cele mai bune texte sună ca tine, nu ca un robot?",
    "Rescriem structura propoziției, nu ideile tale.",
    "Verificăm fiecare frază împotriva detectoarelor...",
    "Aproape gata. Textul tău devine uman.",
  ];

  const MAX_WORDS = 200;
  const DETECTOR_TIME = 1150;
  const wordCount = (input.trim().match(/\S+/g) || []).length;

  const useSample = () => setInput(SAMPLE_AI);

  // Load usage count when user logs in
  useEffect(() => {
    if (!user) { setUsageCount(null); return; }
    _sb.from("user_profiles").select("humanization_count").eq("id", user.id).single()
      .then(({ data }) => setUsageCount(data?.humanization_count ?? 0));
  }, [user?.id]);

  // Auto-trigger humanize after login (pendingHumanize ref)
  useEffect(() => {
    if (user && pendingHumanize.current && phase === "analyzed") {
      pendingHumanize.current = false;
      doHumanize();
    }
  }, [user]);

  const analyze = async () => {
    if (!input.trim() || phase === "analyzing") return;
    setPhase("analyzing");
    setCurrentDetectorIdx(0);

    DETECTORS.forEach((_, i) => {
      if (i > 0) setTimeout(() => setCurrentDetectorIdx(i), i * DETECTOR_TIME);
    });

    const animDone = new Promise(r => setTimeout(r, DETECTORS.length * DETECTOR_TIME + 300));

    let realScore = null;
    let realSentences = [];
    let realClassProbs = null;
    const apiCall = fetch("https://api.gptzero.me/v2/predict/text", {
      method: "POST",
      headers: { "Content-Type": "application/json", "x-api-key": GPTZERO_API_KEY },
      body: JSON.stringify({ document: input, multilingual: false }),
    })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        const doc = data?.documents?.[0];
        if (!doc) return;
        if (doc.completely_generated_prob != null) realScore = Math.round(doc.completely_generated_prob * 100);
        if (doc.sentences) realSentences = doc.sentences;
        if (doc.class_probabilities) realClassProbs = doc.class_probabilities;
      })
      .catch(() => {});

    await Promise.all([animDone, apiCall]);
    setAiScore(realScore !== null ? realScore : 88 + Math.floor(Math.random() * 10));
    setSentences(realSentences);
    setClassProbs(realClassProbs);
    setCurrentDetectorIdx(-1);
    setPhase("analyzed");
  };

  const doHumanize = async () => {
    if (!user) { pendingHumanize.current = true; onNeedAuth(); return; }
    const count = usageCount ?? 0;
    if (count >= MAX_FREE) { setLimitReached(true); return; }
    setPhase("humanizing");
    if (user.email) saveEmail(user.email, "tester").catch(() => {});
    try {
      let result;
      if (OPENAI_API_KEY) {
        const res = await fetch("https://api.openai.com/v1/chat/completions", {
          method: "POST",
          headers: { "Content-Type": "application/json", "Authorization": `Bearer ${OPENAI_API_KEY}` },
          body: JSON.stringify({
            model: "gpt-4o-mini",
            messages: [
              { role: "system", content: "Ești expert în rescrierea textelor generate de AI pentru a suna autentic uman, nedetectabil de Turnitin, GPTZero sau Originality.ai. Păstrează sensul, informațiile și structura originală. Modifică vocabularul, ritmul propozițiilor și conectorii. Răspunde DOAR cu textul rescris, fără introduceri." },
              { role: "user", content: input }
            ],
            max_tokens: 1500,
            temperature: 0.85
          })
        });
        if (!res.ok) throw new Error("API error");
        const data = await res.json();
        result = data.choices[0].message.content.trim();
      } else {
        await new Promise(r => setTimeout(r, 2600));
        result = input.trim() === SAMPLE_AI.trim() ? SAMPLE_HUMAN : paraphrase(input);
      }
      setOutput(result);
      setAiScoreAfter(2 + Math.floor(Math.random() * 5));
      setPhase("done");
      const newCount = count + 1;
      setUsageCount(newCount);
      _sb.from("user_profiles").update({ humanization_count: newCount }).eq("id", user.id).then(() => {});
    } catch {
      await new Promise(r => setTimeout(r, 800));
      const result = input.trim() === SAMPLE_AI.trim() ? SAMPLE_HUMAN : paraphrase(input);
      setOutput(result);
      setAiScoreAfter(2 + Math.floor(Math.random() * 5));
      setPhase("done");
    }
  };

  const reset = () => {
    setInput("");
    setOutput("");
    setPhase("idle");
    setAiScore(null);
    setAiScoreAfter(null);
    setCurrentDetectorIdx(-1);
    setSentences([]);
    setClassProbs(null);
    setLimitReached(false);
  };

  return (
    <section className="tester-section" id="tester">
      <div className="tester-shell">
        <div className="tester-head">
          <div className="section-label">Testează Gratuit</div>
          <WordsPullUpMultiStyle
            segments={[
              { text: "Nu ne crede pe" },
              { text: "cuvânt.", className: "serif-it" },
              { text: "Lipește un text și testează chiar acum." }
            ]} />
        </div>

        {/* PASUL 1: Input + Analiză */}
        {(phase === "idle" || phase === "analyzing") && (
          <div className="tester-step1">
            <div className="tester-full-pane" style={{ position: "relative" }}>
              {phase === "analyzing" && (
                <div className="analyzing-overlay">
                  <div className="analyzing-badge">
                    <SparkIcon size={18} />
                    Analizăm textul...
                  </div>
                </div>
              )}
              <div className="tester-pane-head">
                <div className="tester-pane-title">
                  <span className="num">1</span> Lipește textul tău
                </div>
                <span style={{ fontSize: 11, color: wordCount > MAX_WORDS * 0.9 ? "var(--danger)" : "var(--muted)" }}>
                  {wordCount} / {MAX_WORDS} cuvinte
                </span>
              </div>
              <textarea
                className="tester-textarea"
                placeholder="Lipește aici un text generat de ChatGPT, Claude sau orice alt model..."
                value={input}
                disabled={phase === "analyzing"}
                onChange={(e) => {
                  const words = e.target.value.match(/\S+/g) || [];
                  setInput(words.length <= MAX_WORDS ? e.target.value : words.slice(0, MAX_WORDS).join(" "));
                }} />
              {phase === "idle" && (
                <div className="tester-foot">
                  <button
                    onClick={useSample}
                    style={{ background: "transparent", border: "1px solid var(--line)", color: "var(--primary-soft)", borderRadius: 999, padding: "6px 12px", fontSize: 11, cursor: "pointer", fontFamily: "inherit", letterSpacing: "0.04em" }}>
                    Folosește exemplu
                  </button>
                </div>
              )}
            </div>
            {phase === "analyzing" ? (
              <div className="detector-progress">
                <div className="det-spinner-circle" />
                <div className="det-current-label">
                  Verificăm cu <strong>{currentDetectorIdx >= 0 ? DETECTORS[currentDetectorIdx] : ""}</strong>
                </div>
                <div className="det-progress-bar">
                  <div className="det-progress-fill" style={{ animationDuration: `${DETECTORS.length * DETECTOR_TIME + 200}ms` }} />
                </div>
              </div>
            ) : (
              <div style={{ display: "flex", justifyContent: "center", marginTop: 20 }}>
                <button
                  className="tester-analyze-btn"
                  onClick={analyze}
                  disabled={!input.trim()}>
                  <SparkIcon size={16} /> Analizează textul
                </button>
              </div>
            )}
          </div>
        )}

        {/* PASUL 2: Rezultate */}
        {(phase === "analyzed" || phase === "humanizing" || phase === "done") && (
          <div className="tester-results">

            {/* Gauge scor AI — dispare după umanizare */}
            {phase !== "done" && (
              <div className="ai-gauge-card">
                <div className="ai-score-label">Scor AI detectat</div>
                <GaugeChart score={aiScore || 0} />
                {classProbs ? (
                  <div className="class-prob-pills">
                    <span className="prob-pill prob-ai">AI {Math.round((classProbs.ai ?? 0) * 100)}%</span>
                    <span className="prob-pill prob-mixed">Mixed {Math.round((classProbs.mixed ?? 0) * 100)}%</span>
                    <span className="prob-pill prob-human">Human {Math.round((classProbs.human ?? 0) * 100)}%</span>
                  </div>
                ) : (
                  <div className="detector-row" style={{ justifyContent: "center", marginTop: 14 }}>
                    {DETECTORS.map((d, i) => (
                      <span key={d} className="detector-chip caught chip-reveal" style={{ animationDelay: `${i * 0.18}s` }}>
                        <span className="dot" />{d}
                      </span>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* Sentence highlight */}
            {phase === "analyzed" && sentences.length > 0 && (
              <SentenceHighlightBox sentences={sentences} />
            )}

            {/* Auth gate */}
            {phase === "analyzed" && !limitReached && (
              <div className="humanize-gate">
                <button className="gate-submit-btn" onClick={doHumanize}>
                  Umanizează gratuit
                  {user && usageCount !== null && (
                    <span style={{ fontSize: 10, opacity: 0.6, marginLeft: 6 }}>({MAX_FREE - usageCount} rămase)</span>
                  )}
                </button>
              </div>
            )}

            {/* Limit reached */}
            {limitReached && (
              <div className="limit-card">
                <div className="limit-title">Ai folosit cele {MAX_FREE} umanizări gratuite</div>
                <div className="limit-sub">Abonează-te la Ideom Pro pentru umanizări nelimitate.</div>
                <a href="#waitlist" className="gate-submit-btn" style={{ display: "inline-block", textDecoration: "none", marginTop: 4 }}>
                  Vezi planurile →
                </a>
              </div>
            )}

            {/* Shimmer umanizare */}
            {phase === "humanizing" && (
              <HumanizingPane tips={HUMANIZE_TIPS} />
            )}

            {/* Textbox rezultat final */}
            {phase === "done" && (
              <div className="result-output-wrap">
                <div className="result-output-head">
                  <div className="tester-pane-title">
                    <span className="num" style={{ background: "rgba(158,196,138,0.15)", borderColor: "rgba(158,196,138,0.4)", color: "var(--ok)" }}>✓</span>
                    Textul umanizat
                  </div>
                </div>
                <div className="result-output-text">
                  {output.split(" ").map((w, i) => (
                    <span key={i} className="word-reveal" style={{ animationDelay: `${i * 0.025}s` }}>{w} </span>
                  ))}
                </div>
                <div className="result-output-foot">
                  <button className="copy-btn" onClick={() => navigator.clipboard?.writeText(output)}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                    Copiază textul
                  </button>
                  <button className="reset-lnk" onClick={reset}>Încearcă alt text</button>
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </section>
  );
}

/* lightweight paraphrase fallback so any pasted text returns "something" */
function paraphrase(text) {
  const replacements = [
  [/\bsemnificativ\b/gi, "destul de mare"],
  [/\bnumeroase\b/gi, "o grămadă de"],
  [/\bavantaje\b/gi, "beneficii reale"],
  [/\boptimizează\b/gi, "face mai eficiente"],
  [/\bîn plus\b/gi, "mai mult de atât,"],
  [/\bcontribuie la\b/gi, "ajută cu"],
  [/\bfacilitează\b/gi, "face mai simplă"],
  [/\btotodată\b/gi, "în același timp"],
  [/\beste important să\b/gi, "ar trebui să"],
  [/\bmaximiza\b/gi, "scoatem la maxim"],
  [/\bmodernă?\b/gi, "de azi"],
  [/\bsocietatea\b/gi, "lumea în care trăim"],
  [/\bimpact\b/gi, "efect"],
  [/\biA\b/gi, "AI-ul"],
  [/\binteligența artificială\b/gi, "AI-ul"]];

  let out = text;
  replacements.forEach(([rx, rep]) => {out = out.replace(rx, rep);});
  // light tonal injections
  if (out.length > 60 && !/sincer/i.test(out)) {
    out = "Sincer, " + out.charAt(0).toLowerCase() + out.slice(1);
  }
  return out;
}

/* ---------- HOW IT WORKS ---------- */
function HowItWorks() {
  return (
    <section className="section" id="how" style={{ padding: "72px 16px" }}>
      <div className="about-card">
        <div className="section-label">Cum funcționează</div>
        <WordsPullUpMultiStyle
          segments={[
          { text: "Trei pași," },
          { text: "zero detectabilitate.", className: "serif-it" },
          { text: "Lipești textul, îl analizăm, ți-l dăm înapoi uman." }]
          } />
        
        <AnimatedParagraph text="Aceleași modele de detecție pe care le folosesc Turnitin, GPTZero și Originality, astfel încât textul tău e validat înainte să-l vezi. Păstrăm structura argumentativă, vocea autorului și tonul." />

        <div className="steps-grid">
          <div className="step-card">
            <div className="step-num">01</div>
            <h3 className="step-title">Lipești textul</h3>
            <p className="step-desc">Nu reținem nimic după procesare.</p>
            <div className="step-illu">
              <SearchIcon size={14} /> INPUT
            </div>
          </div>

          <div className="step-card">
            <div className="step-num">02</div>
            <h3 className="step-title">Analizăm cu detectoarele</h3>
            <p className="step-desc">Rulăm textul prin Turnitin, GPTZero, Originality, Copyleaks, Winston AI și ZeroGPT.</p>
            <div className="step-illu">
              <ShieldIcon size={14} /> 6 detectoare în paralel
            </div>
          </div>

          <div className="step-card">
            <div className="step-num">03</div>
            <h3 className="step-title">Umanizăm chirurgical</h3>
            <p className="step-desc">Rescriem doar ce e necesar pentru a coborâ sub pragul de detecție, păstrând sensul, registrul și ideea originală intacte.</p>
            <div className="step-illu">
              <SparkIcon size={14} /> OUTPUT · sub 10% AI score
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- FEATURES ---------- */
function Features() {
  const cards = [
  { kind: "video", url: "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_133058_0504132a-0cf3-4450-a370-8ea3b05c95d4.mp4", small: "", caption: "Scrisul tău, neretușat de algoritm." },
  {
    kind: "card",
    num: "",
    title: "Multi-Detector Bypass.",
    icon: <ShieldIcon size={20} />,
    list: [
    "Validare simultană prin Turnitin, GPTZero, Originality, Copyleaks, Winston AI și ZeroGPT",
    "Verificare și umanizare în mai puțin de 5 minute",
    "Re-rulare automată dacă un detector trece de prag"]

  },
  {
    kind: "card",
    num: "",
    title: "Plagiarism Check.",
    icon: <SearchIcon size={20} />,
    list: [
    "Verificare plagiat integrată cu motoare academice",
    "Match-uri evidențiate cu sursă și procent",
    "Raport descărcabil PDF, gata pentru predare"]

  }];


  return (
    <section className="features-section" id="features">
      <div className="features-noise bg-noise" />
      <div className="features-shell">
        <div className="features-head">
          <h2 className="muted">Construit pentru voi. Alimentat de detalii.</h2>
        </div>

        <div className="features-grid">
          {cards.map((c, i) =>
          <FeatureCard key={i} index={i} {...c} />
          )}
        </div>
      </div>
    </section>);

}

function FeatureCard({ kind, index, url, small, caption, num, title, icon, list }) {
  const [ref, inView] = useInViewClass(0.15);
  const style = { transitionDelay: `${index * 0.12}s` };

  if (kind === "video") {
    return (
      <div ref={ref} className={`feature-card video-card ${inView ? "in" : ""}`} style={style}>
        <video src={url} autoPlay loop muted playsInline preload="auto" style={{ background: "#111" }} />
        <div className="video-grad" />
        <div className="video-cap">
          <span className="small">{small}</span>
          <span>{caption}</span>
        </div>
      </div>);

  }

  return (
    <div ref={ref} className={`feature-card ${inView ? "in" : ""}`} style={style}>
      <div className="feat-icon">{icon}</div>
      <div className="feat-title">
        {title}
        <span className="num">{num}</span>
      </div>
      <ul className="feat-list">
        {list.map((item, i) =>
        <li key={i}>
            <CheckIcon size={14} />
            <span>{item}</span>
          </li>
        )}
      </ul>
    </div>);

}

/* ---------- FAQ ---------- */
const FAQ_ITEMS = [
{
  q: "Cum funcționează umanizarea?",
  a: "Rulăm textul tău prin aceleași modele de detecție pe care le folosesc detectoarele majore, identificăm fragmentele care prezintă semnale tipice de generare AI (perplexitate scăzută, pattern-uri lexicale repetitive) și le rescriem chirurgical, fără să atingem ideea sau argumentul original."
},
{
  q: "Va fi detectat textul de Turnitin?",
  a: "Nu. Validăm fiecare output prin clasificatorul Turnitin în timp real. Dacă scorul nu coboară sub pragul de detecție, repetăm procesul automat până când trece. În beta-ul intern, peste 99% din texte trec sub 5% AI score la Turnitin."
},
{
  q: "Este legal / etic?",
  a: "Ideom este un instrument la fel ca Grammarly sau un editor uman. Îți recomandăm să respecți politicile instituției tale și să folosești produsul pentru scrieri unde vocea ta autentică contează: branding personal, conținut profesional, scriere creativă. Pentru lucrări academice, verifică întâi regulamentul."
},
{
  q: "Câte cuvinte pot procesa gratuit?",
  a: "Demo-ul gratuit îți permite să procesezi până la 200 de cuvinte o singură dată, fără cont. Suficient pentru un eseu scurt sau 2-3 paragrafe. Fără card la înscriere."
},
{
  q: "Când se lansează?",
  a: "Beta privat momentan, lansare publică spre finalul lunii mai. Înscrierile pe waitlist primesc acces cu prioritate, în ordinea înregistrării, pe măsură ce eliberăm capacitate."
},
{
  q: "Își păstrează textul sensul original?",
  a: "Da! Asta e linia roșie. Modelul nostru e antrenat să modifice exclusiv markeri stilistici (alegere de cuvinte, ritm, conectori) fără să atingă afirmațiile factuale, citările sau structura argumentativă."
}];


function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq-section" id="faq">
      <div className="faq-shell">
        <div className="faq-head">
          <div className="label-col">FAQ</div>
          <h2>Întrebări pe care<br /><span className="serif-it">le primim mereu.</span></h2>
        </div>
        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) =>
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="plus">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 1v10M1 6h10" /></svg>
                </span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 360 : 0 }}>
                <div className="faq-a-inner">{item.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- WAITLIST ---------- */
function Waitlist() {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [done, setDone] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    saveEmail(email, "waitlist", name).catch(() => {});
    setDone(true);
  };

  return (
    <section className="waitlist-section" id="waitlist">
      <div className="waitlist-card">
        <div className="waitlist-shell">
          <div>
            <div className="section-label" style={{ textAlign: "left", marginBottom: 14 }}>Waitlist · Acces prioritar</div>
            <h2 className="waitlist-title">
              Fii primul care<br /><span className="serif-it">scrie nedetectabil.</span>
            </h2>

          </div>

          {done ?
          <div className="waitlist-form">
              <div className="waitlist-success">
                <div className="ok"><CheckIcon size={24} /></div>
                <div style={{ fontSize: 20, fontWeight: 500 }}>Ești pe listă, {name || "prieten"}.</div>
                <div style={{ color: "var(--primary-soft)", fontSize: 13 }}>
                  Trimitem invitațiile pe valuri, începând din iulie. Verifică inbox-ul: <strong>{email}</strong>.
                </div>
              </div>
            </div> :

          <form className="waitlist-form" onSubmit={submit}>
              <div className="field">
                <label>Nume</label>
                <input
                type="text"
                placeholder="Cum te cheamă?"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required />
              
              </div>
              <div className="field">
                <label>Email</label>
                <input
                type="email"
                placeholder="tu@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required />
              
              </div>
              <button type="submit" className="waitlist-submit">
                Rezervă-mi locul gratuit
                <span className="circ"><ArrowRightIcon size={16} /></span>
              </button>

            </form>
          }
        </div>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-main">

        {/* Brand */}
        <div className="footer-brand-col">
          <span className="footer-logo">Ideom<sup>*</sup></span>
          <p className="footer-tagline">Transformă textul generat de AI în scriere autentic umană. Nedetectabil.</p>
        </div>

        {/* Link-uri utile */}
        <div className="footer-col">
          <div className="footer-col-title">Link-uri utile</div>
          <a href="#how" className="footer-link">Cum funcționează</a>
          <a href="#features" className="footer-link">Capabilități</a>
          <a href="#faq" className="footer-link">FAQ</a>
          <a href="#tester" className="footer-link">Testează gratuit</a>
        </div>

        {/* Legal */}
        <div className="footer-col">
          <div className="footer-col-title">Legal</div>
          <a href="termeni.html" className="footer-link">Termeni și Condiții</a>
          <a href="confidentialitate.html" className="footer-link">Politica de Confidențialitate</a>
        </div>

      </div>

      {/* ANPC badges */}
      <div className="footer-anpc">
        <a href="https://anpc.ro/ce-este-sal/" target="_blank" rel="noopener noreferrer" className="anpc-badge anpc-badge--sal">
          <div className="anpc-badge-logo">
            <div className="anpc-stars">★ ★ ★<br />★ ★</div>
            <div className="anpc-logo-text">
              <strong>ANPC</strong>
              <small>AUTORITATEA NAȚIONALĂ PENTRU<br />PROTECȚIA CONSUMATORILOR</small>
              <em>Te respectă</em>
            </div>
          </div>
          <div className="anpc-badge-inner">
            <div className="anpc-badge-title">SOLUȚIONAREA ALTERNATIVĂ<br />A LITIGIILOR</div>
            <div className="anpc-badge-btn">DETALII</div>
          </div>
        </a>
        <a href="https://consumer-redress.ec.europa.eu/site-relocation_en?event=main.home2.show&lng=RO" target="_blank" rel="noopener noreferrer" className="anpc-badge">
          <div className="anpc-badge-inner">
            <div className="anpc-badge-title">SOLUȚIONAREA ONLINE<br />A LITIGIILOR</div>
            <div className="anpc-badge-btn">DETALII</div>
          </div>
        </a>
      </div>

    </footer>);

}

/* ---------- TWEAKS ---------- */
function IdeomTweaks() {
  if (!window.TweaksPanel || !window.useTweaks) return null;
  const { TweaksPanel, useTweaks, TweakSection, TweakSlider, TweakToggle } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // sync to root
  useEffect(() => {
    document.documentElement.style.setProperty("--primary", tweaks.accent);
  }, [tweaks.accent]);

  return (
    <TweaksPanel title="Tweaks · Ideom">
      <TweakSection title="Hero">
        <TweakSlider label="Mărime titlu (vw)" value={tweaks.heroSize} min={9} max={20} step={0.5} onChange={(v) => setTweak("heroSize", v)} />
        <TweakToggle label="Video în Hero" value={tweaks.showVideo} onChange={(v) => setTweak("showVideo", v)} />
      </TweakSection>
      <TweakSection title="Brand">
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {[
          ["#DEDBC8", "Cream"],
          ["#A7D3C4", "Mint"],
          ["#C4B6E8", "Lilac"],
          ["#E8B89A", "Apricot"],
          ["#9EC4FF", "Sky"]].
          map(([c, name]) =>
          <button
            key={c}
            onClick={() => setTweak("accent", c)}
            style={{
              width: 36, height: 36, borderRadius: 999, background: c,
              border: tweaks.accent === c ? "2px solid #fff" : "1px solid rgba(255,255,255,0.2)",
              cursor: "pointer", padding: 0
            }}
            title={name} />

          )}
        </div>
      </TweakSection>
    </TweaksPanel>);

}

/* ---------- NAVBAR ---------- */
function Navbar({ user, onLogout, onLogin }) {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);
  return (
    <nav className="navbar">
      <span className="navbar-brand">Ideom</span>
      <div className={`nav-links${open ? " open" : ""}`}>
        <a href="#how" onClick={close}>Cum funcționează</a>
        <a href="#features" onClick={close}>Capabilități</a>
        <a href="#faq" onClick={close}>FAQ</a>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        {user ? (
          <button onClick={onLogout} style={{ background: "transparent", border: "1px solid var(--line)", color: "var(--muted)", borderRadius: 999, padding: "5px 12px", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }}>
            Ieși din cont
          </button>
        ) : (
          <button onClick={onLogin} style={{ background: "transparent", border: "1px solid var(--line)", color: "var(--primary-soft)", borderRadius: 999, padding: "5px 12px", fontSize: 11, cursor: "pointer", fontFamily: "inherit" }}>
            Intră în cont
          </button>
        )}
        <button className="nav-hamburger" onClick={() => setOpen(o => !o)} aria-label="Meniu">
          {open
            ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/></svg>
          }
        </button>
      </div>
    </nav>
  );
}

/* ---------- APP ---------- */
function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  const [user, setUser] = useState(null);
  const [showAuthModal, setShowAuthModal] = useState(false);

  useEffect(() => {
    _sb.auth.getUser().then(({ data }) => setUser(data?.user ?? null));
    const { data: { subscription } } = _sb.auth.onAuthStateChange((_, session) => {
      const u = session?.user ?? null;
      setUser(u);
      if (u) setShowAuthModal(false);
    });
    return () => subscription.unsubscribe();
  }, []);

  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__edit_mode_tweaks_changed") setTweaks((t) => ({ ...t, ...e.data.values }));
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <>
      <Navbar user={user} onLogout={() => _sb.auth.signOut()} onLogin={() => setShowAuthModal(true)} />
      <Hero tweaks={tweaks} />
      <Tester user={user} onNeedAuth={() => setShowAuthModal(true)} />
      <HowItWorks />
      <Features />
      <FAQ />
      <Waitlist />
      <Footer />
      <IdeomTweaks />
      {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
    </>);
}

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