// components/WrapTorMxPage.jsx
//
// Standalone, unlinked landing page at #/wraptormx. Not in Nav.jsx, not in
// sitemap.xml — reachable only by direct link. Minimal WRAP branding (logo
// only, no site nav/footer) so the embedded HubSpot form is the sole focus.
//
// This page embeds a *different* HubSpot form (via the hosted forms v2
// embed script) than the one HubSpotForm in App.jsx submits via fetch() —
// same portal (7267108), different form GUID. The embed script injects an
// iframe, so if the CSP blocks it you'll see a blank box instead of the
// form. See the note at the bottom of this file.

const { useEffect: useWTMEffect, useRef: useWTMRef } = React;

const WTM_FORM_TARGET_ID = 'wraptormx-hs-form';

function loadHubSpotEmbedScript(onReady) {
    if (window.hbspt && window.hbspt.forms) { onReady(); return; }
    const existing = document.querySelector('script[data-wtm-hs-embed]');
    if (existing) {
        existing.addEventListener('load', onReady, { once: true });
        return;
    }
    const script = document.createElement('script');
    script.src = '//js.hsforms.net/forms/embed/v2.js';
    script.charset = 'utf-8';
    script.type = 'text/javascript';
    script.async = true;
    script.dataset.wtmHsEmbed = 'true';
    script.addEventListener('load', onReady, { once: true });
    document.body.appendChild(script);
}

function WrapTorMxPage() {
    useWTMEffect(() => { document.title = 'WRAP®'; }, []);
    const mountedRef = useWTMRef(true);

    useWTMEffect(() => {
        mountedRef.current = true;
        loadHubSpotEmbedScript(() => {
            if (!mountedRef.current) return;
            const target = document.getElementById(WTM_FORM_TARGET_ID);
            if (!target || !window.hbspt || !window.hbspt.forms) return;
            target.innerHTML = ''; // guard against a stray double-invoke
            window.hbspt.forms.create({
                portalId: '7267108',
                formId: '4867bbf2-8bf0-4aa6-a364-4acfc28aa73e',
                region: 'na1',
                target: `#${WTM_FORM_TARGET_ID}`,
            });
        });
        return () => { mountedRef.current = false; };
    }, []);

    return (
        <main style={{
            minHeight: '100vh', background: 'var(--bg)',
            display: 'flex', flexDirection: 'column',
        }}>
            <section style={{
                flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
                padding: '64px 20px',
            }}>
                <div style={{ width: '100%', maxWidth: 560 }}>
                    <div style={{ textAlign: 'center', marginBottom: 36 }}>
                        <img
                            src="assets/wrap-logo-white.svg"
                            alt="WRAP"
                            style={{ height: 26, marginBottom: 28 }}
                        />
                        <h1 style={{
                            fontFamily: 'Barlow Condensed', fontWeight: 900,
                            fontSize: 'clamp(32px, 5vw, 46px)', textTransform: 'uppercase',
                            color: 'var(--text)', lineHeight: 1,
                        }}>
                            Get In Touch
                        </h1>
                    </div>

                    <div style={{
                        background: 'var(--card-bg)', border: '1px solid var(--border)',
                        borderRadius: 8, padding: '32px 28px',
                    }}>
                        {/* HubSpot's v2 embed script injects the form (an iframe) into this div. */}
                        <div id={WTM_FORM_TARGET_ID} />
                    </div>
                </div>
            </section>
        </main>
    );
}

Object.assign(window, { WrapTorMxPage });

// ─── CSP NOTE ───────────────────────────────────────────────────────────────
// The HubSpot v2 forms embed loads a script from js.hsforms.net and then
// renders the form in an iframe served from HubSpot's forms domain. Your
// vercel.json CSP will need (in addition to whatever HubSpotForm in App.jsx
// already required for its direct fetch() to api.hsforms.com):
//   script-src:  https://js.hsforms.net
//   frame-src:   https://forms.hsforms.com  (and/or https://*.hubspot.com,
//                depending on which subdomain HubSpot serves your embed
//                iframe from — check the Network tab on a preview deploy)
// Without these, the script/iframe will be silently blocked and the form
// area will just render blank.