/* ─── Home Page — copy from Grant Purdy's edited Opening page (May 2026) ─── */

const HomePage = ({ onNavigate, tweaks }) => {
  const isMobile = useMediaQuery(680);
  const heroStyle = tweaks?.heroStyle || 'bold';
  const testimonialStyle = tweaks?.testimonialStyle || 'rules';

  const s = {
    hero: {
      paddingTop: isMobile ? 'var(--space-9)' : 'var(--space-10)',
      paddingBottom: isMobile ? 'var(--space-8)' : 'var(--space-9)',
    },
    h1: {
      fontFamily: 'var(--font-serif-display)',
      fontSize: heroStyle === 'bold'
        ? (isMobile ? '2.25rem' : 'clamp(2.25rem, 4.5vw, 3.25rem)')
        : (isMobile ? '1.85rem' : 'clamp(2rem, 4.5vw, 2.75rem)'),
      fontWeight: 500,
      lineHeight: 1.12,
      letterSpacing: 'var(--tracking-tight)',
      color: 'var(--fg-primary)',
      margin: '0 0 var(--space-5) 0',
      maxWidth: heroStyle === 'bold' ? 'none' : 'none',
      textWrap: 'balance',
    },
    subhead: {
      fontFamily: 'var(--font-serif)',
      fontSize: isMobile ? 'var(--text-base)' : 'var(--text-lg)',
      lineHeight: 'var(--leading-normal)',
      color: 'var(--fg-secondary)',
      margin: '0 0 var(--space-7) 0',
      maxWidth: 'var(--measure)',
      textWrap: 'pretty',
    },
    intro: {
      fontFamily: 'var(--font-serif)',
      fontSize: 'var(--text-base)',
      lineHeight: 'var(--leading-relaxed)',
      color: 'var(--fg-secondary)',
      margin: '0 0 var(--space-5) 0',
      maxWidth: 'var(--measure)',
      textWrap: 'pretty',
    },
    sectionSpacing: {
      paddingTop: isMobile ? 'var(--space-7)' : 'var(--space-9)',
      paddingBottom: isMobile ? 'var(--space-7)' : 'var(--space-9)',
    },
    origin: {
      fontFamily: 'var(--font-serif)',
      fontSize: 'var(--text-base)',
      lineHeight: 'var(--leading-relaxed)',
      color: 'var(--fg-secondary)',
      margin: 0,
      maxWidth: 'var(--measure)',
      textWrap: 'pretty',
    },
  };

  /* ─── Decision Record preview component ─── */
  const DocPreview = () => React.createElement('div', {
    style: {
      position: 'relative',
      maxWidth: isMobile ? '100%' : '560px',
      margin: '0 auto',
    }
  },
    React.createElement('div', {
      style: {
        background: '#fffefa',
        border: '1px solid var(--border)',
        boxShadow: '0 4px 24px rgba(26,26,26,0.08), 0 1px 3px rgba(26,26,26,0.04)',
        padding: isMobile ? 'var(--space-5)' : 'var(--space-6) var(--space-7)',
        transform: isMobile ? 'none' : 'rotate(-1deg)',
        transformOrigin: 'center center',
        overflow: 'hidden',
        position: 'relative',
        fontFamily: "'IBM Plex Serif', 'Georgia', serif",
      }
    },
      /* Header */
      React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '6px' } },
        React.createElement('div', {
          style: { fontFamily: 'system-ui, sans-serif', fontSize: '8px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.12em', color: '#1e3a5f' }
        }, 'Decision Record'),
        React.createElement('div', {
          style: { fontFamily: 'system-ui, sans-serif', fontSize: '8px', color: '#9a9a94' }
        }, 'Ref: DEC-2026-042'),
      ),
      React.createElement('div', {
        style: { fontSize: isMobile ? '14px' : '16px', fontWeight: 600, lineHeight: 1.3, letterSpacing: '-0.01em', marginBottom: '4px', color: '#1a1a1a' }
      }, 'Launching a Peanut Butter Product'),
      React.createElement('div', { style: { height: '1px', background: '#d8d4ca', margin: '10px 0' } }),

      /* Section: Assumptions */
      React.createElement('div', {
        style: { fontSize: isMobile ? '10px' : '11px', fontWeight: 600, marginBottom: '8px', display: 'flex', gap: '6px', alignItems: 'baseline', color: '#1a1a1a' }
      },
        React.createElement('span', { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: '10px', color: '#9a9a94' } }, '6'),
        'Assumptions',
      ),
      /* Assumption rows */
      ...[
        { text: 'Can produce to the quality standards required', sig: 'Critical', sigColor: '#8b3a2a', sigBg: 'rgba(139,58,42,0.1)' },
        { text: 'Major international competitors will not try to undercut', sig: 'Critical', sigColor: '#8b3a2a', sigBg: 'rgba(139,58,42,0.1)' },
        { text: 'There is a viable market for the product', sig: 'Important', sigColor: '#5b6a3b', sigBg: 'rgba(91,106,59,0.1)' },
      ].map((a, i) =>
        React.createElement('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '5px 0', borderBottom: '1px solid #e8e5dd', gap: '8px' } },
          React.createElement('span', { style: { fontSize: isMobile ? '10px' : '11px', lineHeight: 1.4, color: '#444', flex: 1 } }, a.text),
          React.createElement('span', {
            style: { fontFamily: 'system-ui, sans-serif', fontSize: '8px', fontWeight: 500, padding: '2px 6px', borderRadius: '2px', background: a.sigBg, color: a.sigColor, whiteSpace: 'nowrap', flexShrink: 0 }
          }, a.sig),
        )
      ),

      React.createElement('div', { style: { height: '1px', background: '#d8d4ca', margin: '12px 0 10px' } }),

      /* Section: Sufficient Certainty */
      React.createElement('div', {
        style: { fontSize: isMobile ? '10px' : '11px', fontWeight: 600, marginBottom: '6px', display: 'flex', gap: '6px', alignItems: 'baseline', color: '#1a1a1a' }
      },
        React.createElement('span', { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: '10px', color: '#9a9a94' } }, '9'),
        'Sufficient Certainty',
      ),
      React.createElement('div', {
        style: { fontSize: isMobile ? '10px' : '11px', lineHeight: 1.5, color: '#444', padding: '6px 8px', borderLeft: '2px solid #1e3a5f', background: 'rgba(30,58,95,0.04)', marginBottom: '8px' }
      },
        React.createElement('strong', { style: { fontWeight: 600 } }, 'Assessment: '),
        'Modify with secondary elements. The competitor-undercut assumption retains Critical character: high influence, low confidence. Supplier-diversification plan, competitor-response contingency, and quality-monitoring loop together convert a single low-confidence Critical into a managed exposure.'),

      React.createElement('div', { style: { height: '1px', background: '#d8d4ca', margin: '10px 0 8px' } }),

      /* Section: Monitoring snippet */
      React.createElement('div', {
        style: { fontSize: isMobile ? '10px' : '11px', fontWeight: 600, marginBottom: '4px', display: 'flex', gap: '6px', alignItems: 'baseline', color: '#1a1a1a' }
      },
        React.createElement('span', { style: { fontFamily: "'IBM Plex Mono', monospace", fontSize: '10px', color: '#9a9a94' } }, '11'),
        'Monitoring',
      ),
      React.createElement('div', {
        style: { fontSize: isMobile ? '9px' : '10px', lineHeight: 1.5, color: '#6b6b6b' }
      }, 'Quality: 99% first-pass yield, weekly → monthly. Competitors: market scan + retail audit, quarterly. Revenue: within ±20% of glide path, monthly.'),
    ),
    /* Caption */
    React.createElement('p', {
      style: {
        fontFamily: 'var(--font-sans)',
        fontSize: '12px',
        color: 'var(--fg-tertiary)',
        textAlign: 'center',
        marginTop: 'var(--space-3)',
        fontStyle: 'italic',
        transform: isMobile ? 'none' : 'rotate(-1deg)',
      }
    }, 'The Decision Record. This is what you leave with.'),
  );

  /* ─── Book cover component ─── */
  const BookCover = () => React.createElement('img', {
    src: 'assets/book-cover.jpg',
    alt: 'Deciding — A guide to even better decision-making, by Roger Estall and Grant Purdy',
    style: {
      width: isMobile ? '120px' : '150px',
      height: 'auto',
      flexShrink: 0,
      boxShadow: '2px 2px 12px rgba(26,26,26,0.10), 0 1px 3px rgba(26,26,26,0.06)',
      borderRadius: '2px',
    },
    loading: 'lazy',
  });

  return React.createElement('div', { style: { background: 'var(--bg-primary)' } },
    /* ─── Hero ─── */
    React.createElement(Section, { style: s.hero },
      heroStyle === 'bold' && React.createElement(Overline, { style: { marginBottom: 'var(--space-4)' } }, 'The Universal Decision-Making Method'),
      React.createElement('h1', { style: s.h1 }, 'Start making (even) better decisions'),
      React.createElement('p', { style: { ...s.subhead, textWrap: 'balance' } },
        'The method from ',
        React.createElement('em', null, 'Deciding'),
        ' ', React.createElement('span', { style: { whiteSpace: 'nowrap' } }, '(Estall and Purdy, 2020)'), ', helps us make more confident decisions — every time.'),
      heroStyle !== 'compact' && React.createElement(React.Fragment, null,
        React.createElement('p', { style: s.intro }, 'We all make decisions, all the time. However, we can improve our decision making and be more likely to achieve the outcomes we desire if we become more skilled in applying a universal method. In this way, we can gain a greater degree of informed confidence about the outcomes of our decisions.'),
        React.createElement('p', { style: s.intro }, 'This confidence cannot be achieved in a formulaic or procedurally rigid way. It requires thought and conscious reflection about how the decision is being made.'),
        React.createElement('p', { style: s.intro }, 'Confronting uncertainty in order to gain sufficient certainty of the outcome of each decision is an unavoidable part of deciding. But doing this well, is, well, not so universal.'),
        React.createElement('p', { style: s.intro }, 'All this is explained in Estall and Purdy’s practical jargon-free book and you can start following that universal process here and generate your own record of the decision you are facing and the process you went through to arrive at the final decision that ensures you have sufficient certainty of outcomes.'),
      ),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--space-4)', flexWrap: 'wrap' } },
        React.createElement(Button, {
          variant: 'primary',
          size: 'lg',
          onClick: () => window.location.href = 'https://walk.sufficientcertainty.com',
        }, 'Start a Walk'),
        React.createElement('a', {
          href: 'https://www.amazon.com/Deciding-guide-better-decision-making/dp/B086PSL6PS',
          target: '_blank',
          rel: 'noopener',
          style: {
            fontFamily: 'var(--font-sans)',
            fontSize: '14px',
            color: 'var(--fg-secondary)',
            textDecoration: 'underline',
            textUnderlineOffset: '0.15em',
            transition: 'color var(--duration-fast) var(--easing)',
            padding: '10px 0',
            display: 'inline-flex',
            alignItems: 'center',
            minHeight: '44px',
          },
        }, 'Read the book →'),
      ),
    ),

    React.createElement(Divider),

    /* ─── Decision Record Preview ─── */
    React.createElement(Section, { style: s.sectionSpacing },
      React.createElement(DocPreview),
    ),

    React.createElement(Divider),

    /* ─── Testimonial — single pullquote ─── */
    React.createElement(Section, { style: s.sectionSpacing },
      React.createElement('blockquote', {
        style: {
          fontFamily: 'var(--font-serif)',
          fontSize: isMobile ? '1.1rem' : '1.3rem',
          fontStyle: 'italic',
          lineHeight: 1.55,
          color: 'var(--fg-primary)',
          margin: '0 0 var(--space-5) 0',
          padding: 0,
          border: 'none',
          maxWidth: '55ch',
          textWrap: 'pretty',
        }
      },
        '“You’re not likely to love risk management when you’re done with ',
        React.createElement('em', { style: { fontStyle: 'normal' } }, 'Deciding'),
        ', however, and that’s all for the best. The book moves the conversation away from consultant-driven boardroom BS into a more practical, and infinitely more applicable, method that anyone can use.”'),
      React.createElement('span', {
        style: {
          fontFamily: 'var(--font-serif)',
          fontSize: '14px',
          color: 'var(--fg-tertiary)',
          display: 'block',
        }
      }, '— Christopher Paris, Founder & VP Operations, Oxebridge'),
    ),

    React.createElement(Divider),

    /* ─── Origin ─── */
    React.createElement(Section, { style: s.sectionSpacing },
      React.createElement(Overline, { style: { marginBottom: 'var(--space-4)' } }, 'Origin'),
      React.createElement('p', { style: s.origin },
        'The Universal Decision-Making Method is the work of Grant Purdy and the late Roger Estall — three decades of partnership across mining, finance, aviation and government, distilled and set down in ',
        React.createElement('em', null, 'Deciding'),
        ' in 2020, their last work together. This tool is built by Grant’s son, Jo, to keep the method in the hands of the people who need it: Deciders making one decision at a time, in plain English, without the millstone. It is not a software product wrapped around a book. It is the method, made conversational, with the book’s voice still in the room.'),
    ),

    React.createElement(Divider),

    /* ─── Book ─── */
    React.createElement(Section, { style: s.sectionSpacing },
      React.createElement('div', {
        style: {
          background: 'var(--bg-secondary)',
          border: '1px solid var(--border-light)',
          borderRadius: 'var(--radius-md)',
          padding: 'var(--space-6)',
          display: 'flex',
          gap: 'var(--space-6)',
          alignItems: isMobile ? 'center' : 'flex-start',
          flexDirection: isMobile ? 'column' : 'row',
        }
      },
        React.createElement(BookCover),
        React.createElement('div', {
          style: {
            display: 'flex',
            flexDirection: 'column',
            gap: 'var(--space-3)',
            flex: 1,
          }
        },
          React.createElement('p', {
            style: {
              fontFamily: 'var(--font-serif)',
              fontSize: '20px',
              fontWeight: 500,
              fontStyle: 'italic',
              color: 'var(--fg-primary)',
              margin: 0,
            }
          }, 'Deciding'),
          React.createElement('p', {
            style: {
              fontFamily: 'var(--font-serif)',
              fontSize: '15px',
              color: 'var(--fg-secondary)',
              lineHeight: 1.6,
              margin: 0,
            }
          }, 'By Roger Estall and Grant Purdy (2020). A practical guide to better decision making for leaders, set down in eight chapters and five appendices. 160 pages of the method, without jargon.'),
          React.createElement('a', {
            style: {
              fontFamily: 'var(--font-sans)',
              fontSize: '13px',
              fontWeight: 500,
              color: 'var(--accent)',
              textDecoration: 'underline',
              textUnderlineOffset: '0.15em',
              cursor: 'pointer',
              padding: '10px 0',
              display: 'inline-flex',
              alignItems: 'center',
              minHeight: '44px',
            },
            href: 'https://www.amazon.com/Deciding-guide-better-decision-making/dp/B086PSL6PS',
            target: '_blank',
            rel: 'noopener',
          }, 'Available on Amazon'),
        ),
      ),
    ),
  );
};

window.HomePage = HomePage;