// Landing page composition: background, navbar (with Log in / Sign up), hero, sections
const { useEffect: useEffectAPP, useState: useStateAPP } = React;

// Concierge law (no public signup until 10 customers): every CTA
// books a call. RULING REVERSED 2026-08-29: the founder stood up
// Cal.com on the hello@ calendar (form questions + Google Meet +
// overlap protection), so booking is self-serve now.
const BOOK_CALL_URL = "https://cal.com/searchcandy-labs/30min";
const DOCS_URL = "/docs";

function LandingApp() {
    const [pre, setPre] = useStateAPP(true);
    const [copied, setCopied] = useStateAPP(false);
    const copyPip = () => {
        const cmd = 'pip install searchcandy';
        const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); };
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(cmd).then(done);
        } else {
            const ta = document.createElement('textarea');
            ta.value = cmd; document.body.appendChild(ta); ta.select();
            document.execCommand('copy'); document.body.removeChild(ta); done();
        }
    };

    useEffectAPP(() => {
        window.scrollTo({ top: 0, behavior: 'instant' });
        // Reveal hero on next frame so the entrance transition plays.
        const id = requestAnimationFrame(() => requestAnimationFrame(() => setPre(false)));
        return () => cancelAnimationFrame(id);
    }, []);

    return (
        <div style={{ width: '100%', position: 'relative' }}>
            {/* Background Layer, animated knowledge graph + aurora + grain */}
            <div className="bg-stack">
                <div className="bg-aurora">
                    <span className="blob blob-1"></span>
                    <span className="blob blob-2"></span>
                    <span className="blob blob-3"></span>
                    <span className="blob blob-4"></span>
                </div>
                <KnowledgeGraphBG />
                <div className="bg-grain"></div>
                <div className="bg-vignette"></div>
            </div>

            {/* Navbar */}
            <nav className="landing-nav">
                <a href="#" className="nav-brand nav-glass">
                    <img src="/brand/logo-white-small.png" alt="" className="nav-logo" />
                    <span className="nav-wordmark">Search <span className="candy">Candy</span> <span className="labs">Labs</span></span>
                </a>
                <div className="landing-nav-items nav-glass font-figtree">
                    <a href="#how-it-works" className="nav-link">How it works</a>
                    <a href="#proof" className="nav-link">Proof</a>
                    <a href="/docs" className="nav-link">Docs</a>
                </div>
                <div className="nav-auth nav-glass font-figtree">
                    <a href="/login" className="nav-link">Sign in</a>
                    <a href={BOOK_CALL_URL} className="nav-signup">Book a call</a>
                </div>
            </nav>

            {/* Hero */}
            <section className={`hero ${pre ? 'pre' : ''}`} data-screen-label="Hero">
                <div className="hero-badge font-mono">
                    <span className="hero-badge-dot"></span>
                    Introducing Temporal Graph Memory
                </div>

                <h1 className="hero-title">
                    TGM turns your documents into a knowledge graph.<br />
                    <span className="grad-text">No LLM in the middle.</span>
                </h1>

                <p className="hero-sub font-google">
                    Exact passages back, with their source. Or an honest "not in your documents."
                </p>

                <button type="button" className="pip-pill font-mono" onClick={copyPip}
                        aria-label="Copy pip install searchcandy">
                    <span className="pip-dollar">$</span> pip install searchcandy
                    <span className="pip-copy" aria-hidden="true">
                        {copied ? (
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#3fe0ae" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                        ) : (
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                        )}
                    </span>
                    <span className={copied ? "pip-copied show" : "pip-copied"}>Copied</span>
                </button>

                <div className="hero-cta">
                    <a className="landing-button" href={BOOK_CALL_URL}>
                        Book a call
                        <ArrowRight size={18} />
                    </a>
                    <a className="secondary-button" href="/docs">
                        <Book size={18} />
                        Read the docs
                    </a>
                </div>

                <a className="scroll-hint font-mono" href="#how-it-works">
                    Scroll to explore
                    <svg className="chev" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="m6 9 6 6 6-6"></path>
                    </svg>
                </a>
            </section>

            {/* Pinned scroll story */}
            <ScrollSection />

            {/* Retrieval headline */}
            <RetrievalSection />

            {/* Retrieval demo */}
            <RetrievalDemoSection />

            {/* Measured numbers, every claim links to the Proof page */}
            <ProofStripSection />

            {/* Document history, L1/L5, lockstep claims commit 2026-08-27 */}
            <VersionHistorySection />

            {/* Cross-linking feature */}
            <CrossRepoLinkingSection />

            {/* Agent integration cards */}
            <AgentIntegrationSection />

            {/* Comparison table */}
            <ComparisonTableSection />

            {/* Footer */}
            <FooterSection />
        </div>
    );
}

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