// Sportistry marketing website — pages.jsx
// Inner pages (For clubs, Pricing, Discover, About, Blog, Download) + hash router.
// Bilingual via tr() / sportLabel() (see i18n.jsx).

// Shared dark page header for inner pages
function PageHero({ eyebrow, title, sub, children, accent }) {
    const isMobile = useIsMobile();
    return (
        <section
            style={{
                background: SB.ink950,
                color: "white",
                position: "relative",
                overflow: "hidden",
            }}
        >
            <DarkGlows />
            <Container
                style={{
                    padding: isMobile ? "48px 20px 40px" : "72px 32px 64px",
                    position: "relative",
                    zIndex: 1,
                }}
            >
                <Eyebrow color={SB.lime}>{eyebrow}</Eyebrow>
                <h1
                    style={{
                        fontFamily: FD,
                        fontWeight: 900,
                        fontSize: isMobile ? 34 : 60,
                        lineHeight: isMobile ? "38px" : "62px",
                        letterSpacing: "-0.03em",
                        margin: "14px 0 16px",
                        maxWidth: 760,
                        color: "#FFFFFF",
                    }}
                >
                    {title}
                </h1>
                {sub && (
                    <p
                        style={{
                            fontFamily: FB,
                            fontWeight: 500,
                            fontSize: isMobile ? 16 : 19,
                            lineHeight: isMobile ? "24px" : "28px",
                            color: "rgba(255,255,255,0.8)",
                            maxWidth: 560,
                            margin: 0,
                        }}
                    >
                        {sub}
                    </p>
                )}
                {children && <div style={{ marginTop: 28 }}>{children}</div>}
            </Container>
        </section>
    );
}

function scrollTop() {
    try {
        window.scrollTo(0, 0);
    } catch (e) {}
}

// ════════════════════════ FOR CLUBS ════════════════════════
function ClubsPage() {
    const isMobile = useIsMobile();
    const features = [
        {
            icon: "creditCard",
            tint: SB.blue,
            title: tr(
                "Online court booking",
                "Online pályafoglalás",
            ),
            desc: tr(
                "Players find your courts, book a time slot and pay by card — in the app or on the web. The money is in before they arrive.",
                "A játékosok megtalálják a pályáidat, időpontot foglalnak és kártyával fizetnek – appban vagy weben. A pénz még az érkezésük előtt beérkezik.",
            ),
        },
        {
            icon: "calendar",
            tint: "#6A3FF0",
            title: tr("Court calendar", "Pályanaptár"),
            desc: tr(
                "Drag out priced time slots on every court. Free, paid or not bookable online — you decide slot by slot.",
                "Húzd ki az árazott idősávokat minden pályán. Ingyenes, fizetős vagy online nem foglalható – sávonként te döntesz.",
            ),
        },
        {
            icon: "bolt",
            tint: "#E27A2B",
            title: tr("Fill the empty slots", "Töltsd fel az üres sávokat"),
            desc: tr(
                "One tap puts a flash discount on an unsold slot — and we notify past bookers, your savers and nearby players. We also nudge you when a paid slot is still empty.",
                "Egy kattintás villámkedvezményt tesz az eladatlan sávra – és mi értesítjük a korábbi foglalókat, a helyszínt mentőket és a közeli játékosokat. Szólunk is, ha egy fizetős sáv még üres.",
            ),
        },
        {
            icon: "ticket",
            tint: "#0DB1C9",
            title: tr("Promotion campaigns", "Akciós kampányok"),
            desc: tr(
                "Run a first-timer offer or an all-comers campaign, in percent or in forint. Set it once and it applies itself at checkout.",
                "Indíts első alkalmas ajánlatot vagy mindenkinek szóló kampányt, százalékban vagy forintban. Egyszer beállítod, és magától érvényesül a fizetésnél.",
            ),
        },
        {
            icon: "banknote",
            tint: "#2EB85C",
            title: tr("Payouts to your account", "Kifizetés a számládra"),
            desc: tr(
                "Stripe pays out to your own bank account every week. No monthly fee — commission only on what you actually sell.",
                "A Stripe hetente utal a saját bankszámládra. Nincs havidíj – jutalék csak arra, amit ténylegesen eladsz.",
            ),
        },
        {
            icon: "users",
            tint: SB.lime,
            dark: true,
            title: tr("Coaches at your venue", "Edzők a helyszíneden"),
            desc: tr(
                "Coaches request to join your venue, you approve them, and you set the commission for each one. Their sessions fill your empty hours.",
                "Az edzők jelentkeznek a helyszínedre, te hagyod jóvá őket, és edzőnként állítod be a jutalékot. Az óráik feltöltik az üres sávjaidat.",
            ),
        },
    ];
    return (
        <div>
            <PageHero
                eyebrow={tr(
                    "For clubs & venues",
                    "Kluboknak és helyszíneknek",
                )}
                title={tr(
                    "Sell your empty court hours.",
                    "Add el az üres pályaóráidat.",
                )}
                sub={tr(
                    "Put your courts online, let players book and pay by card, and get paid out every week. No monthly fee — you pay commission only on what you actually sell.",
                    "Tedd fel a pályáidat online, foglaljanak és fizessenek kártyával a játékosok, a kifizetés pedig hetente érkezik. Nincs havidíj – jutalékot csak arra fizetsz, amit ténylegesen eladsz.",
                )}
            >
                <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                    <WButton
                        variant="accent"
                        size="lg"
                        iconRight="arrow"
                        href="/download"
                    >
                        {tr("Get the app", "Töltsd le")}
                    </WButton>
                    <WButton variant="onDark" size="lg" href="/about">
                        {tr("Talk to us", "Beszéljünk")}
                    </WButton>
                </div>
            </PageHero>

            <Section bg="white">
                <Container>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile
                                ? "1fr"
                                : "repeat(3, 1fr)",
                            gap: 20,
                        }}
                    >
                        {features.map((f) => (
                            <div
                                key={f.title}
                                style={{
                                    background: "white",
                                    border: "1px solid " + SB.ink100,
                                    borderRadius: 18,
                                    padding: 26,
                                }}
                            >
                                <div
                                    style={{
                                        width: 48,
                                        height: 48,
                                        borderRadius: 13,
                                        background: f.tint,
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        marginBottom: 16,
                                    }}
                                >
                                    <WIcon
                                        name={f.icon}
                                        size={24}
                                        color={f.dark ? SB.ink900 : "white"}
                                    />
                                </div>
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 18,
                                        letterSpacing: "-0.01em",
                                        color: SB.ink900,
                                    }}
                                >
                                    {f.title}
                                </div>
                                <p
                                    style={{
                                        fontFamily: FB,
                                        fontWeight: 500,
                                        fontSize: 14,
                                        lineHeight: "22px",
                                        color: SB.ink600,
                                        margin: "8px 0 0",
                                    }}
                                >
                                    {f.desc}
                                </p>
                            </div>
                        ))}
                    </div>
                </Container>
            </Section>

            <Section bg={SB.ink50} pad="0 0 96px">
                <Container>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
                            gap: isMobile ? 28 : 48,
                            alignItems: "center",
                        }}
                    >
                        <PhotoSlot
                            label="coach running a class"
                            src={SPORT_IMG.basket}
                            sport="basket"
                            height={isMobile ? 260 : 400}
                            tint={shadeWeb(SB.blue, -0.1)}
                            glow={SB.blue}
                        />
                        <div>
                            <Eyebrow>
                                {tr("Getting started", "Így indulsz el")}
                            </Eyebrow>
                            <h2
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 800,
                                    fontSize: isMobile ? 26 : 38,
                                    lineHeight: isMobile ? "32px" : "44px",
                                    letterSpacing: "-0.02em",
                                    color: SB.ink900,
                                    margin: "10px 0 18px",
                                }}
                            >
                                {tr(
                                    "Four steps from empty calendar to paid bookings.",
                                    "Négy lépés az üres naptártól a fizetett foglalásokig.",
                                )}
                            </h2>
                            {[
                                [
                                    tr("Submit your venue", "Küldd be a helyszíned"),
                                    tr(
                                        "Address, sports, opening hours and photos. Our team reviews it before it goes live, so players only ever see verified venues.",
                                        "Cím, sportágak, nyitvatartás és fotók. A csapatunk átnézi, mielőtt élesedik – így a játékosok csak ellenőrzött helyszíneket látnak.",
                                    ),
                                ],
                                [
                                    tr("Open your courts", "Nyisd meg a pályáidat"),
                                    tr(
                                        "Add each court, then drag priced time slots onto the court calendar in the admin panel.",
                                        "Vedd fel a pályákat, majd húzd rá az árazott idősávokat a pályanaptárra az admin felületen.",
                                    ),
                                ],
                                [
                                    tr("Connect Stripe", "Kösd be a Stripe-ot"),
                                    tr(
                                        "A few minutes of company details, and card payments land in your own bank account on a weekly payout.",
                                        "Pár perc cégadat, és a kártyás fizetések heti kifizetéssel a saját bankszámládra érkeznek.",
                                    ),
                                ],
                                [
                                    tr(
                                        "Players book and pay",
                                        "A játékosok foglalnak és fizetnek",
                                    ),
                                    tr(
                                        "Your free slots surface to players nearby in the app and on the web — paid up front, so the hour is committed.",
                                        "A szabad sávjaid megjelennek a közeli játékosoknak appban és weben – előre fizetve, így az óra le van kötve.",
                                    ),
                                ],
                            ].map(([t, d], i) => (
                                <div
                                    key={t}
                                    style={{
                                        display: "flex",
                                        gap: 16,
                                        padding: "14px 0",
                                        borderTop: i
                                            ? "1px solid " + SB.ink200
                                            : "none",
                                    }}
                                >
                                    <div
                                        style={{
                                            flexShrink: 0,
                                            width: 32,
                                            height: 32,
                                            borderRadius: 999,
                                            background: SB.blue,
                                            color: "white",
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 15,
                                        }}
                                    >
                                        {i + 1}
                                    </div>
                                    <div>
                                        <div
                                            style={{
                                                fontFamily: FD,
                                                fontWeight: 800,
                                                fontSize: 17,
                                                color: SB.ink900,
                                            }}
                                        >
                                            {t}
                                        </div>
                                        <div
                                            style={{
                                                fontFamily: FB,
                                                fontWeight: 500,
                                                fontSize: 14,
                                                color: SB.ink600,
                                                marginTop: 2,
                                            }}
                                        >
                                            {d}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </Container>
            </Section>

            <ClubPromotions />
            <ClubMoney />
            <ClubWhereYouManage />

            {/* ClubStatBand hidden until we have real numbers — see ClubStatBand() below */}
            <FinalCTA />
        </div>
    );
}

// Two discount mechanics, both live: slot-level flash discounts on `owner_slots`
// (one-tap, fires a one-shot push to past bookers + saved_venues + nearby opted-in
// users) and campaign-level `venue_promotions`. Copy deliberately avoids implying
// they stack — the backend applies the larger of the two, never both.
function ClubPromotions() {
    const isMobile = useIsMobile();
    const rows = [
        [
            "bolt",
            "#E27A2B",
            tr("Flash discount on a dead hour", "Villámkedvezmény egy holt órára"),
            tr(
                "See a paid slot that hasn't sold? Drop the price by up to 90% in one tap. Past bookers, players who saved your venue and nearby users get a notification straight away.",
                "Látsz egy fizetős sávot, ami nem kelt el? Vidd le az árát akár 90%-kal egy kattintással. A korábbi foglalók, a helyszínedet elmentő és a közeli játékosok azonnal értesítést kapnak.",
            ),
        ],
        [
            "bell",
            "#6A3FF0",
            tr("We nudge you first", "Mi szólunk előbb"),
            tr(
                "You don't have to watch the calendar. When a paid slot is still empty a few hours to a few days out, we tell you — with the slot ready to discount.",
                "Nem kell a naptárat figyelned. Ha egy fizetős sáv néhány órával vagy nappal a kezdés előtt még üres, szólunk – a sáv már készen áll a kedvezményre.",
            ),
        ],
        [
            "ticket",
            "#0DB1C9",
            tr("First-timer campaigns", "Első alkalmas kampányok"),
            tr(
                "Run a standing offer for players who have never booked at your venue — or one for everyone. Percentage or fixed forint, with your own title and end date.",
                "Indíts állandó ajánlatot azoknak, akik még sosem foglaltak nálad – vagy mindenkinek szólót. Százalékos vagy fix forintos, saját címmel és lejárati dátummal.",
            ),
        ],
    ];
    return (
        <Section bg="white">
            <Container>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
                        gap: isMobile ? 28 : 48,
                        alignItems: "center",
                    }}
                >
                    <div>
                        <Eyebrow>{tr("Filling the gaps", "Lyukak feltöltése")}</Eyebrow>
                        <h2
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                fontSize: isMobile ? 26 : 38,
                                lineHeight: isMobile ? "32px" : "44px",
                                letterSpacing: "-0.02em",
                                color: SB.ink900,
                                margin: "10px 0 18px",
                            }}
                        >
                            {tr(
                                "An empty court earns nothing. A discounted one earns something.",
                                "Az üres pálya semmit sem hoz. A kedvezményes valamit igen.",
                            )}
                        </h2>
                        {rows.map(([icon, tint, title, desc], i) => (
                            <div
                                key={title}
                                style={{
                                    display: "flex",
                                    gap: 16,
                                    padding: "16px 0",
                                    borderTop: i ? "1px solid " + SB.ink200 : "none",
                                }}
                            >
                                <div
                                    style={{
                                        flexShrink: 0,
                                        width: 38,
                                        height: 38,
                                        borderRadius: 11,
                                        background: tint,
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                    }}
                                >
                                    <WIcon name={icon} size={20} color="white" />
                                </div>
                                <div>
                                    <div
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 17,
                                            color: SB.ink900,
                                        }}
                                    >
                                        {title}
                                    </div>
                                    <div
                                        style={{
                                            fontFamily: FB,
                                            fontWeight: 500,
                                            fontSize: 14,
                                            lineHeight: "22px",
                                            color: SB.ink600,
                                            marginTop: 3,
                                        }}
                                    >
                                        {desc}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                    <PhotoSlot
                        label="empty tennis court at dusk"
                        src={SPORT_IMG.tennis}
                        sport="tennis"
                        height={isMobile ? 260 : 420}
                        tint={shadeWeb("#0DB1C9", -0.1)}
                        glow="#0DB1C9"
                    />
                </div>
            </Container>
        </Section>
    );
}

// Venue commission is a flat 10% + ÁFA (`STRIPE_VENUE_PLATFORM_FEE_PCT`, per-venue
// override on `locations.platform_fee_pct`). Unlike coaches, venues get NO launch
// offer and NO repeat-client taper — don't add one here without checking
// `resolveVenuePlatformFee` in the API.
//
// This number is a public pricing promise: it must match the API default, or the
// page advertises a rate the code does not charge. Set to 10% by user decision
// 2026-07-18 (was an unconfirmed 12% placeholder). Change both together.
function ClubMoney() {
    const isMobile = useIsMobile();
    const cards = [
        [
            "10% + ÁFA",
            tr("commission on paid court bookings", "jutalék a fizetett pályafoglalásokra"),
            tr(
                "Deducted automatically from each booking. Nothing to invoice, nothing to chase.",
                "Foglalásonként automatikusan levonva. Nincs mit kiszámlázni, nincs mit utánajárni.",
            ),
        ],
        [
            tr("0 Ft", "0 Ft"),
            tr("monthly fee", "havidíj"),
            tr(
                "No setup cost and no subscription. An empty month costs you nothing.",
                "Nincs belépési díj és nincs előfizetés. Egy üres hónap nem kerül semmibe.",
            ),
        ],
        [
            tr("Weekly", "Hetente"),
            tr("payout, every Monday", "kifizetés, minden hétfőn"),
            tr(
                "Straight to your own company bank account through Stripe. You can open the Stripe dashboard any time.",
                "Egyenesen a saját céges bankszámládra, Stripe-on keresztül. A Stripe felületét bármikor megnyithatod.",
            ),
        ],
    ];
    return (
        <Section bg={SB.ink950}>
            <Container>
                <Eyebrow color={SB.lime}>{tr("What it costs", "Mibe kerül")}</Eyebrow>
                <h2
                    style={{
                        fontFamily: FD,
                        fontWeight: 800,
                        fontSize: isMobile ? 26 : 38,
                        lineHeight: isMobile ? "32px" : "44px",
                        letterSpacing: "-0.02em",
                        color: "white",
                        margin: "10px 0 8px",
                        maxWidth: 640,
                    }}
                >
                    {tr(
                        "You only pay when a court actually sells.",
                        "Csak akkor fizetsz, ha egy pálya tényleg elkel.",
                    )}
                </h2>
                <p
                    style={{
                        fontFamily: FB,
                        fontWeight: 500,
                        fontSize: 15,
                        lineHeight: "24px",
                        color: SB.ink300,
                        margin: "0 0 28px",
                        maxWidth: 640,
                    }}
                >
                    {tr(
                        "Cancellations follow a clear rule your guests see before they pay: a full refund more than 72 hours out, half between 48 and 72 hours, and none inside 48 hours — so a late drop-out doesn't cost you the hour.",
                        "A lemondás világos szabály szerint megy, amit a vendég a fizetés előtt lát: 72 óránál korábban teljes visszatérítés, 48 és 72 óra között a fele, 48 órán belül nincs – így egy késői lemondás nem viszi el az órádat.",
                    )}
                </p>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
                        gap: 18,
                    }}
                >
                    {cards.map(([big, small, desc]) => (
                        <div
                            key={small}
                            style={{
                                background: SB.ink900,
                                border: "1px solid " + SB.ink800,
                                borderRadius: 18,
                                padding: 24,
                            }}
                        >
                            <div
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 800,
                                    fontSize: 30,
                                    letterSpacing: "-0.02em",
                                    color: SB.lime,
                                }}
                            >
                                {big}
                            </div>
                            <div
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 700,
                                    fontSize: 14,
                                    color: "white",
                                    marginTop: 2,
                                }}
                            >
                                {small}
                            </div>
                            <p
                                style={{
                                    fontFamily: FB,
                                    fontWeight: 500,
                                    fontSize: 14,
                                    lineHeight: "22px",
                                    color: SB.ink400,
                                    margin: "10px 0 0",
                                }}
                            >
                                {desc}
                            </p>
                        </div>
                    ))}
                </div>
            </Container>
        </Section>
    );
}

// The surface split is real and worth stating plainly: courts, slots, promotions,
// statements and coach management are web-admin only. The mobile owner section
// (`app/(owner)/`) covers venue profile, photos, open/closed, Stripe and edit
// requests — nothing else.
function ClubWhereYouManage() {
    const isMobile = useIsMobile();
    const panels = [
        {
            icon: "sliders",
            tint: SB.blue,
            title: tr("In the admin panel", "Az admin felületen"),
            sub: tr("sportistry.app/admin — on a computer", "sportistry.app/admin – számítógépen"),
            items: [
                tr("Court calendar and priced slots", "Pályanaptár és árazott idősávok"),
                tr("Court bookings and guest list", "Pályafoglalások és vendéglista"),
                tr("Promotions and flash discounts", "Akciók és villámkedvezmények"),
                tr("Statements and payouts", "Elszámolások és kifizetések"),
                tr("Coaches, and each one's commission", "Edzők és edzőnkénti jutalék"),
                tr("Revenue overview and trends", "Bevételi áttekintés és trendek"),
            ],
        },
        {
            icon: "smartphone",
            tint: "#6A3FF0",
            title: tr("In the mobile app", "A mobilappban"),
            sub: tr("for the day-to-day, on the move", "a napi ügyekhez, útközben"),
            items: [
                tr("Your venue profile and photos", "Helyszíned adatlapja és fotói"),
                tr("Open / closed switch", "Nyitva / zárva kapcsoló"),
                tr("Stripe setup and status", "Stripe beállítás és állapot"),
                tr(
                    "Approving player-suggested edits",
                    "Játékosok javasolt módosításainak jóváhagyása",
                ),
            ],
        },
    ];
    return (
        <Section bg={SB.ink50}>
            <Container>
                <div style={{ textAlign: "center", marginBottom: 32 }}>
                    <Eyebrow>{tr("Where you manage what", "Mit hol kezelsz")}</Eyebrow>
                    <h2
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            fontSize: isMobile ? 26 : 36,
                            lineHeight: isMobile ? "32px" : "42px",
                            letterSpacing: "-0.02em",
                            color: SB.ink900,
                            margin: "10px auto 0",
                            maxWidth: 620,
                        }}
                    >
                        {tr(
                            "Set it up on a big screen. Run it from your pocket.",
                            "Nagy képernyőn állítod be. A zsebedből működteted.",
                        )}
                    </h2>
                </div>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
                        gap: 20,
                    }}
                >
                    {panels.map((p) => (
                        <div
                            key={p.title}
                            style={{
                                background: "white",
                                border: "1px solid " + SB.ink100,
                                borderRadius: 18,
                                padding: 26,
                            }}
                        >
                            <div
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    gap: 12,
                                    marginBottom: 16,
                                }}
                            >
                                <div
                                    style={{
                                        width: 44,
                                        height: 44,
                                        borderRadius: 12,
                                        background: p.tint,
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        flexShrink: 0,
                                    }}
                                >
                                    <WIcon name={p.icon} size={22} color="white" />
                                </div>
                                <div>
                                    <div
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 18,
                                            color: SB.ink900,
                                        }}
                                    >
                                        {p.title}
                                    </div>
                                    <div
                                        style={{
                                            fontFamily: FB,
                                            fontWeight: 500,
                                            fontSize: 13,
                                            color: SB.ink500,
                                        }}
                                    >
                                        {p.sub}
                                    </div>
                                </div>
                            </div>
                            {p.items.map((it) => (
                                <div
                                    key={it}
                                    style={{
                                        display: "flex",
                                        gap: 10,
                                        alignItems: "flex-start",
                                        padding: "7px 0",
                                    }}
                                >
                                    <div style={{ flexShrink: 0, marginTop: 2 }}>
                                        <WIcon name="check" size={16} color={SB.blue} />
                                    </div>
                                    <div
                                        style={{
                                            fontFamily: FB,
                                            fontWeight: 500,
                                            fontSize: 14,
                                            lineHeight: "21px",
                                            color: SB.ink700,
                                        }}
                                    >
                                        {it}
                                    </div>
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
            </Container>
        </Section>
    );
}

function ClubStatBand() {
    const isMobile = useIsMobile();
    const stats = [
        ["2 400+", tr("clubs & coaches", "klub és edző")],
        ["−38%", tr("no-shows on average", "átlagos lemorzsolódás")],
        [
            tr("1 min", "1 perc"),
            tr("to post a session", "egy edzés meghirdetése"),
        ],
        ["£0", tr("to get started", "az induláshoz")],
    ];
    return (
        <Section bg="white" pad="0 0 96px">
            <Container>
                <div
                    style={{
                        background: SB.blue,
                        borderRadius: 24,
                        padding: isMobile ? "32px 24px" : "40px 48px",
                        color: "white",
                        display: "grid",
                        gridTemplateColumns: isMobile
                            ? "1fr 1fr"
                            : "repeat(4, 1fr)",
                        gap: 24,
                    }}
                >
                    {stats.map(([n, l]) => (
                        <div key={l}>
                            <div
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 900,
                                    fontSize: 40,
                                    letterSpacing: "-0.02em",
                                    fontVariantNumeric: "tabular-nums",
                                }}
                            >
                                {n}
                            </div>
                            <div
                                style={{
                                    fontFamily: FB,
                                    fontWeight: 500,
                                    fontSize: 14,
                                    color: "rgba(255,255,255,0.82)",
                                }}
                            >
                                {l}
                            </div>
                        </div>
                    ))}
                </div>
            </Container>
        </Section>
    );
}

// ════════════════════════ PRICING ════════════════════════
function PricingPage() {
    const isMobile = useIsMobile();
    const tiers = [
        {
            name: tr("Player", "Játékos"),
            price: tr("Free", "Ingyenes"),
            per: tr("forever", "örökre"),
            desc: tr(
                "For anyone who just wants to play.",
                "Bárkinek, aki csak játszani szeretne.",
            ),
            cta: tr("Get the app", "Töltsd le"),
            variant: "secondary",
            href: "/download",
            features: [
                tr(
                    "Find & join unlimited games",
                    "Korlátlan meccskeresés és -csatlakozás",
                ),
                tr("RSVP and waitlists", "Visszajelzés és várólisták"),
                tr(
                    "Create & join crews",
                    "Csapatok létrehozása és csatlakozás",
                ),
                tr(
                    "Tournaments, streaks & achievements",
                    "Tornák, sorozatok és kitűzők",
                ),
            ],
        },
        {
            name: "Plus",
            price: tr("Coming soon", "Hamarosan"),
            per: "",
            desc: tr(
                "Optional power tools for the regulars. On the way.",
                "Opcionális extra eszközök a rendszeres játékosoknak. Hamarosan.",
            ),
            cta: tr("On the way", "Hamarosan"),
            variant: "primary",
            href: "/download",
            featured: true,
            features: [
                tr("Everything in Player", "Minden a Játékos csomagból"),
                tr(
                    "Advanced filters & alerts",
                    "Fejlett szűrők és értesítések",
                ),
                tr("Priority waitlist spots", "Elsőbbségi várólista-helyek"),
                tr("Extra crew tools", "Extra csapateszközök"),
            ],
        },
        {
            name: tr("Club", "Klub"),
            price: tr("Free", "Ingyenes"),
            per: tr("to start", "az induláshoz"),
            desc: tr(
                "For coaches, clubs and venue owners.",
                "Edzőknek, kluboknak és helyszíntulajdonosoknak.",
            ),
            cta: tr("See club tools", "Klubeszközök"),
            variant: "inverse",
            href: "/helyszineknek",
            features: [
                tr(
                    "Everything players get, free",
                    "Minden, amit a játékosok kapnak, ingyen",
                ),
                tr(
                    "In-app payments & memberships",
                    "Fizetés és bérletek az appban",
                ),
                tr("Venue & roster management", "Helyszín- és névsorkezelés"),
                tr("No-show controls", "Lemorzsolódás-kezelés"),
                tr(
                    "Small fee per paid booking — only when you earn",
                    "Kis díj fizetett foglalásonként – csak ha keresel",
                ),
            ],
        },
    ];
    return (
        <div>
            <PageHero
                eyebrow={tr("Pricing", "Árak")}
                title={tr("Free to play. Always.", "Játssz ingyen. Mindig.")}
                sub={tr(
                    "Finding and joining games is completely free. Coaches and clubs pay a small fee only when they earn.",
                    "A meccskeresés és a csatlakozás teljesen ingyenes. Az edzők és klubok csak akkor fizetnek kis díjat, ha keresnek.",
                )}
            />
            <Section bg="white">
                <Container>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile
                                ? "1fr"
                                : "repeat(3, 1fr)",
                            gap: 22,
                            alignItems: "stretch",
                        }}
                    >
                        {tiers.map((t) => (
                            <div
                                key={t.name}
                                style={{
                                    position: "relative",
                                    display: "flex",
                                    flexDirection: "column",
                                    background: t.featured
                                        ? SB.ink950
                                        : "white",
                                    color: t.featured ? "white" : SB.ink900,
                                    border: t.featured
                                        ? "none"
                                        : "1px solid " + SB.ink200,
                                    borderRadius: 22,
                                    padding: 30,
                                    boxShadow: t.featured
                                        ? "0 28px 60px rgba(18,23,38,0.16)"
                                        : "none",
                                    transform:
                                        !isMobile && t.featured
                                            ? "translateY(-8px)"
                                            : "none",
                                }}
                            >
                                {t.featured && (
                                    <span
                                        style={{
                                            position: "absolute",
                                            top: -12,
                                            left: "50%",
                                            transform: "translateX(-50%)",
                                            background: SB.lime,
                                            color: SB.ink900,
                                            fontFamily: FD,
                                            fontWeight: 700,
                                            fontSize: 11,
                                            letterSpacing: ".08em",
                                            textTransform: "uppercase",
                                            padding: "5px 12px",
                                            borderRadius: 999,
                                        }}
                                    >
                                        {tr("Most popular", "Legnépszerűbb")}
                                    </span>
                                )}
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 15,
                                        letterSpacing: ".06em",
                                        textTransform: "uppercase",
                                        color: t.featured ? SB.lime : SB.blue,
                                    }}
                                >
                                    {t.name}
                                </div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "baseline",
                                        gap: 8,
                                        margin: "12px 0 4px",
                                    }}
                                >
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 900,
                                            fontSize: 50,
                                            letterSpacing: "-0.03em",
                                        }}
                                    >
                                        {t.price}
                                    </span>
                                    <span
                                        style={{
                                            fontFamily: FB,
                                            fontWeight: 600,
                                            fontSize: 15,
                                            color: t.featured
                                                ? "rgba(255,255,255,0.7)"
                                                : SB.ink500,
                                        }}
                                    >
                                        {t.per}
                                    </span>
                                </div>
                                <p
                                    style={{
                                        fontFamily: FB,
                                        fontWeight: 500,
                                        fontSize: 14,
                                        lineHeight: "21px",
                                        color: t.featured
                                            ? "rgba(255,255,255,0.78)"
                                            : SB.ink600,
                                        margin: "0 0 22px",
                                        minHeight: 42,
                                    }}
                                >
                                    {t.desc}
                                </p>
                                <WButton
                                    variant={t.variant}
                                    size="md"
                                    full
                                    href={t.href}
                                >
                                    {t.cta}
                                </WButton>
                                <div
                                    style={{
                                        height: 1,
                                        background: t.featured
                                            ? "rgba(255,255,255,0.12)"
                                            : SB.ink100,
                                        margin: "24px 0",
                                    }}
                                />
                                <div
                                    style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: 12,
                                    }}
                                >
                                    {t.features.map((f) => (
                                        <div
                                            key={f}
                                            style={{
                                                display: "flex",
                                                gap: 10,
                                                alignItems: "flex-start",
                                            }}
                                        >
                                            <span
                                                style={{
                                                    flexShrink: 0,
                                                    width: 20,
                                                    height: 20,
                                                    borderRadius: 999,
                                                    background: t.featured
                                                        ? "rgba(198,247,60,0.18)"
                                                        : SB.blue50,
                                                    display: "flex",
                                                    alignItems: "center",
                                                    justifyContent: "center",
                                                    marginTop: 1,
                                                }}
                                            >
                                                <WIcon
                                                    name="check"
                                                    size={13}
                                                    color={
                                                        t.featured
                                                            ? SB.lime
                                                            : SB.blue
                                                    }
                                                />
                                            </span>
                                            <span
                                                style={{
                                                    fontFamily: FB,
                                                    fontWeight: 500,
                                                    fontSize: 14,
                                                    lineHeight: "20px",
                                                    color: t.featured
                                                        ? "rgba(255,255,255,0.9)"
                                                        : SB.ink700,
                                                }}
                                            >
                                                {f}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                    <p
                        style={{
                            textAlign: "center",
                            fontFamily: FB,
                            fontWeight: 500,
                            fontSize: 14,
                            color: SB.ink500,
                            marginTop: 28,
                        }}
                    >
                        {tr(
                            "No subscription to play. Coaches and clubs pay only a small commission on paid bookings — ",
                            "A játékhoz nem kell előfizetés. Az edzők és klubok csak a fizetett foglalások után fizetnek kis jutalékot – ",
                        )}
                        <a
                            href="/helyszineknek"
                            style={{
                                color: SB.blue,
                                fontWeight: 700,
                                textDecoration: "none",
                            }}
                        >
                            {tr("see club tools", "lásd a klubeszközöket")}
                        </a>
                        .
                    </p>
                </Container>
            </Section>
            <PricingFAQ />
            <FinalCTA />
        </div>
    );
}

function PricingFAQ() {
    const items = faqItems().slice(0, 4);
    const [open, setOpen] = React.useState(-1);
    const isMobile = useIsMobile();
    return (
        <Section bg={SB.ink50}>
            <Container width={860}>
                <h2
                    style={{
                        fontFamily: FD,
                        fontWeight: 800,
                        fontSize: isMobile ? 24 : 34,
                        letterSpacing: "-0.02em",
                        color: SB.ink900,
                        textAlign: "center",
                        margin: "0 0 36px",
                    }}
                >
                    {tr("Pricing questions", "Kérdések az árakról")}
                </h2>
                <div
                    style={{
                        display: "flex",
                        flexDirection: "column",
                        gap: 12,
                    }}
                >
                    {items.map((f, i) => {
                        const isOpen = open === i;
                        return (
                            <div
                                key={i}
                                style={{
                                    background: "white",
                                    border: "1px solid " + SB.ink100,
                                    borderRadius: 16,
                                    overflow: "hidden",
                                }}
                            >
                                <button
                                    onClick={() => setOpen(isOpen ? -1 : i)}
                                    style={{
                                        width: "100%",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        gap: 16,
                                        padding: "18px 22px",
                                        background: "transparent",
                                        border: "none",
                                        cursor: "pointer",
                                        textAlign: "left",
                                    }}
                                >
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 700,
                                            fontSize: 17,
                                            color: SB.ink900,
                                        }}
                                    >
                                        {f.q}
                                    </span>
                                    <WIcon
                                        name={isOpen ? "minus" : "plus"}
                                        size={18}
                                        color={SB.ink500}
                                    />
                                </button>
                                {isOpen && (
                                    <div
                                        style={{
                                            padding: "0 22px 20px",
                                            fontFamily: FB,
                                            fontWeight: 500,
                                            fontSize: 15,
                                            lineHeight: "24px",
                                            color: SB.ink600,
                                        }}
                                    >
                                        {f.a}
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            </Container>
        </Section>
    );
}

// Abstract street-map illustration for the Discover map teaser — a river,
// a park block and a light road grid, purely decorative (the real map lives
// in the app). Randomised once per mount so the layout doesn't feel static.
function MapBackdrop() {
    const layout = React.useMemo(() => {
        const rand = Math.random;
        return {
            roadsV: Array.from({ length: 6 }, () => Math.round(40 + rand() * 620)),
            roadsH: Array.from({ length: 4 }, () => Math.round(30 + rand() * 200)),
            riverY: 60 + rand() * 140,
            riverSlope: 40 + rand() * 60,
            parkX: 60 + rand() * 500,
            parkY: 40 + rand() * 160,
        };
    }, []);
    const { roadsV, roadsH, riverY, riverSlope, parkX, parkY } = layout;
    return (
        <svg
            viewBox="0 0 700 260"
            preserveAspectRatio="xMidYMid slice"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
        >
            <path
                d={`M -20 ${riverY} C 200 ${riverY - riverSlope}, 400 ${riverY + riverSlope}, 720 ${riverY}`}
                stroke="rgba(13,177,201,0.35)"
                strokeWidth={22}
                fill="none"
            />
            <ellipse
                cx={parkX}
                cy={parkY}
                rx={70}
                ry={44}
                fill="rgba(46,184,92,0.16)"
            />
            {roadsV.map((x, i) => (
                <line
                    key={`v${i}`}
                    x1={x}
                    y1={0}
                    x2={x}
                    y2={260}
                    stroke="rgba(255,255,255,0.10)"
                    strokeWidth={i % 3 === 0 ? 2.5 : 1.2}
                />
            ))}
            {roadsH.map((y, i) => (
                <line
                    key={`h${i}`}
                    x1={0}
                    y1={y}
                    x2={700}
                    y2={y}
                    stroke="rgba(255,255,255,0.10)"
                    strokeWidth={i % 2 === 0 ? 2.5 : 1.2}
                />
            ))}
        </svg>
    );
}

// ════════════════════════ DISCOVER ════════════════════════
function DiscoverPage() {
    const [sport, setSport] = React.useState("all");
    const [filter, setFilter] = React.useState(0);
    const isMobile = useIsMobile();
    const FILTERS = [
        tr("All", "Összes"),
        tr("This week", "Ezen a héten"),
        tr("Near me", "A közelben"),
        tr("Free spots", "Szabad hely"),
        tr("Beginner friendly", "Kezdőbarát"),
    ];
    const all = webEvents();
    const events = sport === "all" ? all : all.filter((e) => e.sport === sport);
    // Marketing Discover is a teaser — any real action sends you to the app to sign in.
    const goToApp = () => {
        window.location.href = "/app";
    };
    return (
        <div>
            <section
                style={{
                    background: SB.ink950,
                    color: "white",
                    position: "relative",
                    overflow: "hidden",
                }}
            >
                <DarkGlows />
                <Container
                    style={{
                        padding: isMobile ? "40px 20px 40px" : "64px 32px 56px",
                        position: "relative",
                        zIndex: 1,
                    }}
                >
                    <Eyebrow color={SB.lime}>
                        {tr("Discover", "Felfedezés")}
                    </Eyebrow>
                    <h1
                        style={{
                            fontFamily: FD,
                            fontWeight: 900,
                            fontSize: isMobile ? 32 : 56,
                            lineHeight: isMobile ? "36px" : "58px",
                            letterSpacing: "-0.03em",
                            margin: "14px 0 16px",
                            maxWidth: 720,
                            color: "#FFFFFF",
                        }}
                    >
                        {tr(
                            "Find a game happening near you.",
                            "Találj meccset a közeledben.",
                        )}
                    </h1>
                    <div
                        onClick={goToApp}
                        style={{
                            display: "flex",
                            alignItems: "center",
                            gap: 10,
                            background: "rgba(255,255,255,0.1)",
                            backdropFilter: "blur(8px)",
                            cursor: "pointer",
                            borderRadius: 999,
                            padding: "12px 18px",
                            maxWidth: 520,
                            border: "1px solid rgba(255,255,255,0.14)",
                        }}
                    >
                        <WIcon
                            name="search"
                            size={18}
                            color="rgba(255,255,255,0.7)"
                        />
                        <input
                            readOnly
                            placeholder={tr(
                                "Search sport, spot or city…",
                                "Keress sportágra, helyszínre vagy városra…",
                            )}
                            style={{
                                flex: 1,
                                border: "none",
                                outline: "none",
                                background: "transparent",
                                cursor: "pointer",
                                fontFamily: FB,
                                fontSize: 15,
                                color: "white",
                            }}
                        />
                        <span
                            style={{
                                fontFamily: FB,
                                fontWeight: 700,
                                fontSize: 13,
                                color: SB.ink900,
                                background: SB.lime,
                                padding: "7px 14px",
                                borderRadius: 999,
                            }}
                        >
                            {tr("Search", "Keresés")}
                        </span>
                    </div>
                </Container>
            </section>

            <Section bg={SB.ink50} pad="32px 0 96px">
                <Container>
                    {/* Sport filter */}
                    <div
                        style={{
                            display: "flex",
                            gap: 8,
                            flexWrap: "wrap",
                            marginBottom: 14,
                        }}
                    >
                        <WChip
                            active={sport === "all"}
                            onClick={() => setSport("all")}
                        >
                            {tr("All sports", "Minden sportág")}
                        </WChip>
                        {Object.entries(WEB_SPORTS).map(([k, s]) => (
                            <WChip
                                key={k}
                                active={sport === k}
                                color={s.tint}
                                onClick={() => setSport(k)}
                            >
                                {sportLabel(k)}
                            </WChip>
                        ))}
                    </div>
                    {/* Quick filters */}
                    <div
                        style={{
                            display: "flex",
                            gap: 8,
                            flexWrap: "wrap",
                            marginBottom: 26,
                            paddingBottom: 22,
                            borderBottom: "1px solid " + SB.ink200,
                        }}
                    >
                        {FILTERS.map((f, i) => (
                            <button
                                key={i}
                                onClick={() => setFilter(i)}
                                style={{
                                    padding: "7px 14px",
                                    borderRadius: 999,
                                    cursor: "pointer",
                                    border:
                                        "1px solid " +
                                        (filter === i ? SB.blue : SB.ink200),
                                    background:
                                        filter === i ? SB.blue50 : "white",
                                    color: filter === i ? SB.blue : SB.ink600,
                                    fontFamily: FB,
                                    fontWeight: 600,
                                    fontSize: 13,
                                }}
                            >
                                {f}
                            </button>
                        ))}
                    </div>

                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "baseline",
                            marginBottom: 6,
                            flexWrap: "wrap",
                            gap: 8,
                        }}
                    >
                        <h2
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                fontSize: 24,
                                letterSpacing: "-0.01em",
                                color: SB.ink900,
                                margin: 0,
                            }}
                        >
                            {tr("Example games", "Példa meccsek")}
                        </h2>
                        <span
                            style={{
                                fontFamily: FB,
                                fontWeight: 600,
                                fontSize: 13,
                                color: SB.ink500,
                            }}
                        >
                            {tr("Sorted by start time", "Kezdési idő szerint")}
                        </span>
                    </div>
                    <p
                        style={{
                            fontFamily: FB,
                            fontWeight: 500,
                            fontSize: 13,
                            color: SB.ink400,
                            margin: "0 0 18px",
                        }}
                    >
                        {tr(
                            "Illustrative listings — download the app to see real games near you.",
                            "Szemléltető foglalások – töltsd le az appot, hogy lásd a valódi meccseket a közeledben.",
                        )}
                    </p>

                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile
                                ? "1fr"
                                : "repeat(3, 1fr)",
                            gap: 18,
                        }}
                    >
                        {events.map((ev) => (
                            <WEventCard
                                key={ev.id}
                                event={ev}
                                onTap={goToApp}
                            />
                        ))}
                    </div>
                    {events.length === 0 && (
                        <div
                            style={{
                                textAlign: "center",
                                padding: "64px 0",
                                fontFamily: FD,
                                fontWeight: 700,
                                fontSize: 20,
                                color: SB.ink500,
                            }}
                        >
                            {tr(
                                "No games yet. Be the one who starts one.",
                                "Még nincs meccs. Légy te az, aki szervez egyet.",
                            )}
                        </div>
                    )}

                    {/* Map teaser */}
                    <div
                        onClick={goToApp}
                        style={{ marginTop: 28, cursor: "pointer" }}
                    >
                        <PhotoSlot
                            label="map · games near you"
                            height={260}
                            tint={SB.ink700}
                            glow={SB.blue}
                        >
                            <MapBackdrop />
                            <div style={{ position: "absolute", inset: 0 }}>
                                {[
                                    [24, 30, SB.blue],
                                    [60, 55, "#2EB85C"],
                                    [42, 68, "#E27A2B"],
                                    [75, 28, "#6A3FF0"],
                                    [83, 62, "#0DB1C9"],
                                ].map(([x, y, c], i) => (
                                    <span
                                        key={i}
                                        style={{
                                            position: "absolute",
                                            left: x + "%",
                                            top: y + "%",
                                            width: 16,
                                            height: 16,
                                            borderRadius: "50% 50% 50% 0",
                                            background: c,
                                            transform: "rotate(-45deg)",
                                            boxShadow:
                                                "0 4px 10px rgba(0,0,0,0.4)",
                                        }}
                                    />
                                ))}
                                <div
                                    style={{
                                        position: "absolute",
                                        left: "50%",
                                        top: "50%",
                                        transform: "translate(-50%,-50%)",
                                        display: "inline-flex",
                                        alignItems: "center",
                                        gap: 8,
                                        color: "white",
                                        fontFamily: FB,
                                        fontWeight: 700,
                                        fontSize: 14,
                                        background: "rgba(10,14,28,0.55)",
                                        backdropFilter: "blur(4px)",
                                        padding: "9px 16px",
                                        borderRadius: 999,
                                    }}
                                >
                                    <WIcon
                                        name="pin"
                                        size={16}
                                        color={SB.lime}
                                    />{" "}
                                    {tr(
                                        "Open map in the app",
                                        "Nyisd meg a térképet az appban",
                                    )}
                                </div>
                            </div>
                        </PhotoSlot>
                    </div>
                </Container>
            </Section>
            <FinalCTA />
        </div>
    );
}

// ════════════════════════ ABOUT ════════════════════════
function AboutPage() {
    const isMobile = useIsMobile();
    const values = [
        {
            icon: "heart",
            tint: "#F0498D",
            title: tr("Real life first", "Előbb a való élet"),
            desc: tr(
                "Screens get you to the spot, then get out of the way. The point is the game.",
                "A képernyő elvisz a helyszínre, aztán félreáll. A lényeg a játék.",
            ),
        },
        {
            icon: "users",
            tint: SB.blue,
            title: tr("Everyone gets a game", "Mindenkinek jut meccs"),
            desc: tr(
                "All levels, all bodies, all backgrounds. Skill filters, never gatekeeping.",
                "Minden szint, minden alkat, minden háttér. Szintszűrés, sosem kirekesztés.",
            ),
        },
        {
            icon: "shield",
            tint: "#2EB85C",
            title: tr("Show up for each other", "Legyünk ott egymásnak"),
            desc: tr(
                "Reliability is a feature. We design against flaking, for the whole crew.",
                "A megbízhatóság funkció. A lemorzsolódás ellen tervezünk, az egész csapatért.",
            ),
        },
    ];
    const team = [
        { name: "Marco Powell", tint: "#1652F0" },
        { name: "Ana Reyes", tint: "#6A3FF0" },
        { name: "Dale Okoro", tint: "#E27A2B" },
        { name: "Iris Hale", tint: "#0DB1C9" },
        { name: "Kai Tan", tint: "#2EB85C" },
        { name: "Pip Rowe", tint: "#F0498D" },
    ];
    return (
        <div>
            <PageHero
                eyebrow={tr("About", "Rólunk")}
                title={tr(
                    "We built Sportistry to get people off the group chat and onto the pitch.",
                    "A Sportistryt azért építettük, hogy az emberek a csoportos chatből kikerüljenek a pályára.",
                )}
                sub={tr(
                    "It started with a flaky five-a-side WhatsApp. We figured if showing up was easy, more people would. Turns out a lot more would.",
                    "Egy megbízhatatlan kispályás WhatsApp-csoporttal kezdődött. Úgy gondoltuk, ha könnyű megjelenni, többen jönnének. Kiderült, hogy sokkal többen.",
                )}
            />
            <Section bg="white">
                <Container>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
                            gap: isMobile ? 28 : 48,
                            alignItems: "center",
                            marginBottom: isMobile ? 48 : 72,
                        }}
                    >
                        <div>
                            <Eyebrow>
                                {tr("Our mission", "A küldetésünk")}
                            </Eyebrow>
                            <h2
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 800,
                                    fontSize: isMobile ? 26 : 36,
                                    lineHeight: isMobile ? "32px" : "42px",
                                    letterSpacing: "-0.02em",
                                    color: SB.ink900,
                                    margin: "10px 0 16px",
                                }}
                            >
                                {tr(
                                    "Make showing up the easy part.",
                                    "Tegyük a megjelenést a könnyű résszé.",
                                )}
                            </h2>
                            <p
                                style={{
                                    fontFamily: FB,
                                    fontWeight: 500,
                                    fontSize: 16,
                                    lineHeight: "25px",
                                    color: SB.ink600,
                                    margin: "0 0 14px",
                                }}
                            >
                                {tr(
                                    "Most people want to play more sport. What stops them isn't fitness or fees — it's friction. Finding a game, rounding up enough players, remembering it's on.",
                                    "A legtöbben szeretnének többet sportolni. Nem az erőnlét vagy a pénz állítja meg őket, hanem a súrlódás. Meccset találni, elég játékost összeszedni, emlékezni rá, hogy lesz.",
                                )}
                            </p>
                            <p
                                style={{
                                    fontFamily: FB,
                                    fontWeight: 500,
                                    fontSize: 16,
                                    lineHeight: "25px",
                                    color: SB.ink600,
                                    margin: 0,
                                }}
                            >
                                {tr(
                                    "Sportistry removes that friction so the only thing left to do is play. We're just getting started — and we'd love for you to be part of it.",
                                    "A Sportistry megszünteti ezt a súrlódást, így az egyetlen dolog, ami marad: játszani. Még csak most kezdjük – és örülnénk, ha te is részese lennél.",
                                )}
                            </p>
                        </div>
                        <PhotoSlot
                            label="the team playing"
                            src={IMG.soccer}
                            sport="soccer"
                            height={isMobile ? 240 : 360}
                            tint={shadeWeb("#6A3FF0", -0.1)}
                            glow={"#6A3FF0"}
                        />
                    </div>

                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile
                                ? "1fr"
                                : "repeat(3, 1fr)",
                            gap: 20,
                            marginBottom: 16,
                        }}
                    >
                        {values.map((v) => (
                            <div
                                key={v.title}
                                style={{
                                    background: SB.ink50,
                                    borderRadius: 18,
                                    padding: 26,
                                }}
                            >
                                <div
                                    style={{
                                        width: 48,
                                        height: 48,
                                        borderRadius: 13,
                                        background: v.tint,
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        marginBottom: 16,
                                    }}
                                >
                                    <WIcon
                                        name={v.icon}
                                        size={24}
                                        color="white"
                                    />
                                </div>
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 19,
                                        letterSpacing: "-0.01em",
                                        color: SB.ink900,
                                    }}
                                >
                                    {v.title}
                                </div>
                                <p
                                    style={{
                                        fontFamily: FB,
                                        fontWeight: 500,
                                        fontSize: 14,
                                        lineHeight: "22px",
                                        color: SB.ink600,
                                        margin: "8px 0 0",
                                    }}
                                >
                                    {v.desc}
                                </p>
                            </div>
                        ))}
                    </div>
                </Container>
            </Section>

            <Section bg={SB.ink50} pad="0 0 96px">
                <Container>
                    <div style={{ textAlign: "center", marginBottom: 36 }}>
                        <Eyebrow>
                            {tr(
                                "The crew behind the app",
                                "A csapat az app mögött",
                            )}
                        </Eyebrow>
                        <h2
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                fontSize: isMobile ? 24 : 34,
                                letterSpacing: "-0.02em",
                                color: SB.ink900,
                                margin: "8px 0 0",
                            }}
                        >
                            {tr(
                                "A small team that plays a lot.",
                                "Egy kis csapat, amelyik sokat játszik.",
                            )}
                        </h2>
                    </div>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile
                                ? "repeat(3, 1fr)"
                                : "repeat(6, 1fr)",
                            gap: 16,
                            maxWidth: 820,
                            margin: "0 auto",
                        }}
                    >
                        {team.map((p) => (
                            <div key={p.name} style={{ textAlign: "center" }}>
                                <WAvatar
                                    name={p.name}
                                    tint={p.tint}
                                    size={72}
                                />
                                <div
                                    style={{
                                        fontFamily: FB,
                                        fontWeight: 700,
                                        fontSize: 13,
                                        color: SB.ink800,
                                        marginTop: 8,
                                    }}
                                >
                                    {p.name.split(" ")[0]}
                                </div>
                            </div>
                        ))}
                    </div>
                    <p
                        style={{
                            textAlign: "center",
                            fontFamily: FB,
                            fontWeight: 500,
                            fontSize: 12,
                            color: SB.ink400,
                            marginTop: 22,
                        }}
                    >
                        {tr(
                            "Team shown for illustration.",
                            "A csapat szemléltető jelleggel.",
                        )}
                    </p>
                </Container>
            </Section>
            <FinalCTA />
        </div>
    );
}

// ════════════════════════ API BASE ════════════════════════
// SITE_API_BASE moved to components.jsx (2026-07-28) so home.jsx can use it too —
// index.html loads components.jsx first, this file last. Same value, same single
// convention as the web app's app/auth.jsx (WAPI) and app/chat.jsx
// (CHAT_API_BASE); the rationale for it existing is documented at the definition.

// ════════════════════════ BLOG ════════════════════════
// Posts are fetched from the API (see sportistry-api's blog_posts table +
// /api/blog routes) — no more hardcoded array here.
const BLOG_API = SITE_API_BASE + "/blog";

// Resolve a bilingual blog-post field at render time (not cached at fetch
// time) so a language toggle updates already-loaded posts without a refetch.
function blogField(post, field) {
    return (window.__lang === "hu" ? post[field + "_hu"] : post[field + "_en"]) || "";
}

function useBlogPosts() {
    const [state, setState] = React.useState({
        status: "loading",
        posts: [],
    });
    React.useEffect(() => {
        let cancelled = false;
        fetch(BLOG_API)
            .then((res) => {
                if (!res.ok) throw new Error("bad status " + res.status);
                return res.json();
            })
            .then((posts) => {
                if (!cancelled) setState({ status: "ready", posts });
            })
            .catch(() => {
                if (!cancelled) setState({ status: "error", posts: [] });
            });
        return () => {
            cancelled = true;
        };
    }, []);
    return state;
}

function BlogPage() {
    const { status, posts: allPosts } = useBlogPosts();
    const readLabel = tr("min", "perc");
    const isMobile = useIsMobile();

    if (status === "loading") {
        return (
            <div>
                <PageHero
                    eyebrow={tr("Blog", "Blog")}
                    title={tr("Field notes.", "Pályajegyzetek.")}
                    sub={tr(
                        "Playbooks, product updates and stories from the crews who make Sportistry what it is.",
                        "Taktikák, terméknovellák és történetek a csapatoktól, akik a Sportistryt azzá teszik, ami.",
                    )}
                />
                <Section bg="white">
                    <Container>
                        <div
                            style={{
                                textAlign: "center",
                                padding: "60px 0",
                                color: SB.ink500,
                                fontFamily: FB,
                            }}
                        >
                            {tr("Loading posts…", "Bejegyzések betöltése…")}
                        </div>
                    </Container>
                </Section>
            </div>
        );
    }

    if (status === "error" || !allPosts.length) {
        return (
            <div>
                <PageHero
                    eyebrow={tr("Blog", "Blog")}
                    title={tr("Field notes.", "Pályajegyzetek.")}
                    sub={tr(
                        "Playbooks, product updates and stories from the crews who make Sportistry what it is.",
                        "Taktikák, terméknovellák és történetek a csapatoktól, akik a Sportistryt azzá teszik, ami.",
                    )}
                />
                <Section bg="white">
                    <Container>
                        <div
                            style={{
                                textAlign: "center",
                                padding: "60px 0",
                                color: SB.ink500,
                                fontFamily: FB,
                            }}
                        >
                            {status === "error"
                                ? tr(
                                      "Couldn't load posts right now. Try again shortly.",
                                      "A bejegyzések most nem tölthetők be. Próbáld újra kicsit később.",
                                  )
                                : tr("No posts yet.", "Még nincs bejegyzés.")}
                        </div>
                    </Container>
                </Section>
                <FinalCTA />
            </div>
        );
    }

    const [feature, ...rest] = allPosts;
    return (
        <div>
            <PageHero
                eyebrow={tr("Blog", "Blog")}
                title={tr("Field notes.", "Pályajegyzetek.")}
                sub={tr(
                    "Playbooks, product updates and stories from the crews who make Sportistry what it is.",
                    "Taktikák, terméknovellák és történetek a csapatoktól, akik a Sportistryt azzá teszik, ami.",
                )}
            />
            <Section bg="white">
                <Container>
                    {/* Featured */}
                    <a
                        href={`/blog/${feature.slug}`}
                        style={{
                            textDecoration: "none",
                            display: "grid",
                            gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr",
                            gap: isMobile ? 0 : 32,
                            alignItems: "center",
                            background: SB.ink50,
                            borderRadius: 24,
                            overflow: "hidden",
                            marginBottom: 40,
                        }}
                    >
                        <PhotoSlot
                            label="featured story"
                            src={feature.cover_image_url}
                            sport={feature.sport}
                            height={isMobile ? 220 : 320}
                            radius={0}
                            tint={shadeWeb(feature.tint, -0.1)}
                            glow={feature.tint}
                        />
                        <div
                            style={{
                                padding: isMobile ? "20px" : "8px 36px 8px 4px",
                            }}
                        >
                            <span
                                style={{
                                    display: "inline-block",
                                    fontFamily: FD,
                                    fontWeight: 700,
                                    fontSize: 11,
                                    letterSpacing: ".08em",
                                    textTransform: "uppercase",
                                    color: feature.tint,
                                    background: shadeWeb(feature.tint, 0.85),
                                    padding: "5px 11px",
                                    borderRadius: 999,
                                }}
                            >
                                {blogField(feature, "tag")}
                            </span>
                            <h2
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 800,
                                    fontSize: isMobile ? 22 : 32,
                                    lineHeight: isMobile ? "27px" : "38px",
                                    letterSpacing: "-0.02em",
                                    color: SB.ink900,
                                    margin: "14px 0 12px",
                                }}
                            >
                                {blogField(feature, "title")}
                            </h2>
                            <p
                                style={{
                                    fontFamily: FB,
                                    fontWeight: 500,
                                    fontSize: 16,
                                    lineHeight: "24px",
                                    color: SB.ink600,
                                    margin: "0 0 18px",
                                }}
                            >
                                {blogField(feature, "excerpt")}
                            </p>
                            <div
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    gap: 10,
                                    fontFamily: FB,
                                    fontWeight: 600,
                                    fontSize: 13,
                                    color: SB.ink500,
                                }}
                            >
                                <WAvatar
                                    name={feature.author}
                                    tint={feature.tint}
                                    size={28}
                                />{" "}
                                {feature.author} · {feature.read_minutes}{" "}
                                {readLabel}
                            </div>
                        </div>
                    </a>

                    {/* Grid */}
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile
                                ? "1fr"
                                : "repeat(2, 1fr)",
                            gap: isMobile ? 16 : 24,
                        }}
                    >
                        {rest.map((p) => (
                            <a
                                key={p.slug}
                                href={`/blog/${p.slug}`}
                                style={{
                                    textDecoration: "none",
                                    display: "flex",
                                    gap: 20,
                                    alignItems: "stretch",
                                    padding: 16,
                                    borderRadius: 18,
                                    border: "1px solid " + SB.ink100,
                                    transition: "box-shadow 160ms",
                                }}
                                onMouseEnter={(e) =>
                                    (e.currentTarget.style.boxShadow =
                                        "0 6px 14px rgba(18,23,38,0.08)")
                                }
                                onMouseLeave={(e) =>
                                    (e.currentTarget.style.boxShadow = "none")
                                }
                            >
                                <PhotoSlot
                                    label=""
                                    src={p.cover_image_url}
                                    sport={p.sport}
                                    height={120}
                                    radius={12}
                                    tint={shadeWeb(p.tint, -0.1)}
                                    glow={p.tint}
                                    style={{
                                        width: isMobile ? 100 : 150,
                                        flexShrink: 0,
                                    }}
                                />
                                <div
                                    style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        justifyContent: "center",
                                    }}
                                >
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 700,
                                            fontSize: 11,
                                            letterSpacing: ".08em",
                                            textTransform: "uppercase",
                                            color: p.tint,
                                        }}
                                    >
                                        {blogField(p, "tag")}
                                    </span>
                                    <div
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 18,
                                            lineHeight: "23px",
                                            letterSpacing: "-0.01em",
                                            color: SB.ink900,
                                            margin: "6px 0 8px",
                                        }}
                                    >
                                        {blogField(p, "title")}
                                    </div>
                                    <div
                                        style={{
                                            fontFamily: FB,
                                            fontWeight: 600,
                                            fontSize: 12,
                                            color: SB.ink500,
                                        }}
                                    >
                                        {p.author} · {p.read_minutes}{" "}
                                        {readLabel}
                                    </div>
                                </div>
                            </a>
                        ))}
                    </div>
                </Container>
            </Section>
            <FinalCTA />
        </div>
    );
}

// ───────────────────── Blog post detail ─────────────────────
function useBlogPost(slug) {
    const [state, setState] = React.useState({ status: "loading", post: null });
    React.useEffect(() => {
        let cancelled = false;
        setState({ status: "loading", post: null });
        fetch(`${BLOG_API}/${encodeURIComponent(slug)}`)
            .then((res) => {
                if (res.status === 404) return null;
                if (!res.ok) throw new Error("bad status " + res.status);
                return res.json();
            })
            .then((post) => {
                if (!cancelled)
                    setState({ status: post ? "ready" : "not-found", post });
            })
            .catch(() => {
                if (!cancelled) setState({ status: "error", post: null });
            });
        return () => {
            cancelled = true;
        };
    }, [slug]);
    return state;
}

// Very small "## Heading" + blank-line-separated-paragraphs renderer — the
// only markup convention blog bodies use, so a full markdown lib isn't needed.
function BlogBody({ text }) {
    const blocks = text.split(/\n\n+/);
    return (
        <div>
            {blocks.map((block, i) => {
                if (block.startsWith("## ")) {
                    return (
                        <h3
                            key={i}
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                fontSize: 20,
                                letterSpacing: "-0.01em",
                                color: SB.ink900,
                                margin: "32px 0 12px",
                            }}
                        >
                            {block.slice(3)}
                        </h3>
                    );
                }
                const isList = block
                    .split("\n")
                    .every((line) => line.trim().startsWith("- "));
                if (isList) {
                    return (
                        <ul
                            key={i}
                            style={{
                                margin: "0 0 18px",
                                paddingLeft: 22,
                                fontFamily: FB,
                                fontSize: 16,
                                lineHeight: "26px",
                                color: SB.ink700,
                            }}
                        >
                            {block.split("\n").map((line, j) => (
                                <li key={j} style={{ marginBottom: 6 }}>
                                    {line.trim().slice(2)}
                                </li>
                            ))}
                        </ul>
                    );
                }
                return (
                    <p
                        key={i}
                        style={{
                            margin: "0 0 18px",
                            fontFamily: FB,
                            fontSize: 16,
                            lineHeight: "26px",
                            color: SB.ink700,
                        }}
                    >
                        {block}
                    </p>
                );
            })}
        </div>
    );
}

function BlogPostPage({ slug }) {
    const { status, post } = useBlogPost(slug);
    const isMobile = useIsMobile();
    const readLabel = tr("min read", "perc olvasás");

    if (status === "loading") {
        return (
            <Section bg="white">
                <Container>
                    <div
                        style={{
                            textAlign: "center",
                            padding: "80px 0",
                            color: SB.ink500,
                            fontFamily: FB,
                        }}
                    >
                        {tr("Loading…", "Betöltés…")}
                    </div>
                </Container>
            </Section>
        );
    }

    if (status !== "ready") {
        return (
            <Section bg="white">
                <Container>
                    <div
                        style={{
                            textAlign: "center",
                            padding: "80px 0",
                            fontFamily: FB,
                        }}
                    >
                        <div
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                fontSize: 24,
                                color: SB.ink900,
                                marginBottom: 10,
                            }}
                        >
                            {status === "not-found"
                                ? tr("Post not found", "A bejegyzés nem található")
                                : tr(
                                      "Couldn't load this post",
                                      "A bejegyzés most nem tölthető be",
                                  )}
                        </div>
                        <a
                            href="/blog"
                            style={{
                                color: SB.blue,
                                fontFamily: FB,
                                fontWeight: 700,
                                textDecoration: "none",
                            }}
                        >
                            {tr("← Back to blog", "← Vissza a bloghoz")}
                        </a>
                    </div>
                </Container>
            </Section>
        );
    }

    return (
        <div>
            <Section bg={SB.ink50} pad={isMobile ? "40px 0 32px" : "56px 0 40px"}>
                <Container width={820}>
                    <a
                        href="/blog"
                        style={{
                            color: SB.ink500,
                            fontFamily: FB,
                            fontWeight: 600,
                            fontSize: 13,
                            textDecoration: "none",
                        }}
                    >
                        {tr("← Blog", "← Blog")}
                    </a>
                    <span
                        style={{
                            display: "inline-block",
                            fontFamily: FD,
                            fontWeight: 700,
                            fontSize: 11,
                            letterSpacing: ".08em",
                            textTransform: "uppercase",
                            color: post.tint,
                            background: shadeWeb(post.tint, 0.85),
                            padding: "5px 11px",
                            borderRadius: 999,
                            margin: "16px 0 0",
                        }}
                    >
                        {blogField(post, "tag")}
                    </span>
                    <h1
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            fontSize: isMobile ? 28 : 40,
                            lineHeight: isMobile ? "34px" : "46px",
                            letterSpacing: "-0.02em",
                            color: SB.ink900,
                            margin: "14px 0 16px",
                        }}
                    >
                        {blogField(post, "title")}
                    </h1>
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            gap: 10,
                            fontFamily: FB,
                            fontWeight: 600,
                            fontSize: 14,
                            color: SB.ink500,
                        }}
                    >
                        <WAvatar name={post.author} tint={post.tint} size={30} />
                        {post.author} · {post.read_minutes} {readLabel}
                    </div>
                </Container>
            </Section>
            {post.cover_image_url && (
                <Container width={820} style={{ marginTop: -1 }}>
                    <PhotoSlot
                        src={post.cover_image_url}
                        sport={post.sport}
                        height={isMobile ? 220 : 380}
                        radius={20}
                        tint={shadeWeb(post.tint, -0.1)}
                        glow={post.tint}
                        style={{ margin: isMobile ? "20px 0" : "28px 0" }}
                    />
                </Container>
            )}
            <Section bg="white" pad={isMobile ? "8px 0 56px" : "8px 0 80px"}>
                <Container width={820}>
                    <BlogBody text={blogField(post, "body")} />
                </Container>
            </Section>
            <FinalCTA />
        </div>
    );
}

// ════════════════════════ DOWNLOAD ════════════════════════
function DownloadPage() {
    const isMobile = useIsMobile();
    const perks = [
        {
            icon: "search",
            title: tr(
                "Games near you, ranked",
                "A közeli meccsek, rangsorolva",
            ),
            desc: tr(
                "See what’s on this week within walking distance.",
                "Nézd meg, mi van a héten sétatávolságon belül.",
            ),
        },
        {
            icon: "bolt",
            title: tr("RSVP in one tap", "Visszajelzés egy kattintással"),
            desc: tr(
                "Lock your spot and get a reminder before kickoff.",
                "Foglald le a helyed, és kapj emlékeztetőt kezdés előtt.",
            ),
        },
        {
            icon: "message",
            title: tr("Crew chat built in", "Beépített csapatchat"),
            desc: tr(
                "Sort teams, share the spot, call the pint after.",
                "Ossz csapatot, oszd meg a helyszínt, beszéljétek meg a meccs utáni sört.",
            ),
        },
        {
            icon: "trophy",
            title: tr("Streaks & results", "Sorozatok és eredmények"),
            desc: tr(
                "Log games, keep streaks, climb your crew’s table.",
                "Rögzítsd a meccseket, tartsd a sorozatod, mássz feljebb a csapat tabelláján.",
            ),
        },
    ];
    return (
        <div>
            <section
                style={{
                    background: SB.ink950,
                    color: "white",
                    position: "relative",
                    overflow: "hidden",
                }}
            >
                <DarkGlows />
                <Container
                    style={{
                        padding: isMobile ? "48px 20px" : "72px 32px",
                        position: "relative",
                        zIndex: 1,
                        display: "grid",
                        gridTemplateColumns: isMobile ? "1fr" : "1.05fr 0.95fr",
                        gap: isMobile ? 36 : 48,
                        alignItems: "center",
                    }}
                >
                    <div>
                        <Eyebrow color={SB.lime}>
                            {tr("Download", "Letöltés")}
                        </Eyebrow>
                        <h1
                            style={{
                                fontFamily: FD,
                                fontWeight: 900,
                                fontSize: isMobile ? 34 : 60,
                                lineHeight: isMobile ? "38px" : "62px",
                                letterSpacing: "-0.03em",
                                margin: "14px 0 16px",
                                color: "#FFFFFF",
                            }}
                        >
                            {tr("Get Sportistry.", "Töltsd le a Sportistryt.")}
                            <br />
                            {tr("Get out there.", "Mozduljunk ki.")}
                        </h1>
                        <p
                            style={{
                                fontFamily: FB,
                                fontWeight: 500,
                                fontSize: isMobile ? 16 : 19,
                                lineHeight: isMobile ? "24px" : "28px",
                                color: "rgba(255,255,255,0.8)",
                                maxWidth: 460,
                                margin: "0 0 28px",
                            }}
                        >
                            {tr(
                                "The iOS and Android apps are coming soon. In the meantime, the full experience is already live in your browser.",
                                "Az iOS és Android alkalmazások hamarosan érkeznek. Addig is a teljes élmény már most elérhető a böngésződben.",
                            )}
                        </p>
                        {!isMobile && (
                            <div style={{ marginBottom: 24 }}>
                                <WButton variant="accent" size="lg" href="/app/">
                                    {tr("Try the web app", "Kipróbálom a webappot")}
                                </WButton>
                            </div>
                        )}
                        <StoreBadges size="lg" />
                    </div>
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "center",
                        }}
                    >
                        <PhoneMock height={isMobile ? 280 : 400} />
                    </div>
                </Container>
            </section>

            <Section bg="white">
                <Container>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile
                                ? "1fr 1fr"
                                : "repeat(4, 1fr)",
                            gap: 20,
                        }}
                    >
                        {perks.map((p) => (
                            <div key={p.title} style={{ padding: 4 }}>
                                <div
                                    style={{
                                        width: 48,
                                        height: 48,
                                        borderRadius: 13,
                                        background: SB.blue50,
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        marginBottom: 14,
                                    }}
                                >
                                    <WIcon
                                        name={p.icon}
                                        size={24}
                                        color={SB.blue}
                                    />
                                </div>
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 17,
                                        letterSpacing: "-0.01em",
                                        color: SB.ink900,
                                    }}
                                >
                                    {p.title}
                                </div>
                                <p
                                    style={{
                                        fontFamily: FB,
                                        fontWeight: 500,
                                        fontSize: 14,
                                        lineHeight: "21px",
                                        color: SB.ink600,
                                        margin: "6px 0 0",
                                    }}
                                >
                                    {p.desc}
                                </p>
                            </div>
                        ))}
                    </div>
                </Container>
            </Section>
            <FinalCTA />
        </div>
    );
}

// ════════════════════════ LEGAL HELPERS ════════════════════════

function LegalSection({ title, children }) {
    return (
        <div style={{ marginBottom: 40 }}>
            <h2
                style={{
                    fontFamily: FD,
                    fontWeight: 800,
                    fontSize: 22,
                    letterSpacing: "-0.01em",
                    color: SB.ink900,
                    margin: "0 0 14px",
                    paddingBottom: 10,
                    borderBottom: "2px solid " + SB.ink100,
                }}
            >
                {title}
            </h2>
            <div
                style={{
                    fontFamily: FB,
                    fontWeight: 500,
                    fontSize: 15,
                    lineHeight: "25px",
                    color: SB.ink700,
                }}
            >
                {children}
            </div>
        </div>
    );
}

function LP({ children }) {
    return <p style={{ margin: "0 0 12px" }}>{children}</p>;
}

function LI({ items }) {
    return (
        <ul style={{ margin: "8px 0 12px", paddingLeft: 22 }}>
            {items.map((item, i) => (
                <li key={i} style={{ marginBottom: 6 }}>
                    {item}
                </li>
            ))}
        </ul>
    );
}

// ════════════════════════ TERMS OF SERVICE ════════════════════════
function TermsPage() {
    const updated = tr("27 July 2026", "2026. július 27.");
    return (
        <div>
            <PageHero
                eyebrow={tr("Legal", "Jogi információk")}
                title={tr(
                    "Terms of Service",
                    "Általános Szerződési Feltételek",
                )}
                sub={tr(
                    `Last updated: ${updated}`,
                    `Utoljára frissítve: ${updated}`,
                )}
            />
            <Section bg="white">
                <Container width={780}>
                    <LegalSection title={tr("1. Who we are", "1. Kik vagyunk")}>
                        <LP>
                            {tr(
                                'Sportistry ("we", "us", "our") is a sports discovery and booking platform operated by Dinamic Life Kft. (company reg. no. 01 09 942277, tax no. 22759283-2-41, registered address: 1035 Budapest, Szél u. 7-9. B. lház. II. em. 30., Hungary). By creating an account or using our app or website at sportistry.app, you agree to these Terms.',
                                'A Sportistry ("mi", "minket") egy sportfelfedező és -foglaló platform, amelyet a Dinamic Life Kft. (cégjegyzékszám: 01 09 942277, adószám: 22759283-2-41, székhely: 1035 Budapest, Szél u. 7-9. B. lház. II. em. 30.) üzemeltet. Fiók létrehozásával vagy alkalmazásunk, illetve a sportistry.app weboldal használatával elfogadod ezeket a Feltételeket.',
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "These Terms govern your use of Sportistry as a player, coach, or venue operator. If you use Sportistry on behalf of a business, you confirm you have authority to bind that business.",
                                "Ezek a Feltételek szabályozzák a Sportistry használatát játékosként, edzőként vagy helyszínüzemeltetőként. Ha a Sportistryt egy vállalkozás nevében használod, megerősíted, hogy jogosult vagy a vállalkozást kötelezni.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr("2. The service", "2. A szolgáltatás")}
                    >
                        <LP>
                            {tr(
                                "Sportistry provides a platform through which players can discover and book sports sessions, coaching, and venue access. For venue passes and venue bookings, Dinamic Life Kft. acts as the merchant of record: it collects the payment and issues the invoice to the buyer, while the venue operator delivers the service as an independent service provider. For coach bookings, the service is provided by the independent coach — the contract for the session is formed between you and the coach — and Dinamic Life Kft. acts solely as an intermediary in the coach's name and on the coach's behalf, providing the booking and payment infrastructure.",
                                "A Sportistry egy platform, amelyen keresztül a felhasználók sportfoglalkozásokat, edzéseket és helyszíneket fedezhetnek fel és foglalhatnak. Helyszíni bérletek és helyszínfoglalások esetén a Dinamic Life Kft. kereskedőként (merchant of record) jár el: a díjat ő szedi be, és a számlát is ő állítja ki a vásárló részére, míg a szolgáltatást a helyszínüzemeltető mint független szolgáltató nyújtja. Edzői foglalások esetén a szolgáltatást a független edző nyújtja — a szerződés az edzésre közted és az edző között jön létre —, a Dinamic Life Kft. pedig kizárólag közvetítőként, az edző nevében és javára jár el, biztosítva a foglalási és fizetési infrastruktúrát.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Invoicing follows the same split. For venue purchases, Dinamic Life Kft. issues the invoice to the buyer, and the venue operator invoices Dinamic Life Kft. for its portion. For coach bookings, the coach — as the actual provider of the service — is responsible for issuing the invoice or receipt to the buyer, either directly or through an explicit written delegation authorising Dinamic Life Kft. (or its invoicing provider) to issue it in the coach's name; Dinamic Life Kft. invoices the coach for its platform commission (plus VAT). See Section 6 for details.",
                                "A számlázás ugyanezt a felosztást követi. Helyszíni vásárlásoknál a számlát a Dinamic Life Kft. állítja ki a vevő részére, a helyszínüzemeltető pedig a rá eső összegről a Dinamic Life Kft.-nek számláz. Edzői foglalásoknál a számla vagy nyugta vevő részére történő kiállításáért az edző mint a szolgáltatás tényleges nyújtója felel — közvetlenül, vagy kifejezett írásos felhatalmazás alapján, amellyel a Dinamic Life Kft.-t (illetve annak számlázási szolgáltatóját) bízza meg a számla az ő nevében történő kiállításával; a Dinamic Life Kft. az edzőnek a platformjutalékról (+ÁFA) állít ki számlát. A részleteket a 6. pont tartalmazza.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "We reserve the right to modify, suspend, or discontinue any part of the service at any time with reasonable notice.",
                                "Fenntartjuk a jogot, hogy a szolgáltatás bármely részét ésszerű előzetes értesítéssel módosítsuk, felfüggesszük vagy megszüntessük.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "2b. Sponsored and featured content",
                            "2b. Kiemelt és szponzorált tartalom",
                        )}
                    >
                        <LP>
                            {tr(
                                'Some content on the platform — for example events or venues marked "Featured" ("Kiemelt") — may receive increased visibility, either because we selected it editorially or based on a commercial agreement with the organiser, venue, or a partner. Such placements are labelled in the app. The default ordering of search and discovery results is determined primarily by relevance (sport, distance, time, and activity), and may additionally take a listing\'s featured or promoted status into account. Featured placement never overrides the safety, approval, and content rules of these Terms.',
                                'A platformon egyes tartalmak — például a „Kiemelt" jelölésű események vagy helyszínek — nagyobb láthatóságot kaphatnak, akár szerkesztői kiválasztás, akár a szervezővel, helyszínnel vagy partnerrel kötött megállapodás alapján. Az ilyen elhelyezéseket az alkalmazásban jelöljük. A keresési és felfedezési találatok alapértelmezett sorrendjét elsősorban a relevancia (sportág, távolság, időpont, aktivitás) határozza meg, emellett figyelembe veheti a tartalom kiemelt vagy promótált státuszát. A kiemelt megjelenés soha nem írja felül a jelen Feltételek biztonsági, jóváhagyási és tartalmi szabályait.',
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection title={tr("3. Accounts", "3. Fiókok")}>
                        <LP>
                            {tr(
                                "You must be at least 16 years old to use Sportistry. You are responsible for keeping your account credentials secure and for all activity that occurs under your account.",
                                "A Sportistry használatához legalább 16 évesnek kell lenned. Te felelsz fiókod hozzáférési adatainak biztonságáért és a fiókodon keresztül végrehajtott minden tevékenységért.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "You must provide accurate information and keep it up to date. We may suspend or terminate accounts that provide false information or violate these Terms.",
                                "Pontos adatokat kell megadnod, és azokat naprakészen kell tartanod. Felfüggeszthetjük vagy megszüntethetjük azokat a fiókokat, amelyek hamis adatokat adnak meg, vagy megsértik ezeket a Feltételeket.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "3b. Child profiles (guardian feature)",
                            "3b. Gyermekprofilok (gondviselői funkció)",
                        )}
                    >
                        <LP>
                            {tr(
                                "A parent or legal guardian may create child profiles within their own account for children under 18. A child profile is not a user account: the child cannot log in, cannot use social features (chat, leaderboards), and every booking, payment, and declaration is made by the guardian in their own name, for the child's benefit.",
                                "18 év alatti gyermekek részére szülő vagy törvényes gondviselő hozhat létre gyermekprofilt a saját fiókján belül. A gyermekprofil nem önálló felhasználói fiók: a gyermek nem jelentkezhet be, nem használhatja a közösségi funkciókat (chat, ranglisták), és minden foglalást, fizetést és nyilatkozatot a gondviselő végez a saját nevében, a gyermek javára.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "The guardian is responsible for being entitled to act on the child's behalf and for the accuracy of the data provided. For higher-risk sports, the risk-acceptance waiver for the child's participation is accepted by the guardian. The processing of children's data is described in the Privacy Policy.",
                                "A gondviselő felelős azért, hogy jogosult a gyermek nevében eljárni, és hogy a megadott adatok valósak. A fokozottan kockázatos sportágaknál a gyermek részvételére vonatkozó kockázatvállalási nyilatkozatot a gondviselő fogadja el. A gyermekadatok kezeléséről az Adatvédelmi Tájékoztató rendelkezik.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "4. Coaches and venue operators",
                            "4. Edzők és helyszínüzemeltetők",
                        )}
                    >
                        <LP>
                            {tr(
                                "Coaches and venue operators are independent service providers on the Sportistry platform. They are not employees or agents of Dinamic Life Kft. By offering services through Sportistry, you agree that:",
                                "Az edzők és helyszínüzemeltetők a Sportistry platformon független szolgáltatóként működnek. Nem munkavállalói vagy képviselői a Dinamic Life Kft.-nek. A Sportistryn keresztüli szolgáltatásnyújtással elfogadod, hogy:",
                            )}
                        </LP>
                        <LI
                            items={[
                                tr(
                                    "You have all required qualifications, licences, and insurance to provide your services.",
                                    "Rendelkezel minden szükséges képesítéssel, engedéllyel és biztosítással a szolgáltatásaid nyújtásához.",
                                ),
                                tr(
                                    "The information you publish (prices, availability, descriptions) is accurate and not misleading.",
                                    "Az általad közzétett információk (árak, elérhetőség, leírások) pontosak és nem megtévesztőek.",
                                ),
                                tr(
                                    "You are responsible for delivering the services you advertise to the standard a client reasonably expects.",
                                    "Felelős vagy a meghirdetett szolgáltatások elvárható minőségű teljesítéséért.",
                                ),
                                tr(
                                    "As a venue operator, you invoice Dinamic Life Kft. for your portion of each transaction. As a coach, you are responsible for issuing the invoice or receipt to your client (directly, or via an explicit billing delegation as described in Section 6), and you receive a commission invoice (plus VAT) from Dinamic Life Kft. In both cases you comply with your own tax obligations.",
                                    "Helyszínüzemeltetőként a tranzakciókból rád eső összegről a Dinamic Life Kft. részére állítasz ki számlát. Edzőként te felelsz az ügyfeled részére kiállítandó számláért vagy nyugtáért (közvetlenül, vagy a 6. pont szerinti kifejezett számlázási megbízás útján), a Dinamic Life Kft. pedig a jutalékáról (+ÁFA) állít ki számlát neked. Mindkét esetben te teljesíted saját adókötelezettségeidet.",
                                ),
                                tr(
                                    "You will comply with all applicable Hungarian and EU law, including consumer protection and data protection rules.",
                                    "Betartasz minden vonatkozó magyar és uniós jogszabályt, beleértve a fogyasztóvédelmi és adatvédelmi előírásokat.",
                                ),
                            ]}
                        />
                        <LP>
                            {tr(
                                "For venue purchases Dinamic Life Kft. acts as merchant of record; for coach bookings it acts as an intermediary. In both cases, clients direct complaints and refund requests to us first, and we mediate between the client and you to resolve disputes. Repeated failures to deliver services may result in removal from the platform.",
                                "Helyszíni vásárlásoknál a Dinamic Life Kft. kereskedőként (merchant of record), edzői foglalásoknál közvetítőként jár el. Az ügyfelek panaszaikat és visszatérítési kérelmeiket mindkét esetben először hozzánk intézik, mi pedig közvetítünk köztetek a vita rendezése érdekében. Ismételt teljesítési hiányosság esetén a profil eltávolítható a platformról.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        // Both rates below are public pricing promises and must match
                        // the API: coach = STRIPE_PLATFORM_FEE_PCT (15), venue =
                        // STRIPE_VENUE_PLATFORM_FEE_PCT (10). Same "change both
                        // together" rule as the ClubsPage figure. Deliberately silent
                        // on the *basis* the % is applied to (list vs discounted) —
                        // that is an open business decision, see plans/37.
                        title={tr(
                            "5. Platform fees and commission",
                            "5. Platformdíjak és jutalék",
                        )}
                    >
                        <LP>
                            {tr(
                                "Sportistry charges a platform fee on payments processed through the app. This fee is deducted automatically at the time of each transaction before the remainder is paid out to the coach or venue.",
                                "A Sportistry platformdíjat számít fel az alkalmazáson keresztül feldolgozott fizetések után. Ezt a díjat automatikusan levonják minden tranzakció alkalmával, mielőtt a fennmaradó összeget kifizetnék az edzőnek vagy helyszínnek.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "For coach bookings, the platform fee depends on how the client relationship was established. For clients acquired through the platform, the standard commission is 15% of the transaction amount plus VAT, dropping to 10% plus VAT from the sixth booking with the same client. For clients the coach invites to the platform, a reduced transaction fee applies instead of a commission: 3% plus VAT for clients invited during the coach's first 60 days after payment onboarding (this rate is retained permanently for those clients), and 7.5% plus VAT for clients invited later. During those first 60 days, no commission or transaction fee at all is charged on the coach's own invited clients. For venue court and venue pass bookings, the standard commission is 10% plus VAT. For digital products and gift cards, a flat commission of 15% plus VAT applies. Individually agreed rates may differ from these. The exact rates that apply to you are always shown during onboarding and in your admin dashboard before you begin accepting payments.",
                                "Edzői foglalások esetén a platformdíj attól függ, hogyan jött létre az ügyfélkapcsolat. A platformon keresztül szerzett ügyfeleknél az általános jutalék a tranzakció összegének 15%-a + ÁFA, amely ugyanazzal az ügyféllel a hatodik foglalástól 10% + ÁFA-ra csökken. Az edző által a platformra meghívott ügyfeleknél jutalék helyett kedvezményes tranzakciós díj érvényes: 3% + ÁFA a fizetési onboardingot követő első 60 napban meghívott ügyfeleknél (ez a kulcs ezeknél az ügyfeleknél véglegesen megmarad), és 7,5% + ÁFA a később meghívottaknál. Az első 60 napban az edző saját, meghívott ügyfelei után semmilyen jutalék vagy tranzakciós díj nem kerül felszámításra. Pálya- és helyszíni bérletfoglalások esetén az általános jutalék 10% + ÁFA. Digitális termékek és ajándékkártyák esetén egységesen 15% + ÁFA jutalék érvényes. Egyedileg megállapodott kulcsok ettől eltérhetnek. A rád vonatkozó pontos kulcsokat mindig közöljük az onboarding során és az admin felületeden, mielőtt fizetéseket kezdenél fogadni.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Sportistry reserves the right to update commission rates for new coaches and venues. Existing agreed rates will be honoured for the duration of the agreement.",
                                "A Sportistry fenntartja a jogot, hogy az új edzők és helyszínek számára módosítsa a jutalékokat. A meglévő, megállapodott díjazást a megállapodás időtartamára tiszteletben tartjuk.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "5b. Promotions and discounts",
                            "5b. Akciók és kedvezmények",
                        )}
                    >
                        <LP>
                            {tr(
                                "Coaches and venue operators may offer time-limited discounts (for example flash discounts, coupon codes, or venue promotions) on their own services. The discounted price shown before payment is the price you actually pay, and refunds under Section 7 are always calculated from the amount you actually paid. Discounts cannot be exchanged for cash and cannot be applied retroactively to completed purchases.",
                                "Az edzők és helyszínüzemeltetők időszakos kedvezményeket kínálhatnak saját szolgáltatásaikra (például villámakciók, kuponkódok vagy helyszíni promóciók). A fizetés előtt megjelenített kedvezményes ár a ténylegesen fizetendő ár; a 7. pont szerinti visszatérítések mindig a ténylegesen kifizetett összegből számítódnak. A kedvezmény készpénzre nem váltható, és lezárult vásárlásra utólag nem érvényesíthető.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "6. Payments, invoicing, and payouts",
                            "6. Fizetések, számlázás és kifizetések",
                        )}
                    >
                        <LP>
                            {tr(
                                'Payment card transactions are processed by Stripe, Inc. ("Stripe"). For venue purchases, Dinamic Life Kft. acts as the merchant of record and collects the payment. For coach bookings, payments are processed via Stripe Connect: the amount you pay is transferred directly to the coach\'s Stripe account, from which the platform commission (plus VAT) is deducted automatically — Dinamic Life Kft. never holds your money. Stripe\'s Connected Account Agreement applies to coaches and venue operators who receive payouts through the platform.',
                                'A bankkártyás tranzakciókat a Stripe, Inc. ("Stripe") dolgozza fel. Helyszíni vásárlásoknál a Dinamic Life Kft. kereskedőként (merchant of record) jár el, és ő szedi be a díjat. Edzői foglalásoknál a fizetés a Stripe Connecten keresztül történik: a kifizetett összeg közvetlenül az edző Stripe-fiókjára kerül, amelyből a platformjutalék (+ÁFA) automatikusan levonásra kerül — a Dinamic Life Kft. sosem birtokolja a pénzed. A kifizetéseket fogadó edzőkre és helyszínüzemeltetőkre a Stripe Csatlakoztatott Fiók Megállapodása vonatkozik.',
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "For venue purchases, Dinamic Life Kft. issues the invoice to the buyer, and the venue operator invoices Dinamic Life Kft. for its portion. For coach bookings, the coach is responsible for issuing the invoice or receipt to the buyer — directly, or via an explicit written billing delegation authorising Dinamic Life Kft. (or its invoicing provider) to issue it in the coach's name — and Dinamic Life Kft. issues a commission invoice (plus VAT) to the coach. All providers are responsible for meeting their own tax and accounting obligations.",
                                "Helyszíni vásárlásoknál a számlát a Dinamic Life Kft. állítja ki a vevő részére, a helyszínüzemeltető pedig a rá eső összegről a Dinamic Life Kft.-nek számláz. Edzői foglalásoknál a vevő részére a számla vagy nyugta kiállításáért az edző felel — közvetlenül, vagy kifejezett írásos számlázási megbízás alapján, amellyel a Dinamic Life Kft.-t (illetve annak számlázási szolgáltatóját) hatalmazza fel a számla az ő nevében történő kiállítására —, a Dinamic Life Kft. pedig a jutalékáról (+ÁFA) állít ki számlát az edzőnek. Minden szolgáltató maga felel saját adó- és számviteli kötelezettségei teljesítéséért.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Payouts to coaches and venue operators are processed weekly, automatically via Stripe (typically on Mondays), for all transactions completed since the previous payout. Funds typically arrive in the connected bank account within 1–3 business days of the payout date, depending on the coach's or venue's bank. Dinamic Life Kft. is not responsible for delays caused by Stripe or your bank.",
                                "Az edzőknek és helyszínüzemeltetőknek szóló kifizetések hetente, automatikusan kerülnek feldolgozásra a Stripe-on keresztül (jellemzően hétfőnként), az előző kifizetés óta lezárult tranzakciókra vonatkozóan. Az összeg a kifizetés napjától számított 1–3 munkanapon belül jelenik meg a csatlakoztatott bankszámlán, az adott bank feldolgozási idejétől függően. A Dinamic Life Kft. nem vállal felelősséget a Stripe vagy a bankod által okozott késedelmekért.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Payment card data is stored and secured exclusively by Stripe. Dinamic Life Kft. never receives, processes, or stores raw card numbers, CVV codes, or full card details. In the event of a data breach at Stripe or any other payment processor, liability rests solely with that processor under their own terms and applicable law. We strongly recommend reviewing Stripe's Privacy Policy at stripe.com/privacy.",
                                "A bankkártya-adatokat kizárólag a Stripe tárolja és védi. A Dinamic Life Kft. soha nem kapja meg, nem dolgozza fel és nem tárolja a nyers kártyaszámokat, CVV-kódokat vagy teljes kártyaadatokat. Ha a Stripe-nál vagy bármely más fizetési feldolgozónál adatsértés következik be, a felelősség kizárólag az adott feldolgozót terheli, saját feltételeik és az alkalmazandó jogszabályok alapján. Javasoljuk a Stripe adatvédelmi szabályzatának áttekintését: stripe.com/privacy.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "6b. Saved payment methods and recurring bookings",
                            "6b. Mentett fizetési módok és ismétlődő foglalások",
                        )}
                    >
                        <LP>
                            {tr(
                                "You may save your payment card for future payments. Card data is stored exclusively by Stripe; we display only the card brand, last four digits, and expiry. Saved cards can be deleted at any time.",
                                "Bankkártyádat elmentheted későbbi fizetésekhez. A kártyaadatokat kizárólag a Stripe tárolja; mi csak a kártya típusát, utolsó négy számjegyét és lejáratát jelenítjük meg. A mentett kártya bármikor törölhető.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "If you opt into a recurring (weekly) coach booking, you expressly authorise the platform to charge your saved default card automatically, off-session, up to 3 days before each upcoming session, creating the booking at the same time. You are notified of every charge. Recurring bookings can be paused, resumed, or cancelled at any time; cancellation stops future charges but does not affect bookings already created, to which the cancellation policy in Section 7 applies. If a charge fails, that week's session is not created (or is cancelled) and you are notified; after two consecutive failed charges the series is automatically paused.",
                                "Ha ismétlődő (heti) edzői foglalást választasz, kifejezetten felhatalmazod a platformot, hogy az elmentett alapértelmezett kártyádat automatikusan, jelenléted nélkül terhelje, legfeljebb 3 nappal az adott alkalom előtt, az alkalom foglalásának egyidejű létrehozásával. Minden terhelésről értesítést kapsz. Az ismétlődő foglalás bármikor szüneteltethető, folytatható vagy lemondható; a lemondás a jövőbeli terheléseket állítja le, a már létrejött foglalásokat nem érinti — azokra a 7. pont lemondási szabályai vonatkoznak. Ha egy terhelés meghiúsul, az adott heti alkalom nem jön létre (vagy törlésre kerül), és értesítünk; két egymást követő sikertelen terhelés után az ismétlődő foglalást automatikusan szüneteltetjük.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "You may also enable automatic renewal for a coach pass (session or time-based pass): when the pass runs out or expires, you expressly authorise the platform to automatically repurchase the same pass off-session using your saved default card, at the coach's then-current price (including any standing package discount the coach offers). You are notified of every charge. Automatic renewal is optional and can be turned off at any time in your memberships; it is also switched off automatically — with a notification — if a renewal charge fails repeatedly, if the coach no longer offers the pass or stops accepting bookings, or if the pass expired more than a few days earlier. In these cases you can renew manually.",
                                "Edzői bérletre (alkalom- vagy időalapú bérletre) automatikus megújítást is bekapcsolhatsz: amikor a bérlet elfogy vagy lejár, kifejezetten felhatalmazod a platformot, hogy ugyanazt a bérletet automatikusan, jelenléted nélkül újravásárolja az elmentett alapértelmezett kártyáddal, az edző aktuális árán (beleértve az edző által kínált esetleges állandó csomagkedvezményt). Minden terhelésről értesítést kapsz. Az automatikus megújítás opcionális, és a bérleteidnél bármikor kikapcsolható; automatikusan is kikapcsol — értesítés mellett —, ha a megújítási terhelés ismételten meghiúsul, ha az edző már nem kínálja a bérletet vagy nem fogad foglalásokat, illetve ha a bérlet már több napja lejárt. Ilyen esetben kézzel újíthatod meg.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr("6c. Gift cards", "6c. Ajándékkártyák")}
                    >
                        <LP>
                            {tr(
                                "Selected coach services can be purchased as a gift for another person. The gift card is redeemable for the specified coach's specified service using a single-use redemption code, which we send to the recipient email address provided at purchase. Keep the code confidential until redemption; whoever holds the code may redeem it.",
                                "Egyes edzői szolgáltatások ajándékkártyaként is megvásárolhatók más személy részére. Az ajándékkártya a megjelölt edző megjelölt szolgáltatására váltható be, egyszer használatos beváltókóddal, amelyet a vásárláskor megadott címzetti e-mail-címre küldünk el. A kódot a beváltásig bizalmasan kell kezelni; a beváltásra a kód birtokosa jogosult.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Gift cards are valid for 12 months from purchase; expired, unredeemed gift cards can no longer be redeemed. A refund of an unredeemed gift card may be requested within 14 days of purchase at info@sportistry.app. Gift cards cannot be exchanged for cash. Sessions created by redemption are governed by the coach-booking provisions of these Terms.",
                                "Az ajándékkártya a vásárlástól számított 12 hónapig érvényes; a lejárt, be nem váltott ajándékkártya már nem váltható be. A még be nem váltott ajándékkártya árának visszatérítése a vásárlástól számított 14 napon belül kérhető az info@sportistry.app címen. Az ajándékkártya készpénzre nem váltható. A beváltással létrejött alkalmakra a jelen Feltételek edzői foglalásokra vonatkozó rendelkezései érvényesek.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "6d. Event participation fees",
                            "6d. Események részvételi díja",
                        )}
                    >
                        <LP>
                            {tr(
                                "Event organisers may collect participants' shares of event costs (e.g. court rental) via in-app card payment. The platform settles the collected amounts to the organiser without charging any commission. If the event is cancelled, the participation fee is refunded less the payment processor's actual transaction fee.",
                                "Az eseményszervezők az esemény költségeinek (például pályabérlés) résztvevőkre eső részét alkalmazáson belüli bankkártyás fizetéssel is beszedhetik. A platform a beszedett összeget jutalék felszámítása nélkül számolja el a szervező felé. Ha az esemény lemondásra kerül, a részvételi díj a fizetési szolgáltató tényleges tranzakciós díjával csökkentve jár vissza.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "6e. Digital products",
                            "6e. Digitális termékek",
                        )}
                    >
                        <LP>
                            {tr(
                                "Selected coaches offer digital products (for example training plans or other digital content) that can be purchased on the website. The product is provided by the coach as an independent provider; Dinamic Life Kft. acts as an intermediary as described in Section 2, and the payment and invoicing rules of Section 6 apply. After successful payment, the product is delivered electronically — an access link appears among your purchases.",
                                "Egyes edzők digitális termékeket (például edzésterveket vagy más digitális tartalmakat) kínálnak, amelyek a weboldalon vásárolhatók meg. A terméket az edző mint független szolgáltató nyújtja; a Dinamic Life Kft. a 2. pont szerint közvetítőként jár el, a fizetésre és számlázásra pedig a 6. pont szabályai vonatkoznak. Sikeres fizetés után a termék elektronikusan kerül átadásra — a hozzáférési link a vásárlásaid között jelenik meg.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "By purchasing, you expressly consent to performance beginning immediately after payment and acknowledge that, under Section 29(1)(m) of Hungarian Government Decree 45/2014 (II. 26.), you thereby lose the 14-day right of withdrawal applicable to digital content not supplied on a tangible medium. If a delivered product is defective or inaccessible, contact us at info@sportistry.app.",
                                "A vásárlással kifejezetten hozzájárulsz ahhoz, hogy a teljesítés a fizetést követően azonnal megkezdődjön, és tudomásul veszed, hogy a 45/2014. (II. 26.) Korm. rendelet 29. § (1) bekezdés m) pontja alapján ezzel elveszíted a nem tárgyi adathordozón nyújtott digitális tartalomra vonatkozó 14 napos elállási jogodat. Ha az átadott termék hibás vagy nem elérhető, írj nekünk az info@sportistry.app címre.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "7. Cancellation and refunds",
                            "7. Lemondás és visszatérítés",
                        )}
                    >
                        <LP>
                            {tr(
                                "The following cancellation policy applies to coach slot and package bookings, and to paid court/venue bookings. Refunds are processed automatically by the platform:",
                                "Az alábbi lemondási szabályzat vonatkozik az edzői slot- és csomagfoglalásokra, valamint a fizetős pálya- és helyszínfoglalásokra. A visszatérítéseket a platform automatikusan dolgozza fel:",
                            )}
                        </LP>
                        <LI
                            items={[
                                tr(
                                    "More than 72 hours before the session: full refund.",
                                    "72 óránál több a foglalás előtt: teljes visszatérítés.",
                                ),
                                tr(
                                    "Between 48 and 72 hours before the session: 50% refund.",
                                    "48 és 72 óra között a foglalás előtt: 50% visszatérítés.",
                                ),
                                tr(
                                    "Less than 48 hours before the session: no refund.",
                                    "48 óránál kevesebb a foglalás előtt: nincs visszatérítés.",
                                ),
                            ]}
                        />
                        <LP>
                            {tr(
                                "If a coach cancels a session, clients are entitled to a full refund regardless of timing. Coaches who frequently cancel may have their account reviewed.",
                                "Ha az edző mond le egy foglalást, az ügyfeleknek teljes visszatérítés jár, függetlenül az időzítéstől. A rendszeresen lemondó edzők fiókját felülvizsgálhatjuk.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Stripe's standard card refund timeline is 5–10 business days after the refund is initiated.",
                                "A Stripe szokásos bankkártya-visszatérítési határideje a visszatérítés kezdeményezésétől számított 5–10 munkanap.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "No-show: if you fail to attend a confirmed, paid coach session and the coach records this, the booking fee is not refunded under this policy. If the payment was only authorised (held) at booking and not yet captured, the held amount is captured at that point. The no-show is recorded on the booking.",
                                "Meg nem jelenés (no-show): ha egy megerősített, fizetős edzői alkalmon nem jelensz meg, és ezt az edző rögzíti, a foglalás díja a jelen szabályzat szerint nem jár vissza. Ha a díj a foglaláskor még csak zárolásra került (engedélyezett, de nem terhelt fizetés), a zárolt összeg ilyenkor terhelésre kerül. A meg nem jelenés tényét a foglalásnál rögzítjük.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr("7b. Camps", "7b. Edzőtáborok")}
                    >
                        <LP>
                            {tr(
                                "Guardians may register their child (Section 3b) for camps by paying the full camp fee, or — where the organiser offers it — a deposit followed by the remaining balance. Camps may set age limits; registration is only valid for children within the set age range.",
                                "Táborra a gondviselő regisztrálhatja gyermekét (3b. pont) a tábor teljes díjának megfizetésével, vagy — ha a szervező ezt lehetővé teszi — előleg és az azt követő fennmaradó összeg megfizetésével. A táborok korhatárt határozhatnak meg; a regisztráció csak a megfelelő korú gyermekre érvényes.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "If you register with a deposit, the remaining balance becomes due a set number of days before the camp starts. By registering with a deposit, you expressly authorise the platform to charge the balance to your saved payment method automatically, off-session, once it falls due; you will be notified of the charge. If the automatic charge does not succeed, we retry a limited number of times and notify you to pay the balance manually if it still cannot be collected.",
                                "Ha előleggel regisztrálsz, a fennmaradó összeg a tábor kezdete előtt egy meghatározott nappal esedékessé válik. Az előleggel történő regisztrációval kifejezetten felhatalmazod a platformot, hogy a fennmaradó összeget az esedékesség beálltakor automatikusan, jelenléted nélkül terhelje az elmentett fizetési módodra; a terhelésről értesítést kapsz. Ha az automatikus terhelés nem sikerül, korlátozott számú alkalommal újra megkíséreljük, és értesítünk, ha a fennmaradó összeget kézzel kell rendezned.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Withdrawal before the camp's start date: whatever you have actually paid (deposit and, if already charged, the balance) is refunded less the payment processor's (Stripe's) actual transaction fee. From the start date onward, no refund is due. If the organiser cancels the camp, every amount paid is refunded, less the payment processor's actual transaction fee.",
                                "A tábor kezdőnapja előtti visszalépés esetén a ténylegesen befizetett összeg (az előleg, és ha már terhelésre került, a fennmaradó összeg is) a fizetési szolgáltató (Stripe) tényleges tranzakciós díjával csökkentve jár vissza; a kezdőnaptól visszatérítés nem jár. Ha a tábort a szervező mondja le, minden befizetett összeg visszajár, a fizetési szolgáltató tényleges tranzakciós díjával csökkentve.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "7c. Consumer right of withdrawal",
                            "7c. Fogyasztói elállási jog",
                        )}
                    >
                        <LP>
                            {tr(
                                "Under Section 29(1)(l) of Hungarian Government Decree 45/2014 (II. 26.), the 14-day right of withdrawal does not apply to leisure-related services to be performed at a specific time or within a specific period. Sessions, court/venue bookings, camps, and events booked through the platform qualify as such services, so instead of a right of withdrawal, the cancellation and refund rules of Sections 7–7b apply. Unredeemed gift cards are subject to the 14-day refund described in Section 6c. For digital products, Section 6e applies: the withdrawal right is lost when, with your express consent, performance begins immediately (Section 29(1)(m) of the same Decree).",
                                "A 45/2014. (II. 26.) Korm. rendelet 29. § (1) bekezdés l) pontja alapján a fogyasztót nem illeti meg a 14 napos elállási jog a szabadidős tevékenységekhez kapcsolódó olyan szolgáltatások esetén, amelyeket meghatározott időpontban vagy időszakban kell teljesíteni. A platformon foglalt edzések, pálya- és helyszínfoglalások, táborok és események ilyen szolgáltatásnak minősülnek, ezért rájuk elállási jog helyett a 7–7b. pont szerinti lemondási és visszatérítési szabályok vonatkoznak. A még be nem váltott ajándékkártyára a 6c. pont szerinti 14 napos visszatérítés vonatkozik. A digitális termékekre a 6e. pont irányadó: az elállási jog megszűnik, amikor kifejezett hozzájárulásoddal a teljesítés azonnal megkezdődik (ugyanezen rendelet 29. § (1) bekezdés m) pontja).",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "8. Prohibited conduct",
                            "8. Tiltott magatartás",
                        )}
                    >
                        <LP>{tr("You must not:", "Tilos:")} </LP>
                        <LI
                            items={[
                                tr(
                                    "Use Sportistry for any unlawful purpose or in violation of any applicable law.",
                                    "A Sportistryt törvénytelen célokra vagy bármely vonatkozó jogszabályt megsértve használni.",
                                ),
                                tr(
                                    "Harass, abuse, or harm other users.",
                                    "Más felhasználókat zaklatni, bántalmazni vagy károsítani.",
                                ),
                                tr(
                                    "Post false, misleading, or fraudulent listings or reviews.",
                                    "Hamis, megtévesztő vagy csalárd hirdetéseket vagy értékeléseket közzétenni.",
                                ),
                                tr(
                                    "Circumvent the platform to process payments outside of Sportistry in order to avoid the platform fee.",
                                    "Megkerülni a platformot, hogy a Sportistryn kívül dolgozz fel fizetéseket a platformdíj elkerülése érdekében.",
                                ),
                                tr(
                                    "Attempt to access another user's account without authorisation.",
                                    "Engedély nélkül megkísérelni hozzáférni más felhasználó fiókjához.",
                                ),
                                tr(
                                    "Upload content that infringes intellectual property rights or contains harmful material.",
                                    "Szellemi tulajdonjogot sértő vagy káros anyagot tartalmazó tartalmat feltölteni.",
                                ),
                                tr(
                                    "Share sensitive personal data — such as payment card numbers, passwords, ID document details, or financial credentials — through the in-app chat. The chat is not a secure channel for such information and you do so entirely at your own risk.",
                                    "Érzékeny személyes adatokat — például bankkártyaszámot, jelszavakat, személyazonosító okmányok adatait vagy pénzügyi hozzáférési adatokat — megosztani az alkalmazáson belüli chaten. A chat nem biztonságos csatorna ilyen információk továbbítására, és ezt teljes egészében saját felelősségére teszi.",
                                ),
                            ]}
                        />
                        <LP>
                            {tr(
                                "Dinamic Life Kft. is not responsible for any loss, fraud, or harm resulting from personal data — including payment card details or login credentials — that you voluntarily share with another user through the chat or any other communication feature of the platform. You are solely responsible for what you choose to disclose.",
                                "A Dinamic Life Kft. nem vállal felelősséget semmilyen kárért, csalásért vagy veszteségért, amely abból ered, hogy személyes adatokat — beleértve bankkártyaadatokat vagy bejelentkezési hitelesítő adatokat — önként megosztasz egy másik felhasználóval a chaten vagy a platform bármely más kommunikációs funkcióján keresztül. Kizárólag te felelsz azért, amit megosztani döntesz.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "9. Intellectual property",
                            "9. Szellemi tulajdon",
                        )}
                    >
                        <LP>
                            {tr(
                                "All Sportistry branding, software, and content is the property of Dinamic Life Kft. or its licensors. You may not copy, reproduce, or create derivative works without our written permission.",
                                "Minden Sportistry márka, szoftver és tartalom a Dinamic Life Kft. vagy licencadói tulajdona. Írásos engedélyünk nélkül nem másolhatod, reprodukálhatod vagy hozhatsz létre abból származtatott munkákat.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "By submitting content (photos, descriptions, reviews) to Sportistry, you grant us a non-exclusive, worldwide, royalty-free licence to use, display, and distribute that content in connection with the service.",
                                "A Sportistryre tartalom (fotók, leírások, értékelések) beküldésével nem kizárólagos, világszintű, jogdíjmentes licencet adsz nekünk a tartalom használatára, megjelenítésére és terjesztésére a szolgáltatással összefüggésben.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "9b. Points and gamification",
                            "9b. Pontok és gamifikáció",
                        )}
                    >
                        <LP>
                            {tr(
                                "Points, XP, badges, ranks and tournament results earned in the app represent symbolic value within the platform only. They cannot be exchanged for cash, sold, or transferred. Dinamic Life Kft. reserves the right to modify or discontinue the points and gamification system at any time.",
                                "Az alkalmazásban gyűjtött pontok, XP, jelvények, rangok és versenyeredmények kizárólag a platformon belüli szimbolikus értéket képviselnek. Nem válthatók készpénzre, nem értékesíthetők és nem ruházhatók át. A Dinamic Life Kft. fenntartja a jogot a pont- és gamifikációs rendszer bármikori módosítására vagy megszüntetésére.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "10. Limitation of liability",
                            "10. Felelősség korlátozása",
                        )}
                    >
                        <LP>
                            {tr(
                                "Sportistry is a technology platform that connects users with coaches, venues, and sporting events. We do not organise, supervise, or control any in-person meeting, sporting activity, or interaction that occurs between users offline. All such interactions are entirely at the users' own risk and discretion.",
                                "A Sportistry egy technológiai platform, amely összeköti a felhasználókat edzőkkel, helyszínekkel és sportrendezvényekkel. Nem szervezzük, felügyeljük vagy ellenőrizzük a felhasználók közötti személyes találkozókat, sportolási tevékenységeket vagy egyéb offline interakciókat. Mindezek teljes egészében a felhasználók saját kockázatára és belátására tartoznak.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Dinamic Life Kft. is not liable for any harm, injury, loss, theft, or criminal act — including but not limited to assault, sexual violence, or property crime — that occurs between users or between a user and a third party as a result of an in-person meeting facilitated through the platform. Users are solely responsible for their own conduct and for any unlawful acts they commit.",
                                "A Dinamic Life Kft. nem vállal felelősséget semmilyen kárért, sérülésért, veszteségért, lopásért vagy bűncselekményért — ideértve különösen a testi sértést, szexuális erőszakot vagy tulajdon elleni bűncselekményeket —, amelyek a platformon keresztül szervezett személyes találkozón a felhasználók között vagy felhasználó és harmadik személy között következnek be. A felhasználók kizárólagosan felelnek saját magatartásukért és az általuk elkövetett jogellenes cselekményekért.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "To the fullest extent permitted by Hungarian law, Sportistry is not liable for any indirect, incidental, special, or consequential damages arising from your use of the platform.",
                                "A magyar jog által megengedett legnagyobb mértékben a Sportistry nem vállal felelősséget a platform használatából eredő közvetett, esetleges, különleges vagy következményes károkért.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Our total liability to you in any 12-month period is limited to the greater of (a) the platform fees you paid to us in that period or (b) 50,000 HUF.",
                                "Irántad fennálló teljes felelősségünk bármely 12 hónapos időszakban az alábbiak közül a nagyobbra korlátozódik: (a) az adott időszakban nekünk fizetett platformdíjak vagy (b) 50 000 HUF.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Nothing in these Terms excludes liability for death or personal injury caused by our own negligence, fraud, or any other liability that cannot be excluded under Hungarian law.",
                                "Ezek a Feltételek nem zárják ki a saját gondatlanságunk által okozott halálért vagy személyi sérülésért, a csalásért vagy az olyan felelősségért való felelősséget, amelyet a magyar jog alapján nem lehet kizárni.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr("11. Governing law", "11. Irányadó jog")}
                    >
                        <LP>
                            {tr(
                                "These Terms are governed by the laws of Hungary. Any disputes arising from these Terms or your use of Sportistry shall be subject to the exclusive jurisdiction of the Hungarian courts.",
                                "Ezeket a Feltételeket a magyar jog szabályozza. Az ezekből a Feltételekből vagy a Sportistry használatából eredő jogviták a magyar bíróságok kizárólagos hatáskörébe tartoznak.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "If you are a consumer based in the EU, you may also have the right to use the EU Online Dispute Resolution platform at ec.europa.eu/consumers/odr.",
                                "Ha az EU-ban tartózkodó fogyasztó vagy, jogodban állhat igénybe venni az EU online vitarendezési platformját a ec.europa.eu/consumers/odr oldalon.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "12. Changes to these Terms",
                            "12. A Feltételek módosítása",
                        )}
                    >
                        <LP>
                            {tr(
                                "We may update these Terms from time to time. We will notify you of material changes via email or an in-app notice at least 14 days before they take effect. Continued use of Sportistry after that date constitutes acceptance of the updated Terms.",
                                "Időről időre frissíthetjük ezeket a Feltételeket. Az érdemi változásokról e-mailben vagy alkalmazáson belüli értesítésen keresztül tájékoztatunk legalább 14 nappal a hatályba lépés előtt. Az adott dátum utáni folyamatos használat az aktualizált Feltételek elfogadásának minősül.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection title={tr("13. Contact", "13. Kapcsolat")}>
                        <LP>
                            {tr(
                                "For questions about these Terms, contact us at: ",
                                "A Feltételekkel kapcsolatos kérdések esetén keress minket: ",
                            )}
                            <a
                                href="mailto:info@sportistry.app"
                                style={{ color: SB.blue, fontWeight: 700 }}
                            >
                                info@sportistry.app
                            </a>
                        </LP>
                        <LP>
                            <strong>
                                {tr("Hosting provider:", "Tárhelyszolgáltató:")}
                            </strong>{" "}
                            {tr(
                                "Tárhely.Eu Szolgáltató Kft. — registered office: 1144 Budapest, Ormánság utca 4. X. em. 241., Hungary; company reg. no. 01-09-909968 (Company Registry Court of the Budapest-Capital Regional Court); tax no. 14571332-2-42; email: gdpr@tarhely.eu; web: tarhely.eu. The hosting provider does not take part in the content of the service; it acts as a data processor as described in the Privacy Policy.",
                                "Tárhely.Eu Szolgáltató Kft. — székhely: 1144 Budapest, Ormánság utca 4. X. em. 241.; cégjegyzékszám: 01-09-909968 (nyilvántartja a Fővárosi Törvényszék Cégbírósága); adószám: 14571332-2-42; e-mail: gdpr@tarhely.eu; web: tarhely.eu. A tárhelyszolgáltató a szolgáltatás tartalmában nem vesz részt; adatfeldolgozóként az Adatvédelmi Tájékoztatóban leírtak szerint jár el.",
                            )}
                        </LP>
                    </LegalSection>
                </Container>
            </Section>
        </div>
    );
}

// ════════════════════════ PRIVACY POLICY ════════════════════════
function PrivacyPage() {
    const updated = tr("27 July 2026", "2026. július 27.");
    return (
        <div>
            <PageHero
                eyebrow={tr("Legal", "Jogi információk")}
                title={tr("Privacy Policy", "Adatvédelmi Tájékoztató")}
                sub={tr(
                    `Last updated: ${updated}`,
                    `Utoljára frissítve: ${updated}`,
                )}
            />
            <Section bg="white">
                <Container width={780}>
                    <LegalSection
                        title={tr("1. Data controller", "1. Adatkezelő")}
                    >
                        <LP>
                            {tr(
                                "Dinamic Life Kft. (company reg. no. 01 09 942277, tax no. 22759283-2-41, 1035 Budapest, Szél u. 7-9. B. lház. II. em. 30., Hungary) is the data controller for personal data collected through the Sportistry app and website (sportistry.app). Contact: info@sportistry.app.",
                                "A Dinamic Life Kft. (cégjegyzékszám: 01 09 942277, adószám: 22759283-2-41, székhely: 1035 Budapest, Szél u. 7-9. B. lház. II. em. 30.) az adatkezelő a Sportistry alkalmazáson és a sportistry.app weboldalon keresztül gyűjtött személyes adatok tekintetében. Kapcsolat: info@sportistry.app.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "This Policy explains what data we collect, how we use it, and your rights under the EU General Data Protection Regulation (GDPR) and Hungarian data protection law.",
                                "Ez a Tájékoztató elmagyarázza, milyen adatokat gyűjtünk, hogyan használjuk azokat, és milyen jogok illetnek meg az EU általános adatvédelmi rendelete (GDPR) és a magyar adatvédelmi jog alapján.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "2. Data we collect",
                            "2. Általunk gyűjtött adatok",
                        )}
                    >
                        <LP>
                            <strong>
                                {tr("Account data:", "Fiókadatok:")}
                            </strong>{" "}
                            {tr(
                                "Name, email address, profile photo, and login provider (Google, Apple, or email/password) when you register.",
                                "Név, e-mail cím, profilkép és bejelentkezési szolgáltató (Google, Apple vagy e-mail/jelszó) regisztrációkor.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr("Profile data:", "Profiladatok:")}
                            </strong>{" "}
                            {tr(
                                "For coaches: bio, tags, contact details, bank account information (stored and processed by Stripe — we do not store full bank details). For players: sport preferences, skill level, ELO ratings.",
                                "Edzők esetén: bemutatkozó szöveg, szakterületek, elérhetőségek, bankszámlaadatok (a Stripe tárolja és dolgozza fel — teljes bankadatokat nem tárolunk). Játékosok esetén: sportpreferenciák, szintbesorolás, ELO-pontszámok.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr("Location data:", "Helyadatok:")}
                            </strong>{" "}
                            {tr(
                                "If you grant permission, we use your device's precise location to show you nearby events and centre the map. Your precise location is processed to serve the search and is not stored in your profile — we persistently store only a coarse (city-level) location for the purpose of push notification filtering. If you share a location pin in a chat, it is stored as part of that message. You can revoke location access at any time in your device settings.",
                                "Ha engedélyt adsz, az eszközöd pontos tartózkodási helyét használjuk a közeli események megjelenítéséhez és a térkép középre igazításához. A pontos helyadatot a keresés kiszolgálásához dolgozzuk fel, a profilodban nem tároljuk el — tartósan kizárólag durva (városszintű) helyadatot tárolunk push értesítések szűréséhez. Ha a chatben helyzetjelölőt (térképpontot) osztasz meg, az az üzenet részeként tárolódik. A helyhozzáférést bármikor visszavonhatod az eszközbeállításokban.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Live location sharing (event groups):",
                                    "Élő helyzet megosztás (esemény csoportban):",
                                )}
                            </strong>{" "}
                            {tr(
                                "if you give explicit consent, you can share your real-time location with the other participants of a specific event group. This is entirely voluntary, can be stopped at any time, and is automatically deleted from our server after 10 minutes of inactivity. Only that event's participants can see it — it is never shared with anyone else.",
                                "ha kifejezetten hozzájárulsz, megoszthatod a valós idejű tartózkodási helyedet egy adott esemény többi résztvevőjével. Ez teljesen önkéntes, bármikor leállítható, és 10 perc inaktivitás után automatikusan törlődik a szerverünkről. Csak az adott esemény résztvevői láthatják — mással sosem osztjuk meg.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Calendar integration:",
                                    "Naptár-integráció:",
                                )}
                            </strong>{" "}
                            {tr(
                                "if you choose to save an event to your device calendar, the app requests calendar access solely to add that entry — we do not read your existing calendar events, and calendar data is never sent to our servers or shared with anyone.",
                                "ha egy eseményt elmentesz az eszközöd naptárába, az alkalmazás kizárólag az adott bejegyzés hozzáadásához kér naptár-hozzáférést — meglévő naptáreseményeidet nem olvassuk ki, és naptáradatot sosem küldünk a szervereinkre vagy osztunk meg mással.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Health and workout data (Apple Health):",
                                    "Egészség- és edzésadatok (Apple Health):",
                                )}
                            </strong>{" "}
                            {tr(
                                "with your explicit permission, the app can read workouts you recorded — activity type, start/end time, duration, heart rate (average and maximum), active calories, and distance — from Apple Health (HealthKit), so you can attach them to a sports event you took part in. Attached workout data is stored on our servers and is visible only to you — we never share it with other users or third parties and never use it for advertising. The legal basis is your explicit consent (GDPR Article 9(2)(a)), which you can withdraw at any time by revoking Health access in your device settings; an attached workout is deleted when the related event or your account is deleted.",
                                "kifejezett engedélyeddel az alkalmazás kiolvashatja az Apple Health (HealthKit) rendszerből az általad rögzített edzéseket — mozgásforma, kezdési/befejezési idő, időtartam, pulzus (átlag és maximum), aktív kalória és megtett táv —, hogy hozzácsatolhasd őket egy sporteseményhez, amelyen részt vettél. A csatolt edzésadatokat a szerverünkön tároljuk, és kizárólag te látod őket — más felhasználókkal és harmadik felekkel nem osztjuk meg, hirdetésre nem használjuk. A jogalap a kifejezett hozzájárulásod (GDPR 9. cikk (2) a) pont), amelyet bármikor visszavonhatsz a Health-hozzáférés eszközbeállításokban történő kikapcsolásával; a csatolt edzés a kapcsolódó esemény vagy a fiókod törlésével törlődik.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr("Usage data:", "Használati adatok:")}
                            </strong>{" "}
                            {tr(
                                "Events you join or create, bookings, messages, search queries, and in-app actions (for example screen views and taps on listings). We collect these usage events with our own, first-party analytics running on our own servers. For this in-app usage analytics we do not rely on third-party analytics or advertising SDKs; separately, and only with your consent, our website uses Google Analytics and the Meta Pixel as described in Section 8. We use this data to personalise your experience, improve the service, and produce the aggregated statistics described in Section 5.",
                                "Általad csatlakozott vagy létrehozott események, foglalások, üzenetek, keresések és alkalmazáson belüli műveletek (például képernyő-megtekintések, kattintások). Ezeket a használati eseményeket saját, első feles analitikai rendszerünkkel, saját szerverünkön gyűjtjük. Ehhez az alkalmazáson belüli használati analitikához nem veszünk igénybe külső analitikai vagy hirdetési szolgáltatót (SDK-t); külön, és kizárólag a hozzájárulásoddal, weboldalunk a Google Analyticset és a Meta Pixelt használja, a 8. pontban leírtak szerint. Az adatokat a tapasztalatod személyre szabásához, a szolgáltatás fejlesztéséhez és az 5. pontban leírt összesített statisztikák előállításához használjuk.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Device and technical data:",
                                    "Eszköz- és technikai adatok:",
                                )}
                            </strong>{" "}
                            {tr(
                                "IP address, device type, operating system, and push notification token (if enabled). Used for security, debugging, and sending push notifications.",
                                "IP-cím, eszköztípus, operációs rendszer és push értesítési token (ha engedélyezve). Biztonsági célokra, hibakeresésre és push értesítések küldéséhez használjuk.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr("Payment data:", "Fizetési adatok:")}
                            </strong>{" "}
                            {tr(
                                "Payment card details are collected and stored exclusively by Stripe. We receive only a payment status and a non-sensitive transaction reference. If you save a card, Stripe stores it; we store only the card brand, last four digits, expiry month/year, and a Stripe payment-method identifier, so we can display the card and — with your authorisation — use it for future payments, recurring bookings, and — if you enable it — automatic pass renewal. Saved cards can be deleted at any time.",
                                "A fizetési bankkártya adatait kizárólag a Stripe gyűjti és tárolja. Mi csak a fizetési státuszt és egy nem érzékeny tranzakciós hivatkozást kapunk. Ha kártyát mentesz, azt a Stripe tárolja; mi csak a kártya típusát (márka), utolsó négy számjegyét, lejárati hónapját/évét és a Stripe fizetésimód-azonosítót tároljuk, hogy a kártyát megjeleníthessük és — felhatalmazásod alapján — későbbi fizetésekhez, ismétlődő foglalásokhoz, valamint — ha bekapcsolod — a bérletek automatikus megújításához használhassuk. A mentett kártya bármikor törölhető.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Billing data:",
                                    "Számlázási adatok:",
                                )}
                            </strong>{" "}
                            {tr(
                                "if you provide billing details (name or company name, billing address, tax number, EU VAT number), we process them to issue legally required invoices, as described in Section 5 (Számlázz.hu).",
                                "ha számlázási adatokat adsz meg (név vagy cégnév, számlázási cím, adószám, EU-s közösségi adószám), azokat a jogszabály szerinti számlák kiállításához kezeljük, az 5. pontban (Számlázz.hu) leírtak szerint.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Gift card recipient data:",
                                    "Ajándékkártya-címzett adatai:",
                                )}
                            </strong>{" "}
                            {tr(
                                "When you purchase a gift card, we process the recipient name and email address you provide, solely to deliver the redemption code.",
                                "Ajándékkártya vásárlásakor az általad megadott címzetti nevet és e-mail-címet kizárólag a beváltókód kézbesítése céljából kezeljük.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Invitations and referrals:",
                                    "Meghívások és ajánlások:",
                                )}
                            </strong>{" "}
                            {tr(
                                "if you register through another user's invite link, we record which user invited you, so we can attribute the invitation and apply any related benefits. This link is stored with your account.",
                                "ha egy másik felhasználó meghívó linkjén keresztül regisztrálsz, rögzítjük, hogy ki hívott meg, hogy a meghívást hozzárendelhessük és az esetleges kapcsolódó kedvezményeket érvényesíthessük. Ez az összerendelés a fiókodhoz tárolódik.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Chat messages and media:",
                                    "Chat-üzenetek és médiatartalmak:",
                                )}
                            </strong>{" "}
                            {tr(
                                "messages you send in event, crew, and direct chats, together with any photos, voice messages, and location pins you attach, are stored on our servers and are visible to the members of that conversation. Crew icons and banner images are stored as well.",
                                "az esemény-, csapat- és privát chatekben küldött üzeneteidet, valamint a hozzájuk csatolt fényképeket, hangüzeneteket és helyzetjelölőket a szerverünkön tároljuk; ezeket az adott beszélgetés tagjai láthatják. A csapatok (crew-k) ikonjait és borítóképeit szintén tároljuk.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Event photos:",
                                    "Esemény fotók:",
                                )}
                            </strong>{" "}
                            {tr(
                                "if you upload a photo to an event's gallery, all participants of that event can see it. You can delete your own photos at any time.",
                                "ha képet töltesz fel egy esemény galériájába, azt az esemény összes résztvevője láthatja. Saját fotóidat bármikor törölheted.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Risk-acceptance waivers:",
                                    "Kockázatvállalási nyilatkozatok:",
                                )}
                            </strong>{" "}
                            {tr(
                                "if you join an event in a higher-risk sport (e.g. climbing, boxing), we record the fact and time of your acceptance and your account identifier, retained for 5 years based on legitimate interest (GDPR Article 6(1)(f)).",
                                "ha fokozottan kockázatos sportág (például mászás, boksz) eseményéhez csatlakozol, rögzítjük az elfogadás tényét, időpontját és fiókod azonosítóját, amit jogos érdek alapján (GDPR 6. cikk (1) f) pont) 5 évig őrzünk meg.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "2b. Children's data (child profiles)",
                            "2b. Gyermekek adatai (gyermekprofilok)",
                        )}
                    >
                        <LP>
                            {tr(
                                "If you create a child profile as a parent or legal guardian, we process the child's name, date of birth, and — if provided — gender, solely to manage bookings, camp registrations, and the related declarations. The child is not a user: they cannot log in, and their data does not appear in social features (chat, leaderboards, search).",
                                "Ha szülőként vagy törvényes gondviselőként gyermekprofilt hozol létre, a gyermek nevét, születési dátumát és — ha megadod — nemét kezeljük, kizárólag a foglalások, táborregisztrációk és a kapcsolódó nyilatkozatok kezelése céljából. A gyermek nem felhasználó: nem jelentkezhet be, és adatai nem jelennek meg közösségi funkciókban (chat, ranglista, keresés).",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Legal basis: performance of the contract with the guardian (GDPR Article 6(1)(b)) and the guardian's consent. Risk-acceptance waivers for a child's participation are accepted by the guardian and recorded together with the child profile identifier (retained for 5 years). Child profiles can be deleted at any time; billing data related to purchases made for the child is subject to the 8-year statutory retention described below.",
                                "Jogalap: a gondviselővel kötött szerződés teljesítése (GDPR 6. cikk (1) b) pont), illetve a gondviselő hozzájárulása. A gyermek részvételéhez tartozó kockázatvállalási nyilatkozatot a gondviselő fogadja el, és azt a gyermekprofil azonosítójával együtt rögzítjük (megőrzés: 5 év). A gyermekprofil bármikor törölhető; a gyermek javára történt vásárlások számlázási adataira az alábbi 8 éves törvényi megőrzés vonatkozik.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "3. Legal basis for processing",
                            "3. Az adatkezelés jogalapja",
                        )}
                    >
                        <LP>
                            {tr(
                                "We process your data on the following legal bases:",
                                "Adataidat az alábbi jogalapokon kezeljük:",
                            )}
                        </LP>
                        <LI
                            items={[
                                tr(
                                    "Contract performance: processing necessary to provide the service you signed up for (account creation, bookings, payments).",
                                    "Szerződés teljesítése: az általad igénybe vett szolgáltatás nyújtásához szükséges adatkezelés (fióknyitás, foglalások, fizetések).",
                                ),
                                tr(
                                    "Legitimate interests: improving the service, detecting fraud, and ensuring platform security.",
                                    "Jogos érdek: a szolgáltatás fejlesztése, a csalás felderítése és a platform biztonságának biztosítása.",
                                ),
                                tr(
                                    "Consent: sending marketing communications and using optional analytics. You may withdraw consent at any time.",
                                    "Hozzájárulás: marketing kommunikáció küldése és opcionális analitika használata. A hozzájárulást bármikor visszavonhatod.",
                                ),
                                tr(
                                    "Legal obligation: retaining financial records as required by Hungarian accounting and tax law.",
                                    "Jogi kötelezettség: pénzügyi nyilvántartások megőrzése a magyar számviteli és adójog előírásai szerint.",
                                ),
                            ]}
                        />
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "4. How we use your data",
                            "4. Adataid felhasználása",
                        )}
                    >
                        <LI
                            items={[
                                tr(
                                    "To operate the platform: create and manage your account, process bookings and payments, and send transactional notifications.",
                                    "A platform működtetéséhez: fiókod létrehozásához és kezeléséhez, foglalások és fizetések feldolgozásához, valamint tranzakciós értesítések küldéséhez.",
                                ),
                                tr(
                                    "To personalise your experience: suggest nearby events and coaches based on your location and preferences.",
                                    "Tapasztalatod személyre szabásához: közeli események és edzők ajánlásához tartózkodási helyed és preferenciáid alapján.",
                                ),
                                tr(
                                    "To communicate with you: send booking confirmations, reminders, policy updates, and (with your consent) promotional messages.",
                                    "Veled való kommunikációhoz: foglalási visszaigazolások, emlékeztetők, szabályzati frissítések, valamint (hozzájárulásoddal) promóciós üzenetek küldéséhez.",
                                ),
                                tr(
                                    "To ensure safety and integrity: detect fraudulent activity, enforce our Terms, and protect users.",
                                    "Biztonság és integritás biztosításához: csalárd tevékenység felderítéséhez, Feltételeink érvényesítéséhez és a felhasználók védelméhez.",
                                ),
                                tr(
                                    "To improve the service: analyse usage patterns and fix bugs.",
                                    "A szolgáltatás fejlesztéséhez: használati minták elemzéséhez és hibák javításához.",
                                ),
                                tr(
                                    "Automated content moderation: text posted in chats may be automatically filtered for offensive language before display, and uploaded images may be automatically screened for inappropriate content. This runs on our own servers — no third party receives your content for this purpose.",
                                    "Automatikus tartalommoderáció: a chatben küldött szöveg megjelenítés előtt automatikusan szűrhető trágár kifejezésekre, a feltöltött képek pedig automatikusan ellenőrizhetők nem megfelelő tartalomra. Ez saját szerverünkön fut — a tartalmat e célból harmadik fél nem kapja meg.",
                                ),
                            ]}
                        />
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "5. Third parties we share data with",
                            "5. Harmadik felek, akikkel adatokat osztunk meg",
                        )}
                    >
                        <LP>
                            <strong>Stripe:</strong>{" "}
                            {tr(
                                "Payment processing and coach/venue payout management. Dinamic Life Kft. acts as merchant of record for venue purchases and as an intermediary for coach bookings; Stripe processes all payment card data exclusively under their own privacy policy (stripe.com/privacy) and a GDPR Article 28 data processing agreement. We receive only a payment status and non-sensitive transaction reference — we never access or store raw card data.",
                                "Fizetésfeldolgozás és edzői/helyszíni kifizetések kezelése. A Dinamic Life Kft. helyszíni vásárlásoknál kereskedőként (merchant of record), edzői foglalásoknál közvetítőként jár el; a bankkártya adatokat kizárólag a Stripe kezeli saját adatvédelmi szabályzata (stripe.com/privacy) és GDPR 28. cikk szerinti adatfeldolgozói megállapodás alapján. Mi csak a fizetési státuszt és egy nem érzékeny tranzakciós hivatkozást kapunk — nyers kártyaadatokhoz nem férünk hozzá és nem tároljuk azokat.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr("Apple and Google:", "Apple és Google:")}
                            </strong>{" "}
                            {tr(
                                "Sign-in authentication (Apple Sign In, Google Sign In) and push notification delivery (APNs, FCM). These providers have their own privacy policies.",
                                "Bejelentkezési hitelesítés (Apple Sign In, Google Sign In) és push értesítések kézbesítése (APNs, FCM). Ezeknek a szolgáltatóknak saját adatvédelmi szabályzatuk van.",
                            )}
                        </LP>
                        <LP>
                            <strong>Expo:</strong>{" "}
                            {tr(
                                "push notifications are delivered through Expo's notification service (Expo, Inc., USA), which relays them to Apple (APNs) and Google (FCM). As our data processor, Expo receives your push notification token and the content of each notification; processing may take place in the United States, under Expo's data processing terms and privacy policy (expo.dev/privacy).",
                                "a push értesítéseket az Expo értesítési szolgáltatásán (Expo, Inc., USA) keresztül kézbesítjük, amely továbbítja azokat az Apple (APNs) és a Google (FCM) felé. Az Expo adatfeldolgozóként a push értesítési tokenedet és az értesítések tartalmát kapja meg; az adatkezelés az Egyesült Államokban is történhet, az Expo adatfeldolgozási feltételei és adatvédelmi szabályzata (expo.dev/privacy) szerint.",
                            )}
                        </LP>
                        <LP>
                            <strong>Számlázz.hu:</strong>{" "}
                            {tr(
                                "Electronic invoice generation and delivery. When a purchase is completed, we transmit the buyer's name, email address, billing address (if provided), and transaction amount and date to Számlázz.hu (operated by KBOSS.hu Kft., Hungary) for the purpose of issuing a legally compliant electronic invoice. The same applies to commission invoices issued to coaches: the coach's name, email address, billing address, and tax number (if provided) are transmitted to Számlázz.hu for this purpose. Számlázz.hu processes this data under a GDPR Article 28 data processing agreement and their own privacy policy at szamlazz.hu.",
                                "Elektronikus számlák generálása és kézbesítése. Vásárlás teljesítésekor a vevő nevét, e-mail-címét, számlázási címét (ha megadta), valamint a tranzakció összegét és dátumát továbbítjuk a Számlázz.hu részére (üzemelteti: KBOSS.hu Kft., Magyarország) a törvényes elektronikus számla kiállítása céljából. Ugyanez vonatkozik az edzőknek kiállított jutalékszámlákra: az edző nevét, e-mail-címét, számlázási címét és adószámát (ha megadta) is a Számlázz.hu részére továbbítjuk e célból. A Számlázz.hu ezeket az adatokat GDPR 28. cikk szerinti adatfeldolgozói megállapodás és saját adatvédelmi szabályzata alapján kezeli (szamlazz.hu).",
                            )}
                        </LP>
                        <LP>
                            <strong>LibreTranslate:</strong>{" "}
                            {tr(
                                "Event descriptions may be automatically translated from Hungarian to English using a self-hosted LibreTranslate instance running on our own server. No data is sent to third-party translation services.",
                                "Az eseményleírások automatikusan lefordíthatók magyarról angolra egy saját szerveren futtatott LibreTranslate-példány segítségével. Adatokat nem küldünk harmadik fél fordítási szolgáltatásokhoz.",
                            )}
                        </LP>
                        <LP>
                            <strong>Tárhely.Eu Kft.:</strong>{" "}
                            {tr(
                                "Hosting of the platform and its database. Tárhely.Eu Szolgáltató Kft. (registered office: 1144 Budapest, Ormánság utca 4. X. em. 241., Hungary; company reg. no. 01-09-909968; tax no. 14571332-2-42) acts as a data processor under Article 28 GDPR, on the processing terms set out in its General Terms and Conditions, and processes personal data solely on our documented instructions. Data protection contact: gdpr@tarhely.eu.",
                                "A platform és adatbázisának tárhelyszolgáltatása. A Tárhely.Eu Szolgáltató Kft. (székhely: 1144 Budapest, Ormánság utca 4. X. em. 241.; cégjegyzékszám: 01-09-909968; adószám: 14571332-2-42) adatfeldolgozóként jár el a GDPR 28. cikke alapján, az Általános Szerződési Feltételeiben rögzített adatfeldolgozási feltételek szerint, és személyes adatot kizárólag a mi utasításaink szerint kezel. Adatvédelmi kapcsolat: gdpr@tarhely.eu.",
                            )}
                        </LP>
                        <LP>
                            <strong>
                                {tr(
                                    "Aggregated statistics for providers and partners:",
                                    "Összesített statisztikák szolgáltatók és partnerek részére:",
                                )}
                            </strong>{" "}
                            {tr(
                                "coaches, venue operators, event organisers, and commercial partners can see aggregated, non-identifying statistics about their own listings and content — for example view, impression, click, and booking counts. These statistics never identify you and contain no personal data.",
                                "az edzők, helyszínüzemeltetők, eseményszervezők és kereskedelmi partnerek összesített, személyazonosításra alkalmatlan statisztikákat láthatnak a saját tartalmaikról — például megtekintés-, megjelenés-, kattintás- és foglalásszámokat. Ezek a statisztikák soha nem azonosítanak téged, és nem tartalmaznak személyes adatot.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "We do not sell your personal data to third parties. Except for the consent-based Meta Pixel described in Section 8, we do not share your personal data with advertisers or sponsors — commercial partners only ever receive the aggregated, non-identifying statistics described above. Your live location and calendar data are never shared with any third party — see Section 2.",
                                "Személyes adataidat nem adjuk el harmadik feleknek. A 8. pontban leírt, hozzájárulás-alapú Meta Pixel kivételével személyes adataidat nem osztjuk meg hirdetőkkel vagy szponzorokkal — a kereskedelmi partnerek kizárólag a fent leírt összesített, személyazonosításra alkalmatlan statisztikákat kapják. Az élő helyzet- és naptáradataidat sosem osztjuk meg harmadik féllel — lásd a 2. pontot.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr("6. Data retention", "6. Adatmegőrzés")}
                    >
                        <LP>
                            {tr(
                                "We retain your account data for as long as your account is active. If you delete your account, we delete your personal data within 30 days.",
                                "Fiókadataidat addig őrizzük meg, amíg fiókod aktív. Ha törölöd fiókodat, személyes adataidat 30 napon belül töröljük.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Exception — financial records: invoicing and transaction data (name, email, amounts, dates) must be retained for 8 years under Hungarian accounting law (Act C of 2000). This obligation persists even if you delete your account. The legal basis is compliance with a legal obligation (GDPR Article 6(1)(c)).",
                                "Kivétel — pénzügyi nyilvántartások: a számlázási és tranzakciós adatokat (név, e-mail, összegek, dátumok) a magyar számviteli törvény (2000. évi C. törvény) alapján 8 évig kell megőrizni. Ez a kötelezettség fiók törlése esetén is fennáll. A jogalap jogi kötelezettség teljesítése (GDPR 6. cikk (1) c) pont).",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Child profile data is retained until the profile (or the account) is deleted. Saved payment methods are retained until you delete them or your account. Gift card recipient details are retained for the card's validity period (12 months); the related transaction data falls under the 8-year financial retention above.",
                                "A gyermekprofil adatait a profil (vagy a fiók) törléséig őrizzük meg. A mentett fizetési módokat a törlésükig, illetve a fiók törléséig tároljuk. Az ajándékkártya-címzett adatait az ajándékkártya érvényességi idejéig (12 hónap) őrizzük; a kapcsolódó tranzakciós adatokra a fenti 8 éves pénzügyi megőrzés vonatkozik.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Live location data: automatically deleted after 10 minutes of inactivity. Risk-acceptance waiver records: retained for 5 years (legitimate interest). Event photos: deletable by you at any time; removed automatically when the event itself is deleted. Attached health/workout data: retained until the related event or the account is deleted. Chat messages and media (including voice messages): retained until the conversation or the account is deleted, subject to the account-deletion rules above. Security logs: retained for at most 90 days.",
                                "Élő helyzetadatok: 10 perc inaktivitás után automatikusan törlődnek. Kockázatvállalási nyilatkozat rekordok: 5 évig megőrizve (jogos érdek alapján). Esemény fotók: általad bármikor törölhetők; az esemény törlésével automatikusan törlődnek. Csatolt egészség-/edzésadatok: a kapcsolódó esemény vagy a fiók törléséig tároljuk. Chat-üzenetek és médiatartalmak (beleértve a hangüzeneteket): a beszélgetés, illetve a fiók törléséig tároljuk, a fenti fióktörlési szabályok szerint. Biztonsági naplók: legfeljebb 90 napig megőrizve.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Anonymised, aggregated usage statistics may be retained indefinitely for service improvement purposes.",
                                "Az anonimizált, összesített használati statisztikák a szolgáltatás fejlesztése érdekében határozatlan ideig megőrizhetők.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection title={tr("7. Your rights", "7. Jogaid")}>
                        <LP>
                            {tr(
                                "Under the GDPR you have the following rights regarding your personal data:",
                                "A GDPR alapján az alábbi jogok illetnek meg személyes adataid tekintetében:",
                            )}
                        </LP>
                        <LI
                            items={[
                                tr(
                                    "Access: request a copy of the data we hold about you.",
                                    "Hozzáférés: kérj másolatot az általunk tárolt adataidról.",
                                ),
                                tr(
                                    "Rectification: ask us to correct inaccurate data.",
                                    "Helyesbítés: kérd a pontatlan adatok kijavítását.",
                                ),
                                tr(
                                    'Erasure ("right to be forgotten"): ask us to delete your data, subject to legal retention obligations.',
                                    'Törlés ("elfeledtetéshez való jog"): kérd adataid törlését, a törvényes megőrzési kötelezettségek figyelembevételével.',
                                ),
                                tr(
                                    "Portability: receive your data in a structured, machine-readable format.",
                                    "Hordozhatóság: adataidat strukturált, géppel olvasható formátumban kapd meg.",
                                ),
                                tr(
                                    "Restriction: ask us to pause processing of your data in certain circumstances.",
                                    "Korlátozás: bizonyos körülmények között kérd az adatkezelés felfüggesztését.",
                                ),
                                tr(
                                    "Objection: object to processing based on legitimate interests.",
                                    "Tiltakozás: tiltakozz a jogos érdeken alapuló adatkezelés ellen.",
                                ),
                                tr(
                                    "Withdraw consent: for processing based on consent (e.g. marketing), withdraw at any time without affecting past processing.",
                                    "Hozzájárulás visszavonása: a hozzájáruláson alapuló adatkezelés esetén (pl. marketing) bármikor visszavonhatod a hozzájárulást a korábbi adatkezelés érintése nélkül.",
                                ),
                            ]}
                        />
                        <LP>
                            {tr(
                                "To exercise any of these rights, email us at info@sportistry.app. We will respond within 30 days. You also have the right to lodge a complaint with the Hungarian National Authority for Data Protection and Freedom of Information (NAIH): naih.hu.",
                                "Ezen jogok bármelyikének érvényesítéséhez írj nekünk a info@sportistry.app e-mail-címre. 30 napon belül válaszolunk. Panaszt nyújthatsz be a Nemzeti Adatvédelmi és Információszabadság Hatósághoz (NAIH) is: naih.hu.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection title={tr("8. Cookies", "8. Sütik")}>
                        <LP>
                            {tr(
                                "To keep you logged in and remember your language preference, the Sportistry website uses your browser's local storage — a mechanism functionally equivalent to a cookie, but not sent to our servers with every request. Like strictly necessary cookies, this storage is required for the site to work and does not require consent under EU rules. We do not set any analytics or advertising cookies unless you consent, as described below.",
                                "A bejelentkezve tartáshoz és a nyelvi beállításod megjegyzéséhez a Sportistry webhely a böngésződ helyi tárolóját (local storage) alkalmazza — ez funkcionálisan megfelel egy sütinek, de nem kerül elküldésre a szervereinkhez minden kéréssel. A feltétlenül szükséges sütikhez hasonlóan ez a tárolás elengedhetetlen az oldal működéséhez, ezért nem igényel hozzájárulást az uniós szabályok szerint. Analitikai vagy reklámsütiket kizárólag a hozzájárulásoddal helyezünk el, az alábbiakban leírtak szerint.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "With your prior consent, we use Google Analytics 4 — a service provided by Google Ireland Limited — to collect anonymous, aggregated statistics about how the website and web app are used, so we can improve them. When you consent, Google Analytics stores cookies in your browser (such as _ga and _ga_<id>) and processes usage data with IP addresses anonymised. We ask for this consent through a banner on your first visit: analytics is off by default, nothing is loaded or sent to Google until you accept, and you may decline. You can withdraw your consent at any time — as easily as you gave it — via the 'Cookie settings' link in the site footer, which stops any further collection. The legal basis is your consent (GDPR Article 6(1)(a)). Google acts as our data processor, and its handling of the data is also governed by Google's own privacy policy.",
                                "Előzetes hozzájárulásoddal a Google Analytics 4 szolgáltatást használjuk — amelyet a Google Ireland Limited nyújt —, hogy anonim, összesített statisztikát gyűjtsünk a webhely és a webalkalmazás használatáról, és ezáltal fejleszthessük azokat. Hozzájárulásod esetén a Google Analytics sütiket tárol a böngésződben (például _ga és _ga_<azonosító>), és a használati adatokat anonimizált IP-címmel dolgozza fel. Ezt a hozzájárulást az első látogatáskor egy sávban kérjük: az analitika alapértelmezetten ki van kapcsolva, a hozzájárulásodig semmi nem töltődik be és nem kerül elküldésre a Google felé, és el is utasíthatod. A hozzájárulásodat bármikor visszavonhatod — ugyanolyan egyszerűen, ahogy megadtad — a lábléc „Süti beállítások” hivatkozásán keresztül, ami leállítja a további adatgyűjtést. A jogalap a hozzájárulásod (GDPR 6. cikk (1) bekezdés a) pont). A Google adatfeldolgozóként jár el; az adatok kezelésére a Google saját adatvédelmi szabályzata is vonatkozik.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "With the same prior consent, we also use the Meta Pixel — a service provided by Meta Platforms Ireland Limited — to measure the performance of our Facebook/Instagram advertising and understand how visitors arrived from those ads. When you consent, the Meta Pixel stores cookies in your browser and sends Meta an event (such as page views) together with a browser and device identifier; this may be linked to your Meta/Facebook/Instagram account if you have one. The same banner covers both Google Analytics and the Meta Pixel — one consent, one withdrawal via 'Cookie settings'. The legal basis is your consent (GDPR Article 6(1)(a)). Meta acts as an independent controller for its own processing of this data, governed by Meta's privacy policy (facebook.com/privacy/policy).",
                                "Ugyanezzel az előzetes hozzájárulásoddal a Meta Pixelt is használjuk — amelyet a Meta Platforms Ireland Limited nyújt —, hogy mérjük Facebook/Instagram hirdetéseink teljesítményét, és megértsük, hogyan érkeztek látogatók ezekről a hirdetésekről. Hozzájárulásod esetén a Meta Pixel sütiket tárol a böngésződben, és eseményt (például oldalmegtekintést) küld a Meta felé böngésző- és eszközazonosítóval együtt; ez összekapcsolható a Meta/Facebook/Instagram fiókoddal, ha van ilyen. Ugyanaz a sáv fedi le a Google Analyticset és a Meta Pixelt is — egy hozzájárulás, egy visszavonás a „Süti beállítások” hivatkozáson keresztül. A jogalap a hozzájárulásod (GDPR 6. cikk (1) bekezdés a) pont). A Meta önálló adatkezelőként jár el a saját adatfeldolgozása tekintetében, amelyre a Meta saját adatvédelmi szabályzata vonatkozik (facebook.com/privacy/policy).",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "If you choose to sign in with Google or Apple, those providers may set their own cookies on their own domains to operate the sign-in flow. This is governed by Google's and Apple's own privacy policies — we do not receive or access this data.",
                                "Ha a Google-lal vagy az Apple-lel jelentkezel be, ezek a szolgáltatók saját domainjükön saját sütiket állíthatnak be a bejelentkezési folyamat működtetéséhez. Erre a Google, illetve az Apple saját adatvédelmi szabályzata vonatkozik — mi ehhez az adathoz nem férünk hozzá.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "The Sportistry app does not use cookies. It uses local device storage for session tokens and preferences.",
                                "A Sportistry alkalmazás nem használ sütiket. Helyi eszköztárolót alkalmaz a munkamenet-tokenek és preferenciák számára.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection title={tr("9. Security", "9. Biztonság")}>
                        <LP>
                            {tr(
                                "We use industry-standard security measures including encrypted connections (HTTPS/TLS), hashed passwords, and access controls. Payment data is handled exclusively by Stripe and is never transmitted through our servers in unencrypted form.",
                                "Iparági szabványos biztonsági intézkedéseket alkalmazunk, beleértve a titkosított kapcsolatokat (HTTPS/TLS), a hashelt jelszavakat és a hozzáférés-szabályozást. A fizetési adatokat kizárólag a Stripe kezeli, és soha nem kerülnek titkosítatlan formában szervereinkre.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Internal access to personal data is role-restricted. For customer support and troubleshooting, authorised administrators can access your account and view it as you see it; every such administrative access is logged and auditable.",
                                "A személyes adatokhoz való belső hozzáférés jogosultsághoz kötött. Ügyfélszolgálati és hibaelhárítási célból az erre felhatalmazott adminisztrátorok hozzáférhetnek a fiókodhoz, és azt úgy tekinthetik meg, ahogyan te látod; minden ilyen adminisztrátori hozzáférés naplózásra kerül és utólag ellenőrizhető.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "10. Data breaches",
                            "10. Adatvédelmi incidensek",
                        )}
                    >
                        <LP>
                            {tr(
                                "In the event of a personal data breach that poses a risk to your rights and freedoms, Dinamic Life Kft. will notify the Hungarian National Authority for Data Protection and Freedom of Information (NAIH) within 72 hours of becoming aware of the breach. If the breach is likely to result in a high risk to you personally, we will also notify you directly without undue delay.",
                                "Ha személyes adatokat érintő incidens következik be, amely kockázatot jelent a jogaidra és szabadságaidra nézve, a Dinamic Life Kft. az incidens tudomására jutásától számított 72 órán belül értesíti a Nemzeti Adatvédelmi és Információszabadság Hatóságot (NAIH). Ha az incidens valószínűsíthetően magas kockázattal jár személyedre nézve, közvetlenül is értesítünk, indokolatlan késedelem nélkül.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "11. Changes to this Policy",
                            "11. A Tájékoztató módosítása",
                        )}
                    >
                        <LP>
                            {tr(
                                "We may update this Privacy Policy from time to time. We will notify you of material changes via email or in-app notification at least 14 days before they take effect.",
                                "Időről időre frissíthetjük ezt az Adatvédelmi Tájékoztatót. Az érdemi változásokról e-mailben vagy alkalmazáson belüli értesítésen keresztül tájékoztatunk legalább 14 nappal a hatályba lépés előtt.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection title={tr("12. Contact", "12. Kapcsolat")}>
                        <LP>
                            {tr(
                                "For privacy questions or to exercise your rights: ",
                                "Adatvédelmi kérdések vagy jogaid gyakorlása esetén: ",
                            )}
                            <a
                                href="mailto:info@sportistry.app"
                                style={{ color: SB.blue, fontWeight: 700 }}
                            >
                                info@sportistry.app
                            </a>
                        </LP>
                        <LP>
                            {tr(
                                "You also have the right to lodge a complaint with the Hungarian National Authority for Data Protection and Freedom of Information (NAIH): ",
                                "Panaszt nyújthatsz be a Nemzeti Adatvédelmi és Információszabadság Hatósághoz (NAIH) is: ",
                            )}
                            <a
                                href="https://naih.hu"
                                style={{ color: SB.blue, fontWeight: 700 }}
                            >
                                naih.hu
                            </a>
                        </LP>
                    </LegalSection>
                </Container>
            </Section>
        </div>
    );
}

function ImpresszumPage() {
    return (
        <div>
            <PageHero
                eyebrow={tr("Legal", "Jogi információk")}
                title={tr("Legal Notice", "Impresszum")}
            />
            <Section bg="white">
                <Container width={780}>
                    <LegalSection
                        title={tr("Service provider", "Szolgáltató adatai")}
                    >
                        <LP>
                            {tr(
                                "Dinamic Life Kft. — registered office: 1035 Budapest, Szél u. 7-9. B. lház. II. em. 30., Hungary; company reg. no. 01 09 942277 (Company Registry Court of the Budapest-Capital Regional Court); tax no. 22759283-2-41; email: info@sportistry.app.",
                                "Dinamic Life Kft. — székhely: 1035 Budapest, Szél u. 7-9. B. lház. II. em. 30.; cégjegyzékszám: 01 09 942277 (nyilvántartja a Fővárosi Törvényszék Cégbírósága); adószám: 22759283-2-41; e-mail: info@sportistry.app.",
                            )}
                        </LP>
                        <LP>
                            {tr(
                                "Dinamic Life Kft. operates the Sportistry app and the sportistry.app website.",
                                "A Dinamic Life Kft. üzemelteti a Sportistry alkalmazást és a sportistry.app weboldalt.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr("Hosting provider", "Tárhelyszolgáltató")}
                    >
                        <LP>
                            {tr(
                                "Tárhely.Eu Szolgáltató Kft. — registered office: 1144 Budapest, Ormánság utca 4. X. em. 241., Hungary; company reg. no. 01-09-909968 (Company Registry Court of the Budapest-Capital Regional Court); tax no. 14571332-2-42; email: gdpr@tarhely.eu; web: tarhely.eu.",
                                "Tárhely.Eu Szolgáltató Kft. — székhely: 1144 Budapest, Ormánság utca 4. X. em. 241.; cégjegyzékszám: 01-09-909968 (nyilvántartja a Fővárosi Törvényszék Cégbírósága); adószám: 14571332-2-42; e-mail: gdpr@tarhely.eu; web: tarhely.eu.",
                            )}
                        </LP>
                    </LegalSection>

                    <LegalSection
                        title={tr(
                            "Supervisory authority",
                            "Felügyeleti szerv",
                        )}
                    >
                        <LP>
                            {tr(
                                "Complaints about data protection can be lodged with the Hungarian National Authority for Data Protection and Freedom of Information (NAIH): ",
                                "Adatvédelmi panasszal a Nemzeti Adatvédelmi és Információszabadság Hatósághoz (NAIH) fordulhatsz: ",
                            )}
                            <a
                                href="https://naih.hu"
                                style={{ color: SB.blue, fontWeight: 700 }}
                            >
                                naih.hu
                            </a>
                        </LP>
                        <LP>
                            {tr("See also our ", "Bővebben az ")}
                            <a
                                href="/privacy"
                                style={{ color: SB.blue, fontWeight: 700 }}
                            >
                                {tr("Privacy Policy", "Adatvédelmi Tájékoztatóban")}
                            </a>
                            {tr(
                                " and ",
                                " és az ",
                            )}
                            <a
                                href="/terms"
                                style={{ color: SB.blue, fontWeight: 700 }}
                            >
                                {tr("Terms of Service", "Általános Szerződési Feltételekben")}
                            </a>
                            {tr(".", " olvashatsz.")}
                        </LP>
                    </LegalSection>
                </Container>
            </Section>
        </div>
    );
}

// ────────────────── /edzoknek — coach landing page ──────────────────
// Full page (hero, earnings calculator, benefits, pricing, VAT/KATA note,
// FAQ, final CTA). Commission figures mirror the live backend (2026-07-23
// model: first 60 days truly 0 Ft on own/invited clients; window-invited
// clients locked at 3% + ÁFA forever; invited after the window 7.5% + ÁFA;
// app-sourced 15% + ÁFA dropping to 10% from the 6th booking; payouts
// weekly via Stripe) — keep them in sync if the rates ever change.

// Simple scroll-reveal wrapper — fades/slides content in once it enters view.
function Reveal({ children, delay = 0, style }) {
    const ref = React.useRef(null);
    const [inView, setInView] = React.useState(false);
    React.useEffect(() => {
        const el = ref.current;
        if (!el) return;
        const io = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    setInView(true);
                    io.disconnect();
                }
            },
            { threshold: 0.12, rootMargin: "0px 0px -8% 0px" },
        );
        io.observe(el);
        return () => io.disconnect();
    }, []);
    return (
        <div
            ref={ref}
            style={{
                opacity: inView ? 1 : 0,
                transform: inView ? "none" : "translateY(26px)",
                transition: `opacity 700ms cubic-bezier(.22,1,.36,1) ${delay}ms, transform 700ms cubic-bezier(.22,1,.36,1) ${delay}ms`,
                ...style,
            }}
        >
            {children}
        </div>
    );
}

function CoachHero() {
    const isMobile = useIsMobile();
    const [rev, setRev] = React.useState(0);
    const phoneRef = React.useRef(null);
    React.useEffect(() => {
        const el = phoneRef.current;
        if (!el) return;
        const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
        const io = new IntersectionObserver(
            ([entry]) => {
                if (!entry.isIntersecting) return;
                io.disconnect();
                const target = 25500;
                if (reduce) {
                    setRev(target);
                    return;
                }
                let start = null;
                const dur = 1400;
                function tick(t) {
                    if (!start) start = t;
                    const p = Math.min((t - start) / dur, 1);
                    const eased = 1 - Math.pow(1 - p, 3);
                    setRev(Math.round(target * eased));
                    if (p < 1) requestAnimationFrame(tick);
                }
                requestAnimationFrame(tick);
            },
            { threshold: 0.4 },
        );
        io.observe(el);
        return () => io.disconnect();
    }, []);
    const fmt = (n) =>
        n.toLocaleString(window.__lang === "hu" ? "hu-HU" : "en-GB");
    const scrollToCalc = (e) => {
        e.preventDefault();
        e.stopPropagation();
        document
            .getElementById("kalkulator")
            ?.scrollIntoView({ behavior: "smooth" });
    };

    return (
        <header
            style={{
                position: "relative",
                background: SB.ink950,
                color: "white",
                overflow: "hidden",
                padding: isMobile ? "48px 0 56px" : "76px 0 96px",
            }}
            id="top"
        >
            <DarkGlows />
            <Container
                style={{
                    position: "relative",
                    zIndex: 1,
                    display: "grid",
                    gridTemplateColumns: isMobile ? "1fr" : "1.05fr .95fr",
                    gap: isMobile ? 40 : 48,
                    alignItems: "center",
                }}
            >
                <div>
                    <span
                        style={{
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 8,
                            padding: "7px 14px 7px 9px",
                            background: "rgba(255,255,255,.07)",
                            border: "1px solid rgba(255,255,255,.14)",
                            borderRadius: 999,
                            fontWeight: 700,
                            fontSize: 13,
                            color: "#E7ECF6",
                            fontFamily: FB,
                        }}
                    >
                        <span
                            style={{
                                width: 8,
                                height: 8,
                                borderRadius: "50%",
                                background: SB.lime,
                                animation: "sb-pulse 2s ease-in-out infinite",
                            }}
                        />
                        {tr(
                            "Commission only on clients we bring you",
                            "Jutalék csak az általunk hozott ügyfelek után",
                        )}
                    </span>
                    <h1
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            letterSpacing: "-0.03em",
                            lineHeight: 1.0,
                            color: "white",
                            fontSize: "clamp(40px, 6vw, 66px)",
                            margin: "22px 0 0",
                        }}
                    >
                        {tr("You coach.", "Te edzel.")}
                        <br />
                        {tr("We bring the ", "Mi hozzuk ")}
                        <span style={{ color: SB.lime }}>
                            {tr("clients,", "az ügyfelet,")}
                        </span>
                        <br />
                        {tr(
                            "the calendar and the money.",
                            "a naptárat és a pénzt.",
                        )}
                    </h1>
                    <p
                        style={{
                            fontSize: "clamp(17px, 2vw, 20px)",
                            lineHeight: 1.5,
                            color: "#C3CBDB",
                            marginTop: 20,
                            maxWidth: "36ch",
                            fontWeight: 500,
                            fontFamily: FB,
                        }}
                    >
                        {tr(
                            "Commission only applies to new clients we bring you — and it drops the more they come back. Paid out weekly, straight to your account.",
                            "Jutalék csak az általunk hozott új ügyfelek után — és az is csökken, ahogy visszajárnak. Kifizetés hetente, egyenesen a számládra.",
                        )}
                    </p>
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            gap: 14,
                            marginTop: 32,
                            flexWrap: "wrap",
                        }}
                    >
                        <WButton
                            variant="accent"
                            size="lg"
                            iconRight="arrow"
                            href="/edzoknek/register"
                        >
                            {tr("Register as a coach", "Regisztrálj edzőként")}
                        </WButton>
                        <WButton
                            variant="onDark"
                            size="lg"
                            href="#kalkulator"
                            onClick={scrollToCalc}
                        >
                            {tr(
                                "See how much you’d earn",
                                "Nézd meg, mennyit keresnél",
                            )}
                        </WButton>
                    </div>
                    <div
                        style={{
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 8,
                            fontSize: 14,
                            fontWeight: 600,
                            color: "#9FB0CC",
                            marginTop: 18,
                            fontFamily: FB,
                        }}
                    >
                        <WIcon name="check" size={16} color={SB.lime} />{" "}
                        {tr(
                            "Free to start · no monthly fee",
                            "Ingyenes az indulás · nincs havidíj",
                        )}
                    </div>
                </div>

                <div
                    style={{
                        position: "relative",
                        display: "flex",
                        justifyContent: "center",
                        overflow: isMobile ? "hidden" : "visible",
                    }}
                >
                    {!isMobile && (
                    <>
                    <div
                        style={{
                            position: "absolute",
                            zIndex: 5,
                            top: 54,
                            left: -28,
                            display: "flex",
                            alignItems: "center",
                            gap: 9,
                            background: "white",
                            borderRadius: 14,
                            padding: "10px 13px",
                            boxShadow: "0 20px 40px rgba(10,14,28,.35)",
                            fontWeight: 700,
                            fontSize: 12.5,
                            color: SB.ink900,
                            whiteSpace: "nowrap",
                            animation: "sb-chipfloat 5s ease-in-out infinite",
                            fontFamily: FB,
                        }}
                    >
                        <span
                            style={{
                                width: 30,
                                height: 30,
                                borderRadius: 9,
                                background: SB.blue50,
                                display: "grid",
                                placeItems: "center",
                                flexShrink: 0,
                            }}
                        >
                            <WIcon
                                name="calendarCheck"
                                size={16}
                                color={SB.blue}
                            />
                        </span>
                        <div>
                            {tr("New booking", "Új foglalás")}
                            <small
                                style={{
                                    display: "block",
                                    fontSize: 10.5,
                                    fontWeight: 600,
                                    color: SB.ink500,
                                }}
                            >
                                Kata · {tr("tomorrow 6 PM", "holnap 18:00")}
                            </small>
                        </div>
                    </div>
                    <div
                        style={{
                            position: "absolute",
                            zIndex: 5,
                            top: 230,
                            right: -34,
                            display: "flex",
                            alignItems: "center",
                            gap: 9,
                            background: "white",
                            borderRadius: 14,
                            padding: "10px 13px",
                            boxShadow: "0 20px 40px rgba(10,14,28,.35)",
                            fontWeight: 700,
                            fontSize: 12.5,
                            color: SB.ink900,
                            whiteSpace: "nowrap",
                            animation:
                                "sb-chipfloat 5s ease-in-out infinite 1.4s",
                            fontFamily: FB,
                        }}
                    >
                        <span
                            style={{
                                width: 30,
                                height: 30,
                                borderRadius: 9,
                                background: "#E2F7EC",
                                display: "grid",
                                placeItems: "center",
                                flexShrink: 0,
                            }}
                        >
                            <WIcon name="banknote" size={16} color="#0A6E40" />
                        </span>
                        <div>
                            {tr("Payout received", "Kifizetés megérkezett")}
                            <small
                                style={{
                                    display: "block",
                                    fontSize: 10.5,
                                    fontWeight: 600,
                                    color: SB.ink500,
                                }}
                            >
                                +8 500 Ft
                            </small>
                        </div>
                    </div>
                    <div
                        style={{
                            position: "absolute",
                            zIndex: 5,
                            bottom: 70,
                            left: -26,
                            display: "flex",
                            alignItems: "center",
                            gap: 9,
                            background: "white",
                            borderRadius: 14,
                            padding: "10px 13px",
                            boxShadow: "0 20px 40px rgba(10,14,28,.35)",
                            fontWeight: 700,
                            fontSize: 12.5,
                            color: SB.ink900,
                            whiteSpace: "nowrap",
                            animation:
                                "sb-chipfloat 5s ease-in-out infinite .7s",
                            fontFamily: FB,
                        }}
                    >
                        <span
                            style={{
                                width: 30,
                                height: 30,
                                borderRadius: 9,
                                background: "#FFF3DC",
                                display: "grid",
                                placeItems: "center",
                                flexShrink: 0,
                            }}
                        >
                            <WIcon name="star" size={16} color="#F59E0B" />
                        </span>
                        <div>
                            {tr("New 5★ review", "Új 5★ értékelés")}
                            <small
                                style={{
                                    display: "block",
                                    fontSize: 10.5,
                                    fontWeight: 600,
                                    color: SB.ink500,
                                }}
                            >
                                {tr(
                                    "“Professional and motivating”",
                                    "„Profi és motiváló”",
                                )}
                            </small>
                        </div>
                    </div>
                    </>
                    )}

                    <div
                        ref={phoneRef}
                        style={{
                            position: "relative",
                            width: isMobile ? 240 : 290,
                            height: isMobile ? 496 : 600,
                            borderRadius: 44,
                            background: "#0E1322",
                            padding: 11,
                            boxShadow:
                                "0 40px 80px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.06)",
                            animation: "sb-float 6s ease-in-out infinite",
                        }}
                    >
                        <div
                            style={{
                                position: "absolute",
                                top: 0,
                                left: "50%",
                                transform: "translateX(-50%)",
                                width: 116,
                                height: 26,
                                background: "#0E1322",
                                borderRadius: "0 0 16px 16px",
                                zIndex: 6,
                            }}
                        />
                        <div
                            style={{
                                position: "relative",
                                width: "100%",
                                height: "100%",
                                borderRadius: 34,
                                overflow: "hidden",
                                background: SB.ink50,
                            }}
                        >
                            <div
                                style={{
                                    height: "100%",
                                    display: "flex",
                                    flexDirection: "column",
                                    fontFamily: FB,
                                    color: SB.ink900,
                                }}
                            >
                                <div
                                    style={{
                                        padding: "34px 16px 14px",
                                        background: "white",
                                        display: "flex",
                                        alignItems: "center",
                                        gap: 10,
                                    }}
                                >
                                    <div
                                        style={{
                                            width: 38,
                                            height: 38,
                                            borderRadius: "50%",
                                            background:
                                                "linear-gradient(150deg,#8B5CF6,#5B2FD6)",
                                            display: "grid",
                                            placeItems: "center",
                                            color: "white",
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 15,
                                            flexShrink: 0,
                                        }}
                                    >
                                        TN
                                    </div>
                                    <div>
                                        <div
                                            style={{
                                                fontSize: 11,
                                                color: SB.ink500,
                                                fontWeight: 600,
                                            }}
                                        >
                                            {tr("Good morning,", "Jó reggelt,")}
                                        </div>
                                        <div
                                            style={{
                                                fontFamily: FD,
                                                fontWeight: 800,
                                                fontSize: 16,
                                                letterSpacing: "-.01em",
                                            }}
                                        >
                                            Tünde
                                        </div>
                                    </div>
                                    <div
                                        style={{
                                            marginLeft: "auto",
                                            width: 34,
                                            height: 34,
                                            borderRadius: 10,
                                            background: SB.ink50,
                                            display: "grid",
                                            placeItems: "center",
                                            position: "relative",
                                        }}
                                    >
                                        <WIcon
                                            name="bell"
                                            size={17}
                                            color={SB.ink600}
                                        />
                                        <span
                                            style={{
                                                position: "absolute",
                                                top: 8,
                                                right: 8,
                                                width: 7,
                                                height: 7,
                                                borderRadius: "50%",
                                                background: "#E5484D",
                                                border:
                                                    "1.5px solid " + SB.ink50,
                                            }}
                                        />
                                    </div>
                                </div>
                                <div
                                    style={{
                                        flex: 1,
                                        overflow: "hidden",
                                        padding: "14px 16px",
                                        background: SB.ink50,
                                    }}
                                >
                                    <div
                                        style={{
                                            background: SB.ink950,
                                            borderRadius: 18,
                                            padding: "16px 16px 14px",
                                            color: "white",
                                            position: "relative",
                                            overflow: "hidden",
                                        }}
                                    >
                                        <div
                                            style={{
                                                position: "absolute",
                                                right: -30,
                                                top: -30,
                                                width: 120,
                                                height: 120,
                                                borderRadius: "50%",
                                                background:
                                                    "radial-gradient(circle, rgba(198,247,60,.30), transparent 65%)",
                                            }}
                                        />
                                        <div
                                            style={{
                                                fontSize: 11,
                                                fontWeight: 700,
                                                color: "#9FB0CC",
                                                letterSpacing: ".04em",
                                                textTransform: "uppercase",
                                            }}
                                        >
                                            {tr(
                                                "Today’s revenue",
                                                "Mai bevétel",
                                            )}
                                        </div>
                                        <div
                                            style={{
                                                fontFamily: FD,
                                                fontWeight: 800,
                                                fontSize: 30,
                                                letterSpacing: "-.02em",
                                                marginTop: 4,
                                            }}
                                        >
                                            {fmt(rev)}{" "}
                                            <span
                                                style={{
                                                    fontSize: 17,
                                                    color: SB.lime,
                                                    marginLeft: 3,
                                                }}
                                            >
                                                Ft
                                            </span>
                                        </div>
                                        <span
                                            style={{
                                                display: "inline-flex",
                                                alignItems: "center",
                                                gap: 4,
                                                marginTop: 7,
                                                fontSize: 11.5,
                                                fontWeight: 700,
                                                color: SB.lime,
                                                background:
                                                    "rgba(198,247,60,.14)",
                                                padding: "3px 8px",
                                                borderRadius: 999,
                                            }}
                                        >
                                            <WIcon
                                                name="trendingUp"
                                                size={12}
                                                color={SB.lime}
                                            />{" "}
                                            +18%{" "}
                                            {tr(
                                                "vs last week",
                                                "a múlt héthez képest",
                                            )}
                                        </span>
                                        <div
                                            style={{
                                                display: "flex",
                                                alignItems: "flex-end",
                                                gap: 4,
                                                height: 34,
                                                marginTop: 12,
                                            }}
                                        >
                                            {[42, 60, 38, 74, 55, 88, 100].map(
                                                (h, i) => (
                                                    <i
                                                        key={i}
                                                        style={{
                                                            flex: 1,
                                                            height: h + "%",
                                                            background:
                                                                i === 6
                                                                    ? SB.lime
                                                                    : "rgba(255,255,255,.20)",
                                                            borderRadius: 3,
                                                        }}
                                                    />
                                                ),
                                            )}
                                        </div>
                                    </div>

                                    <div
                                        style={{
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "space-between",
                                            margin: "16px 2px 9px",
                                        }}
                                    >
                                        <span
                                            style={{
                                                fontFamily: FD,
                                                fontWeight: 800,
                                                fontSize: 13.5,
                                                letterSpacing: "-.01em",
                                            }}
                                        >
                                            {tr(
                                                "Today’s bookings",
                                                "Mai foglalások",
                                            )}
                                        </span>
                                        <span
                                            style={{
                                                fontSize: 11,
                                                fontWeight: 700,
                                                color: SB.blue,
                                            }}
                                        >
                                            {tr("All", "Mind")}
                                        </span>
                                    </div>
                                    {[
                                        {
                                            time: "08:00",
                                            dur: tr("1 hr", "1 óra"),
                                            name: "Norbert B.",
                                            sub: tr(
                                                "Personal training",
                                                "Személyi edzés",
                                            ),
                                        },
                                        {
                                            time: "17:00",
                                            dur: tr("1 hr", "1 óra"),
                                            name: "Kata Szabó",
                                            sub: tr(
                                                "Package · 3/8 sessions",
                                                "Bérlet · 3/8 alkalom",
                                            ),
                                        },
                                    ].map((b, i) => (
                                        <div
                                            key={i}
                                            style={{
                                                background: "white",
                                                borderRadius: 14,
                                                padding: "11px 12px",
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 10,
                                                boxShadow:
                                                    "0 1px 2px rgba(18,23,38,0.06)",
                                                marginBottom: 9,
                                            }}
                                        >
                                            <div
                                                style={{
                                                    fontFamily: FD,
                                                    fontWeight: 800,
                                                    fontSize: 13,
                                                    color: SB.ink900,
                                                    width: 38,
                                                    flexShrink: 0,
                                                    lineHeight: 1.15,
                                                }}
                                            >
                                                {b.time}
                                                <small
                                                    style={{
                                                        display: "block",
                                                        fontFamily: FB,
                                                        fontWeight: 700,
                                                        fontSize: 9,
                                                        color: SB.ink400,
                                                    }}
                                                >
                                                    {b.dur}
                                                </small>
                                            </div>
                                            <div
                                                style={{ flex: 1, minWidth: 0 }}
                                            >
                                                <div
                                                    style={{
                                                        fontWeight: 800,
                                                        fontSize: 12.5,
                                                        letterSpacing: "-.01em",
                                                    }}
                                                >
                                                    {b.name}
                                                </div>
                                                <div
                                                    style={{
                                                        fontSize: 10.5,
                                                        color: SB.ink500,
                                                        fontWeight: 600,
                                                    }}
                                                >
                                                    {b.sub}
                                                </div>
                                            </div>
                                            <span
                                                style={{
                                                    fontSize: 9.5,
                                                    fontWeight: 800,
                                                    padding: "4px 8px",
                                                    borderRadius: 999,
                                                    whiteSpace: "nowrap",
                                                    background: "#E2F7EC",
                                                    color: "#0A6E40",
                                                }}
                                            >
                                                {tr("Paid", "Fizetve")}
                                            </span>
                                        </div>
                                    ))}

                                    <div
                                        style={{
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "space-between",
                                            margin: "16px 2px 9px",
                                        }}
                                    >
                                        <span
                                            style={{
                                                fontFamily: FD,
                                                fontWeight: 800,
                                                fontSize: 13.5,
                                                letterSpacing: "-.01em",
                                            }}
                                        >
                                            {tr("New request", "Új kérés")}
                                        </span>
                                    </div>
                                    <div
                                        style={{
                                            background: "white",
                                            border: "1.5px solid " + SB.blue,
                                            borderRadius: 14,
                                            padding: 12,
                                            boxShadow:
                                                "0 8px 20px rgba(22,82,240,.12)",
                                        }}
                                    >
                                        <div
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 7,
                                                fontWeight: 800,
                                                fontSize: 12,
                                            }}
                                        >
                                            <WIcon
                                                name="calendarPlus"
                                                size={15}
                                                color={SB.blue}
                                            />{" "}
                                            {tr(
                                                "New booking request",
                                                "Új foglalási kérés",
                                            )}
                                        </div>
                                        <div
                                            style={{
                                                fontSize: 11,
                                                color: SB.ink500,
                                                fontWeight: 600,
                                                margin: "6px 0 10px",
                                            }}
                                        >
                                            {tr(
                                                "Bence T. · tomorrow 6 PM · Intro consultation",
                                                "Bence T. · holnap 18:00 · Bevezető konzultáció",
                                            )}
                                        </div>
                                        <div
                                            style={{ display: "flex", gap: 8 }}
                                        >
                                            <button
                                                style={{
                                                    flex: 1,
                                                    border: "none",
                                                    borderRadius: 10,
                                                    padding: 9,
                                                    fontFamily: FB,
                                                    fontWeight: 800,
                                                    fontSize: 11.5,
                                                    cursor: "pointer",
                                                    background: SB.blue,
                                                    color: "white",
                                                }}
                                            >
                                                {tr("Accept", "Elfogadom")}
                                            </button>
                                            <button
                                                style={{
                                                    flex: 1,
                                                    border: "none",
                                                    borderRadius: 10,
                                                    padding: 9,
                                                    fontFamily: FB,
                                                    fontWeight: 800,
                                                    fontSize: 11.5,
                                                    cursor: "pointer",
                                                    background: SB.ink100,
                                                    color: SB.ink600,
                                                }}
                                            >
                                                {tr("Decline", "Elutasít")}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Container>
        </header>
    );
}

function CoachTrustStrip() {
    const items = [
        {
            icon: "shield",
            text: tr(
                "Payments protected via Stripe",
                "Stripe-on keresztül védett fizetés",
            ),
        },
        {
            icon: "creditCard",
            text: tr("Card payments handled", "Kártyás fizetés kezelve"),
        },
        {
            icon: "globe",
            text: tr("In Hungarian, in HUF", "Magyar nyelven, HUF-ban"),
        },
    ];
    return (
        <div style={{ background: SB.ink950, padding: "0 0 30px" }}>
            <Container
                style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "14px 34px",
                    flexWrap: "wrap",
                    opacity: 0.9,
                }}
            >
                {items.map((it, i) => (
                    <div
                        key={i}
                        style={{
                            display: "flex",
                            alignItems: "center",
                            gap: 9,
                            color: "#AEB9CE",
                            fontWeight: 700,
                            fontSize: 14,
                            fontFamily: FB,
                        }}
                    >
                        <WIcon name={it.icon} size={18} color={SB.lime} />{" "}
                        {it.text}
                    </div>
                ))}
            </Container>
        </div>
    );
}

function CoachCalculator() {
    const isMobile = useIsMobile();
    const [price, setPrice] = React.useState(10000);
    const [sessionsWeek, setSessionsWeek] = React.useState(12);
    const [ownPct, setOwnPct] = React.useState(60);
    const [returningPct, setReturningPct] = React.useState(30);
    const [intro, setIntro] = React.useState(false);

    const VAT = 1.27;
    const fmt = (n) =>
        Math.round(n).toLocaleString(
            window.__lang === "hu" ? "hu-HU" : "en-GB",
        );
    const monthlySessions = sessionsWeek * 4.33;
    const ownSessions = monthlySessions * (ownPct / 100);
    const platformSessions = monthlySessions * (1 - ownPct / 100);
    const platformReturning = platformSessions * (returningPct / 100);
    const platformNew = platformSessions * (1 - returningPct / 100);
    // Own clients brought in during the coach's first 60 days: free while the
    // window runs, then locked at 3% + ÁFA forever. (Clients invited after the
    // window are 7.5% + ÁFA — see the pricing cards; the calculator models the
    // existing book, which the launch window is designed to onboard.)
    const ownRate = intro ? 0 : 0.03;
    const rows = [
        {
            label: tr("Own / invited client", "Saját / meghívott ügyfél"),
            sub: intro
                ? tr("0 Ft · launch window", "0 Ft · indulási időszak")
                : tr(
                      "3% + VAT · brought in during your first 60 days",
                      "3% + ÁFA · az első 60 napban behozva",
                  ),
            sessions: ownSessions,
            rate: ownRate,
        },
        {
            label: tr("Platform client · new", "Platform-ügyfél · új"),
            sub: tr("15% + VAT", "15% + ÁFA"),
            sessions: platformNew,
            rate: 0.15,
        },
        {
            label: tr(
                "Platform client · returning",
                "Platform-ügyfél · visszatérő",
            ),
            sub: tr(
                "10% + VAT · from 6th session",
                "10% + ÁFA · 6. alkalomtól",
            ),
            sessions: platformReturning,
            rate: 0.1,
        },
    ];
    let totalNet = 0;
    const visibleRows = rows.filter((r) => {
        const revenue = r.sessions * price;
        const fee = revenue * r.rate * VAT;
        totalNet += revenue - fee;
        return r.sessions >= 0.4;
    });
    const sliderTrack = {
        width: "100%",
        WebkitAppearance: "none",
        appearance: "none",
        height: 6,
        borderRadius: 999,
        background: SB.ink200,
        outline: "none",
        cursor: "pointer",
        display: "block",
        fontFamily: FB,
    };

    return (
        <Section bg={SB.ink50} id="kalkulator">
            <Container>
                <div
                    style={{
                        maxWidth: 660,
                        margin: "0 auto",
                        textAlign: "center",
                    }}
                >
                    <Eyebrow style={{ justifyContent: "center" }}>
                        {tr("Calculator", "Kalkulátor")}
                    </Eyebrow>
                    <h2
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            letterSpacing: "-0.025em",
                            lineHeight: 1.05,
                            fontSize: "clamp(30px, 4.4vw, 44px)",
                            margin: "14px 0 0",
                            color: SB.ink900,
                        }}
                    >
                        {tr(
                            "See how much you’d earn",
                            "Nézd meg, mennyit keresnél",
                        )}
                    </h2>
                    <p
                        style={{
                            fontSize: 18,
                            lineHeight: 1.55,
                            color: SB.ink600,
                            marginTop: 16,
                            fontWeight: 500,
                        }}
                    >
                        {tr(
                            "Set your hourly rate and weekly hours — commission only applies to clients we bring you, and it drops the more they come back.",
                            "Állítsd be az óradíjad és a heti óráid számát — a jutalék csak az általunk hozott ügyfelek után számít, és csökken, ahogy visszajárnak.",
                        )}
                    </p>
                </div>

                <Reveal>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
                            gap: isMobile ? 18 : 28,
                            marginTop: isMobile ? 32 : 48,
                            alignItems: "stretch",
                        }}
                    >
                        <div
                            style={{
                                background: "white",
                                border: "1px solid " + SB.ink100,
                                borderRadius: 24,
                                padding: isMobile ? 22 : 32,
                                boxShadow: "0 1px 2px rgba(18,23,38,0.04)",
                                display: "flex",
                                flexDirection: "column",
                                gap: 26,
                                boxSizing: "border-box",
                            }}
                        >
                            <div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        fontWeight: 700,
                                        fontSize: 14.5,
                                        color: SB.ink800,
                                        marginBottom: 10,
                                        fontFamily: FB,
                                    }}
                                >
                                    <span>{tr("Hourly rate", "Óradíj")}</span>
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            color: SB.blue,
                                            fontSize: 15,
                                        }}
                                    >
                                        {fmt(price)} Ft
                                    </span>
                                </div>
                                <input
                                    type="range"
                                    min={3000}
                                    max={30000}
                                    step={500}
                                    value={price}
                                    onChange={(e) => setPrice(+e.target.value)}
                                    style={sliderTrack}
                                />
                            </div>
                            <div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        fontWeight: 700,
                                        fontSize: 14.5,
                                        color: SB.ink800,
                                        marginBottom: 10,
                                        fontFamily: FB,
                                    }}
                                >
                                    <span>
                                        {tr("Hours per week", "Órák hetente")}
                                    </span>
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            color: SB.blue,
                                            fontSize: 15,
                                        }}
                                    >
                                        {sessionsWeek} {tr("hrs", "óra")}
                                    </span>
                                </div>
                                <input
                                    type="range"
                                    min={1}
                                    max={40}
                                    step={1}
                                    value={sessionsWeek}
                                    onChange={(e) =>
                                        setSessionsWeek(+e.target.value)
                                    }
                                    style={sliderTrack}
                                />
                            </div>
                            <div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        fontWeight: 700,
                                        fontSize: 14.5,
                                        color: SB.ink800,
                                        marginBottom: 10,
                                        fontFamily: FB,
                                    }}
                                >
                                    <span>
                                        {tr(
                                            "Own / invited client share",
                                            "Saját / meghívott ügyfelek aránya",
                                        )}
                                    </span>
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            color: SB.blue,
                                            fontSize: 15,
                                        }}
                                    >
                                        {ownPct}%
                                    </span>
                                </div>
                                <input
                                    type="range"
                                    min={0}
                                    max={100}
                                    step={5}
                                    value={ownPct}
                                    onChange={(e) => setOwnPct(+e.target.value)}
                                    style={sliderTrack}
                                />
                                <div
                                    style={{
                                        fontSize: 12.5,
                                        color: SB.ink500,
                                        fontWeight: 600,
                                        marginTop: 8,
                                        lineHeight: 1.4,
                                        fontFamily: FB,
                                    }}
                                >
                                    {tr(
                                        "The rest are new clients we bring you through the app.",
                                        "A többi új ügyfél, akit az appon keresztül hozunk neked.",
                                    )}
                                </div>
                            </div>
                            <div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        fontWeight: 700,
                                        fontSize: 14.5,
                                        color: SB.ink800,
                                        marginBottom: 10,
                                        fontFamily: FB,
                                    }}
                                >
                                    <span>
                                        {tr(
                                            "…of those, returning from session 6",
                                            "…ebből visszatérő, 6. alkalomtól",
                                        )}
                                    </span>
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            color: SB.blue,
                                            fontSize: 15,
                                        }}
                                    >
                                        {returningPct}%
                                    </span>
                                </div>
                                <input
                                    type="range"
                                    min={0}
                                    max={100}
                                    step={5}
                                    value={returningPct}
                                    onChange={(e) =>
                                        setReturningPct(+e.target.value)
                                    }
                                    style={sliderTrack}
                                />
                                <div
                                    style={{
                                        fontSize: 12.5,
                                        color: SB.ink500,
                                        fontWeight: 600,
                                        marginTop: 8,
                                        lineHeight: 1.4,
                                        fontFamily: FB,
                                    }}
                                >
                                    {tr(
                                        "Of the clients you got through the app, how many are already on session 6+ — after that it drops to 10% + VAT.",
                                        "Az appon szerzett ügyfeleid közül hányan járnak már 6+ alkalma — utánuk csak 10% + ÁFA megy.",
                                    )}
                                </div>
                            </div>
                            <label
                                style={{
                                    display: "flex",
                                    alignItems: "flex-start",
                                    gap: 11,
                                    paddingTop: 20,
                                    borderTop: "1px solid " + SB.ink100,
                                    cursor: "pointer",
                                }}
                            >
                                <input
                                    type="checkbox"
                                    checked={intro}
                                    onChange={(e) => setIntro(e.target.checked)}
                                    style={{
                                        position: "absolute",
                                        opacity: 0,
                                        width: 0,
                                        height: 0,
                                        fontFamily: FB,
                                    }}
                                />
                                <span
                                    style={{
                                        width: 20,
                                        height: 20,
                                        borderRadius: 6,
                                        border:
                                            "2px solid " +
                                            (intro ? SB.blue : SB.ink300),
                                        background: intro ? SB.blue : "white",
                                        display: "grid",
                                        placeItems: "center",
                                        flexShrink: 0,
                                        marginTop: 1,
                                        transition: "all 120ms",
                                    }}
                                >
                                    {intro && (
                                        <WIcon
                                            name="check"
                                            size={13}
                                            color="white"
                                        />
                                    )}
                                </span>
                                <span
                                    style={{
                                        fontSize: 13.5,
                                        fontWeight: 600,
                                        color: SB.ink600,
                                        lineHeight: 1.4,
                                        fontFamily: FB,
                                    }}
                                >
                                    {tr(
                                        "I’m still in the first 60-day launch window (own clients = 0 Ft — no commission, no transaction fee)",
                                        "Még az első 60 napos indulási időszakban vagyok (saját ügyfél = 0 Ft — se jutalék, se tranzakciós díj)",
                                    )}
                                </span>
                            </label>
                        </div>

                        <div
                            style={{
                                background: SB.ink950,
                                color: "white",
                                borderRadius: 24,
                                padding: isMobile ? 24 : 34,
                                position: "relative",
                                overflow: "hidden",
                                display: "flex",
                                flexDirection: "column",
                                boxSizing: "border-box",
                            }}
                        >
                            <div
                                style={{
                                    position: "absolute",
                                    right: -90,
                                    top: -90,
                                    width: 260,
                                    height: 260,
                                    borderRadius: "50%",
                                    background:
                                        "radial-gradient(circle, rgba(198,247,60,.28), transparent 65%)",
                                }}
                            />
                            <div
                                style={{
                                    position: "relative",
                                    zIndex: 2,
                                    fontWeight: 700,
                                    fontSize: 13,
                                    color: "#9FB0CC",
                                    textTransform: "uppercase",
                                    letterSpacing: ".05em",
                                    fontFamily: FB,
                                }}
                            >
                                {tr(
                                    "Estimated monthly net revenue",
                                    "Becsült havi nettó bevétel",
                                )}
                            </div>
                            <div
                                style={{
                                    position: "relative",
                                    zIndex: 2,
                                    fontFamily: FD,
                                    fontWeight: 800,
                                    fontSize: 52,
                                    letterSpacing: "-.03em",
                                    marginTop: 8,
                                    lineHeight: 1,
                                }}
                            >
                                {fmt(totalNet)}{" "}
                                <span
                                    style={{
                                        fontSize: 24,
                                        color: SB.lime,
                                        marginLeft: 4,
                                    }}
                                >
                                    Ft
                                </span>
                            </div>
                            <div
                                style={{
                                    position: "relative",
                                    zIndex: 2,
                                    fontSize: 13,
                                    color: "#9FB0CC",
                                    fontWeight: 600,
                                    marginTop: 8,
                                    fontFamily: FB,
                                }}
                            >
                                ≈{Math.round(monthlySessions)}{" "}
                                {tr("hrs / month", "óra / hónap")}
                            </div>
                            <div
                                style={{
                                    position: "relative",
                                    zIndex: 2,
                                    marginTop: 24,
                                    display: "flex",
                                    flexDirection: "column",
                                    gap: 2,
                                    flex: 1,
                                }}
                            >
                                {visibleRows.map((r, i) => {
                                    const revenue = r.sessions * price;
                                    const fee = revenue * r.rate * VAT;
                                    const net = revenue - fee;
                                    return (
                                        <div
                                            key={i}
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                justifyContent: "space-between",
                                                gap: 16,
                                                padding: "12px 0",
                                                borderBottom:
                                                    i < visibleRows.length - 1
                                                        ? "1px solid rgba(255,255,255,.1)"
                                                        : "none",
                                            }}
                                        >
                                            <span
                                                style={{
                                                    fontSize: 13.5,
                                                    fontWeight: 600,
                                                    color: "#C3CBDB",
                                                    fontFamily: FB,
                                                }}
                                            >
                                                {r.label}
                                                <small
                                                    style={{
                                                        display: "block",
                                                        fontSize: 11,
                                                        color: "#7A89A0",
                                                        fontWeight: 600,
                                                        marginTop: 2,
                                                    }}
                                                >
                                                    {Math.round(r.sessions)}{" "}
                                                    {tr("hrs/mo", "óra/hó")} ·{" "}
                                                    {r.sub}
                                                </small>
                                            </span>
                                            <span
                                                style={{
                                                    fontFamily: FD,
                                                    fontWeight: 800,
                                                    fontSize: 15,
                                                    color: "white",
                                                    whiteSpace: "nowrap",
                                                }}
                                            >
                                                {fmt(net)} Ft
                                            </span>
                                        </div>
                                    );
                                })}
                            </div>
                            <div
                                style={{
                                    position: "relative",
                                    zIndex: 2,
                                    fontSize: 11.5,
                                    color: "#7A89A0",
                                    fontWeight: 600,
                                    marginTop: 20,
                                    lineHeight: 1.4,
                                    fontFamily: FB,
                                }}
                            >
                                {tr(
                                    "Illustrative estimate, not a contractual offer. All fees shown include VAT.",
                                    "Tájékoztató becslés, nem szerződéses ajánlat. Minden feltüntetett díj tartalmazza az ÁFA-t.",
                                )}
                            </div>
                        </div>
                    </div>
                </Reveal>
            </Container>
        </Section>
    );
}

function CoachBenefits() {
    const isMobile = useIsMobile();
    const items = [
        {
            icon: "calendarCheck",
            tint: SB.blue50,
            iconColor: SB.blue,
            title: tr("Clients book you", "Foglalnak hozzád"),
            desc: tr(
                "Clients find you in search, see your open slots and book your sessions. You decide what to accept.",
                "Az ügyfelek megtalálnak a keresőben, látják a szabad időpontjaidat és lefoglalják az óráidat. Te döntöd el, mit fogadsz el.",
            ),
            points: [
                tr(
                    "Public coach profile & searchability",
                    "Nyilvános edzői profil és kereshetőség",
                ),
                tr(
                    "You set your own availability",
                    "Te állítod be az elérhetőséged",
                ),
                tr(
                    "One tap: accept or decline",
                    "Egy kattintás: elfogadás vagy elutasítás",
                ),
            ],
        },
        {
            icon: "banknote",
            tint: "#E2F7EC",
            iconColor: "#0A6E40",
            title: tr(
                "You get paid automatically",
                "Automatikusan kapod a pénzed",
            ),
            desc: tr(
                "Stripe payouts go straight to your account. Clients pay by card — no more chasing cash or bank transfers.",
                "Stripe-kifizetés egyenesen a számládra. Az ügyfél kártyával fizet — nincs többé készpénz vagy utalás kergetése.",
            ),
            points: [
                tr(
                    "Online card payment at booking",
                    "Online kártyás fizetés a foglaláskor",
                ),
                tr(
                    "Payouts to your own bank account",
                    "Kifizetés a saját bankszámládra",
                ),
                tr(
                    "Transparent revenue reporting",
                    "Átlátható bevétel-kimutatás",
                ),
            ],
        },
        {
            icon: "users",
            tint: "#EDE7FE",
            iconColor: "#6A3FF0",
            title: tr(
                "Client & package management",
                "Ügyfél- és bérletkezelés",
            ),
            desc: tr(
                "Your client list and packages in one place. Multi-session packages track used sessions automatically.",
                "Egy helyen az ügyféllistád és a bérletek. A többalkalmas csomagoknál a felhasznált alkalmakat is automatikusan követed.",
            ),
            points: [
                tr("Client list with history", "Ügyféllista előzményekkel"),
                tr(
                    "Multi-session packages (e.g. 10 sessions)",
                    "Többalkalmas bérletek (pl. 10 alkalom)",
                ),
                tr(
                    "Used-session tracking",
                    "Felhasznált alkalmak nyomon követése",
                ),
            ],
        },
        {
            icon: "award",
            tint: "#FFE6F0",
            iconColor: "#F0498D",
            title: tr("A professional coach profile", "Profi edzői profil"),
            desc: tr(
                "Sport, languages, experience, response time and reviews. The credibility that brings bookings — and sets you apart.",
                "Sportág, nyelvek, tapasztalat, válaszidő és értékelések. A hitelesség, ami foglalásokat hoz — és megkülönböztet a tömegtől.",
            ),
            points: [
                tr(
                    "Verified qualifications & reviews",
                    "Igazolt képesítések és értékelések",
                ),
                tr(
                    "Response time & experience highlighted",
                    "Válaszidő és tapasztalat kiemelve",
                ),
                tr(
                    "Shareable in your Instagram bio link",
                    "Megosztható az Instagram-bio linkben",
                ),
            ],
        },
    ];
    return (
        <Section bg="white" id="miert">
            <Container>
                <div style={{ maxWidth: 660 }}>
                    <Eyebrow>
                        {tr("Not just payments", "Nem csak fizetés")}
                    </Eyebrow>
                    <h2
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            letterSpacing: "-.025em",
                            lineHeight: 1.05,
                            fontSize: "clamp(30px, 4.4vw, 44px)",
                            margin: "14px 0 0",
                            color: SB.ink900,
                        }}
                    >
                        {tr(
                            "Full infrastructure for your coaching business",
                            "Teljes infrastruktúra az edzői üzletedhez",
                        )}
                    </h2>
                    <p
                        style={{
                            fontSize: 18,
                            lineHeight: 1.55,
                            color: SB.ink600,
                            marginTop: 16,
                            fontWeight: 500,
                        }}
                    >
                        {tr(
                            "Calendar, bookings, packages and client CRM in one place — not another app you “connect”, but your own business tool.",
                            "Naptár, foglalás, bérletek és ügyfél-CRM egy helyen — nem egy újabb app, amihez „csatlakozol”, hanem a te üzleti eszközöd.",
                        )}
                    </p>
                </div>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile
                            ? "1fr"
                            : "repeat(2, 1fr)",
                        gap: 18,
                        marginTop: isMobile ? 32 : 48,
                    }}
                >
                    {items.map((b, i) => (
                        <Reveal key={b.title} delay={(i % 2) * 80}>
                            <div
                                style={{
                                    background: "white",
                                    borderRadius: 20,
                                    padding: 26,
                                    boxShadow: "0 1px 2px rgba(18,23,38,0.04)",
                                    border: "1px solid " + SB.ink100,
                                    height: "100%",
                                    boxSizing: "border-box",
                                }}
                            >
                                <div
                                    style={{
                                        width: 52,
                                        height: 52,
                                        borderRadius: 15,
                                        background: b.tint,
                                        display: "grid",
                                        placeItems: "center",
                                        marginBottom: 18,
                                    }}
                                >
                                    <WIcon
                                        name={b.icon}
                                        size={26}
                                        color={b.iconColor}
                                    />
                                </div>
                                <h3
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 21,
                                        letterSpacing: "-.02em",
                                        color: SB.ink900,
                                        margin: 0,
                                    }}
                                >
                                    {b.title}
                                </h3>
                                <p
                                    style={{
                                        fontSize: 15.5,
                                        lineHeight: 1.55,
                                        color: SB.ink600,
                                        marginTop: 10,
                                        fontWeight: 500,
                                    }}
                                >
                                    {b.desc}
                                </p>
                                <ul
                                    style={{
                                        marginTop: 16,
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: 8,
                                        listStyle: "none",
                                        padding: 0,
                                    }}
                                >
                                    {b.points.map((p) => (
                                        <li
                                            key={p}
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 9,
                                                fontSize: 13.5,
                                                fontWeight: 700,
                                                color: SB.ink700,
                                            }}
                                        >
                                            <WIcon
                                                name="check"
                                                size={16}
                                                color="#0A6E40"
                                            />{" "}
                                            {p}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </Reveal>
                    ))}
                </div>
            </Container>
        </Section>
    );
}

// "Edzői felkérés" — `training_requests` / `training_offers`. A player posts a venue
// + time with no coach picked; matched coaches within ~10km are fanned out to in two
// stages (venue-first for the first 3h) and each sends a price offer; the player picks
// one. Requests expire after 48h. Copy deliberately does NOT claim offers are hidden
// from other coaches — that isn't established in the API.
function CoachInboundLeads() {
    const isMobile = useIsMobile();
    const steps = [
        [
            tr("A player posts a request", "A játékos felkérést tesz közzé"),
            tr(
                "They pick a venue and a time and say what they want to train — without choosing a coach.",
                "Kiválaszt egy helyszínt és egy időpontot, és megírja, mit szeretne edzeni – edző választása nélkül.",
            ),
        ],
        [
            tr("It lands in your inbox", "Megérkezik a postaládádba"),
            tr(
                "If it matches your sport and it's near you, you see it. Coaches at that venue get first look.",
                "Ha illik a sportágadhoz és a közeledben van, látod. Az adott helyszín edzői látják először.",
            ),
        ],
        [
            tr("You name your price", "Te mondod meg az árat"),
            tr(
                "Send an offer with your own price, or pass. No haggling in messages, no undercutting yourself in advance.",
                "Küldj ajánlatot a saját áraddal, vagy hagyd ki. Nincs alkudozás üzenetben, és nem kell előre alámenned senkinek.",
            ),
        ],
        [
            tr("The player picks", "A játékos választ"),
            tr(
                "They accept one offer and pay for it. The session lands in your calendar as a confirmed booking.",
                "Elfogad egy ajánlatot és kifizeti. Az óra megerősített foglalásként kerül a naptáradba.",
            ),
        ],
    ];
    return (
        <Section bg={SB.ink50}>
            <Container>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
                        gap: isMobile ? 28 : 56,
                        alignItems: "center",
                    }}
                >
                    <Reveal>
                        <PhotoSlot
                            label="coach checking their phone at the gym"
                            src={SPORT_IMG.fitness}
                            sport="fitness"
                            height={isMobile ? 260 : 440}
                            tint={shadeWeb(SB.blue, -0.12)}
                            glow={SB.blue}
                        />
                    </Reveal>
                    <Reveal delay={90}>
                        <Eyebrow>{tr("Coach requests", "Edzői felkérés")}</Eyebrow>
                        <h2
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                fontSize: isMobile ? 26 : 38,
                                lineHeight: isMobile ? "32px" : "44px",
                                letterSpacing: "-0.02em",
                                color: SB.ink900,
                                margin: "10px 0 14px",
                            }}
                        >
                            {tr(
                                "Clients come looking for you. You just answer.",
                                "Az ügyfelek keresnek meg téged. Neked csak válaszolnod kell.",
                            )}
                        </h2>
                        <p
                            style={{
                                fontFamily: FB,
                                fontWeight: 500,
                                fontSize: 15,
                                lineHeight: "25px",
                                color: SB.ink600,
                                margin: "0 0 22px",
                            }}
                        >
                            {tr(
                                "No cold messages, no chasing leads on Instagram. A player says where and when they want to train, and matching coaches nearby get the chance to make an offer.",
                                "Nincs hideg megkeresés, nincs ügyfélvadászat Instagramon. A játékos megmondja, hol és mikor szeretne edzeni, a közeli, hozzáillő edzők pedig ajánlatot tehetnek.",
                            )}
                        </p>
                        {steps.map(([t, d], i) => (
                            <div
                                key={t}
                                style={{
                                    display: "flex",
                                    gap: 16,
                                    padding: "13px 0",
                                    borderTop: i ? "1px solid " + SB.ink200 : "none",
                                }}
                            >
                                <div
                                    style={{
                                        flexShrink: 0,
                                        width: 30,
                                        height: 30,
                                        borderRadius: 999,
                                        background: SB.blue,
                                        color: "white",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 14,
                                    }}
                                >
                                    {i + 1}
                                </div>
                                <div>
                                    <div
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 16,
                                            color: SB.ink900,
                                        }}
                                    >
                                        {t}
                                    </div>
                                    <div
                                        style={{
                                            fontFamily: FB,
                                            fontWeight: 500,
                                            fontSize: 14,
                                            lineHeight: "22px",
                                            color: SB.ink600,
                                            marginTop: 2,
                                        }}
                                    >
                                        {d}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </Reveal>
                </div>
            </Container>
        </Section>
    );
}

// Everything in this grid is shipped and reachable by a coach today. Deliberately
// NOT here: off-session no-show card charging and coach commission invoicing (both
// dark behind `app_settings` flags), open-value gift cards (`gift_cards.kind` is
// ENUM('service') only), and group sessions in the main events feed (`events.ts`
// never queries `coach_slots`). Check the API before promoting anything into it.
function CoachToolkit() {
    const isMobile = useIsMobile();
    const groups = [
        {
            icon: "wallet",
            tint: SB.blue,
            title: tr("Ways to get paid", "Ahogy pénzt keresel"),
            items: [
                tr(
                    "Multi-session passes with an expiry date — used sessions count themselves down",
                    "Többalkalmas bérletek lejárati dátummal – a felhasznált alkalmak maguktól fogynak",
                ),
                tr(
                    "Passes that renew themselves, with the client's consent",
                    "Bérletek, amelyek maguktól megújulnak, az ügyfél hozzájárulásával",
                ),
                tr(
                    "Weekly repeating bookings your regulars set once",
                    "Heti ismétlődő foglalások, amiket a törzsvendégeid egyszer állítanak be",
                ),
                tr(
                    "Gift cards — someone buys your session as a present",
                    "Ajándékkártyák – valaki ajándékba veszi meg az órádat",
                ),
                tr(
                    "Digital products: plans and guides you sell as a download",
                    "Digitális termékek: edzéstervek és útmutatók letöltésként eladva",
                ),
                tr(
                    "Camps with child profiles, a deposit now and the balance later",
                    "Táborok gyerekprofillal, előleggel most és a maradékkal később",
                ),
            ],
        },
        {
            icon: "sparkle",
            tint: "#6A3FF0",
            title: tr("Getting noticed", "Ahogy észrevesznek"),
            items: [
                tr(
                    "Post updates on your wall — the players who saved you get notified",
                    "Posztolj a faladra – értesítést kapnak a téged elmentő játékosok",
                ),
                tr(
                    "A photo gallery of your work, with likes",
                    "Fotógaléria a munkádról, lájkokkal",
                ),
                tr(
                    "Client reviews on your profile, with your best ones pinned",
                    "Ügyfélértékelések a profilodon, a legjobbakat kiemelve",
                ),
                tr(
                    "Discount and popularity badges that make your card stand out in search",
                    "Kedvezmény- és népszerűségi jelvények, amiktől kitűnik a kártyád a keresőben",
                ),
                tr(
                    "A profile link you can drop in your Instagram bio",
                    "Profillink, amit betehetsz az Instagram-biódba",
                ),
            ],
        },
        {
            icon: "shield",
            tint: "#2EB85C",
            title: tr("Protecting your time", "Ahogy megvéded az idődet"),
            items: [
                tr(
                    "Your own cancellation window and late-cancellation fee",
                    "Saját lemondási határidő és késői lemondási díj",
                ),
                tr(
                    "Mark a no-show — it counts against that client's reliability",
                    "Jelöld meg a meg nem jelenést – beszámít az ügyfél megbízhatóságába",
                ),
                tr(
                    "Client list with your private notes on each person",
                    "Ügyféllista a saját privát jegyzeteiddel mindenkiről",
                ),
                tr(
                    "Your Sportistry calendar synced into the calendar you already use",
                    "A Sportistry-naptárad összefésülve azzal, amit amúgy is használsz",
                ),
                tr(
                    "One message to every client at once, when you need it",
                    "Egy üzenet az összes ügyfelednek egyszerre, ha kell",
                ),
                tr(
                    "Last-minute discount on a slot nobody booked",
                    "Utolsó pillanatos kedvezmény arra a sávra, amit senki nem foglalt le",
                ),
            ],
        },
    ];
    return (
        <Section bg="white">
            <Container>
                <div style={{ textAlign: "center", marginBottom: 36 }}>
                    <Eyebrow>{tr("Everything included", "Minden benne van")}</Eyebrow>
                    <h2
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            fontSize: isMobile ? 26 : 38,
                            lineHeight: isMobile ? "32px" : "44px",
                            letterSpacing: "-0.02em",
                            color: SB.ink900,
                            margin: "10px auto 0",
                            maxWidth: 660,
                        }}
                    >
                        {tr(
                            "The admin side of coaching, already built.",
                            "Az edzősködés adminisztratív fele, már megépítve.",
                        )}
                    </h2>
                </div>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
                        gap: 20,
                    }}
                >
                    {groups.map((g, gi) => (
                        <Reveal key={g.title} delay={gi * 80}>
                            <div
                                style={{
                                    background: "white",
                                    border: "1px solid " + SB.ink100,
                                    borderRadius: 18,
                                    padding: 26,
                                    height: "100%",
                                }}
                            >
                                <div
                                    style={{
                                        width: 46,
                                        height: 46,
                                        borderRadius: 13,
                                        background: g.tint,
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "center",
                                        marginBottom: 16,
                                    }}
                                >
                                    <WIcon name={g.icon} size={23} color="white" />
                                </div>
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 19,
                                        letterSpacing: "-0.01em",
                                        color: SB.ink900,
                                        marginBottom: 6,
                                    }}
                                >
                                    {g.title}
                                </div>
                                {g.items.map((it) => (
                                    <div
                                        key={it}
                                        style={{
                                            display: "flex",
                                            gap: 10,
                                            alignItems: "flex-start",
                                            padding: "8px 0",
                                        }}
                                    >
                                        <div style={{ flexShrink: 0, marginTop: 3 }}>
                                            <WIcon
                                                name="check"
                                                size={15}
                                                color={g.tint}
                                            />
                                        </div>
                                        <div
                                            style={{
                                                fontFamily: FB,
                                                fontWeight: 500,
                                                fontSize: 14,
                                                lineHeight: "21px",
                                                color: SB.ink600,
                                            }}
                                        >
                                            {it}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </Reveal>
                    ))}
                </div>
            </Container>
        </Section>
    );
}

function CoachHowItWorks() {
    const isMobile = useIsMobile();
    const steps = [
        {
            title: tr("Register", "Regisztrálsz"),
            desc: tr(
                "Fill out the application — it takes a few minutes, no complicated paperwork.",
                "Töltsd ki a jelentkezést — pár perc az egész, nincs bonyolult papírmunka.",
            ),
        },
        {
            title: tr(
                "Stripe account in 5 minutes",
                "Stripe-fiók 5 perc alatt",
            ),
            desc: tr(
                "Connect your payments so revenue lands directly in your own account.",
                "Kösd össze a fizetésed, hogy a bevétel közvetlenül hozzád, a saját számládra érkezzen.",
            ),
        },
        {
            title: tr("Your slots go live", "Az időpontjaid élesek"),
            desc: tr(
                "Set your prices and availability — clients can then book and pay.",
                "Állítsd be az áraid és az elérhetőséged — az ügyfelek ezután foglalhatnak és fizethetnek.",
            ),
        },
        {
            title: tr(
                "Paid out every week",
                "Pénz a számládon minden héten",
            ),
            desc: tr(
                "Automatic weekly payouts — nothing to chase afterwards.",
                "Automatikus heti kifizetés — nem kell utána járnod semminek.",
            ),
        },
    ];
    return (
        <Section bg={SB.ink50} id="hogyan">
            <Container>
                <div
                    style={{
                        maxWidth: 660,
                        margin: "0 auto",
                        textAlign: "center",
                    }}
                >
                    <Eyebrow style={{ justifyContent: "center" }}>
                        {tr("How it works", "Hogyan működik")}
                    </Eyebrow>
                    <h2
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            letterSpacing: "-.025em",
                            lineHeight: 1.05,
                            fontSize: "clamp(30px, 4.4vw, 44px)",
                            margin: "14px 0 0",
                            color: SB.ink900,
                        }}
                    >
                        {tr(
                            "Four steps to your first booking",
                            "Négy lépés az első foglalásig",
                        )}
                    </h2>
                    <p
                        style={{
                            fontSize: 18,
                            lineHeight: 1.55,
                            color: SB.ink600,
                            marginTop: 16,
                            fontWeight: 500,
                        }}
                    >
                        {tr(
                            "You’re up and running in a few minutes. No website, no separate payment system needed.",
                            "Pár perc alatt elindulsz. Nem kell weboldal, nem kell külön fizetési rendszer.",
                        )}
                    </p>
                </div>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile
                            ? "1fr"
                            : "repeat(4, 1fr)",
                        gap: isMobile ? 32 : 22,
                        marginTop: isMobile ? 36 : 52,
                    }}
                >
                    {steps.map((s, i) => (
                        <Reveal key={s.title} delay={i * 80}>
                            <div style={{ position: "relative" }}>
                                {!isMobile && i < steps.length - 1 && (
                                    <div
                                        style={{
                                            position: "absolute",
                                            top: 26,
                                            left: 64,
                                            right: -22,
                                            height: 2,
                                            background:
                                                "repeating-linear-gradient(90deg, " +
                                                SB.ink200 +
                                                " 0 7px, transparent 7px 14px)",
                                        }}
                                    />
                                )}
                                <div
                                    style={{
                                        width: 52,
                                        height: 52,
                                        borderRadius: 16,
                                        background: SB.ink950,
                                        color: "white",
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 23,
                                        display: "grid",
                                        placeItems: "center",
                                    }}
                                >
                                    {i + 1}
                                </div>
                                <h3
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 20,
                                        letterSpacing: "-.02em",
                                        color: SB.ink900,
                                        marginTop: 20,
                                    }}
                                >
                                    {s.title}
                                </h3>
                                <p
                                    style={{
                                        fontSize: 15,
                                        lineHeight: 1.55,
                                        color: SB.ink600,
                                        marginTop: 9,
                                        fontWeight: 500,
                                    }}
                                >
                                    {s.desc}
                                </p>
                            </div>
                        </Reveal>
                    ))}
                </div>
                <div style={{ textAlign: "center", marginTop: 48 }}>
                    <WButton
                        variant="primary"
                        size="lg"
                        iconRight="arrow"
                        href="/edzoknek/register"
                    >
                        {tr("Let’s get started", "Kezdjük el")}
                    </WButton>
                </div>
            </Container>
        </Section>
    );
}

function CoachVatSection() {
    const isMobile = useIsMobile();
    return (
        <Section bg="white" id="afa">
            <Container>
                <div
                    style={{
                        border: "1px solid " + SB.ink100,
                        borderRadius: 26,
                        padding: isMobile ? 24 : 40,
                    }}
                >
                    <div style={{ maxWidth: 660 }}>
                        <Eyebrow>
                            {tr(
                                "What’s yours stays yours",
                                "Ami a tiéd, az a tiéd",
                            )}
                        </Eyebrow>
                        <h2
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                letterSpacing: "-.025em",
                                lineHeight: 1.05,
                                fontSize: "clamp(30px, 4.4vw, 44px)",
                                margin: "14px 0 0",
                                color: SB.ink900,
                            }}
                        >
                            {tr(
                                "No VAT trap. No KATA blocker.",
                                "Nincs ÁFA-csapda. Nincs KATA-akadály.",
                            )}
                        </h2>
                    </div>

                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
                            gap: isMobile ? 28 : 32,
                            marginTop: isMobile ? 28 : 40,
                        }}
                    >
                        <div>
                            <div
                                style={{
                                    width: 48,
                                    height: 48,
                                    borderRadius: 14,
                                    background: SB.ink100,
                                    display: "grid",
                                    placeItems: "center",
                                }}
                            >
                                <WIcon
                                    name="shield"
                                    size={24}
                                    color={SB.ink700}
                                />
                            </div>
                            <h3
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 800,
                                    fontSize: 20,
                                    letterSpacing: "-.02em",
                                    color: SB.ink900,
                                    marginTop: 16,
                                }}
                            >
                                {tr(
                                    "Your price stays your price",
                                    "A te árad marad a te árad",
                                )}
                            </h3>
                            <p
                                style={{
                                    fontSize: 15,
                                    lineHeight: 1.6,
                                    color: SB.ink600,
                                    marginTop: 10,
                                    fontWeight: 500,
                                }}
                            >
                                {tr(
                                    "We never “buy” your session to resell it — we only broker between you and the client. A VAT-exempt (AAM) coach’s 10,000 Ft session stays ",
                                    "Nálunk sosem „vesszük meg” az órád, hogy továbbadjuk — csak közvetítünk közted és az ügyfél között. Egy alanyi adómentes edző 10 000 Ft-os órája nálunk ",
                                )}
                                <strong>{tr("10,000 Ft", "10 000 Ft")}</strong>
                                {tr(
                                    " for the client too.",
                                    " marad az ügyfélnek is.",
                                )}
                            </p>
                            <div
                                style={{
                                    marginTop: 20,
                                    display: "flex",
                                    flexDirection: "column",
                                    gap: 10,
                                }}
                            >
                                <div
                                    style={{
                                        display: "grid",
                                        gridTemplateColumns: "118px 1fr auto",
                                        alignItems: "center",
                                        gap: 12,
                                    }}
                                >
                                    <span
                                        style={{
                                            fontSize: 12.5,
                                            fontWeight: 700,
                                            color: SB.ink600,
                                        }}
                                    >
                                        {tr(
                                            "Reseller platform",
                                            "Reseller-platformon",
                                        )}
                                    </span>
                                    <span
                                        style={{
                                            height: 10,
                                            borderRadius: 6,
                                            width: "100%",
                                            background: SB.ink300,
                                        }}
                                    />
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 13.5,
                                            color: SB.ink900,
                                            whiteSpace: "nowrap",
                                        }}
                                    >
                                        ≈ 14 605 Ft
                                    </span>
                                </div>
                                <div
                                    style={{
                                        display: "grid",
                                        gridTemplateColumns: "118px 1fr auto",
                                        alignItems: "center",
                                        gap: 12,
                                    }}
                                >
                                    <span
                                        style={{
                                            fontSize: 12.5,
                                            fontWeight: 700,
                                            color: SB.ink600,
                                        }}
                                    >
                                        {tr("On Sportistry", "Sportistry-n")}
                                    </span>
                                    <span
                                        style={{
                                            height: 10,
                                            borderRadius: 6,
                                            width: "68%",
                                            background: "#0A6E40",
                                        }}
                                    />
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 13.5,
                                            color: SB.ink900,
                                            whiteSpace: "nowrap",
                                        }}
                                    >
                                        10 000 Ft
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div
                                style={{
                                    width: 48,
                                    height: 48,
                                    borderRadius: 14,
                                    background: SB.ink100,
                                    display: "grid",
                                    placeItems: "center",
                                }}
                            >
                                <WIcon
                                    name="fileCheck"
                                    size={24}
                                    color={SB.ink700}
                                />
                            </div>
                            <h3
                                style={{
                                    fontFamily: FD,
                                    fontWeight: 800,
                                    fontSize: 20,
                                    letterSpacing: "-.02em",
                                    color: SB.ink900,
                                    marginTop: 16,
                                }}
                            >
                                {tr("KATA-compatible", "KATA-kompatibilis")}
                            </h3>
                            <p
                                style={{
                                    fontSize: 15,
                                    lineHeight: 1.6,
                                    color: SB.ink600,
                                    marginTop: 10,
                                    fontWeight: 500,
                                }}
                            >
                                {tr(
                                    "You always invoice the client directly — never a company. That means coaches for whom a reseller platform wouldn’t even be a legal option can work with us.",
                                    "A számlát mindig te állítod ki az ügyfélnek — sosem egy cégnek. Ezért olyan edzők is dolgozhatnak velünk, akiknek egy reseller-platform jogilag nem lenne opció.",
                                )}
                            </p>
                            <p
                                style={{
                                    display: "flex",
                                    alignItems: "flex-start",
                                    gap: 8,
                                    fontSize: 13,
                                    color: SB.ink400,
                                    fontWeight: 600,
                                    marginTop: 16,
                                }}
                            >
                                <WIcon name="map" size={15} color={SB.ink400} />{" "}
                                {tr(
                                    "On the roadmap: automatic invoicing for every booking (Számlázz.hu / Billingo) — also launching only after sign-off.",
                                    "Roadmapon: automatikus számlázás minden foglalásról (Számlázz.hu / Billingo) — ezt is csak jóváhagyás után indítjuk.",
                                )}
                            </p>
                        </div>
                    </div>
                </div>
            </Container>
        </Section>
    );
}

function CoachPricing() {
    const isMobile = useIsMobile();
    const tiers = [
        {
            key: "t0",
            label: tr("Your own clients", "Saját ügyfeleid"),
            rate: "0 Ft",
            vat: null,
            foot: tr(
                "first 60 days · no commission, no transaction fee",
                "az első 60 napban · se jutalék, se tranzakciós díj",
            ),
            desc: (
                <>
                    {tr(
                        "Your existing clients are completely free for your first 60 days — we even cover the card cost. Brought in during the window, they stay at ",
                        "A meglévő ügyfeleid az első 60 napban teljesen ingyen — még a kártyaköltséget is mi álljuk. A 60 napon belül behozva utána is csak ",
                    )}
                    <strong>{tr("3% + VAT", "3% + ÁFA")}</strong>
                    {tr(" — forever.", " — örökre.")}
                </>
            ),
            tag: tr("Free to start", "Ingyenes indulás"),
            tagIcon: "check",
            border: "rgba(16,178,107,.28)",
            bg: "#F4FDF8",
            rateColor: "#0A6E40",
            tagBg: "#E2F7EC",
            tagFg: "#087B49",
        },
        {
            key: "t7",
            label: tr(
                "Invited after 60 days",
                "60 nap után meghívott ügyfél",
            ),
            rate: "7.5%",
            vat: "+VAT",
            foot: tr("platform fee, never more", "platformdíj, soha nem több"),
            desc: tr(
                "Someone you invite via link after your first 60 days. Just a platform fee — covers card payments and operations. Clients brought in during your window stay at 3% + VAT forever.",
                "Akit az első 60 nap után hívsz be linkkel. Csak platformdíj — a kártyás fizetést és az üzemeltetést fedezi. A 60 napon belül behozott ügyfeleid örökre 3% + ÁFA-n maradnak.",
            ),
            tag: tr("Via invite link", "Meghívólinkon keresztül"),
            tagIcon: "link",
            border: SB.ink100,
            bg: "white",
            rateColor: SB.ink900,
            tagBg: SB.ink100,
            tagFg: SB.ink600,
        },
        {
            key: "t15",
            label: tr(
                "Sportistry brings the client",
                "Sportistry hozza az ügyfelet",
            ),
            rate: "15%",
            vat: "+VAT",
            foot: tr(
                "on a new client acquired through the app",
                "új, appon szerzett ügyfélnél",
            ),
            desc: (
                <>
                    {tr(
                        "Only on clients we bring you through the app — organically, from search. ",
                        "Csak azokra, akiket mi hozunk neked az appon keresztül — szervesen, keresésből. ",
                    )}
                    <strong>
                        {tr(
                            "No client → no cost.",
                            "Nincs ügyfél → nincs költség.",
                        )}
                    </strong>
                </>
            ),
            tag: tr(
                "Drops to 10% + VAT from session 6",
                "A 6. alkalomtól már csak 10% + ÁFA",
            ),
            tagIcon: "repeat",
            border: "rgba(22,82,240,.22)",
            bg: SB.blue50,
            rateColor: SB.blue,
            tagBg: SB.blue50,
            tagFg: SB.blue,
        },
    ];
    const moneyRows = [
        {
            k: tr("Own client", "Saját ügyfél"),
            sub: tr("· first 60 days", "· első 60 nap"),
            fee: "0 Ft",
            pct: "0%",
            keep: "10 000 Ft",
        },
        {
            k: tr("Own client", "Saját ügyfél"),
            sub: tr(
                "· brought in during the window, after it",
                "· 60 napon belül behozva, utána",
            ),
            fee: "− 381 Ft",
            pct: "3%+VAT",
            keep: "9 619 Ft",
        },
        {
            k: tr("Invited after 60 days", "60 nap után meghívott"),
            sub: "",
            fee: "− 953 Ft",
            pct: "7.5%+VAT",
            keep: "9 047 Ft",
        },
        {
            k: tr("Platform client", "Platform-ügyfél"),
            sub: tr("· sessions 1–5", "· 1–5. alkalom"),
            fee: "− 1 905 Ft",
            pct: "15%+VAT",
            keep: "8 095 Ft",
        },
        {
            k: tr("Platform client", "Platform-ügyfél"),
            sub: tr("· from session 6", "· 6. alkalomtól"),
            fee: "− 1 270 Ft",
            pct: "10%+VAT",
            keep: "8 730 Ft",
            highlight: true,
        },
    ];
    return (
        <Section bg="white" id="arazas">
            <Container>
                <div style={{ maxWidth: 660 }}>
                    <Eyebrow>{tr("Pricing", "Árazás")}</Eyebrow>
                    <h2
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            letterSpacing: "-.025em",
                            lineHeight: 1.05,
                            fontSize: "clamp(30px, 4.4vw, 44px)",
                            margin: "14px 0 0",
                            color: SB.ink900,
                        }}
                    >
                        {tr(
                            "You only pay when we bring you a client",
                            "Csak akkor fizetsz, ha mi hozunk ügyfelet",
                        )}
                    </h2>
                    <p
                        style={{
                            fontSize: 18,
                            lineHeight: 1.55,
                            color: SB.ink600,
                            marginTop: 16,
                            fontWeight: 500,
                        }}
                    >
                        {tr(
                            "No monthly fee, no setup cost. We carry the risk — you only pay after an actual result. Every fee is “+ VAT” — we never hide it.",
                            "Nincs havidíj, nincs belépési költség. A kockázatot mi visszük — csak a tényleges eredmény után fizetsz. Minden díj „+ ÁFA” — sosem rejtjük el.",
                        )}
                    </p>
                </div>

                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: isMobile ? "1fr" : "repeat(3,1fr)",
                        gap: 16,
                        marginTop: isMobile ? 28 : 44,
                    }}
                >
                    {tiers.map((t, i) => (
                        <Reveal key={t.key} delay={i * 80}>
                            <div
                                style={{
                                    background: t.bg,
                                    border: "1.5px solid " + t.border,
                                    borderRadius: 22,
                                    padding: "26px 22px 24px",
                                    boxShadow: "0 1px 2px rgba(18,23,38,0.04)",
                                    display: "flex",
                                    flexDirection: "column",
                                    height: "100%",
                                    boxSizing: "border-box",
                                }}
                            >
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 12,
                                        letterSpacing: ".06em",
                                        textTransform: "uppercase",
                                        color: SB.ink500,
                                    }}
                                >
                                    {t.label}
                                </div>
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 56,
                                        letterSpacing: "-.03em",
                                        lineHeight: 1,
                                        margin: "14px 0 4px",
                                        color: t.rateColor,
                                    }}
                                >
                                    {t.rate}
                                    {t.vat && (
                                        <span
                                            style={{
                                                fontSize: 16,
                                                fontWeight: 700,
                                                color: SB.ink600,
                                                marginLeft: 6,
                                                verticalAlign: "middle",
                                            }}
                                        >
                                            {t.vat}
                                        </span>
                                    )}
                                </div>
                                <div
                                    style={{
                                        fontSize: 11.5,
                                        fontWeight: 700,
                                        color: SB.ink400,
                                    }}
                                >
                                    {t.foot}
                                </div>
                                <div
                                    style={{
                                        height: 1,
                                        background: SB.ink100,
                                        margin: "18px 0",
                                    }}
                                />
                                <div
                                    style={{
                                        fontSize: 14,
                                        lineHeight: 1.55,
                                        color: SB.ink600,
                                        fontWeight: 500,
                                        flex: 1,
                                    }}
                                >
                                    {t.desc}
                                </div>
                                <span
                                    style={{
                                        display: "inline-flex",
                                        alignItems: "center",
                                        gap: 6,
                                        fontSize: 12,
                                        fontWeight: 800,
                                        padding: "5px 11px",
                                        borderRadius: 999,
                                        marginTop: 16,
                                        alignSelf: "flex-start",
                                        background: t.tagBg,
                                        color: t.tagFg,
                                    }}
                                >
                                    <WIcon
                                        name={t.tagIcon}
                                        size={13}
                                        color={t.tagFg}
                                    />{" "}
                                    {t.tag}
                                </span>
                            </div>
                        </Reveal>
                    ))}
                </div>

                <Reveal>
                    <div
                        style={{
                            background: "white",
                            border: "1.5px solid " + SB.ink100,
                            borderRadius: 20,
                            padding: isMobile ? "8px 18px" : "8px 26px",
                            marginTop: 20,
                            boxShadow: "0 1px 2px rgba(18,23,38,0.04)",
                        }}
                    >
                        <div
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                fontSize: 15,
                                color: SB.ink900,
                                padding: "18px 0 6px",
                            }}
                        >
                            {tr(
                                "A 10,000 Ft session is worth this to you",
                                "Egy 10 000 Ft-os óra ennyit ér neked",
                            )}
                        </div>
                        <div
                            style={{ display: "flex", flexDirection: "column" }}
                        >
                            {moneyRows.map((r, i) => (
                                <div
                                    key={i}
                                    style={{
                                        display: "grid",
                                        gridTemplateColumns: isMobile
                                            ? "1fr"
                                            : "1.4fr auto auto",
                                        gap: isMobile ? 6 : 18,
                                        alignItems: isMobile
                                            ? "flex-start"
                                            : "center",
                                        padding: r.highlight
                                            ? isMobile
                                                ? "14px 18px"
                                                : "14px 26px"
                                            : "14px 0",
                                        margin: r.highlight
                                            ? isMobile
                                                ? "0 -18px"
                                                : "0 -26px"
                                            : 0,
                                        borderRadius: r.highlight ? 12 : 0,
                                        background: r.highlight
                                            ? SB.blue50
                                            : "transparent",
                                        borderTop: r.highlight
                                            ? "none"
                                            : "1px solid " + SB.ink100,
                                    }}
                                >
                                    <span
                                        style={{
                                            fontSize: 14,
                                            fontWeight: 700,
                                            color: SB.ink800,
                                        }}
                                    >
                                        {r.k}{" "}
                                        <em
                                            style={{
                                                fontStyle: "normal",
                                                fontWeight: 600,
                                                color: SB.ink600,
                                            }}
                                        >
                                            {r.sub}
                                        </em>
                                    </span>
                                    <span
                                        style={{
                                            fontSize: 13,
                                            fontWeight: 700,
                                            color: "#8C1224",
                                            whiteSpace: "nowrap",
                                        }}
                                    >
                                        {r.fee}{" "}
                                        <small
                                            style={{
                                                fontWeight: 600,
                                                color: SB.ink400,
                                            }}
                                        >
                                            ({r.pct})
                                        </small>
                                    </span>
                                    <span
                                        style={{
                                            fontFamily: FD,
                                            fontWeight: 800,
                                            fontSize: 16,
                                            color: SB.ink900,
                                            whiteSpace: "nowrap",
                                            textAlign: "right",
                                        }}
                                    >
                                        {r.keep}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </div>
                </Reveal>

                <div
                    style={{
                        marginTop: 18,
                        display: "flex",
                        flexDirection: "column",
                        gap: 10,
                    }}
                >
                    {[
                        tr(
                            "The 15% + VAT only applies to clients newly acquired through the app — for that same client it drops to 10% + VAT from session 6.",
                            "A 15% + ÁFA csak az újonnan, az appon keresztül szerzett ügyfelekre vonatkozik — ugyanannál az ügyfélnél a 6. alkalomtól már csak 10% + ÁFA megy.",
                        ),
                        tr(
                            "Paid out weekly — automatically to your bank account (Stripe, typically Mondays).",
                            "Kifizetés hetente — automatikusan a bankszámládra (Stripe, jellemzően hétfőnként).",
                        ),
                        tr(
                            "We cover Stripe’s card transaction fee — the commission shown includes everything.",
                            "A Stripe kártyás tranzakciós díját mi álljuk — a feltüntetett jutalék mindent tartalmaz.",
                        ),
                    ].map((f, i) => (
                        <div
                            key={i}
                            style={{
                                display: "flex",
                                alignItems: "flex-start",
                                gap: 10,
                                fontSize: 14.5,
                                fontWeight: 600,
                                color: SB.ink600,
                                lineHeight: 1.5,
                            }}
                        >
                            <WIcon name="check" size={18} color="#0A6E40" /> {f}
                        </div>
                    ))}
                </div>
            </Container>
        </Section>
    );
}

// Empty until we have real numbers/quotes — kept in the DOM (hidden) so it's
// ready to switch on the moment marketing has data to fill it with.
function CoachSocialProof() {
    return (
        <div style={{ display: "none" }}>
            <Section bg={SB.ink50} id="velemenyek">
                <Container>
                    <div
                        style={{
                            maxWidth: 660,
                            margin: "0 auto",
                            textAlign: "center",
                        }}
                    >
                        <Eyebrow style={{ justifyContent: "center" }}>
                            {tr("Coaches on us", "Edzők rólunk")}
                        </Eyebrow>
                        <h2
                            style={{
                                fontFamily: FD,
                                fontWeight: 800,
                                letterSpacing: "-.025em",
                                lineHeight: 1.05,
                                fontSize: "clamp(30px, 4.4vw, 44px)",
                                margin: "14px 0 0",
                                color: SB.ink900,
                            }}
                        >
                            {tr(
                                "Coaches already running their business here",
                                "Edzők, akik már itt vezetik a vállalkozásukat",
                            )}
                        </h2>
                        <p
                            style={{
                                fontSize: 18,
                                lineHeight: 1.55,
                                color: SB.ink600,
                                marginTop: 16,
                                fontWeight: 500,
                            }}
                        >
                            {tr(
                                "To be filled with real numbers and reviews — we don’t invent data on a credibility section.",
                                "Valós számokkal és véleményekkel töltjük fel — hitelességről szóló oldalon nem találunk ki adatot.",
                            )}
                        </p>
                    </div>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: "repeat(3, 1fr)",
                            gap: 18,
                            marginTop: 44,
                        }}
                    >
                        {[
                            tr("Active coaches", "Aktív edző"),
                            tr("Sessions booked", "Lefoglalt óra"),
                            tr("Average rating", "Átlagos értékelés"),
                        ].map((lbl) => (
                            <div
                                key={lbl}
                                style={{
                                    background: "white",
                                    borderRadius: 20,
                                    padding: "30px 24px",
                                    textAlign: "center",
                                    border: "1px dashed " + SB.ink300,
                                }}
                            >
                                <div
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 46,
                                        letterSpacing: "-.03em",
                                        color: SB.ink300,
                                        lineHeight: 1,
                                    }}
                                >
                                    —
                                </div>
                                <div
                                    style={{
                                        fontWeight: 700,
                                        fontSize: 14.5,
                                        color: SB.ink600,
                                        marginTop: 10,
                                    }}
                                >
                                    {lbl}
                                </div>
                            </div>
                        ))}
                    </div>
                    <div style={{ textAlign: "center", marginTop: 18 }}>
                        <div
                            style={{
                                display: "inline-flex",
                                alignItems: "center",
                                gap: 8,
                                background: "#FEF3DC",
                                color: "#7A4A00",
                                borderRadius: 999,
                                padding: "6px 13px",
                                fontSize: 12.5,
                                fontWeight: 700,
                            }}
                        >
                            <WIcon name="info" size={15} color="#7A4A00" />{" "}
                            {tr(
                                "To fill in with real data: coach count, bookings, reviews or partner gyms. Stays empty until then.",
                                "Kitöltendő valós adattal: edzőszám, foglalások, vélemények vagy partner edzőtermek. Addig üres helyként marad.",
                            )}
                        </div>
                    </div>
                </Container>
            </Section>
        </div>
    );
}

function CoachFAQ() {
    const items = [
        {
            q: tr(
                "What exactly is the commission, and are there hidden fees?",
                "Mennyi pontosan a jutalék, és vannak rejtett díjak?",
            ),
            a: (
                <>
                    {tr(
                        "No monthly fee, no setup cost. Your own clients are ",
                        "Nincs havidíj, nincs belépési költség. A saját ügyfeleid után az első 60 napban ",
                    )}
                    <strong>
                        {tr("completely free", "semmit sem fizetsz")}
                    </strong>
                    {tr(
                        " for the first 60 days — no commission, no transaction fee. Brought in during the window they stay at ",
                        " — se jutalék, se tranzakciós díj. A 60 napon belül behozva utána is ",
                    )}
                    <strong>{tr("3% + VAT", "3% + ÁFA")}</strong>
                    {tr(
                        " forever; clients invited later are ",
                        " marad örökre; a később meghívottak után ",
                    )}
                    <strong>{tr("7.5% + VAT", "7.5% + ÁFA")}</strong>
                    {tr(
                        ". New clients we bring you are ",
                        " megy. Az általunk hozott új ügyfelek után ",
                    )}
                    <strong>{tr("15% + VAT", "15% + ÁFA")}</strong>
                    {tr(", dropping to ", ", ami a 6. alkalomtól ")}
                    <strong>
                        {tr("10% + VAT from session 6", "10% + ÁFA")}
                    </strong>
                    {tr(".", "-ra csökken.")}
                </>
            ),
        },
        {
            q: tr("When do I get paid?", "Mikor kapom meg a pénzem?"),
            a: (
                <>
                    {tr("Weekly — typically ", "Hetente — jellemzően ")}
                    <strong>{tr("every Monday", "minden hétfőn")}</strong>
                    {tr(
                        " — automatically to your bank account. The money reaches your own Stripe account already at booking time, it doesn’t “sit with us”.",
                        " — automatikusan a bankszámládra. A pénz már a foglaláskor a saját Stripe-fiókodba érkezik, nem „nálunk parkol”.",
                    )}
                </>
            ),
        },
        {
            q: tr(
                "I’m VAT-exempt (AAM) — what changes for me?",
                "Alanyi adómentes (AAM) vagyok — mi változik nálam?",
            ),
            a: (
                <>
                    {tr(
                        "We never mark up your session with VAT when passing it on — your prices stay your prices.",
                        "Sosem adjuk tovább az órád ÁFA-val megnövelve — a te áraid maradnak a te áraid.",
                    )}
                </>
            ),
        },
        {
            q: tr(
                "I’m on KATA — can I work with you?",
                "KATA-s vagyok — dolgozhatok veletek?",
            ),
            a: tr(
                "Yes — you always invoice the client directly, never a company, so you can use Sportistry as a KATA taxpayer too.",
                "Igen — a számlát mindig te állítod ki az ügyfélnek, sosem egy cégnek, ezért KATA-sként is használhatod a Sportistryt.",
            ),
        },
        {
            q: tr(
                "Who invoices the client?",
                "Ki állítja ki a számlát a vendégnek?",
            ),
            a: (
                <>
                    {tr(
                        "You do, directly to the client — we’re never the seller on the invoice. ",
                        "Te magad, az ügyfélnek — mi sosem vagyunk a számlán eladóként. ",
                    )}
                    <strong>{tr("Planned:", "Tervben van")}</strong>
                    {tr(
                        " automatic invoicing for every booking (Számlázz.hu / Billingo) — launching after sign-off.",
                        " az automatikus számlázás minden foglalásról (Számlázz.hu / Billingo) — ezt jóváhagyás után indítjuk.",
                    )}
                </>
            ),
        },
        {
            q: tr(
                "What if a client cancels or doesn’t show up?",
                "Mi van, ha az ügyfél lemond vagy nem jelenik meg?",
            ),
            a: (
                <>
                    {tr(
                        "You set your own cancellation terms. ",
                        "Te állítod be a lemondási feltételeidet. ",
                    )}
                    <strong>
                        {tr(
                            "Exact cancellation and no-show rules are still to be filled in",
                            "A pontos lemondási és no-show szabályok kitöltendők",
                        )}
                    </strong>
                    {tr(" per your policy.", " a házirendetek szerint.")}
                </>
            ),
        },
        {
            q: tr(
                "How much does it cost to join?",
                "Mennyibe kerül a belépés?",
            ),
            a: tr("Nothing.", "Semmibe."),
        },
        {
            q: tr(
                "I’m tied to a gym — can I still use it?",
                "Edzőteremhez kötött vagyok — akkor is használhatom?",
            ),
            a: tr(
                "Yes. Whether you work independently or through a gym, you can set the location and your own availability. Sportistry manages your clients and slots.",
                "Igen. Akár önállóan dolgozol, akár egy edzőteremhez kötődsz, beállíthatod a helyszínt és a saját elérhetőséged. A Sportistry a te ügyfeleidet és időpontjaidat kezeli.",
            ),
        },
    ];
    const isMobile = useIsMobile();
    const [open, setOpen] = React.useState(0);
    return (
        <Section bg={SB.ink50} id="gyik">
            <Container width={860}>
                <div style={{ textAlign: "center" }}>
                    <Eyebrow style={{ justifyContent: "center" }}>
                        {tr("FAQ", "GYIK")}
                    </Eyebrow>
                    <h2
                        style={{
                            fontFamily: FD,
                            fontWeight: 800,
                            fontSize: isMobile ? 28 : 40,
                            lineHeight: isMobile ? "33px" : "46px",
                            letterSpacing: "-.02em",
                            color: SB.ink900,
                            margin: "10px 0 0",
                        }}
                    >
                        {tr("Frequently asked questions", "Gyakori kérdések")}
                    </h2>
                </div>
                <div
                    style={{
                        maxWidth: 760,
                        margin: isMobile ? "32px auto 0" : "44px auto 0",
                        display: "flex",
                        flexDirection: "column",
                        gap: 12,
                    }}
                >
                    {items.map((f, i) => {
                        const isOpen = open === i;
                        return (
                            <div
                                key={i}
                                style={{
                                    background: "white",
                                    border: "1px solid " + SB.ink100,
                                    borderRadius: 16,
                                    overflow: "hidden",
                                    boxShadow: "0 1px 2px rgba(18,23,38,0.04)",
                                }}
                            >
                                <button
                                    onClick={() => setOpen(isOpen ? -1 : i)}
                                    style={{
                                        width: "100%",
                                        display: "flex",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        gap: 16,
                                        padding: "20px 22px",
                                        background: "transparent",
                                        border: "none",
                                        cursor: "pointer",
                                        textAlign: "left",
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 17,
                                        letterSpacing: "-.01em",
                                        color: SB.ink900,
                                    }}
                                >
                                    <span>{f.q}</span>
                                    <span
                                        style={{
                                            width: 30,
                                            height: 30,
                                            borderRadius: "50%",
                                            background: isOpen
                                                ? SB.blue50
                                                : SB.ink50,
                                            display: "grid",
                                            placeItems: "center",
                                            flexShrink: 0,
                                            transition: "background 200ms",
                                        }}
                                    >
                                        <WIcon
                                            name="chevronDown"
                                            size={17}
                                            color={isOpen ? SB.blue : SB.ink600}
                                        />
                                    </span>
                                </button>
                                {isOpen && (
                                    <div
                                        style={{
                                            padding: "0 22px 22px",
                                            fontSize: 15.5,
                                            lineHeight: 1.6,
                                            color: SB.ink600,
                                            fontWeight: 500,
                                        }}
                                    >
                                        {f.a}
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            </Container>
        </Section>
    );
}

function CoachFinalCTA() {
    const isMobile = useIsMobile();
    return (
        <section
            style={{
                position: "relative",
                background: SB.ink950,
                color: "white",
                overflow: "hidden",
                padding: isMobile ? "56px 0" : "92px 0",
                textAlign: "center",
            }}
            id="regisztracio"
        >
            <DarkGlows />
            <Container
                style={{
                    position: "relative",
                    zIndex: 2,
                    maxWidth: 660,
                    margin: "0 auto",
                }}
            >
                <h2
                    style={{
                        fontFamily: FD,
                        fontWeight: 800,
                        letterSpacing: "-.03em",
                        lineHeight: 1.02,
                        fontSize: "clamp(34px, 5vw, 56px)",
                        color: "white",
                        margin: 0,
                    }}
                >
                    {tr("Start earning doing ", "Kezdj el ")}
                    <span style={{ color: SB.lime }}>
                        {tr("what you love.", "keresni azzal, amit szeretsz.")}
                    </span>
                </h2>
                <p
                    style={{
                        fontSize: 18,
                        color: "#C3CBDB",
                        marginTop: 18,
                        fontWeight: 500,
                    }}
                >
                    {tr(
                        "Create your coach profile, connect Stripe, and take your first booking — as soon as this week.",
                        "Hozd létre az edzői profilod, kösd össze a Stripe-ot, és fogadd az első foglalásod — még ezen a héten.",
                    )}
                </p>
                <div
                    style={{
                        display: "flex",
                        gap: 14,
                        justifyContent: "center",
                        marginTop: 32,
                        flexWrap: "wrap",
                    }}
                >
                    <WButton
                        variant="accent"
                        size="lg"
                        iconRight="arrow"
                        href="/edzoknek/register"
                    >
                        {tr("Register as a coach", "Edzőként regisztrálok")}
                    </WButton>
                    <WButton
                        variant="onDark"
                        size="lg"
                        href="mailto:edzo@sportistry.app"
                    >
                        {tr(
                            "Have a question? Get in touch",
                            "Kérdésed van? Írj nekünk",
                        )}
                    </WButton>
                </div>
                <div
                    style={{
                        fontSize: 13.5,
                        color: "#8FA0BC",
                        marginTop: 18,
                        fontWeight: 600,
                    }}
                >
                    {tr(
                        "Free to start · no monthly fee · cancel anytime",
                        "Ingyenes az indulás · nincs havidíj · bármikor lemondható",
                    )}
                </div>
            </Container>
        </section>
    );
}

function EdzoknekPage() {
    return (
        <div style={{ fontFamily: FB }}>
            <CoachHero />
            <CoachTrustStrip />
            <CoachCalculator />
            <CoachBenefits />
            <CoachInboundLeads />
            <CoachHowItWorks />
            <CoachToolkit />
            <CoachVatSection />
            <CoachPricing />
            <CoachSocialProof />
            <CoachFAQ />
            <CoachFinalCTA />
        </div>
    );
}
// ────────────────── /edzoknek/register — coach registration form ──────────────────
// Was hardcoded to prod, so the form on staging.sportistry.app created REAL coaches in the
// production DB and fired the admin-alert email (fixed 2026-07-18). Now shares SITE_API_BASE.
const COACH_REG_API = SITE_API_BASE + "/coach-registration";

// The `hu` string doubles as the state/submission value (coach-registration
// `sports` array and portal `tags`) — the backend stores these as free-text
// tags, so it must keep receiving the same Hungarian strings; `en` is
// display-only.
const REGISTER_SPORTS = [
    { en: "Personal training", hu: "Személyi edzés", color: "#1652F0" },
    { en: "Strength / conditioning", hu: "Súlyzós edzés / erőnlét", color: "#E27A2B" },
    { en: "Weight loss / lifestyle", hu: "Fogyás / életmód", color: "#2EB85C" },
    { en: "Functional training", hu: "Funkcionális edzés", color: "#0DB1C9" },
    { en: "Yoga", hu: "Jóga", color: "#6A3FF0" },
    { en: "Pilates", hu: "Pilates", color: "#F0498D" },
    { en: "Running", hu: "Futás", color: "#6A3FF0" },
    { en: "Cycling", hu: "Kerékpár", color: "#0DB1C9" },
    { en: "Tennis", hu: "Tenisz", color: "#84B30C" },
    { en: "Padel", hu: "Padel", color: "#00C2A8" },
    { en: "Swimming", hu: "Úszás", color: "#0DB1C9" },
    { en: "Boxing / martial arts", hu: "Box / küzdősport", color: "#E5354B" },
    { en: "Crossfit", hu: "Crossfit", color: "#1F2638" },
    { en: "Nutrition", hu: "Táplálkozás", color: "#2EB85C" },
];

// Display label for a stored specialty value (the HU string).
function registerSportLabel(value) {
    const s = REGISTER_SPORTS.find((x) => x.hu === value);
    return s ? tr(s.en, s.hu) : value;
}

function useIsNarrow(breakpoint) {
    const [narrow, setNarrow] = React.useState(
        typeof window !== "undefined" && window.innerWidth <= breakpoint,
    );
    React.useEffect(() => {
        const onResize = () => setNarrow(window.innerWidth <= breakpoint);
        window.addEventListener("resize", onResize);
        return () => window.removeEventListener("resize", onResize);
    }, [breakpoint]);
    return narrow;
}

function RegInput({ id, label, opt, error, errorMsg, ...rest }) {
    return (
        <div>
            <label
                htmlFor={id}
                style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 7,
                    fontFamily: FB,
                    fontWeight: 700,
                    fontSize: 13.5,
                    color: SB.ink800,
                    marginBottom: 8,
                }}
            >
                {label}
                {opt ? (
                    <span
                        style={{
                            fontWeight: 600,
                            fontSize: 11.5,
                            color: SB.ink400,
                            background: SB.ink100,
                            padding: "2px 8px",
                            borderRadius: 999,
                        }}
                    >
                        {opt}
                    </span>
                ) : (
                    <span style={{ color: SB.blue }}>*</span>
                )}
            </label>
            <input
                id={id}
                {...rest}
                style={{
                    width: "100%",
                    fontFamily: FB,
                    fontWeight: 500,
                    fontSize: 16,
                    color: SB.ink900,
                    background: SB.ink50,
                    border: "1.5px solid " + (error ? "#DC2626" : SB.ink200),
                    borderRadius: 12,
                    padding: "13px 15px",
                    outline: "none",
                    boxSizing: "border-box",
                    transition: "border-color .15s, background .15s",
                }}
                onFocus={(e) => {
                    if (!error) e.target.style.borderColor = SB.blue;
                    e.target.style.background = "white";
                }}
                onBlur={(e) => {
                    if (!error) e.target.style.borderColor = SB.ink200;
                    e.target.style.background = SB.ink50;
                }}
            />
            {error && (
                <div
                    style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 6,
                        color: "#DC2626",
                        fontSize: 12.5,
                        fontWeight: 700,
                        marginTop: 7,
                        fontFamily: FB,
                    }}
                >
                    <WIcon name="alertTriangle" size={14} /> {errorMsg}
                </div>
            )}
        </div>
    );
}

function SportsMultiSelect({
    sports,
    toggleSport,
    msOpen,
    setMsOpen,
    msRef,
    error,
}) {
    return (
        <div
            data-first-error={error ? true : undefined}
            ref={msRef}
            style={{ position: "relative" }}
        >
            <label
                style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 7,
                    fontFamily: FB,
                    fontWeight: 700,
                    fontSize: 13.5,
                    color: SB.ink800,
                    marginBottom: 8,
                }}
            >
                {tr("Sport / specialty", "Sportág / szakterület")}{" "}
                <span style={{ color: SB.blue }}>*</span>
            </label>
            <div
                onClick={() => setMsOpen((o) => !o)}
                style={{
                    width: "100%",
                    minHeight: 50,
                    display: "flex",
                    alignItems: "center",
                    flexWrap: "wrap",
                    gap: 7,
                    background: msOpen ? "white" : SB.ink50,
                    border:
                        "1.5px solid " +
                        (error ? "#DC2626" : msOpen ? SB.blue : SB.ink200),
                    borderRadius: 12,
                    padding: "9px 42px 9px 13px",
                    cursor: "pointer",
                    position: "relative",
                    boxSizing: "border-box",
                }}
            >
                {sports.length === 0 && (
                    <span
                        style={{
                            color: SB.ink400,
                            fontSize: 15,
                            fontWeight: 500,
                        }}
                    >
                        {tr(
                            "Choose one or more…",
                            "Válassz egyet vagy többet…",
                        )}
                    </span>
                )}
                {sports.map((value) => (
                    <span
                        key={value}
                        onClick={(e) => e.stopPropagation()}
                        style={{
                            display: "inline-flex",
                            alignItems: "center",
                            gap: 6,
                            background: SB.blue50,
                            color: SB.blue,
                            borderRadius: 999,
                            padding: "5px 8px 5px 11px",
                            fontWeight: 700,
                            fontSize: 13,
                        }}
                    >
                        {registerSportLabel(value)}
                        <button
                            type="button"
                            onClick={() => toggleSport(value)}
                            aria-label={tr("Remove", "Eltávolítás")}
                            style={{
                                border: "none",
                                background: "rgba(22,82,240,.16)",
                                color: SB.blue,
                                width: 17,
                                height: 17,
                                borderRadius: "50%",
                                cursor: "pointer",
                                display: "grid",
                                placeItems: "center",
                                fontSize: 13,
                                lineHeight: 1,
                            }}
                        >
                            ×
                        </button>
                    </span>
                ))}
                <span
                    style={{
                        position: "absolute",
                        right: 15,
                        top: "50%",
                        width: 10,
                        height: 10,
                        transform: `translateY(${msOpen ? "-30%" : "-60%"}) rotate(${msOpen ? "225deg" : "45deg"})`,
                        borderRight: "2.4px solid " + SB.ink400,
                        borderBottom: "2.4px solid " + SB.ink400,
                        transition: "transform .2s",
                    }}
                />
            </div>
            {msOpen && (
                <div
                    style={{
                        position: "absolute",
                        top: "calc(100% + 6px)",
                        left: 0,
                        right: 0,
                        background: "white",
                        border: "1px solid " + SB.ink200,
                        borderRadius: 14,
                        boxShadow: "0 20px 40px rgba(10,14,28,.16)",
                        padding: 6,
                        zIndex: 20,
                        maxHeight: 256,
                        overflowY: "auto",
                    }}
                >
                    {REGISTER_SPORTS.map((s) => {
                        const sel = sports.includes(s.hu);
                        return (
                            <div
                                key={s.hu}
                                onClick={() => toggleSport(s.hu)}
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    gap: 11,
                                    padding: "10px 11px",
                                    borderRadius: 9,
                                    cursor: "pointer",
                                    fontWeight: 600,
                                    fontSize: 14.5,
                                    color: SB.ink800,
                                }}
                                onMouseEnter={(e) =>
                                    (e.currentTarget.style.background =
                                        SB.ink50)
                                }
                                onMouseLeave={(e) =>
                                    (e.currentTarget.style.background =
                                        "transparent")
                                }
                            >
                                <span
                                    style={{
                                        width: 20,
                                        height: 20,
                                        borderRadius: 6,
                                        border:
                                            "2px solid " +
                                            (sel ? SB.blue : SB.ink300),
                                        background: sel
                                            ? SB.blue
                                            : "transparent",
                                        display: "grid",
                                        placeItems: "center",
                                        flexShrink: 0,
                                    }}
                                >
                                    {sel && (
                                        <WIcon
                                            name="check"
                                            size={13}
                                            color="white"
                                            strokeWidth={3.4}
                                        />
                                    )}
                                </span>
                                <span
                                    style={{
                                        width: 9,
                                        height: 9,
                                        borderRadius: "50%",
                                        background: s.color,
                                        flexShrink: 0,
                                    }}
                                />
                                <span>{tr(s.en, s.hu)}</span>
                            </div>
                        );
                    })}
                </div>
            )}
            {error && (
                <div
                    style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 6,
                        color: "#DC2626",
                        fontSize: 12.5,
                        fontWeight: 700,
                        marginTop: 7,
                    }}
                >
                    <WIcon name="alertTriangle" size={14} />{" "}
                    {tr(
                        "Choose at least one specialty.",
                        "Válassz legalább egy szakterületet.",
                    )}
                </div>
            )}
        </div>
    );
}

// Single primary category (used for coach-browse sport filtering) — kept
// separate from the free-text SportsMultiSelect specialty tags above, which
// can't be filtered on reliably since coaches phrase them freely.
function CategoryPicker({ category, setCategory, error }) {
    return (
        <div data-first-error={error ? true : undefined}>
            <label
                style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 7,
                    fontFamily: FB,
                    fontWeight: 700,
                    fontSize: 13.5,
                    color: SB.ink800,
                    marginBottom: 8,
                }}
            >
                {tr("Primary category", "Fő sportkategória")}{" "}
                <span style={{ color: SB.blue }}>*</span>
            </label>
            <p
                style={{
                    fontSize: 12.5,
                    color: SB.ink500,
                    marginTop: -4,
                    marginBottom: 9,
                    fontWeight: 500,
                }}
            >
                {tr(
                    "Shown as your filterable category in coach search.",
                    "Ez alapján lehet majd rád szűrni az edzőkeresőben.",
                )}
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {Object.entries(WEB_SPORTS).map(([k, s]) => {
                    const sel = category === k;
                    return (
                        <div
                            key={k}
                            onClick={() => setCategory(k)}
                            style={{
                                display: "inline-flex",
                                alignItems: "center",
                                gap: 7,
                                padding: "8px 13px",
                                borderRadius: 999,
                                cursor: "pointer",
                                fontFamily: FB,
                                fontWeight: 700,
                                fontSize: 13,
                                background: sel ? s.tint : SB.ink50,
                                color: sel ? "white" : SB.ink700,
                                border:
                                    "1.5px solid " + (sel ? s.tint : SB.ink200),
                            }}
                        >
                            {sportLabel(k)}
                        </div>
                    );
                })}
            </div>
            {error && (
                <div
                    style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 6,
                        color: "#DC2626",
                        fontSize: 12.5,
                        fontWeight: 700,
                        marginTop: 7,
                    }}
                >
                    <WIcon name="alertTriangle" size={14} />{" "}
                    {tr(
                        "Choose your primary category.",
                        "Válassz egy fő sportkategóriát.",
                    )}
                </div>
            )}
        </div>
    );
}
// Coach magic-link login + portal. Previously hardcoded to prod, so signing in on
// staging.sportistry.app authenticated against the PRODUCTION database and every portal
// action written from staging hit real coach data. Now follows the host like everything else.
const COACH_AUTH_API = SITE_API_BASE + "/auth";
const COACH_PORTAL_API = SITE_API_BASE + "/coach-portal";
const GOOGLE_CLIENT_ID_WEB =
    "767518973816-8u5t1co3s11g72m0rmlrc0c3p0f7ujtl.apps.googleusercontent.com";
const APPLE_SERVICES_ID = "hu.ethermedia.sportbuddy.web";
const APPLE_REDIRECT_URI = "https://sportistry.app/app/";

function EdzoknekRegisterPage() {
    const narrow = useIsNarrow(880);
    const asideRef = React.useRef(null);
    const [asideStuck, setAsideStuck] = React.useState(false);
    React.useEffect(() => {
        if (narrow) {
            setAsideStuck(false);
            return;
        }
        let raf = null;
        const check = () => {
            raf = null;
            if (asideRef.current)
                setAsideStuck(
                    asideRef.current.getBoundingClientRect().top <= 89,
                );
        };
        const onScroll = () => {
            if (raf == null) raf = requestAnimationFrame(check);
        };
        check();
        window.addEventListener("scroll", onScroll, { passive: true });
        return () => {
            window.removeEventListener("scroll", onScroll);
            if (raf) cancelAnimationFrame(raf);
        };
    }, [narrow]);
    const [form, setForm] = React.useState({
        // Surname and given name are collected separately on purpose. A single "full name"
        // field cannot be split server-side here: this form is bilingual, so the same input
        // arrives surname-first in HU and given-name-first in EN with nothing to tell them
        // apart. `name` below stays as the composed display string the API stores in
        // full_name; first/last are the truth.
        lastName: "",
        firstName: "",
        email: "",
        phone: "",
        city: "",
        bio: "",
        link: "",
        source: "",
    });
    // Bot trap: `hp` is a honeypot field hidden from real users (rendered off-screen, out of
    // tab order) — anything that fills it in wasn't a person looking at the page. `mountedAt`
    // pairs with it: a script that loads and submits in one shot posts within milliseconds,
    // a real applicant takes seconds to read and fill the form.
    const [hp, setHp] = React.useState("");
    const mountedAt = React.useRef(Date.now());
    const [sports, setSports] = React.useState([]);
    const [category, setCategoryRaw] = React.useState("");
    function setCategory(k) {
        setCategoryRaw(k);
        setErrors((e) => ({ ...e, category: false }));
    }
    const [msOpen, setMsOpen] = React.useState(false);
    const [consent, setConsent] = React.useState(false);
    const [errors, setErrors] = React.useState({});
    const [submitting, setSubmitting] = React.useState(false);
    const [submitError, setSubmitError] = React.useState("");
    const [accountExists, setAccountExists] = React.useState(false);
    // step: 'form' (manual application or OAuth entry) → 'profile' (OAuth coaches
    // only, fill in the rest while already signed in) → 'done'
    const [step, setStep] = React.useState("form");
    const [oauthBusy, setOauthBusy] = React.useState("");
    const [oauthToken, setOauthToken] = React.useState(null);
    const [viaOAuth, setViaOAuth] = React.useState(false);
    const msRef = React.useRef(null);
    const googleDivRef = React.useRef(null);

    React.useEffect(() => {
        function onDocClick(e) {
            if (msRef.current && !msRef.current.contains(e.target))
                setMsOpen(false);
        }
        document.addEventListener("click", onDocClick);
        return () => document.removeEventListener("click", onDocClick);
    }, []);

    // Google Identity Services — same init/render pattern as website/app/auth.jsx
    React.useEffect(() => {
        if (step !== "form") return;
        let tries = 0;
        const id = setInterval(() => {
            tries++;
            if (
                window.google &&
                window.google.accounts &&
                window.google.accounts.id
            ) {
                clearInterval(id);
                try {
                    window.google.accounts.id.initialize({
                        client_id: GOOGLE_CLIENT_ID_WEB,
                        callback: async (resp) => {
                            if (!consent) {
                                setErrors((e) => ({ ...e, consent: true }));
                                return;
                            }
                            setSubmitError("");
                            setAccountExists(false);
                            setOauthBusy("google");
                            try {
                                const res = await fetch(
                                    COACH_AUTH_API + "/google",
                                    {
                                        method: "POST",
                                        headers: {
                                            "Content-Type": "application/json",
                                        },
                                        body: JSON.stringify({
                                            idToken: resp.credential,
                                            role: "coach",
                                        }),
                                    },
                                );
                                const data = await res.json();
                                if (res.status === 409) {
                                    setAccountExists(true);
                                    return;
                                }
                                if (!res.ok || !data.token)
                                    throw new Error(data.message || "error");
                                setForm((f) => ({
                                    ...f,
                                    name:
                                        data.user?.fullName ||
                                        data.user?.full_name ||
                                        f.name,
                                    email: data.user?.email || f.email,
                                }));
                                setOauthToken(data.token);
                                setViaOAuth(true);
                                setStep("profile");
                            } catch (err) {
                                setSubmitError(
                                    tr(
                                        "Google sign-in failed — please try again.",
                                        "A Google bejelentkezés nem sikerült — próbáld újra.",
                                    ),
                                );
                            } finally {
                                setOauthBusy("");
                            }
                        },
                    });
                    if (googleDivRef.current) {
                        window.google.accounts.id.renderButton(
                            googleDivRef.current,
                            {
                                type: "standard",
                                theme: "outline",
                                size: "large",
                                shape: "pill",
                                text: "continue_with",
                                logo_alignment: "center",
                                width: googleDivRef.current.offsetWidth || 360,
                            },
                        );
                    }
                } catch (e) {
                    /* origin not authorized → falls back to nothing rendered */
                }
            } else if (tries > 40) {
                clearInterval(id);
            }
        }, 250);
        return () => clearInterval(id);
    }, [step, consent]);

    async function doAppleSignup() {
        if (!consent) {
            setErrors((e) => ({ ...e, consent: true }));
            return;
        }
        if (!APPLE_SERVICES_ID || !window.AppleID) {
            setSubmitError(
                tr(
                    "Apple sign-in isn’t available right now.",
                    "Az Apple bejelentkezés jelenleg nem elérhető.",
                ),
            );
            return;
        }
        setSubmitError("");
        setAccountExists(false);
        setOauthBusy("apple");
        try {
            window.AppleID.auth.init({
                clientId: APPLE_SERVICES_ID,
                scope: "name email",
                redirectURI: APPLE_REDIRECT_URI,
                usePopup: true,
            });
            const data = await window.AppleID.auth.signIn();
            const idToken = data.authorization && data.authorization.id_token;
            let fullName;
            if (data.user && data.user.name)
                fullName = [data.user.name.firstName, data.user.name.lastName]
                    .filter(Boolean)
                    .join(" ");
            const res = await fetch(COACH_AUTH_API + "/apple", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    identityToken: idToken,
                    fullName,
                    role: "coach",
                }),
            });
            const resData = await res.json();
            if (res.status === 409) {
                setAccountExists(true);
                return;
            }
            if (!res.ok || !resData.token)
                throw new Error(resData.message || "error");
            setForm((f) => ({
                ...f,
                name:
                    fullName ||
                    resData.user?.fullName ||
                    resData.user?.full_name ||
                    f.name,
                email: resData.user?.email || f.email,
            }));
            setOauthToken(resData.token);
            setViaOAuth(true);
            setStep("profile");
        } catch (err) {
            if (!err || err.error !== "popup_closed_by_user") {
                setSubmitError(
                    tr(
                        "Apple sign-in failed — please try again.",
                        "Az Apple bejelentkezés nem sikerült — próbáld újra.",
                    ),
                );
            }
        } finally {
            setOauthBusy("");
        }
    }

    function setField(k, v) {
        setForm((f) => ({ ...f, [k]: v }));
        setErrors((e) => ({ ...e, [k]: false }));
    }

    function toggleSport(label) {
        setSports((s) =>
            s.includes(label) ? s.filter((x) => x !== label) : [...s, label],
        );
        setErrors((e) => ({ ...e, sports: false }));
    }

    // The display string the API stores in `full_name`. Composed in the reading order of the
    // language the coach is actually filling the form in — surname-first in Hungarian — via
    // tr(), which resolves per call against window.__lang. first/last go over the wire
    // separately, so nothing downstream has to re-guess this ordering.
    function composedName() {
        const f = form.firstName.trim();
        const l = form.lastName.trim();
        if (!f && !l) return "";
        return tr(`${f} ${l}`, `${l} ${f}`).trim();
    }

    function validate() {
        const errs = {};
        if (form.lastName.trim().length < 2) errs.lastName = true;
        if (form.firstName.trim().length < 2) errs.firstName = true;
        if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email.trim()))
            errs.email = true;
        if (form.phone.replace(/[^0-9]/g, "").length < 6) errs.phone = true;
        if (sports.length === 0) errs.sports = true;
        if (!category) errs.category = true;
        if (form.city.trim().length < 2) errs.city = true;
        if (!consent) errs.consent = true;
        setErrors(errs);
        if (Object.keys(errs).length > 0) {
            requestAnimationFrame(() => {
                document
                    .querySelector("[data-first-error]")
                    ?.scrollIntoView({ behavior: "smooth", block: "center" });
            });
        }
        return Object.keys(errs).length === 0;
    }

    async function onSubmit(e) {
        e.preventDefault();
        if (!validate()) return;
        setSubmitting(true);
        setSubmitError("");
        setAccountExists(false);
        try {
            const res = await fetch(COACH_REG_API, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    // `name` is still sent: the API requires it and stores it as full_name.
                    // firstName/lastName are the new, unambiguous half.
                    name: composedName(),
                    firstName: form.firstName.trim(),
                    lastName: form.lastName.trim(),
                    email: form.email.trim(),
                    phone: form.phone.trim(),
                    sports,
                    category,
                    city: form.city.trim(),
                    bio: form.bio.trim(),
                    link: form.link.trim(),
                    source: form.source,
                    hp,
                    formFillMs: Date.now() - mountedAt.current,
                }),
            });
            if (res.status === 409) {
                setAccountExists(true);
                requestAnimationFrame(() =>
                    document
                        .getElementById("reg-account-exists")
                        ?.scrollIntoView({
                            behavior: "smooth",
                            block: "center",
                        }),
                );
                return;
            }
            if (!res.ok) {
                const d = await res.json().catch(() => ({}));
                throw new Error(d.message || "error");
            }
            setStep("done");
            window.scrollTo({ top: 0, behavior: "smooth" });
        } catch (err) {
            setSubmitError(
                tr(
                    "Something went wrong — please try again.",
                    "Hiba történt — próbáld újra.",
                ),
            );
        } finally {
            setSubmitting(false);
        }
    }

    // Step 2 (OAuth coaches only): phone/sports/city/bio, no name/email/consent —
    // already known from the OAuth account + the pre-signup consent check.
    function validateProfile() {
        const errs = {};
        if (form.phone.replace(/[^0-9]/g, "").length < 6) errs.phone = true;
        if (sports.length === 0) errs.sports = true;
        if (!category) errs.category = true;
        if (form.city.trim().length < 2) errs.city = true;
        setErrors(errs);
        if (Object.keys(errs).length > 0) {
            requestAnimationFrame(() => {
                document
                    .querySelector("[data-first-error]")
                    ?.scrollIntoView({ behavior: "smooth", block: "center" });
            });
        }
        return Object.keys(errs).length === 0;
    }

    async function onSubmitProfile(e) {
        e.preventDefault();
        if (!validateProfile()) return;
        setSubmitting(true);
        setSubmitError("");
        try {
            let bioText = form.bio.trim();
            const extras = [];
            if (form.link.trim())
                extras.push(
                    tr("Instagram/website: ", "Instagram/weboldal: ") +
                        form.link.trim(),
                );
            if (form.source)
                extras.push(
                    tr("Heard about us via: ", "Honnan hallott rólunk: ") +
                        form.source,
                );
            if (extras.length)
                bioText = [bioText, extras.join(" · ")]
                    .filter(Boolean)
                    .join("\n\n");

            const res = await fetch(COACH_PORTAL_API + "/me", {
                method: "PUT",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + oauthToken,
                },
                body: JSON.stringify({
                    contact_phone: form.phone.trim(),
                    tags: sports.join(","),
                    city: form.city.trim(),
                    bio: bioText || undefined,
                }),
            });
            if (!res.ok) {
                const d = await res.json().catch(() => ({}));
                throw new Error(d.message || "error");
            }
            // Category is a separate junction row, not a plain field on /me.
            await fetch(COACH_PORTAL_API + "/categories", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: "Bearer " + oauthToken,
                },
                body: JSON.stringify({ category }),
            }).catch(() => {});
            setStep("done");
            window.scrollTo({ top: 0, behavior: "smooth" });
        } catch (err) {
            setSubmitError(
                tr(
                    "Something went wrong — please try again.",
                    "Hiba történt — próbáld újra.",
                ),
            );
        } finally {
            setSubmitting(false);
        }
    }

    const sourceOptions = [
        tr("Instagram", "Instagram"),
        tr(
            "A friend or another coach recommended us",
            "Ismerős / másik edző ajánlotta",
        ),
        tr("Google search", "Google keresés"),
        tr("Facebook", "Facebook"),
        tr("At the gym", "Edzőterem"),
        tr("Other", "Egyéb"),
    ];

    return (
        <div style={{ fontFamily: FB }}>
            <Section
                bg="transparent"
                pad={narrow ? "20px 0 48px" : "40px 0 64px"}
                style={{
                    backgroundImage:
                        "linear-gradient(180deg, rgba(6,9,20,.55), rgba(6,9,20,.65)), url(https://api.sportistry.app/stock-photos/photo-1517838277536-f5f99be501cd.jpg)",
                    backgroundSize: "cover",
                    backgroundPosition: "center",
                    backgroundRepeat: "no-repeat",
                }}
            >
                <Container width={1080}>
                    <div
                        style={{
                            display: "grid",
                            gridTemplateColumns: narrow
                                ? "1fr"
                                : ".82fr 1.18fr",
                            gap: narrow ? 18 : 28,
                            alignItems: "start",
                        }}
                    >
                        {/* LEFT — trust panel */}
                        <aside
                            ref={asideRef}
                            style={{
                                position: "relative",
                                overflow: "hidden",
                                background: SB.ink950,
                                color: "white",
                                borderRadius: 24,
                                padding: narrow ? "30px 26px" : "38px 32px",
                                boxShadow: asideStuck
                                    ? "0 24px 60px -12px rgba(22,82,240,.5), 0 0 0 1px rgba(255,255,255,.12)"
                                    : "0 10px 30px rgba(6,9,20,.35)",
                                transition: "box-shadow .35s ease",
                                ...(narrow
                                    ? {}
                                    : { position: "sticky", top: 88 }),
                            }}
                        >
                            <div
                                style={{
                                    position: "absolute",
                                    top: -100,
                                    right: -70,
                                    width: 320,
                                    height: 320,
                                    borderRadius: "50%",
                                    background:
                                        "radial-gradient(circle, rgba(22,82,240,.55), transparent 70%)",
                                    filter: "blur(6px)",
                                }}
                            />
                            <div
                                style={{
                                    position: "absolute",
                                    bottom: -160,
                                    left: -90,
                                    width: 300,
                                    height: 300,
                                    borderRadius: "50%",
                                    background:
                                        "radial-gradient(circle, rgba(106,63,240,.45), transparent 70%)",
                                    filter: "blur(6px)",
                                }}
                            />
                            <div style={{ position: "relative", zIndex: 2 }}>
                                <span
                                    style={{
                                        display: "inline-flex",
                                        alignItems: "center",
                                        gap: 8,
                                        background: "rgba(198,247,60,.12)",
                                        color: SB.lime,
                                        padding: "6px 13px",
                                        borderRadius: 999,
                                        fontWeight: 800,
                                        fontSize: 12.5,
                                        fontFamily: FD,
                                    }}
                                >
                                    <span
                                        style={{
                                            width: 8,
                                            height: 8,
                                            borderRadius: "50%",
                                            background: SB.lime,
                                        }}
                                    />
                                    {tr(
                                        "Coach application",
                                        "Edzői jelentkezés",
                                    )}
                                </span>
                                <h1
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        letterSpacing: "-.03em",
                                        lineHeight: 1.02,
                                        fontSize: "clamp(30px, 4vw, 40px)",
                                        color: "white",
                                        margin: "18px 0 0",
                                    }}
                                >
                                    {tr(
                                        "A few minutes, and you’re done.",
                                        "Pár perc, és kész.",
                                    )}
                                </h1>
                                <p
                                    style={{
                                        fontSize: 16,
                                        lineHeight: 1.5,
                                        color: "#C3CBDB",
                                        marginTop: 14,
                                        fontWeight: 500,
                                    }}
                                >
                                    {tr(
                                        "Fill out the application and we’ll send a login link soon so you can set up your services.",
                                        "Töltsd ki a jelentkezést, és hamarosan küldjük a belépési linket, ahol beállíthatod a szolgáltatásaid.",
                                    )}
                                </p>
                                <ul
                                    style={{
                                        listStyle: "none",
                                        margin: "28px 0 0",
                                        padding: 0,
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: 16,
                                    }}
                                >
                                    {[
                                        [
                                            "sparkle",
                                            tr(
                                                "Free to register, no monthly fee.",
                                                "Ingyenes regisztráció, nincs havidíj.",
                                            ),
                                        ],
                                        [
                                            "trendingUp",
                                            tr(
                                                "Your own clients are completely free for the first 60 days — no commission, no transaction fee. Brought in during the window, they stay at just 3% + VAT forever.",
                                                "A saját ügyfeleid az első 60 napban teljesen ingyen — se jutalék, se tranzakciós díj. A 60 napon belül behozott ügyfeleid utána is örökre csak 3% + ÁFA-n maradnak.",
                                            ),
                                        ],
                                        [
                                            "banknote",
                                            tr(
                                                "Paid out weekly, automatically, straight to your account.",
                                                "Kifizetés hetente, automatikusan, egyenesen a számládra.",
                                            ),
                                        ],
                                    ].map(([icon, text]) => (
                                        <li
                                            key={text}
                                            style={{
                                                display: "flex",
                                                alignItems: "flex-start",
                                                gap: 13,
                                            }}
                                        >
                                            <span
                                                style={{
                                                    width: 32,
                                                    height: 32,
                                                    borderRadius: 9,
                                                    background:
                                                        "rgba(198,247,60,.14)",
                                                    display: "grid",
                                                    placeItems: "center",
                                                    flexShrink: 0,
                                                }}
                                            >
                                                <WIcon
                                                    name={icon}
                                                    size={17}
                                                    color={SB.lime}
                                                />
                                            </span>
                                            <span
                                                style={{
                                                    fontSize: 14.5,
                                                    lineHeight: 1.4,
                                                    fontWeight: 600,
                                                    color: "#E7ECF6",
                                                    paddingTop: 5,
                                                }}
                                            >
                                                {text}
                                            </span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </aside>

                        {/* RIGHT — OAuth+form / profile completion / success */}
                        {step === "done" ? (
                            <section
                                style={{
                                    background: "white",
                                    borderRadius: 24,
                                    padding: narrow ? "38px 24px" : "48px 40px",
                                    boxShadow:
                                        "0 1px 2px rgba(10,14,28,.06), 0 12px 32px rgba(10,14,28,.08)",
                                    border: "1px solid " + SB.ink100,
                                    textAlign: "center",
                                }}
                            >
                                <div
                                    style={{
                                        width: 76,
                                        height: 76,
                                        borderRadius: "50%",
                                        background: "#E2F7EC",
                                        display: "grid",
                                        placeItems: "center",
                                        margin: "0 auto 22px",
                                    }}
                                >
                                    <WIcon
                                        name="check"
                                        size={40}
                                        color="#0A6E40"
                                    />
                                </div>
                                <h2
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 30,
                                        letterSpacing: "-.02em",
                                        color: SB.ink900,
                                        margin: 0,
                                    }}
                                >
                                    {tr(
                                        "Thanks! We’ve received your application.",
                                        "Köszönjük! Megkaptuk a jelentkezésed.",
                                    )}
                                </h2>
                                <p
                                    style={{
                                        fontSize: 16.5,
                                        lineHeight: 1.55,
                                        color: SB.ink600,
                                        margin: "14px auto 0",
                                        maxWidth: "46ch",
                                        fontWeight: 500,
                                    }}
                                >
                                    {viaOAuth
                                        ? tr(
                                              "You’re signed in already — once we approve your application you’ll show up in search.",
                                              "Már be vagy jelentkezve — miután jóváhagyjuk a jelentkezésed, megjelensz a keresésben.",
                                          )
                                        : tr(
                                              "We’ll email you a login link soon so you can set up your services and prices.",
                                              "Hamarosan emailt küldünk a belépési linkkel, ahol beállíthatod a szolgáltatásaid és az áraid.",
                                          )}
                                </p>
                                <div
                                    style={{
                                        margin: "32px auto 0",
                                        maxWidth: 440,
                                        display: "flex",
                                        flexDirection: "column",
                                        textAlign: "left",
                                    }}
                                >
                                    {(viaOAuth
                                        ? [
                                              tr(
                                                  "We review your application",
                                                  "Ellenőrizzük a jelentkezést",
                                              ),
                                              tr(
                                                  "We approve your profile — you show up in search",
                                                  "Jóváhagyjuk a profilod — megjelensz a keresésben",
                                              ),
                                              tr(
                                                  "You fine-tune your services and prices anytime",
                                                  "Bármikor finomíthatod a szolgáltatásaid és az áraid",
                                              ),
                                          ]
                                        : [
                                              tr(
                                                  "We review your application",
                                                  "Ellenőrizzük a jelentkezést",
                                              ),
                                              tr(
                                                  "We email you the login link",
                                                  "Emailben küldjük a belépést",
                                              ),
                                              tr(
                                                  "You set up your profile and prices",
                                                  "Beállítod a profilod és az áraid",
                                              ),
                                          ]
                                    ).map((stepLabel, i) => (
                                        <div
                                            key={stepLabel}
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 15,
                                                padding: "16px 0",
                                                borderBottom:
                                                    i < 2
                                                        ? "1px solid " +
                                                          SB.ink100
                                                        : "none",
                                            }}
                                        >
                                            <span
                                                style={{
                                                    width: 34,
                                                    height: 34,
                                                    borderRadius: 10,
                                                    background: SB.ink950,
                                                    color: "white",
                                                    fontFamily: FD,
                                                    fontWeight: 800,
                                                    fontSize: 15,
                                                    display: "grid",
                                                    placeItems: "center",
                                                    flexShrink: 0,
                                                }}
                                            >
                                                {i + 1}
                                            </span>
                                            <span
                                                style={{
                                                    fontSize: 15,
                                                    fontWeight: 600,
                                                    color: SB.ink800,
                                                }}
                                            >
                                                {stepLabel}
                                            </span>
                                        </div>
                                    ))}
                                </div>
                                <a
                                    href="/edzoknek"
                                    style={{
                                        display: "inline-flex",
                                        alignItems: "center",
                                        gap: 8,
                                        marginTop: 30,
                                        fontWeight: 700,
                                        fontSize: 14.5,
                                        color: SB.blue,
                                    }}
                                >
                                    <span
                                        style={{
                                            display: "inline-flex",
                                            transform: "rotate(180deg)",
                                        }}
                                    >
                                        <WIcon name="arrow" size={17} />
                                    </span>
                                    {tr(
                                        "Back to the coach page",
                                        "Vissza a főoldalra",
                                    )}
                                </a>
                            </section>
                        ) : step === "profile" ? (
                            <section
                                style={{
                                    background: "white",
                                    borderRadius: 24,
                                    padding: narrow ? "26px 22px" : 36,
                                    boxShadow:
                                        "0 1px 2px rgba(10,14,28,.06), 0 12px 32px rgba(10,14,28,.08)",
                                    border: "1px solid " + SB.ink100,
                                }}
                            >
                                <h2
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 26,
                                        letterSpacing: "-.02em",
                                        color: SB.ink900,
                                        margin: 0,
                                    }}
                                >
                                    {tr("Almost there", "Már majdnem kész")}
                                </h2>
                                <p
                                    style={{
                                        fontSize: 15,
                                        color: SB.ink600,
                                        marginTop: 6,
                                        fontWeight: 500,
                                    }}
                                >
                                    {tr(
                                        "Signed in as ",
                                        "Bejelentkezve mint: ",
                                    )}
                                    <strong>{composedName() || form.email}</strong>
                                    {tr(
                                        " — just a few more details.",
                                        " — már csak néhány adat kell.",
                                    )}
                                </p>

                                <form
                                    onSubmit={onSubmitProfile}
                                    noValidate
                                    style={{
                                        marginTop: 22,
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: 22,
                                    }}
                                >
                                    <div
                                        data-first-error={
                                            errors.phone ? true : undefined
                                        }
                                    >
                                        <RegInput
                                            id="reg-phone-2"
                                            label={tr(
                                                "Phone number",
                                                "Telefonszám",
                                            )}
                                            type="tel"
                                            placeholder="+36 30 123 4567"
                                            value={form.phone}
                                            onChange={(e) =>
                                                setField(
                                                    "phone",
                                                    e.target.value,
                                                )
                                            }
                                            error={errors.phone}
                                            errorMsg={tr(
                                                "Enter your phone number.",
                                                "Add meg a telefonszámod.",
                                            )}
                                        />
                                    </div>

                                    <CategoryPicker
                                        category={category}
                                        setCategory={setCategory}
                                        error={errors.category}
                                    />

                                    <SportsMultiSelect
                                        sports={sports}
                                        toggleSport={toggleSport}
                                        msOpen={msOpen}
                                        setMsOpen={setMsOpen}
                                        msRef={msRef}
                                        error={errors.sports}
                                    />

                                    <div
                                        data-first-error={
                                            errors.city ? true : undefined
                                        }
                                    >
                                        <RegInput
                                            id="reg-city-2"
                                            label={tr(
                                                "City / service area",
                                                "Város / működési terület",
                                            )}
                                            placeholder={tr(
                                                "e.g. Budapest, District 3",
                                                "pl. Budapest, III. kerület",
                                            )}
                                            value={form.city}
                                            onChange={(e) =>
                                                setField("city", e.target.value)
                                            }
                                            error={errors.city}
                                            errorMsg={tr(
                                                "Enter your service area.",
                                                "Add meg a működési területed.",
                                            )}
                                        />
                                    </div>

                                    <div>
                                        <label
                                            htmlFor="reg-bio-2"
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 7,
                                                fontFamily: FB,
                                                fontWeight: 700,
                                                fontSize: 13.5,
                                                color: SB.ink800,
                                                marginBottom: 8,
                                            }}
                                        >
                                            {tr(
                                                "Short bio",
                                                "Rövid bemutatkozás",
                                            )}
                                            <span
                                                style={{
                                                    fontWeight: 600,
                                                    fontSize: 11.5,
                                                    color: SB.ink400,
                                                    background: SB.ink100,
                                                    padding: "2px 8px",
                                                    borderRadius: 999,
                                                }}
                                            >
                                                {tr("Optional", "Opcionális")}
                                            </span>
                                        </label>
                                        <textarea
                                            id="reg-bio-2"
                                            value={form.bio}
                                            onChange={(e) =>
                                                setField("bio", e.target.value)
                                            }
                                            placeholder={tr(
                                                "1–2 sentences about who you help and how.",
                                                "1–2 mondat arról, kinek és miben segítesz.",
                                            )}
                                            style={{
                                                width: "100%",
                                                fontFamily: FB,
                                                fontWeight: 500,
                                                fontSize: 16,
                                                color: SB.ink900,
                                                background: SB.ink50,
                                                border:
                                                    "1.5px solid " + SB.ink200,
                                                borderRadius: 12,
                                                padding: "13px 15px",
                                                outline: "none",
                                                resize: "vertical",
                                                minHeight: 84,
                                                lineHeight: 1.45,
                                                boxSizing: "border-box",
                                            }}
                                            onFocus={(e) => {
                                                e.target.style.borderColor =
                                                    SB.blue;
                                                e.target.style.background =
                                                    "white";
                                            }}
                                            onBlur={(e) => {
                                                e.target.style.borderColor =
                                                    SB.ink200;
                                                e.target.style.background =
                                                    SB.ink50;
                                            }}
                                        />
                                    </div>

                                    <RegInput
                                        id="reg-link-2"
                                        label={tr(
                                            "Instagram / website",
                                            "Instagram / weboldal",
                                        )}
                                        opt={tr("Optional", "Opcionális")}
                                        placeholder={tr(
                                            "@instagram or https://…",
                                            "@instagram vagy https://…",
                                        )}
                                        value={form.link}
                                        onChange={(e) =>
                                            setField("link", e.target.value)
                                        }
                                    />

                                    <div>
                                        <label
                                            htmlFor="reg-source-2"
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 7,
                                                fontFamily: FB,
                                                fontWeight: 700,
                                                fontSize: 13.5,
                                                color: SB.ink800,
                                                marginBottom: 8,
                                            }}
                                        >
                                            {tr(
                                                "How did you hear about us?",
                                                "Honnan hallottál rólunk?",
                                            )}
                                            <span
                                                style={{
                                                    fontWeight: 600,
                                                    fontSize: 11.5,
                                                    color: SB.ink400,
                                                    background: SB.ink100,
                                                    padding: "2px 8px",
                                                    borderRadius: 999,
                                                }}
                                            >
                                                {tr("Optional", "Opcionális")}
                                            </span>
                                        </label>
                                        <select
                                            id="reg-source-2"
                                            value={form.source}
                                            onChange={(e) =>
                                                setField(
                                                    "source",
                                                    e.target.value,
                                                )
                                            }
                                            style={{
                                                width: "100%",
                                                fontFamily: FB,
                                                fontWeight: 500,
                                                fontSize: 16,
                                                color: form.source
                                                    ? SB.ink900
                                                    : SB.ink400,
                                                background: SB.ink50,
                                                border:
                                                    "1.5px solid " + SB.ink200,
                                                borderRadius: 12,
                                                padding: "13px 15px",
                                                outline: "none",
                                                appearance: "none",
                                                cursor: "pointer",
                                                boxSizing: "border-box",
                                            }}
                                        >
                                            <option value="">
                                                {tr("Choose…", "Válassz…")}
                                            </option>
                                            {sourceOptions.map((o) => (
                                                <option key={o} value={o}>
                                                    {o}
                                                </option>
                                            ))}
                                        </select>
                                    </div>

                                    {submitError && (
                                        <div
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 6,
                                                color: "#DC2626",
                                                fontSize: 13,
                                                fontWeight: 700,
                                            }}
                                        >
                                            <WIcon
                                                name="alertTriangle"
                                                size={14}
                                            />{" "}
                                            {submitError}
                                        </div>
                                    )}

                                    <button
                                        type="submit"
                                        disabled={submitting}
                                        style={{
                                            width: "100%",
                                            border: "none",
                                            cursor: submitting
                                                ? "default"
                                                : "pointer",
                                            background: submitting
                                                ? SB.ink300
                                                : SB.blue,
                                            color: "white",
                                            borderRadius: 14,
                                            padding: 17,
                                            fontFamily: FB,
                                            fontWeight: 800,
                                            fontSize: 16.5,
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                            gap: 9,
                                            boxShadow: submitting
                                                ? "none"
                                                : "0 10px 24px rgba(22,82,240,.3)",
                                        }}
                                    >
                                        {submitting
                                            ? tr("Sending…", "Küldés…")
                                            : tr(
                                                  "Finish application",
                                                  "Jelentkezés befejezése",
                                              )}
                                        {!submitting && (
                                            <WIcon name="arrow" size={19} />
                                        )}
                                    </button>
                                </form>
                            </section>
                        ) : (
                            <section
                                style={{
                                    background: "white",
                                    borderRadius: 24,
                                    padding: narrow ? "26px 22px" : 36,
                                    boxShadow:
                                        "0 1px 2px rgba(10,14,28,.06), 0 12px 32px rgba(10,14,28,.08)",
                                    border: "1px solid " + SB.ink100,
                                }}
                            >
                                <h2
                                    style={{
                                        fontFamily: FD,
                                        fontWeight: 800,
                                        fontSize: 26,
                                        letterSpacing: "-.02em",
                                        color: SB.ink900,
                                        margin: 0,
                                    }}
                                >
                                    {tr(
                                        "Apply as a coach",
                                        "Jelentkezz edzőként",
                                    )}
                                </h2>
                                <p
                                    style={{
                                        fontSize: 15,
                                        color: SB.ink600,
                                        marginTop: 6,
                                        fontWeight: 500,
                                    }}
                                >
                                    {tr(
                                        "Fields marked with * are required. You can fill in the rest later.",
                                        "A *-gal jelölt mezők kötelezők. A többit később is kitöltheted.",
                                    )}
                                </p>

                                {accountExists && (
                                    <div
                                        id="reg-account-exists"
                                        style={{
                                            display: "flex",
                                            alignItems: "flex-start",
                                            gap: 10,
                                            marginTop: 20,
                                            padding: 16,
                                            background: "#FFF7E6",
                                            border: "1px solid #F4D998",
                                            borderRadius: 12,
                                        }}
                                    >
                                        <span
                                            style={{
                                                flexShrink: 0,
                                                marginTop: 1,
                                            }}
                                        >
                                            <WIcon
                                                name="info"
                                                size={18}
                                                color="#92600A"
                                            />
                                        </span>
                                        <div
                                            style={{
                                                fontSize: 13.5,
                                                lineHeight: 1.55,
                                                color: "#7A4A00",
                                                fontWeight: 500,
                                            }}
                                        >
                                            {tr(
                                                "There’s already an account with this email — you can’t apply as a coach through this form. ",
                                                "Ezzel az email címmel már van fiókod — ezen az űrlapon keresztül nem jelentkezhetsz edzőként. ",
                                            )}
                                            <a
                                                href="https://sportistry.app/app/"
                                                style={{
                                                    color: SB.blue,
                                                    fontWeight: 700,
                                                    textDecoration: "underline",
                                                }}
                                            >
                                                {tr(
                                                    "Sign in instead",
                                                    "Jelentkezz be helyette",
                                                )}
                                            </a>
                                        </div>
                                    </div>
                                )}

                                {/* Shared consent — gates both the OAuth buttons and the manual form below */}
                                <label
                                    data-first-error={
                                        errors.consent ? true : undefined
                                    }
                                    style={{
                                        display: "flex",
                                        alignItems: "flex-start",
                                        gap: 12,
                                        padding: 16,
                                        background: SB.ink50,
                                        borderRadius: 12,
                                        cursor: "pointer",
                                        marginTop: 20,
                                    }}
                                >
                                    <input
                                        type="checkbox"
                                        checked={consent}
                                        onChange={(e) => {
                                            setConsent(e.target.checked);
                                            setErrors((er) => ({
                                                ...er,
                                                consent: false,
                                            }));
                                        }}
                                        style={{
                                            position: "absolute",
                                            opacity: 0,
                                            width: 0,
                                            height: 0,
                                        }}
                                    />
                                    <span
                                        style={{
                                            width: 22,
                                            height: 22,
                                            borderRadius: 6,
                                            border:
                                                "2px solid " +
                                                (consent ? SB.blue : SB.ink300),
                                            background: consent
                                                ? SB.blue
                                                : "white",
                                            display: "grid",
                                            placeItems: "center",
                                            flexShrink: 0,
                                            marginTop: 1,
                                        }}
                                    >
                                        {consent && (
                                            <WIcon
                                                name="check"
                                                size={14}
                                                color="white"
                                                strokeWidth={3}
                                            />
                                        )}
                                    </span>
                                    <span
                                        style={{
                                            fontSize: 13.5,
                                            lineHeight: 1.5,
                                            color: SB.ink600,
                                            fontWeight: 500,
                                        }}
                                    >
                                        {tr("I accept the ", "Elfogadom az ")}
                                        <a
                                            href="/terms"
                                            target="_blank"
                                            rel="noopener"
                                            style={{
                                                color: SB.blue,
                                                fontWeight: 700,
                                                textDecoration: "underline",
                                            }}
                                        >
                                            {tr("Terms of Service", "ÁSZF")}
                                        </a>
                                        {tr(" and the ", " és az ")}
                                        <a
                                            href="/privacy"
                                            target="_blank"
                                            rel="noopener"
                                            style={{
                                                color: SB.blue,
                                                fontWeight: 700,
                                                textDecoration: "underline",
                                            }}
                                        >
                                            {tr(
                                                "Privacy Policy",
                                                "adatkezelési tájékoztatót",
                                            )}
                                        </a>
                                        {tr(".", ".")}{" "}
                                        <span style={{ color: SB.blue }}>
                                            *
                                        </span>
                                    </span>
                                </label>
                                {errors.consent && (
                                    <div
                                        style={{
                                            display: "flex",
                                            alignItems: "center",
                                            gap: 6,
                                            color: "#DC2626",
                                            fontSize: 12.5,
                                            fontWeight: 700,
                                            marginTop: 7,
                                        }}
                                    >
                                        <WIcon name="alertTriangle" size={14} />{" "}
                                        {tr(
                                            "You must accept the terms to continue.",
                                            "Az elfogadás kötelező a folytatáshoz.",
                                        )}
                                    </div>
                                )}

                                {/* OAuth entry points — always clickable; the consent check inside each
                    handler shows the error above and bails out if it's unchecked, same
                    as the manual form defers validation to submit time. */}
                                <div style={{ marginTop: 18 }}>
                                    <div style={{ position: "relative" }}>
                                        <div
                                            ref={googleDivRef}
                                            style={{
                                                width: "100%",
                                                minHeight: 44,
                                                display: "flex",
                                                justifyContent: "center",
                                            }}
                                        />
                                        {!consent && (
                                            // Google's own button opens its real account picker on click before our
                                            // code ever runs — this catches the click first so an unconsented tap
                                            // shows the terms error instead of running the whole Google flow only to
                                            // reject it afterward. Not visually dimmed, so it doesn't look disabled.
                                            <div
                                                onClick={() =>
                                                    setErrors((e) => ({
                                                        ...e,
                                                        consent: true,
                                                    }))
                                                }
                                                style={{
                                                    position: "absolute",
                                                    inset: 0,
                                                    cursor: "pointer",
                                                }}
                                            />
                                        )}
                                    </div>
                                    <button
                                        type="button"
                                        onClick={doAppleSignup}
                                        disabled={!!oauthBusy}
                                        style={{
                                            width: "100%",
                                            marginTop: 10,
                                            border: "1.5px solid " + SB.ink900,
                                            background: SB.ink950,
                                            color: "white",
                                            borderRadius: 999,
                                            padding: "11px 20px",
                                            cursor: oauthBusy
                                                ? "default"
                                                : "pointer",
                                            fontFamily: FB,
                                            fontWeight: 700,
                                            fontSize: 14.5,
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                            gap: 9,
                                        }}
                                    >
                                        <WIcon
                                            name="apple"
                                            size={17}
                                            color="white"
                                        />
                                        {oauthBusy === "apple"
                                            ? tr(
                                                  "Signing in…",
                                                  "Bejelentkezés…",
                                              )
                                            : tr(
                                                  "Continue with Apple",
                                                  "Folytatás Apple-lel",
                                              )}
                                    </button>
                                </div>
                                <div
                                    style={{
                                        display: "flex",
                                        alignItems: "center",
                                        gap: 12,
                                        margin: "20px 0",
                                    }}
                                >
                                    <div
                                        style={{
                                            flex: 1,
                                            height: 1,
                                            background: SB.ink100,
                                        }}
                                    />
                                    <span
                                        style={{
                                            fontSize: 12.5,
                                            fontWeight: 700,
                                            color: SB.ink400,
                                        }}
                                    >
                                        {tr(
                                            "or fill in manually",
                                            "vagy töltsd ki kézzel",
                                        )}
                                    </span>
                                    <div
                                        style={{
                                            flex: 1,
                                            height: 1,
                                            background: SB.ink100,
                                        }}
                                    />
                                </div>

                                <form
                                    onSubmit={onSubmit}
                                    noValidate
                                    style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: 22,
                                    }}
                                >
                                    {/* Honeypot: real users never see or tab into this — off-screen,
                                        aria-hidden, excluded from tab order. A script that fills every
                                        input it finds (common for naive form-spam bots) fills this one
                                        too, which is exactly the tell. */}
                                    <div
                                        aria-hidden="true"
                                        style={{
                                            position: "absolute",
                                            left: "-9999px",
                                            top: "-9999px",
                                            width: 1,
                                            height: 1,
                                            overflow: "hidden",
                                        }}
                                    >
                                        <label htmlFor="reg-website">
                                            Website
                                        </label>
                                        <input
                                            id="reg-website"
                                            name="website"
                                            type="text"
                                            tabIndex={-1}
                                            autoComplete="off"
                                            value={hp}
                                            onChange={(e) =>
                                                setHp(e.target.value)
                                            }
                                        />
                                    </div>
                                    {/* Two labelled fields, not one "full name" box. The
                                        single field was ambiguous by construction: its own
                                        placeholder read "pl. Kovács Anna" in HU and
                                        "e.g. Anna Kovács" in EN, so the same input arrived
                                        in opposite orders and nothing downstream could tell
                                        which. Rendered in the reading order of the current
                                        language; the labels carry the meaning either way. */}
                                    <div
                                        data-first-error={
                                            errors.lastName || errors.firstName
                                                ? true
                                                : undefined
                                        }
                                        style={{
                                            display: "flex",
                                            gap: 14,
                                            flexWrap: "wrap",
                                        }}
                                    >
                                        {(window.__lang === "hu"
                                            ? ["last", "first"]
                                            : ["first", "last"]
                                        ).map((which) => (
                                            <div
                                                key={which}
                                                style={{ flex: "1 1 160px" }}
                                            >
                                                {which === "last" ? (
                                                    <RegInput
                                                        id="reg-last-name"
                                                        label={tr(
                                                            "Last name",
                                                            "Vezetéknév",
                                                        )}
                                                        placeholder={tr(
                                                            "e.g. Kovács",
                                                            "pl. Kovács",
                                                        )}
                                                        value={form.lastName}
                                                        onChange={(e) =>
                                                            setField(
                                                                "lastName",
                                                                e.target.value,
                                                            )
                                                        }
                                                        error={errors.lastName}
                                                        errorMsg={tr(
                                                            "Enter your last name.",
                                                            "Add meg a vezetékneved.",
                                                        )}
                                                    />
                                                ) : (
                                                    <RegInput
                                                        id="reg-first-name"
                                                        label={tr(
                                                            "First name",
                                                            "Keresztnév",
                                                        )}
                                                        placeholder={tr(
                                                            "e.g. Anna",
                                                            "pl. Anna",
                                                        )}
                                                        value={form.firstName}
                                                        onChange={(e) =>
                                                            setField(
                                                                "firstName",
                                                                e.target.value,
                                                            )
                                                        }
                                                        error={errors.firstName}
                                                        errorMsg={tr(
                                                            "Enter your first name.",
                                                            "Add meg a keresztneved.",
                                                        )}
                                                    />
                                                )}
                                            </div>
                                        ))}
                                    </div>

                                    <div
                                        style={{
                                            display: "grid",
                                            gridTemplateColumns: narrow
                                                ? "1fr"
                                                : "1fr 1fr",
                                            gap: 16,
                                        }}
                                    >
                                        <div
                                            data-first-error={
                                                errors.email ? true : undefined
                                            }
                                        >
                                            <RegInput
                                                id="reg-email"
                                                label={tr("Email", "Email")}
                                                type="email"
                                                placeholder={tr(
                                                    "you@email.com",
                                                    "te@email.hu",
                                                )}
                                                value={form.email}
                                                onChange={(e) =>
                                                    setField(
                                                        "email",
                                                        e.target.value,
                                                    )
                                                }
                                                error={errors.email}
                                                errorMsg={tr(
                                                    "Enter a valid email.",
                                                    "Adj meg egy érvényes emailt.",
                                                )}
                                            />
                                        </div>
                                        <div
                                            data-first-error={
                                                errors.phone ? true : undefined
                                            }
                                        >
                                            <RegInput
                                                id="reg-phone"
                                                label={tr(
                                                    "Phone number",
                                                    "Telefonszám",
                                                )}
                                                type="tel"
                                                placeholder="+36 30 123 4567"
                                                value={form.phone}
                                                onChange={(e) =>
                                                    setField(
                                                        "phone",
                                                        e.target.value,
                                                    )
                                                }
                                                error={errors.phone}
                                                errorMsg={tr(
                                                    "Enter your phone number.",
                                                    "Add meg a telefonszámod.",
                                                )}
                                            />
                                        </div>
                                    </div>

                                    <CategoryPicker
                                        category={category}
                                        setCategory={setCategory}
                                        error={errors.category}
                                    />

                                    <SportsMultiSelect
                                        sports={sports}
                                        toggleSport={toggleSport}
                                        msOpen={msOpen}
                                        setMsOpen={setMsOpen}
                                        msRef={msRef}
                                        error={errors.sports}
                                    />

                                    <div
                                        data-first-error={
                                            errors.city ? true : undefined
                                        }
                                    >
                                        <RegInput
                                            id="reg-city"
                                            label={tr(
                                                "City / service area",
                                                "Város / működési terület",
                                            )}
                                            placeholder={tr(
                                                "e.g. Budapest, District 3",
                                                "pl. Budapest, III. kerület",
                                            )}
                                            value={form.city}
                                            onChange={(e) =>
                                                setField("city", e.target.value)
                                            }
                                            error={errors.city}
                                            errorMsg={tr(
                                                "Enter your service area.",
                                                "Add meg a működési területed.",
                                            )}
                                        />
                                    </div>

                                    <div>
                                        <label
                                            htmlFor="reg-bio"
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 7,
                                                fontFamily: FB,
                                                fontWeight: 700,
                                                fontSize: 13.5,
                                                color: SB.ink800,
                                                marginBottom: 8,
                                            }}
                                        >
                                            {tr(
                                                "Short bio",
                                                "Rövid bemutatkozás",
                                            )}
                                            <span
                                                style={{
                                                    fontWeight: 600,
                                                    fontSize: 11.5,
                                                    color: SB.ink400,
                                                    background: SB.ink100,
                                                    padding: "2px 8px",
                                                    borderRadius: 999,
                                                }}
                                            >
                                                {tr("Optional", "Opcionális")}
                                            </span>
                                        </label>
                                        <textarea
                                            id="reg-bio"
                                            value={form.bio}
                                            onChange={(e) =>
                                                setField("bio", e.target.value)
                                            }
                                            placeholder={tr(
                                                "1–2 sentences about who you help and how.",
                                                "1–2 mondat arról, kinek és miben segítesz.",
                                            )}
                                            style={{
                                                width: "100%",
                                                fontFamily: FB,
                                                fontWeight: 500,
                                                fontSize: 16,
                                                color: SB.ink900,
                                                background: SB.ink50,
                                                border:
                                                    "1.5px solid " + SB.ink200,
                                                borderRadius: 12,
                                                padding: "13px 15px",
                                                outline: "none",
                                                resize: "vertical",
                                                minHeight: 84,
                                                lineHeight: 1.45,
                                                boxSizing: "border-box",
                                            }}
                                            onFocus={(e) => {
                                                e.target.style.borderColor =
                                                    SB.blue;
                                                e.target.style.background =
                                                    "white";
                                            }}
                                            onBlur={(e) => {
                                                e.target.style.borderColor =
                                                    SB.ink200;
                                                e.target.style.background =
                                                    SB.ink50;
                                            }}
                                        />
                                    </div>

                                    <RegInput
                                        id="reg-link"
                                        label={tr(
                                            "Instagram / website",
                                            "Instagram / weboldal",
                                        )}
                                        opt={tr("Optional", "Opcionális")}
                                        placeholder={tr(
                                            "@instagram or https://…",
                                            "@instagram vagy https://…",
                                        )}
                                        value={form.link}
                                        onChange={(e) =>
                                            setField("link", e.target.value)
                                        }
                                    />

                                    <div>
                                        <label
                                            htmlFor="reg-source"
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 7,
                                                fontFamily: FB,
                                                fontWeight: 700,
                                                fontSize: 13.5,
                                                color: SB.ink800,
                                                marginBottom: 8,
                                            }}
                                        >
                                            {tr(
                                                "How did you hear about us?",
                                                "Honnan hallottál rólunk?",
                                            )}
                                            <span
                                                style={{
                                                    fontWeight: 600,
                                                    fontSize: 11.5,
                                                    color: SB.ink400,
                                                    background: SB.ink100,
                                                    padding: "2px 8px",
                                                    borderRadius: 999,
                                                }}
                                            >
                                                {tr("Optional", "Opcionális")}
                                            </span>
                                        </label>
                                        <select
                                            id="reg-source"
                                            value={form.source}
                                            onChange={(e) =>
                                                setField(
                                                    "source",
                                                    e.target.value,
                                                )
                                            }
                                            style={{
                                                width: "100%",
                                                fontFamily: FB,
                                                fontWeight: 500,
                                                fontSize: 16,
                                                color: form.source
                                                    ? SB.ink900
                                                    : SB.ink400,
                                                background: SB.ink50,
                                                border:
                                                    "1.5px solid " + SB.ink200,
                                                borderRadius: 12,
                                                padding: "13px 15px",
                                                outline: "none",
                                                appearance: "none",
                                                cursor: "pointer",
                                                boxSizing: "border-box",
                                            }}
                                        >
                                            <option value="">
                                                {tr("Choose…", "Válassz…")}
                                            </option>
                                            {sourceOptions.map((o) => (
                                                <option key={o} value={o}>
                                                    {o}
                                                </option>
                                            ))}
                                        </select>
                                    </div>

                                    {submitError && (
                                        <div
                                            style={{
                                                display: "flex",
                                                alignItems: "center",
                                                gap: 6,
                                                color: "#DC2626",
                                                fontSize: 13,
                                                fontWeight: 700,
                                            }}
                                        >
                                            <WIcon
                                                name="alertTriangle"
                                                size={14}
                                            />{" "}
                                            {submitError}
                                        </div>
                                    )}

                                    <button
                                        type="submit"
                                        disabled={submitting}
                                        style={{
                                            width: "100%",
                                            border: "none",
                                            cursor: submitting
                                                ? "default"
                                                : "pointer",
                                            background: submitting
                                                ? SB.ink300
                                                : SB.blue,
                                            color: "white",
                                            borderRadius: 14,
                                            padding: 17,
                                            fontFamily: FB,
                                            fontWeight: 800,
                                            fontSize: 16.5,
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                            gap: 9,
                                            boxShadow: submitting
                                                ? "none"
                                                : "0 10px 24px rgba(22,82,240,.3)",
                                        }}
                                    >
                                        {submitting
                                            ? tr("Sending…", "Küldés…")
                                            : tr(
                                                  "Apply as a coach",
                                                  "Jelentkezem edzőként",
                                              )}
                                        {!submitting && (
                                            <WIcon name="arrow" size={19} />
                                        )}
                                    </button>
                                    <div
                                        style={{
                                            textAlign: "center",
                                            fontSize: 12.5,
                                            color: SB.ink400,
                                            fontWeight: 600,
                                        }}
                                    >
                                        {tr(
                                            "Applying isn’t a commitment — you can withdraw anytime.",
                                            "A jelentkezés nem kötelezettség — bármikor visszaléphetsz.",
                                        )}
                                    </div>
                                </form>
                            </section>
                        )}
                    </div>
                </Container>
            </Section>
        </div>
    );
}

// /clubs is a legacy URL for the same audience as /helyszineknek — redirect
// so old links/bookmarks keep working without a second copy of the page.
function RedirectPage({ to }) {
    React.useEffect(() => {
        history.replaceState(null, "", to);
        window.dispatchEvent(new PopStateEvent("popstate"));
    }, [to]);
    return null;
}

// ════════════════════════ ROUTER ════════════════════════
const ROUTES = {
    "/": { id: "home", comp: HomePage },
    "/discover": { id: "discover", comp: DiscoverPage },
    "/helyszineknek": { id: "helyszineknek", comp: ClubsPage },
    "/clubs": {
        id: "clubs-redirect",
        comp: RedirectPage,
        props: { to: "/helyszineknek" },
    },
    "/edzoknek": { id: "edzoknek", comp: EdzoknekPage },
    "/edzoknek/register": {
        id: "edzoknek-register",
        comp: EdzoknekRegisterPage,
    },
    "/blog": { id: "blog", comp: BlogPage },
    "/about": { id: "about", comp: AboutPage },
    "/download": { id: "download", comp: DownloadPage },
    "/terms": { id: "terms", comp: TermsPage },
    "/privacy": { id: "privacy", comp: PrivacyPage },
    "/impresszum": { id: "impresszum", comp: ImpresszumPage },
};

function navigate(to) {
    history.pushState(null, "", to);
    window.dispatchEvent(new PopStateEvent("popstate"));
}

function useRoute() {
    const get = () => window.location.pathname.replace(/\/$/, "") || "/";
    const [path, setPath] = React.useState(get());
    React.useEffect(() => {
        const f = () => {
            setPath(get());
            scrollTop();
        };
        window.addEventListener("popstate", f);
        return () => window.removeEventListener("popstate", f);
    }, []);
    // Intercept all same-origin link clicks for client-side navigation
    React.useEffect(() => {
        function onClick(e) {
            const a = e.target.closest("a");
            if (!a) return;
            const href = a.getAttribute("href");
            if (
                !href ||
                href.startsWith("mailto:") ||
                href.startsWith("http") ||
                href.startsWith("//")
            )
                return;
            // /app is the separate web app (its own index.html) — let the browser do a
            // full navigation instead of intercepting it into the marketing router.
            if (
                href === "/app" ||
                href.startsWith("/app/") ||
                href.startsWith("/app?")
            )
                return;
            e.preventDefault();
            navigate(href);
        }
        document.addEventListener("click", onClick);
        return () => document.removeEventListener("click", onClick);
    }, []);
    return path;
}

function Root() {
    const path = useRoute();
    // Re-render the whole tree when the language changes (see i18n.jsx).
    const [, force] = React.useReducer((x) => x + 1, 0);
    React.useEffect(() => {
        window.__onLangChange = () => force();
        return () => {
            window.__onLangChange = null;
        };
    }, []);
    const blogSlugMatch = path.match(/^\/blog\/([^/]+)$/);
    // comp must stay a stable function reference (BlogPostPage itself, not a
    // fresh closure per render) — a new identity on every Root() re-render
    // (e.g. the language-toggle force()) would make React remount it and
    // re-run its fetch effect instead of just re-rendering with new __lang.
    const route = blogSlugMatch
        ? { id: "blog", comp: BlogPostPage, props: { slug: blogSlugMatch[1] } }
        : ROUTES[path] || ROUTES["/"];
    const Page = route.comp;
    return (
        <div style={{ background: "white", minHeight: "100vh" }}>
            <MarketingNav current={route.id} />
            <Page {...(route.props || {})} />
            <Footer />
        </div>
    );
}

Object.assign(window, {
    PageHero,
    ClubsPage,
    ClubStatBand,
    PricingPage,
    PricingFAQ,
    DiscoverPage,
    AboutPage,
    BlogPage,
    BlogPostPage,
    DownloadPage,
    TermsPage,
    PrivacyPage,
    ImpresszumPage,
    RedirectPage,
    EdzoknekPage,
    EdzoknekRegisterPage,
    ROUTES,
    navigate,
    useRoute,
    Root,
});

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