/* eslint-disable */

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "rotate_hero": true,
  "show_comparison": true,
  "hero_cta_order": "create_first"
}/*EDITMODE-END*/;

function App() {
  const referralCode = React.useMemo(() => {
    try {
      const ref = new URLSearchParams(window.location.search).get('ref') || '';
      return ref.trim().toUpperCase();
    } catch {
      return '';
    }
  }, []);

  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULS);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [editMode, setEditMode] = React.useState(false);
  const [playbookOpen, setPlaybookOpen] = React.useState(false);

  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setEditMode(true);
      if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const setKey = (k, v) => {
    setTweaks(prev => {
      const next = { ...prev, [k]: v };
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
      return next;
    });
  };

  const openPlaybook = () => setPlaybookOpen(true);
  const onCreateAccount = () => { window.location.href = '/signup'; };
  const onStartPlus = () => { window.location.href = '/app/plus'; };

  return (
    <main>
      <Nav onCreateAccount={onCreateAccount} />

      <Hero
        rotate={tweaks.rotate_hero}
        onCreateAccount={onCreateAccount}
        onStartPlus={onStartPlus}
        referralCode={referralCode}
      />

      <PromiseStrip />

      <WhatIs />

      <MissionsBanner />

      <div className="container-1120">
        <FeatureRow
          eyebrow="Custom curriculum"
          title="Built for your team."
          titleAccent="Not a generic syllabus."
          body="You fill out a short onboarding form. Within 48 hours, your first custom missions are live — written around your team&apos;s role, tools, and real deliverables. New modules unlock quarterly so your capabilities compound instead of going stale."
          bullets={[
            'Missions use your team&apos;s real deliverables — not AI toy problems',
            'New modules unlock quarterly',
            'Tracks tailored by function (ops, marketing, finance, CX)',
            'Full track visibility for admins',
          ]}
          mockOnLeft={false}
          mock={<CurriculumMock />}
        />

        <FeatureRow
          eyebrow="Real practitioners"
          title="Every team member can book a 1-on-1 with"
          titleAccent="a senior practitioner."
          body="Not a general AI tutorial. A 30-minute working session on whatever they&apos;re stuck on today — a report that&apos;s taking too long, a prompt that isn&apos;t working, a workflow that needs rebuilding. They walk away with prompts they&apos;ll actually reuse."
          bullets={[
            'Any topic — bring your actual work',
            '30-minute focused sessions',
            'Walk away with prompts you&apos;ll actually reuse',
            'Always-on inbox access between sessions',
          ]}
          mockOnLeft={true}
          mock={<PractitionersMock />}
        />

        <FeatureRow
          eyebrow="Certification"
          title="Earned,"
          titleAccent="not just completed."
          body="Team members submit a portfolio of real work — the missions they&apos;ve shipped using AI. The platform uses AI grading to gauge readiness between missions; certifications are issued <strong>only</strong> after a ShiftWorks practitioner reviews the portfolio. A sign-off from a real person, not an automated score."
          bullets={[
            'AI grading handles pacing between missions',
            'Practitioners issue every certification personally',
            'Notes and suggestions attached to every review',
            'Team members keep certifications if you cancel',
          ]}
          mockOnLeft={false}
          mock={<CertificationMock />}
        />

        <FeatureRow
          eyebrow="Live sessions"
          title="Live sessions,"
          titleAccent="scheduled all year round."
          body="Ongoing, facilitated live sessions that every Plus team can drop into. New topics across the year — never a repeat. Open to anyone on a Plus team across the Praxis community. "
          bullets={[
            'AI-Native Workflow — RCTC framework, prompt foundations',
            'Workflow Acceleration — multi-step automation, chaining',
            'Advanced Prompting — personas, structured output, team scale',
            'AI Strategy &amp; Governance — standards, culture, what&apos;s next',
          ]}
          mockOnLeft={true}
          mock={<LiveSessionsMock />}
        />

        <FeatureRow
          eyebrow="Private workshops"
          title="One private workshop per quarter,"
          titleAccent="custom to your org."
          body="Four times a year, every Plus team gets a private quarterly workshop — scoped to your team&apos;s maturity, your workflows, and what you want to get better at next. Facilitated by a ShiftWorks practitioner, built around your actual work."
          bullets={[
            'Quarterly cadence — four custom workshops a year',
            'Facilitated by a ShiftWorks practitioner',
            'Scoped to your team&apos;s maturity and goals',
            'Fully private — not a live session repeat',
          ]}
          mockOnLeft={false}
          mock={<BookingMock />}
        />

        <FeatureRow
          eyebrow="Team visibility"
          title="See where your whole team stands,"
          titleAccent="in real time."
          body="Admins see who&apos;s certified, who&apos;s mid-track, who hasn&apos;t started. No chasing people down. No guessing at adoption. Just a clear view of your org&apos;s AI readiness, updated every time someone ships a mission."
          bullets={[
            'Real-time progress per team member',
            'Certification status and module completion',
            'Session history and upcoming bookings',
            'Org-wide adoption dashboard for admins',
          ]}
          mockOnLeft={true}
          mock={<TeamOverviewMock />}
          bordered={false}
        />
      </div>

      <PlaybookBand onGetPlaybook={openPlaybook} />

      <Pricing onCreateAccount={onCreateAccount} onStartPlus={onStartPlus} />

      {tweaks.show_comparison && (
        <section className="container-1120" style={{ paddingTop: 64 }}>
          <ComparisonTable />
        </section>
      )}

      <FAQ />

      <FinalCTA
        onCreateAccount={onCreateAccount}
        onStartPlus={onStartPlus}
        onGetPlaybook={openPlaybook}
      />

      <Footer />

      <PlaybookModal open={playbookOpen} onClose={() => setPlaybookOpen(false)} />

      {/* Tweaks panel */}
      {editMode && !tweaksOpen && (
        <button className="tweaks-toggle" onClick={() => setTweaksOpen(true)} aria-label="Open tweaks">⚙</button>
      )}
      {editMode && tweaksOpen && (
        <div className="tweaks-panel">
          <header>
            <h4>Tweaks</h4>
            <button onClick={() => setTweaksOpen(false)} style={{ background: 'none', border: 'none', fontSize: 16, cursor: 'pointer', color: 'var(--muted-500)' }}>×</button>
          </header>
          <div className="body">
            <div className="tweak-group">
              <label>Hero headline</label>
              <div className="tweak-choices">
                <button className={`tweak-choice ${tweaks.rotate_hero ? 'active' : ''}`} onClick={() => setKey('rotate_hero', true)}>Rotate 4 lines</button>
                <button className={`tweak-choice ${!tweaks.rotate_hero ? 'active' : ''}`} onClick={() => setKey('rotate_hero', false)}>Static only</button>
              </div>
            </div>
            <div className="tweak-group">
              <label>Comparison table (P2)</label>
              <div className="tweak-choices">
                <button className={`tweak-choice ${tweaks.show_comparison ? 'active' : ''}`} onClick={() => setKey('show_comparison', true)}>Show</button>
                <button className={`tweak-choice ${!tweaks.show_comparison ? 'active' : ''}`} onClick={() => setKey('show_comparison', false)}>Hide</button>
              </div>
            </div>
            <div style={{ fontSize: 11, color: 'var(--muted-400)', lineHeight: 1.5, borderTop: '1px solid var(--muted-200)', paddingTop: 10 }}>
              Changes persist on reload.
            </div>
          </div>
        </div>
      )}
    </main>
  );
}

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