/* Pages for Viktor Zaharov site — extras: Free Guide, Privacy, Terms, Cookie banner */
const { useState: useStateX, useEffect: useEffectX } = React;

/* ============ FREE GUIDE LANDING ============ */
function FreeGuidePage({ setPage, mobile }) {
  return (
    <div className="fade-in">
      <section style={{ padding: mobile ? '48px 0' : '96px 0', background: 'var(--bg)' }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 18 }}>FREE GUIDE · PDF · 24 PAGES</div>
          <h1 className="display" style={{ fontSize: mobile ? 'clamp(36px, 10vw, 56px)' : 'clamp(56px, 7vw, 100px)', margin: 0, maxWidth: 1100 }}>
            The Free Guide<br />to <span style={{ color: 'var(--orange)' }}>Time Management.</span>
          </h1>
          <p style={{ color: 'var(--text-mute)', fontSize: mobile ? 17 : 21, lineHeight: 1.5, marginTop: 28, maxWidth: 640 }}>
            The exact frameworks I use to balance long-haul trucking, the gym, YouTube, coaching, and a real life — without burning out. Built from the road, tested for years.
          </p>
        </div>
      </section>

      <section style={{ padding: mobile ? '0 0 60px' : '0 0 120px', background: 'var(--bg)' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.1fr 1fr', gap: mobile ? 32 : 60, alignItems: 'flex-start' }}>
          <div>
            <SectionHead kicker="What's inside" title={<>The system, not the slogans.</>} />
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18 }}>
              {[
                ['01', 'Build your week backwards.', 'Start from your commitments, not your inbox. The single planning move that ends 80% of weekly chaos.'],
                ['02', 'The non-negotiables list.', 'Three reps that get done before the day starts — or the day doesn\'t count.'],
                ['03', 'Energy, not minutes.', 'Match the hardest work to your real peak hour. Most people schedule it backwards.'],
                ['04', 'The 6 PM cutoff.', 'How I shut work down on the road — even when there\'s always one more email — without guilt.'],
                ['05', 'Weekly review, 12 minutes.', 'The exact checklist I run every Sunday. It\'s short on purpose.']
              ].map(([n, t, d]) => (
                <li key={n} style={{ display: 'grid', gridTemplateColumns: '48px 1fr', gap: 16, paddingBottom: 18, borderBottom: '1px solid var(--line)' }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--orange)', letterSpacing: '0.16em', paddingTop: 4 }}>{n}</div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: mobile ? 17 : 19, letterSpacing: '-0.01em', marginBottom: 6 }}>{t}</div>
                    <div style={{ color: 'var(--text-mute)', fontSize: 14.5, lineHeight: 1.55 }}>{d}</div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ position: mobile ? 'static' : 'sticky', top: 96 }}>
            <div className="card" style={{ padding: mobile ? 24 : 32 }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>GET THE GUIDE · FREE</div>
              <h2 className="display" style={{ fontSize: mobile ? 26 : 30, letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0, marginBottom: 14 }}>
                One link. No paywall.<br />Read it on the road.
              </h2>
              <p style={{ color: 'var(--text-mute)', fontSize: 14.5, lineHeight: 1.55, marginTop: 0, marginBottom: 22 }}>
                The PDF opens in a new tab. Save it to your phone, your truck, wherever you do the work.
              </p>
              {FREE_GUIDE_LIVE ? (
                <a href={FREE_GUIDE_PDF} target="_blank" rel="noreferrer" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
                  Open the guide (PDF) <span className="arrow">↗</span>
                </a>
              ) : (
                <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setPage('contact')}>
                  Email me for the guide <span className="arrow">→</span>
                </button>
              )}
              <div style={{ display: 'flex', gap: 8, marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--text-dim)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>~5 MIN READ · NO EMAIL REQUIRED</div>
              </div>
            </div>
            <div style={{ marginTop: 18, padding: 20, border: '1px solid var(--line-strong)', borderRadius: 14, background: 'var(--bg-2)' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>Want more?</div>
              <p style={{ margin: 0, marginBottom: 14, color: 'var(--text-mute)', fontSize: 14, lineHeight: 1.55 }}>
                Get the guide, then book a free discovery call. We'll map your actual week — not a template version.
              </p>
              <button className="btn btn-ghost btn-sm" onClick={() => setPage('contact')}>Book a call <span className="arrow">→</span></button>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA setPage={setPage} mobile={mobile} />
    </div>
  );
}

/* ============ PRIVACY ============ */
function PrivacyPage({ setPage, mobile }) {
  return (
    <div className="fade-in">
      <section style={{ padding: mobile ? '48px 0 32px' : '96px 0 48px', background: 'var(--bg)' }}>
        <div className="wrap" style={{ maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>LEGAL · UPDATED MAY 2026</div>
          <h1 className="display" style={{ fontSize: mobile ? 'clamp(36px, 10vw, 48px)' : 'clamp(48px, 6vw, 80px)', margin: 0 }}>Privacy Policy</h1>
        </div>
      </section>
      <section style={{ padding: mobile ? '0 0 80px' : '0 0 120px', background: 'var(--bg)' }}>
        <div className="wrap" style={{ maxWidth: 820 }}>
          <LegalProse>
            <p><strong>Plain English version:</strong> I collect the bare minimum needed to coach you, run a website, and stay in touch if you want me to. I don't sell your data. I don't share it with people you didn't agree to. If you want me to delete what I have on you, email me and it's gone.</p>

            <h2>What I collect</h2>
            <p>When you fill out a form on this site (contact form, newsletter signup, or a coaching enquiry), I collect: your name, email address, and whatever you typed into the message field. If you book a call through Acuity Scheduling, Acuity also collects your timezone and the appointment slot you picked.</p>
            <p>When you visit the site, my hosting provider may log standard request data (IP, user agent, referring page, time of visit) the way every web server does. I don't run third-party analytics tracking, ad pixels, or behavioural fingerprinting on this site.</p>

            <h2>Why I collect it</h2>
            <p>Three reasons, and only three: (1) to reply to your enquiry, (2) to deliver the coaching, retreat, or guide you asked for, and (3) — only if you explicitly opted in — to send you the email newsletter. That's it.</p>

            <h2>Who I share it with</h2>
            <p>Service providers I use to run the business: Acuity Scheduling (bookings), Formspree (contact form delivery), Squarespace (email newsletter and the file hosting for the free guide), and my email provider (Proton Mail). Each of them has their own privacy policy and only sees the part of your data they need to do their job.</p>
            <p>I do not sell your data. I do not share it with advertisers. I will only disclose your data if compelled by law.</p>

            <h2>How long I keep it</h2>
            <p>Contact form messages: as long as I might reasonably need to follow up — typically up to 2 years, then deleted. Newsletter subscribers: until you unsubscribe (there's a link at the bottom of every email). Active coaching client records: for the duration of the engagement plus 2 years for tax and accounting purposes.</p>

            <h2>Your rights</h2>
            <p>You can email me at <a href="mailto:viktorzaharov@pm.me" style={{ color: 'var(--orange)' }}>viktorzaharov@pm.me</a> and ask me to: (a) show you everything I have on you, (b) correct anything that's wrong, (c) delete it all. I'll do it within 30 days. If you're in Canada, you also have the rights granted under PIPEDA. If you're in the EU/UK, you have the rights granted under GDPR/UK GDPR.</p>

            <h2>Cookies</h2>
            <p>I use one technical cookie to remember whether you've already dismissed the cookie banner — that's the only one. I don't use tracking cookies, advertising cookies, or analytics cookies on this site.</p>

            <h2>Contact</h2>
            <p>Questions about privacy? Email <a href="mailto:viktorzaharov@pm.me" style={{ color: 'var(--orange)' }}>viktorzaharov@pm.me</a>. The legal entity behind this site is Viktor Zaharov, operating from North York, Ontario, Canada.</p>
          </LegalProse>
        </div>
      </section>
    </div>
  );
}

/* ============ TERMS ============ */
function TermsPage({ setPage, mobile }) {
  return (
    <div className="fade-in">
      <section style={{ padding: mobile ? '48px 0 32px' : '96px 0 48px', background: 'var(--bg)' }}>
        <div className="wrap" style={{ maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>LEGAL · UPDATED MAY 2026</div>
          <h1 className="display" style={{ fontSize: mobile ? 'clamp(36px, 10vw, 48px)' : 'clamp(48px, 6vw, 80px)', margin: 0 }}>Terms of Service</h1>
        </div>
      </section>
      <section style={{ padding: mobile ? '0 0 80px' : '0 0 120px', background: 'var(--bg)' }}>
        <div className="wrap" style={{ maxWidth: 820 }}>
          <LegalProse>
            <p><strong>Plain English version:</strong> Use the site at your own risk. The coaching is coaching — not therapy, not medical advice, not legal or financial advice. You're responsible for the choices you make. Be decent to me and I'll be decent to you.</p>

            <h2>Who's running this</h2>
            <p>This site (viktorzaharov.com) and the coaching services described on it are operated by Viktor Zaharov, a sole proprietor based in North York, Ontario, Canada. Contact: <a href="mailto:viktorzaharov@pm.me" style={{ color: 'var(--orange)' }}>viktorzaharov@pm.me</a>.</p>

            <h2>What the coaching is — and what it isn't</h2>
            <p>My coaching is direct, action-oriented, no-fluff guidance based on my personal experience as a long-haul trucker, content creator, and coach. It is <strong>not</strong>: medical advice, mental-health treatment, therapy, legal counsel, tax advice, financial planning, or a substitute for any licensed professional service. If you are in crisis or dealing with a serious mental-health situation, please contact a qualified professional or a crisis line in your country.</p>

            <h2>Results</h2>
            <p>Testimonials on this site reflect what specific clients experienced — they are not promises or guarantees of your results. Your outcome depends on what you do with what we talk about. I'll show up fully. The rest is on you.</p>

            <h2>Bookings, cancellations, and refunds</h2>
            <p>Discovery calls are free — cancel anytime. Paid engagements: terms (including refund and reschedule policy) are confirmed in writing before payment. If you have an issue with a paid engagement, email me and we'll work it out.</p>

            <h2>Use of the site</h2>
            <p>You're welcome to read, share, and quote anything on this site with attribution. Don't copy entire pages and pass them off as your own. Don't try to break things or scrape the site abusively. Don't impersonate me or my clients.</p>

            <h2>Intellectual property</h2>
            <p>The writing, photography, podcast, course materials, and brand assets on this site are mine (or used with permission). The "Viktor Timewolf" brand is mine. Don't use the brand to imply endorsement or partnership without my written go-ahead.</p>

            <h2>Limitation of liability</h2>
            <p>To the maximum extent allowed by law, I'm not liable for any indirect, incidental, or consequential losses you might experience from using this site or my coaching. My total liability for anything that goes wrong is capped at the amount you paid me for the specific engagement in question.</p>

            <h2>Changes</h2>
            <p>I may update these terms occasionally. The "updated" date at the top reflects the last change. Material changes will be flagged in my email newsletter if you've subscribed.</p>

            <h2>Governing law</h2>
            <p>These terms are governed by the laws of the Province of Ontario, Canada. Disputes go to the courts of Ontario.</p>

            <h2>Contact</h2>
            <p>Questions about these terms? Email <a href="mailto:viktorzaharov@pm.me" style={{ color: 'var(--orange)' }}>viktorzaharov@pm.me</a>.</p>
          </LegalProse>
        </div>
      </section>
    </div>
  );
}

/* Shared prose styling for legal pages */
function LegalProse({ children }) {
  return (
    <div style={{ color: 'var(--text)', fontSize: 16, lineHeight: 1.7, fontFeatureSettings: '"ss01","cv11"' }} className="legal-prose">
      <style>{`
        .legal-prose h2 { font-family:'Geist',sans-serif; font-weight:700; font-size:24px; letter-spacing:-0.02em; margin:40px 0 12px; color:var(--text); }
        .legal-prose p { margin:0 0 16px; color:var(--text-mute); text-wrap:pretty; }
        .legal-prose p strong { color:var(--text); font-weight:600; }
        .legal-prose a:hover { text-decoration:underline; }
      `}</style>
      {children}
    </div>
  );
}

/* ============ COOKIE BANNER ============ */
// Single technical cookie to remember dismissal. No tracking.
function CookieBanner() {
  const STORAGE_KEY = 'vz_cookie_ack_v1';
  const [dismissed, setDismissed] = useStateX(() => {
    try { return localStorage.getItem(STORAGE_KEY) === '1'; } catch (e) { return true; }
  });
  if (dismissed) return null;
  const acknowledge = () => {
    try { localStorage.setItem(STORAGE_KEY, '1'); } catch (e) {}
    setDismissed(true);
  };
  return (
    <div
      role="region"
      aria-label="Cookie notice"
      style={{
        position: 'fixed', bottom: 16, left: 16, right: 16,
        maxWidth: 640, margin: '0 auto', zIndex: 90,
        background: 'rgba(18,17,16,0.96)', backdropFilter: 'blur(14px)',
        border: '1px solid var(--line-strong)', borderRadius: 14,
        padding: '14px 18px',
        display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 12,
        boxShadow: '0 24px 60px -16px rgba(0,0,0,0.6)'
      }}>
      <div style={{ fontSize: 13.5, lineHeight: 1.5, color: 'var(--text-mute)', flex: '1 1 280px', minWidth: 0 }}>
        I use one technical cookie to remember you saw this. No tracking, no analytics, no ads.{' '}
        <a href="#privacy" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent('vz-goto', { detail: 'privacy' })); }} style={{ color: 'var(--orange)', textDecoration: 'underline', textUnderlineOffset: 2 }}>Privacy policy</a>.
      </div>
      <button className="btn btn-primary btn-sm" onClick={acknowledge} style={{ flex: '0 0 auto' }}>OK</button>
    </div>
  );
}

Object.assign(window, { FreeGuidePage, PrivacyPage, TermsPage, CookieBanner });