const { useState, useEffect } = React;
const { t, tx, useLocale } = window.ATC;

const PLATFORMS_PRODUCTS = [
    {
        id: 'historian',
        tag: 'products.historian.tag',
        name: 'products.historian.name',
        kicker: 'products.historian.kicker',
        lede: 'products.historian.lede',
        features: [
            { t: 'products.historian.features.0.t', d: 'products.historian.features.0.d' },
            { t: 'products.historian.features.1.t', d: 'products.historian.features.1.d' },
            { t: 'products.historian.features.2.t', d: 'products.historian.features.2.d' },
            { t: 'products.historian.features.3.t', d: 'products.historian.features.3.d' }],
        primary: { href: '#contact', label: 'common.getStarted' }
    },
    {
        id: 'ava',
        tag: 'products.ava.tag',
        name: 'products.ava.name',
        kicker: 'products.ava.kicker',
        lede: 'products.ava.lede',
        stats: [
            { num: '95', suf: '%', lab: 'products.ava.stats.0.lab' },
            { num: '30', suf: '+', lab: 'products.ava.stats.1.lab' },
            { num: 'Real', suf: '', lab: 'products.ava.stats.2.lab' },
            { num: 'Low', suf: '', lab: 'products.ava.stats.3.lab' }],
        primary: { href: '#contact', label: 'common.getStarted' }
    },
    {
        id: 'athena',
        tag: 'products.athena.tag',
        name: 'products.athena.name',
        kicker: 'products.athena.kicker',
        lede: 'products.athena.lede',
        features: [
            { t: 'products.athena.features.0.t', d: 'products.athena.features.0.d' },
            { t: 'products.athena.features.1.t', d: 'products.athena.features.1.d' },
            { t: 'products.athena.features.2.t', d: 'products.athena.features.2.d' },
            { t: 'products.athena.features.3.t', d: 'products.athena.features.3.d' }],
        primary: { href: '#contact', label: 'common.getStarted' }
    },
    {
        id: 'apexbridge',
        tag: 'products.apexbridge.tag',
        name: 'products.apexbridge.name',
        kicker: 'products.apexbridge.kicker',
        lede: 'products.apexbridge.lede',
        stats: [
            { num: '99', suf: '%', lab: 'products.apexbridge.stats.0.lab' },
            { num: '3–9', suf: 'mo', lab: 'products.apexbridge.stats.1.lab' },
            { num: '60', suf: '%', lab: 'products.apexbridge.stats.2.lab' },
            { num: '0', suf: '$', lab: 'products.apexbridge.stats.3.lab' }],
        primary: { href: '#contact', label: 'common.getStarted' }
    },
    {
        id: 'apexGo',
        tag: 'products.apexGo.tag',
        name: 'products.apexGo.name',
        kicker: 'products.apexGo.kicker',
        lede: 'products.apexGo.lede',
        features: [
            { t: 'products.apexGo.features.0.t', d: 'products.apexGo.features.0.d' },
            { t: 'products.apexGo.features.1.t', d: 'products.apexGo.features.1.d' },
            { t: 'products.apexGo.features.2.t', d: 'products.apexGo.features.2.d' },
            { t: 'products.apexGo.features.3.t', d: 'products.apexGo.features.3.d' }],
        primary: { href: '#contact', label: 'common.getStarted' }
    }
];

const ProductSection = ({ p, index, onDemoClick }) => {
    const Visual = window.ProductVisuals?.[p.id];
    const reverse = index % 2 === 1;
    return (
        <div id={p.id} className={`product-card reveal ${reverse ? 'reverse' : ''}`}>
            <div className="info">
                <div className="info-top">
                    <div className="product-tag">
                        <span className="accent">●</span> {p.tag}
                    </div>
                    <h3>{p.name}</h3>
                    <p className="lede">{p.lede}</p>
                    {p.features ?
                        <div className="proof feature-proof">
                            {p.features.map((f) =>
                                <div className="feature-stat" key={f.t}>
                                    <div className="t">{f.t}</div>
                                    <div className="d">{f.d}</div>
                                </div>
                            )}
                        </div> :
                        <div className="proof">
                            {p.stats.map((s) =>
                                <div className="proof-stat" key={s.lab}>
                                    <div className="num">{s.num}<span style={{ fontSize: '0.5em' }}>{s.suf}</span></div>
                                    <div className="lab">{s.lab}</div>
                                </div>
                            )}
                        </div>
                    }
                </div>
                <div className="info-bottom">
                    {p.primary.href.startsWith('http') || p.primary.href.startsWith('/')
                        ? <a className="btn btn-primary" href={p.primary.href}>{p.primary.label}</a>
                        : <button className="btn btn-primary" onClick={onDemoClick}>{p.primary.label}</button>
                    }
                </div>
            </div>
            <div className="visual">
                {Visual ? <Visual /> : null}
            </div>
        </div>);
};

const ProductPortfolio = ({ id, eyebrow, heading, sub, products, onDemoClick }) => {
    return (
        <section id={id}>
            <div className="container">
                <div className="section-header reveal" style={{ gap: "48px" }}>
                    <div className="left">
                        <span className="eyebrow eyebrow-accent">{eyebrow}</span>
                        <h2>{heading}</h2>
                    </div>
                    <div className="right">{sub}</div>
                </div>
                <div className="products-stack">
                    {products.map((p, i) => <ProductSection p={p} index={i} key={p.id} onDemoClick={onDemoClick} />)}
                </div>
            </div>
        </section>);
};

function App() {
    /* Re-render on locale change so all t()/tx() lookups refresh. */
    useLocale();

    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
    const [showContact, setShowContact] = useState(false);
    const [scrolled, setScrolled] = useState(false);

    const onDemoClick = () => setShowContact(true);

    useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 20);
        window.addEventListener('scroll', onScroll);

        const observer = new IntersectionObserver(
            (entries) => entries.forEach(e => e.target.classList.toggle('in', e.isIntersecting)),
            { threshold: 0.1 }
        );
        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

        return () => {
            window.removeEventListener('scroll', onScroll);
            observer.disconnect();
        };
    }, []);

    /* Pre-resolve i18n keys for product data. ProductSection and ProductPortfolio
       in this file render strings directly, so we resolve all keys here. */
    const products = PLATFORMS_PRODUCTS.map(p => ({
        ...p,
        tag: t(p.tag),
        name: t(p.name),
        kicker: t(p.kicker),
        lede: tx(p.lede),
        features: p.features?.map(f => ({ t: t(f.t), d: t(f.d) })),
        stats: p.stats?.map(s => ({ num: s.num, suf: s.suf, lab: t(s.lab) })),
        primary: { ...p.primary, label: t(p.primary.label) },
    }));

    return (
        <>
            <Nav
                scrolled={scrolled}
                onMenuToggle={() => setMobileMenuOpen(v => !v)}
                onDemoClick={onDemoClick}
                homeUrl="/"
                showProductsNav={true}
                activeSection="platforms"
            />

            <MobileMenu
                open={mobileMenuOpen}
                onClose={() => setMobileMenuOpen(false)}
                onDemoClick={() => { setMobileMenuOpen(false); setShowContact(true); }}
                products={[
                    { name: 'navMenu.solutions.curio', href: '/solutions/#curio' },
                    { name: 'navMenu.solutions.historian', href: '/solutions/#historian' },
                    { name: 'navMenu.solutions.certiflow', href: '/solutions/#certiflow' },
                    { name: 'navMenu.solutions.docreference', href: '/solutions/#docreference' },
                    { name: 'navMenu.solutions.insightscore', href: '/solutions/#insightscore' }
                ]}
                platforms={[
                    { name: 'navMenu.platforms.historian', href: '/platforms/#historian' },
                    { name: 'navMenu.platforms.ava', href: '/platforms/#ava' },
                    { name: 'navMenu.platforms.athena', href: '/platforms/#athena' },
                    { name: 'navMenu.platforms.apexbridge', href: '/platforms/#apexbridge' },
                    { name: 'navMenu.platforms.APEX_GO', href: '/platforms/#APEX_GO' }
                ]}
                showHowItWorks={false}
                showCoverage={false}
                showFaq={false}
            />

            <ProductPortfolio
                id="platforms"
                eyebrow={t('platformsPage.eyebrow')}
                heading={<><span>{t('platformsPage.heading1')}</span><br /><span>{t('platformsPage.heading2')}</span></>}
                sub={t('platformsPage.sub')}
                products={products}
                onDemoClick={onDemoClick}
            />

            <FinalCTA
                heading={t('platformsPage.finalCta.heading')}
                accent={t('platformsPage.finalCta.accent')}
                sub={t('platformsPage.finalCta.sub')}
                actions={[
                    { label: t('platformsPage.finalCta.bookDemo'), href: '#contact' },
                    { label: t('platformsPage.finalCta.viewSolutions'), href: '/solutions/' }
                ]}
            />

            <Footer cols={FOOTER_COLS} />

            <ContactModal open={showContact} onClose={() => setShowContact(false)} />

            <FloatingBar
                onMenuClick={() => setMobileMenuOpen(true)}
                onDemoClick={onDemoClick}
            />
        </>
    );
}

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