import React, { useState, useEffect } from 'react';

export default function PennTextWebsite() {
  const [currentPage, setCurrentPage] = useState('home');
  const [scrollProgress, setScrollProgress] = useState(0);
  const [visibleSections, setVisibleSections] = useState(new Set());

  useEffect(() => {
    const handleScroll = () => {
      const totalHeight = document.documentElement.scrollHeight - window.innerHeight;
      const progress = (window.scrollY / totalHeight) * 100;
      // COMMENTED OUT TO PREVENT TAB RESETS: setScrollProgress(progress);

      // Check which sections are visible for animations
      const sections = document.querySelectorAll('[data-animate]');
      const newVisible = new Set();
      sections.forEach(section => {
        const rect = section.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.75) {
          newVisible.add(section.getAttribute('data-animate'));
        }
      });
      // COMMENTED OUT TO PREVENT TAB RESETS: setVisibleSections(newVisible);
    };

    window.addEventListener('scroll', handleScroll);
    handleScroll();
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const Header = () => (
    <header style={{
      position: 'sticky',
      top: 0,
      background: 'rgba(255, 255, 255, 0.95)',
      borderBottom: '1px solid #dadce0',
      padding: '16px 48px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      zIndex: 100,
      backdropFilter: 'blur(8px)',
    }}>
      <div style={{
        fontSize: '22px',
        fontWeight: 500,
        color: '#202124',
      }}>
        PennText
      </div>
      <nav style={{
        display: 'flex',
        gap: '24px',
        alignItems: 'center',
      }}>
        {[
          { label: 'Why a Coursepack?', page: 'home' },
          { label: 'Royalties & IP', page: 'royalties' },
          { label: 'Print & Digital', page: 'formats' },
          { label: 'How This Works', page: 'howthisworks' },
          { label: 'Innovation', page: 'innovation' },
          { label: 'Manifesto', page: 'manifesto' },
        ].map(item => (
          <a
            key={item.page}
            onClick={() => {
              setCurrentPage(item.page);
              window.scrollTo(0, 0);
            }}
            style={{
              color: currentPage === item.page ? '#ff6b00' : '#5f6368',
              textDecoration: 'none',
              fontSize: '14px',
              fontWeight: 500,
              cursor: 'pointer',
              borderBottom: currentPage === item.page ? '2px solid #ff6b00' : 'none',
              paddingBottom: '4px',
              whiteSpace: 'nowrap',
            }}
          >
            {item.label}
          </a>
        ))}
        <button
          onClick={() => {
            setCurrentPage('contact');
            window.scrollTo(0, 0);
          }}
          style={{
            background: '#ff6b00',
            color: 'white',
            padding: '10px 24px',
            borderRadius: '24px',
            border: 'none',
            fontSize: '14px',
            fontWeight: 500,
            cursor: 'pointer',
          }}
        >
          Get Started
        </button>
      </nav>
    </header>
  );

  // ============================================================================
  // PAGE 1: WHY A COURSEPACK? (Homepage - renamed per SAGE)
  // ============================================================================
  const HomePage = () => (
    <div>
      {/* Hero */}
      <section style={{
        padding: '120px 48px 80px',
        textAlign: 'center',
        maxWidth: '1200px',
        margin: '0 auto',
      }}>
        <h1 style={{
          fontSize: '56px',
          fontWeight: 500,
          letterSpacing: '-1.5px',
          lineHeight: 1.2,
          marginBottom: '24px',
          color: '#202124',
        }}>
          Your Course. Your Voice. Your Impact.
        </h1>
        <p style={{
          fontSize: '20px',
          color: '#5f6368',
          maxWidth: '800px',
          margin: '0 auto 16px',
          lineHeight: 1.5,
        }}>
          For 35 years, PennText has helped professors publish custom coursepacks that lower student costs, protect intellectual property, and <span style={{ color: '#ff6b00', fontWeight: 600 }}>preserve academic freedom</span>.
        </p>
        <p style={{
          fontSize: '18px',
          color: '#202124',
          fontWeight: 500,
          margin: '32px 0',
        }}>
          Now we're building something bigger: <strong>tools that help faculty solve the engagement crisis in higher education.</strong>
        </p>

        {/* Banner: Your Coursepack IS Your Curriculum */}
        <div style={{
          background: 'linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%)',
          border: '2px solid #ff6b00',
          borderRadius: '16px',
          padding: '32px',
          margin: '48px auto',
          maxWidth: '700px',
        }}>
          <h2 style={{
            fontSize: '32px',
            fontWeight: 600,
            color: '#202124',
            marginBottom: '12px',
            lineHeight: 1.2,
          }}>
            Your Coursepack <span style={{ color: '#ff6b00' }}>IS</span> Your Curriculum
          </h2>
          <p style={{
            fontSize: '16px',
            color: '#5f6368',
            lineHeight: 1.6,
          }}>
            Publishing your curriculum isn't just about materials. It's about <span style={{ color: '#ff6b00', fontWeight: 600 }}>protecting your intellectual property</span>, establishing your <span style={{ color: '#ff6b00', fontWeight: 600 }}>authority</span>, and taking control of what you teach.
          </p>
        </div>

        <div style={{ display: 'flex', gap: '16px', justifyContent: 'center', marginTop: '40px', flexWrap: 'wrap' }}>
          <button
            onClick={() => setCurrentPage('contact')}
            style={{
              background: '#ff6b00',
              color: 'white',
              padding: '12px 32px',
              borderRadius: '24px',
              border: 'none',
              fontSize: '15px',
              fontWeight: 500,
              cursor: 'pointer',
            }}
          >
            Start a Coursepack Project
          </button>
          <button
            onClick={() => setCurrentPage('innovation')}
            style={{
              background: 'transparent',
              color: '#ff6b00',
              padding: '12px 32px',
              borderRadius: '24px',
              border: '2px solid #ff6b00',
              fontSize: '15px',
              fontWeight: 500,
              cursor: 'pointer',
            }}
          >
            Join the Coursepack+ Waitlist
          </button>
        </div>
      </section>

      {/* Why Professors Choose PennText */}
      <section style={{ padding: '80px 48px', maxWidth: '1200px', margin: '0 auto' }}>
        <h2 style={{
          fontSize: '40px',
          fontWeight: 500,
          letterSpacing: '-1px',
          marginBottom: '48px',
          textAlign: 'center',
        }}>
          Why Professors Choose PennText
        </h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: '32px',
        }}>
          {[
            { 
              title: 'Your IP Stays Yours', 
              desc: 'We believe professors should own what they create. Every word, every insight, every innovation belongs to you. We just help you publish it and protect it through copyright.'
            },
            { 
              title: 'Respect for All Intellectual Property', 
              desc: 'From copyright clearance to royalty management, we handle rights with precision and care. Your work protected. Others\' work respected.'
            },
            { 
              title: 'Students Pay Only for What They Need', 
              desc: 'Custom publishing means students pay only for content they actually use in their class, not bundled expensive content they\'ll never open.'
            },
            { 
              title: 'Academic Freedom', 
              desc: 'YOUR pedagogy. YOUR teaching preferences. YOUR decision on print or digital. We give you flexible methods that put you in control, not some corporate platform.'
            },
            { 
              title: 'Speed and Service', 
              desc: 'Fast turnaround. Direct support. No bureaucracy. Rush service available when you need it. We\'ve been doing this since 1991.'
            },
          ].map((feature, idx) => (
            <div key={idx} style={{
              background: 'white',
              padding: '32px',
              borderRadius: '16px',
              border: '1px solid #dadce0',
              transition: 'all 0.3s ease',
            }}>
              <h3 style={{ fontSize: '20px', fontWeight: 500, marginBottom: '12px' }}>{feature.title}</h3>
              <p style={{ color: '#5f6368', fontSize: '15px', lineHeight: 1.6 }}>{feature.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* What We Publish - Interactive Cards */}
      <section style={{ background: '#f8f9fa', padding: '80px 48px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <h2 style={{ fontSize: '40px', fontWeight: 500, letterSpacing: '-1px', marginBottom: '16px', textAlign: 'center' }}>
            What We Publish
          </h2>
          <p style={{ fontSize: '18px', color: '#5f6368', textAlign: 'center', marginBottom: '48px' }}>
            Click any card to learn more
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '32px' }}>
            {[
              { 
                title: 'Exactly What YOU Need',
                subtitle: 'Custom Coursepacks', 
                front: 'Precisely what you need for your course. Nothing more, nothing less.',
                back: {
                  how: 'We compile your selections into a single bound or digital publication.',
                  best: 'Best for: Any discipline. Print works great for hands-on courses. Digital excels when you update frequently.',
                  why: 'Why it matters: Your curriculum, your structure, your control. Students pay only for what they actually use.',
                }
              },
              { 
                title: 'Compiled Readings',
                subtitle: 'Articles, Chapters & More', 
                front: 'Academic articles, case studies, primary sources. Cleared and ready.',
                back: {
                  how: 'We handle copyright clearance and licensing for journal articles, book chapters, and primary documents.',
                  best: 'Best for: Research-heavy courses. Digital format allows easy citation and cross-referencing.',
                  why: 'Why it matters: Build your course from the best scholarship available, not just what one publisher offers.',
                }
              },
              { 
                title: 'Case Studies & Analysis',
                subtitle: 'Law, Business, Medicine, Policy', 
                front: 'Legal cases, business scenarios, medical cases, policy analyses. With your commentary.',
                back: {
                  how: 'We format case materials with your annotations, teaching notes, and discussion questions integrated.',
                  best: 'Best for: Professional programs. Print for courtroom/clinical prep. Digital for searchability across 100+ cases.',
                  why: 'Why it matters: Your expertise layered onto real-world scenarios. Students learn your analytical framework.',
                }
              },
              { 
                title: 'Lab Manuals & Protocols',
                subtitle: 'Hands-On Learning', 
                front: 'Discipline-specific procedures, protocols, and standards.',
                back: {
                  how: 'We produce durable, lay-flat bound manuals designed for lab benches and fieldwork.',
                  best: 'Best for: Sciences, engineering, studio arts. Print is essential here.',
                  why: 'Why it matters: Students need both hands free. A physical manual they can splatter and annotate is irreplaceable.',
                }
              },
              { 
                title: 'Study Guides & Resources',
                subtitle: 'Student Success Tools', 
                front: 'Student-facing materials that complement your lectures.',
                back: {
                  how: 'We format review guides, practice problems, glossaries, and supplemental readings.',
                  best: 'Best for: Courses with complex terminology or cumulative content. Print or digital both work.',
                  why: 'Why it matters: Reduce student anxiety. Clear study materials = better prepared students = better class discussions.',
                }
              },
              { 
                title: 'Your Original Textbook',
                subtitle: 'Your Teaching Legacy', 
                front: 'Years of teaching wisdom, finally in print.',
                back: {
                  how: 'Start with one chapter. Add more each semester. We handle editing, design, ISBN registration, and distribution.',
                  best: 'Best for: Courses where no good textbook exists. Print for prestige, digital for updates.',
                  why: 'Why it matters: You own it. You update it. You earn from it. This is your intellectual legacy, formalized.',
                }
              },
            ].map((item, idx) => {
              const [flipped, setFlipped] = useState(false);
              
              return (
                <div 
                  key={idx}
                  onClick={() => setFlipped(!flipped)}
                  style={{
                    background: 'white',
                    padding: '32px',
                    borderRadius: '12px',
                    border: '2px solid #dadce0',
                    cursor: 'pointer',
                    transition: 'all 0.3s ease',
                    minHeight: '280px',
                    position: 'relative',
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.borderColor = '#ff6b00'}
                  onMouseLeave={(e) => e.currentTarget.style.borderColor = '#dadce0'}
                >
                  {!flipped ? (
                    // Front of card
                    <>
                      <div style={{
                        fontSize: '12px',
                        fontWeight: 600,
                        textTransform: 'uppercase',
                        letterSpacing: '1px',
                        color: '#ff6b00',
                        marginBottom: '12px',
                      }}>
                        {item.subtitle}
                      </div>
                      <h3 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '16px', color: '#202124' }}>
                        {item.title}
                      </h3>
                      <p style={{ color: '#5f6368', fontSize: '15px', lineHeight: 1.6, marginBottom: '32px' }}>
                        {item.front}
                      </p>
                      <div style={{
                        position: 'absolute',
                        bottom: '24px',
                        left: '32px',
                        fontSize: '13px',
                        color: '#ff6b00',
                        fontWeight: 600,
                      }}>
                        Click to learn more â†’
                      </div>
                    </>
                  ) : (
                    // Back of card
                    <div style={{ fontSize: '14px', lineHeight: 1.7 }}>
                      <div style={{ marginBottom: '16px' }}>
                        <strong style={{ color: '#202124' }}>How we do it:</strong>
                        <p style={{ color: '#5f6368', marginTop: '4px' }}>{item.back.how}</p>
                      </div>
                      <div style={{ marginBottom: '16px' }}>
                        <strong style={{ color: '#202124' }}>Best for:</strong>
                        <p style={{ color: '#5f6368', marginTop: '4px' }}>{item.back.best}</p>
                      </div>
                      <div style={{ marginBottom: '24px' }}>
                        <strong style={{ color: '#202124' }}>Why it matters:</strong>
                        <p style={{ color: '#5f6368', marginTop: '4px' }}>{item.back.why}</p>
                      </div>
                      <div style={{
                        position: 'absolute',
                        bottom: '24px',
                        left: '32px',
                        fontSize: '13px',
                        color: '#667eea',
                        fontWeight: 600,
                      }}>
                        â† Click to go back
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Why Build a Coursepack */}
      <section style={{ padding: '80px 48px', maxWidth: '1000px', margin: '0 auto' }}>
        <h2 style={{ fontSize: '40px', fontWeight: 500, letterSpacing: '-1px', marginBottom: '32px', textAlign: 'center' }}>
          Why Build a Coursepack?
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
          <div style={{ background: '#f8f9fa', padding: '32px', borderRadius: '16px' }}>
            <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '16px' }}>Control Your Curriculum</h3>
            <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
              Corporate textbooks force you into their structure. Coursepacks let you teach exactly what matters, in the order that makes sense for your students.
            </p>
          </div>
          <div style={{ background: '#f8f9fa', padding: '32px', borderRadius: '16px' }}>
            <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '16px' }}>Respect Student Budgets</h3>
            <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
              Why should students pay $300 for a textbook when they only need three chapters? Custom publishing eliminates waste and reduces costs.
            </p>
          </div>
          <div style={{ background: '#f8f9fa', padding: '32px', borderRadius: '16px' }}>
            <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '16px' }}>Build Your Legacy</h3>
            <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
              Your coursepack is more than teaching materials. It's a formal publication that represents your expertise and pedagogical philosophy.
            </p>
          </div>
        </div>
      </section>

      {/* Your Coursepack IS Your Curriculum - Banner */}
      <section style={{
        background: 'linear-gradient(135deg, #ff6b00 0%, #ff8c3a 100%)',
        padding: '64px 48px',
        textAlign: 'center',
        color: 'white',
      }}>
        <div style={{ maxWidth: '900px', margin: '0 auto' }}>
          <h2 style={{ fontSize: '48px', fontWeight: 600, marginBottom: '24px', lineHeight: 1.2 }}>
            Your Coursepack <span style={{ fontStyle: 'italic' }}>IS</span> Your Curriculum
          </h2>
          <p style={{ fontSize: '20px', opacity: 0.95, lineHeight: 1.6 }}>
            Publishing your curriculum isn't optional anymore. It's how you protect your intellectual property, establish your authority, and prove your course has structure and purpose.
          </p>
        </div>
      </section>

      {/* Layering Content Explainer */}
      <section style={{ padding: '80px 48px', background: '#f8f9fa' }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
          <h2 style={{ fontSize: '40px', fontWeight: 500, letterSpacing: '-1px', marginBottom: '24px', textAlign: 'center' }}>
            How Coursepacks Are Built: <span style={{ color: '#ff6b00' }}>Layering Content</span>
          </h2>
          <p style={{ fontSize: '18px', color: '#5f6368', textAlign: 'center', marginBottom: '48px', lineHeight: 1.6 }}>
            Think of your coursepack as a compilation. You're not writing a textbook from scratch. You're layering the best sources together into something uniquely yours.
          </p>

          <div style={{
            background: 'white',
            padding: '48px',
            borderRadius: '24px',
            border: '2px solid #e8e8e8',
            marginBottom: '48px',
          }}>
            <h3 style={{ fontSize: '24px', fontWeight: 600, marginBottom: '32px', color: '#202124' }}>
              Sources You Can Layer:
            </h3>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
              gap: '24px',
            }}>
              {[
                { emoji: 'ðŸ“–', source: 'Chapters from Books', desc: 'Use the 3 chapters that matter, not all 18' },
                { emoji: 'ðŸ“°', source: 'Journal Articles', desc: 'The latest research in your field' },
                { emoji: 'ðŸ“‹', source: 'Your Lecture Notes', desc: 'Your insights, examples, and frameworks' },
                { emoji: 'âš–ï¸', source: 'Case Studies', desc: 'Legal, business, medical, policy scenarios' },
                { emoji: 'ðŸ“Š', source: 'Data & Reports', desc: 'Government docs, white papers, industry reports' },
                { emoji: 'ðŸŽ¨', source: 'Primary Sources', desc: 'Historical documents, original texts' },
              ].map((item, idx) => (
                <div key={idx} style={{
                  padding: '20px',
                  background: '#f8f9fa',
                  borderRadius: '12px',
                  borderLeft: '4px solid #ff6b00',
                }}>
                  <div style={{ fontSize: '32px', marginBottom: '8px' }}>{item.emoji}</div>
                  <h4 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '4px', color: '#202124' }}>
                    {item.source}
                  </h4>
                  <p style={{ fontSize: '14px', color: '#5f6368', lineHeight: 1.5 }}>
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div style={{
            background: 'linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)',
            padding: '40px',
            borderRadius: '16px',
            borderLeft: '6px solid #667eea',
          }}>
            <h4 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: '#202124' }}>
              We Handle the Hard Part
            </h4>
            <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
              You tell us what sources you want. We secure copyright permissions, pay licensing fees, format everything professionally, and compile it into a single publication. You don't need to contact publishers or navigate copyright law. That's what we do.
            </p>
          </div>
        </div>
      </section>

      {/* How to Build a Coursepack - Two Audience Approach */}
      <section style={{ padding: '80px 48px', background: 'white' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <h2 style={{ fontSize: '40px', fontWeight: 500, letterSpacing: '-1px', marginBottom: '48px', textAlign: 'center' }}>
            Whether You're an Expert or Just Starting...
          </h2>
          
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
            gap: '48px',
          }}>
            {/* Left: For Experts */}
            <div style={{
              background: '#f8f9fa',
              padding: '48px',
              borderRadius: '24px',
              border: '2px solid #e8e8e8',
            }}>
              <div style={{
                width: '56px',
                height: '56px',
                borderRadius: '50%',
                background: 'linear-gradient(135deg, #ff6b00 0%, #ff8c3a 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '28px',
                marginBottom: '24px',
              }}>
                âœ“
              </div>
              <h3 style={{ fontSize: '28px', fontWeight: 600, marginBottom: '16px', color: '#202124' }}>
                You Already Know What You're Doing
              </h3>
              <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7, marginBottom: '24px' }}>
                You've got your readings selected, your structure mapped out, your syllabus dialed in. You just need someone to handle the publishing logistics.
              </p>
              <p style={{ fontSize: '16px', color: '#202124', fontWeight: 600, lineHeight: 1.7 }}>
                Perfect. Send us your materials and we'll take it from there. Copyright clearance, formatting, printing, distribution. You focus on teaching. We handle everything else.
              </p>
            </div>

            {/* Right: For Beginners */}
            <div style={{
              background: '#f8f9fa',
              padding: '48px',
              borderRadius: '24px',
              border: '2px solid #e8e8e8',
            }}>
              <div style={{
                width: '56px',
                height: '56px',
                borderRadius: '50%',
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '28px',
                marginBottom: '24px',
                color: 'white',
              }}>
                ?
              </div>
              <h3 style={{ fontSize: '28px', fontWeight: 600, marginBottom: '16px', color: '#202124' }}>
                You've Never Done This Before
              </h3>
              <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7, marginBottom: '24px' }}>
                Maybe you've always used a traditional textbook. Maybe you're a new professor and nobody taught you how this works. That's completely normal.
              </p>
              <p style={{ fontSize: '16px', color: '#202124', fontWeight: 600, lineHeight: 1.7 }}>
                We'll walk you through it. What content do you want? What order makes sense? What format works best? We'll guide you step-by-step to build a coursepack that reflects your teaching philosophy.
              </p>
            </div>
          </div>

          <div style={{
            marginTop: '48px',
            padding: '40px',
            background: 'linear-gradient(to right, rgba(255, 107, 0, 0.05), rgba(102, 126, 234, 0.05))',
            borderRadius: '16px',
            textAlign: 'center',
          }}>
            <p style={{ fontSize: '18px', color: '#202124', lineHeight: 1.7, fontWeight: 500 }}>
              Either way, you're in control. We're here to support your vision, not force you into a template.
            </p>
          </div>
        </div>
      </section>

      {/* Signature Publication Block (from Gemini, softened) */}
      <section style={{ padding: '80px 48px', background: 'white' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
            gap: '64px',
            alignItems: 'center',
          }}>
            <div>
              <h2 style={{
                fontSize: '40px',
                fontWeight: 500,
                marginBottom: '32px',
                color: '#202124',
              }}>
                A Signature Publication
              </h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
                <div style={{
                  borderLeft: '4px solid #ff6b00',
                  paddingLeft: '24px',
                  paddingTop: '16px',
                  paddingBottom: '16px',
                }}>
                  <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '12px', color: '#202124' }}>
                    Build Your Reputation
                  </h3>
                  <p style={{ color: '#5f6368', fontSize: '16px', lineHeight: 1.6 }}>
                    Every course is a unique synthesis. Formalizing it into a publication reflects your teaching philosophy and professional expertise.
                  </p>
                </div>
                <div style={{
                  borderLeft: '4px solid #ff6b00',
                  paddingLeft: '24px',
                  paddingTop: '16px',
                  paddingBottom: '16px',
                }}>
                  <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '12px', color: '#202124' }}>
                    Secure Your Rights
                  </h3>
                  <p style={{ color: '#5f6368', fontSize: '16px', lineHeight: 1.6 }}>
                    A coursepack is the legal container that protects your IP from the unmonitored digital landscape.
                  </p>
                </div>
              </div>
            </div>
            <div>
              <div style={{
                background: '#f8f9fa',
                padding: '48px',
                borderRadius: '24px',
                border: '1px solid #e0e0e0',
              }}>
                <div style={{
                  width: '48px',
                  height: '48px',
                  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                  borderRadius: '12px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginBottom: '24px',
                  color: 'white',
                  fontSize: '24px',
                }}>
                  ðŸ’¬
                </div>
                <p style={{
                  fontSize: '22px',
                  fontStyle: 'italic',
                  color: '#202124',
                  marginBottom: '32px',
                  lineHeight: 1.5,
                }}>
                  "Publishing my manual with PennText was the first time I felt like I actually owned my curriculum. It's not just a book; it's my intellectual legacy."
                </p>
                <div style={{
                  fontWeight: 600,
                  color: '#667eea',
                  textTransform: 'uppercase',
                  fontSize: '11px',
                  letterSpacing: '2px',
                }}>
                  Professor Testimonial
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final Hero CTA */}
      <section style={{
        padding: '80px 48px',
        textAlign: 'center',
        background: 'white',
      }}>
        <h2 style={{
          fontSize: '48px',
          fontWeight: 500,
          letterSpacing: '-1px',
          lineHeight: 1.2,
          marginBottom: '24px',
          color: '#202124',
        }}>
          Ready to <span style={{ color: '#ff6b00' }}>Publish</span>?
        </h2>
        <p style={{
          fontSize: '20px',
          color: '#5f6368',
          maxWidth: '800px',
          margin: '0 auto 40px',
          lineHeight: 1.6,
        }}>
          Let's talk about your coursepack. No pressure, no sales pitch. Just a conversation about what you need.
        </p>
        <button
          onClick={() => {
            setCurrentPage('contact');
            window.scrollTo(0, 0);
          }}
          style={{
            background: '#ff6b00',
            color: 'white',
            padding: '16px 40px',
            borderRadius: '24px',
            border: 'none',
            fontSize: '16px',
            fontWeight: 500,
            cursor: 'pointer',
          }}
        >
          Get Started
        </button>
      </section>
    </div>
  );

  // ============================================================================
  // PAGE 2: ROYALTIES & IP (Rebuilt with substance and authenticity)
  // ============================================================================
  const RoyaltiesIPPage = () => {
    const [enrollment, setEnrollment] = useState(100);
    const [royaltyDollars, setRoyaltyDollars] = useState(5);
    const [format, setFormat] = useState('print');

    const baseCost = format === 'print' ? 30 : 20; 
    const bookstoreMargin = format === 'print' ? (baseCost * 0.25) : (baseCost * 0.40);
    const studentPrice = baseCost + bookstoreMargin + royaltyDollars;
    const totalProfessorEarnings = royaltyDollars * enrollment;

    return (
      <div style={{ background: 'white', minHeight: '100vh' }}>
        {/* Hero with Video Placeholder */}
        <section style={{
          padding: '120px 48px 80px',
          background: 'linear-gradient(to bottom, #f8f9fa 0%, white 100%)',
        }}>
          <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 400px', gap: '64px', alignItems: 'center' }}>
            <div>
              <h1 style={{
                fontSize: '56px',
                fontWeight: 600,
                letterSpacing: '-2px',
                lineHeight: 1.1,
                marginBottom: '24px',
                color: '#202124',
              }}>
                Protect Your Intellectual Property. <span style={{ color: '#ff6b00' }}>Build Your Authority.</span>
              </h1>
              <p style={{
                fontSize: '20px',
                color: '#5f6368',
                lineHeight: 1.6,
                marginBottom: '32px',
              }}>
                In an era of online education, asynchronous learning, and AI-trained models, publishing your course materials isn't optional. It's how you establish ownership, strengthen your academic profile, and retain control over your expertise.
              </p>
            </div>
            <div style={{
              background: '#e8e8e8',
              borderRadius: '16px',
              height: '250px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#5f6368',
              fontSize: '14px',
              fontStyle: 'italic',
              border: '2px dashed #dadce0',
              textAlign: 'center',
              padding: '24px',
            }}>
              [Faculty Insights Video:<br/>"Why Publish Your Materials Now"]
            </div>
          </div>
        </section>

        {/* The Line of Protection */}
        <section style={{ padding: '80px 48px', background: 'white' }}>
          <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
            <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '48px', textAlign: 'center' }}>
              The Line of <span style={{ color: '#ff6b00' }}>Demarcation</span>
            </h2>
            
            <div style={{
              background: 'linear-gradient(135deg, #f8f9fa 0%, #fff 100%)',
              padding: '64px 48px',
              borderRadius: '24px',
              border: '2px solid #e8e8e8',
              marginBottom: '48px',
            }}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr auto 1fr',
                gap: '32px',
                alignItems: 'center',
                marginBottom: '48px',
              }}>
                <div style={{
                  background: 'rgba(255, 107, 0, 0.1)',
                  padding: '32px',
                  borderRadius: '16px',
                  textAlign: 'center',
                }}>
                  <div style={{ fontSize: '48px', marginBottom: '16px' }}>ðŸŽ“</div>
                  <h4 style={{ fontSize: '18px', fontWeight: 600, color: '#202124', marginBottom: '8px' }}>
                    Your Teaching
                  </h4>
                  <p style={{ fontSize: '14px', color: '#5f6368' }}>
                    Lectures, discussions,<br/>classroom activities
                  </p>
                </div>

                <div style={{
                  width: '4px',
                  height: '120px',
                  background: 'linear-gradient(to bottom, #ff6b00, #667eea)',
                  borderRadius: '2px',
                }}>
                </div>

                <div style={{
                  background: 'rgba(102, 126, 234, 0.1)',
                  padding: '32px',
                  borderRadius: '16px',
                  textAlign: 'center',
                }}>
                  <div style={{ fontSize: '48px', marginBottom: '16px' }}>ðŸ“š</div>
                  <h4 style={{ fontSize: '18px', fontWeight: 600, color: '#202124', marginBottom: '8px' }}>
                    Your Materials
                  </h4>
                  <p style={{ fontSize: '14px', color: '#5f6368' }}>
                    Published coursepack,<br/>copyrighted content
                  </p>
                </div>
              </div>

              <div style={{
                background: 'white',
                padding: '32px',
                borderRadius: '16px',
                borderLeft: '6px solid #ff6b00',
              }}>
                <p style={{
                  fontSize: '18px',
                  color: '#202124',
                  lineHeight: 1.8,
                  fontWeight: 500,
                }}>
                  "If you own the materials or if you have published your materials, and you are using them to teach in the classroom, you retain your copyrights and intellectual property. You have drawn a distinctive line of demarcation that retains your academic freedom and control."
                </p>
              </div>
            </div>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
              gap: '24px',
            }}>
              {[
                {
                  title: 'Teaching vs. Materials',
                  desc: 'There is a separation in academia between what you say in the classroom and the materials you teach with. Publishing your materials establishes which side of that line your content lives on.',
                },
                {
                  title: 'Copyright Protection',
                  desc: 'Published works are protected by copyright law. Your coursepack is a formal publication with your name on it. This establishes legal ownership in a way that lecture recordings do not.',
                },
                {
                  title: 'Institutional Clarity',
                  desc: 'When your teaching is based on YOUR published work, the ownership question becomes clear. You\'re teaching from materials you formally created and copyrighted.',
                },
              ].map((item, idx) => (
                <div key={idx} style={{
                  background: '#f8f9fa',
                  padding: '24px',
                  borderRadius: '12px',
                  borderTop: '4px solid #667eea',
                }}>
                  <h4 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>
                    {item.title}
                  </h4>
                  <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Why This Matters Now */}
        <section style={{ padding: '80px 48px', background: '#f8f9fa' }}>
          <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
            <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '48px', textAlign: 'center' }}>
              Why This Matters <span style={{ color: '#ff6b00' }}>Right Now</span>
            </h2>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
              gap: '32px',
            }}>
              {[
                {
                  icon: 'ðŸŒ',
                  title: 'Education Is Changing',
                  desc: 'Online courses. Asynchronous learning. Global campuses. Hybrid models. The traditional classroom isn\'t the only place your expertise lives anymore.',
                },
                {
                  icon: 'ðŸ’¡',
                  title: 'Your Expertise Has Value',
                  desc: 'Years of teaching, research, and refinement have created something unique. Your insights, frameworks, and approaches are intellectual property worth protecting.',
                },
                {
                  icon: 'Â©ï¸',
                  title: 'Copyright Establishes Ownership',
                  desc: 'Publishing creates a formal, legal record. Your name. Your copyright. Your work. This matters when questions of ownership arise.',
                },
                {
                  icon: 'ðŸ›¡ï¸',
                  title: 'Control Your Narrative',
                  desc: 'When you publish, you decide how your expertise is presented, updated, and used. You\'re not dependent on institutional platforms or third-party publishers.',
                },
              ].map((item, idx) => (
                <div key={idx} style={{
                  background: 'white',
                  padding: '32px',
                  borderRadius: '16px',
                  border: '2px solid #e8e8e8',
                }}>
                  <div style={{ fontSize: '48px', marginBottom: '16px' }}>{item.icon}</div>
                  <h4 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>
                    {item.title}
                  </h4>
                  <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Building Authority */}
        <section style={{ padding: '80px 48px', background: 'white' }}>
          <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
            <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '24px', textAlign: 'center' }}>
              Building Authority in Your Field
            </h2>
            <p style={{ fontSize: '18px', color: '#5f6368', textAlign: 'center', marginBottom: '48px', lineHeight: 1.6 }}>
              Publishing strengthens your academic profile and professional credibility in tangible ways.
            </p>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
              gap: '24px',
              marginBottom: '48px',
            }}>
              {[
                {
                  title: 'CV & Portfolio',
                  desc: 'Formal publication appears on your curriculum vitae. It\'s evidence of scholarly contribution beyond teaching and research.',
                },
                {
                  title: 'Peer Recognition',
                  desc: 'Other faculty can cite your work, adopt your frameworks, and recognize your contributions to pedagogy in your discipline.',
                },
                {
                  title: 'Professional Credibility',
                  desc: 'Publishing signals seriousness. It shows you\'ve formalized your teaching philosophy and made it available to the broader academic community.',
                },
                {
                  title: 'Speaking & Consulting',
                  desc: 'Published authors get invited to conferences, workshops, and consulting opportunities. Your coursepack opens doors.',
                },
              ].map((item, idx) => (
                <div key={idx} style={{
                  background: '#f8f9fa',
                  padding: '32px',
                  borderRadius: '12px',
                  borderLeft: '4px solid #ff6b00',
                }}>
                  <h4 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>
                    {item.title}
                  </h4>
                  <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>

            <div style={{
              background: 'linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%)',
              padding: '40px',
              borderRadius: '16px',
              textAlign: 'center',
            }}>
              <p style={{ fontSize: '18px', color: '#202124', lineHeight: 1.7, fontWeight: 500 }}>
                Your coursepack isn't just a teaching tool. It's a professional accomplishment that advances your career and establishes you as an authority in your discipline.
              </p>
            </div>
          </div>
        </section>

        {/* Who We Serve */}
        <section style={{ padding: '80px 48px', background: '#f8f9fa' }}>
          <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
            <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '48px', textAlign: 'center' }}>
              Who We Serve
            </h2>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
              gap: '32px',
            }}>
              <div style={{
                background: 'white',
                padding: '40px',
                borderRadius: '16px',
                border: '2px solid #ff6b00',
              }}>
                <h4 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '16px', color: '#ff6b00' }}>
                  LMS Platforms Serve Institutions
                </h4>
                <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                  Canvas, Blackboard, and other learning management systems are paid by institutions through licensing fees. Their loyalty and obligations run to whoever signs the checks.
                </p>
              </div>

              <div style={{
                background: 'white',
                padding: '40px',
                borderRadius: '16px',
                border: '2px solid #667eea',
              }}>
                <h4 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '16px', color: '#667eea' }}>
                  We Serve You
                </h4>
                <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                  PennText is beholden to professors and students, not institutions or shareholders. Our business model depends on faculty trusting us to protect their work and serve their interests.
                </p>
              </div>
            </div>

            <div style={{
              marginTop: '48px',
              background: 'white',
              padding: '40px',
              borderRadius: '16px',
              textAlign: 'center',
            }}>
              <p style={{ fontSize: '18px', color: '#202124', lineHeight: 1.7, fontWeight: 500 }}>
                When you work with us, you're working with a company whose success depends entirely on keeping faculty and students happy. Not corporate boards. Not institutional contracts. You.
              </p>
            </div>
          </div>
        </section>

        {/* How Royalties Work */}
        <section style={{ padding: '80px 48px', background: 'white' }}>
          <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
            <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '24px', textAlign: 'center' }}>
              How Royalties Work
            </h2>
            <p style={{ fontSize: '18px', color: '#5f6368', textAlign: 'center', marginBottom: '48px' }}>
              You set your royalty as an actual dollar amount per coursepack, not a percentage. This means you know exactly what you'll earn, and students see transparent pricing.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '24px' }}>
              {[
                { title: "You Set the Amount", text: "Choose your royalty in real dollars. $3, $6, $10... whatever feels fair for your work." },
                { title: "Transparent Pricing", text: "Students see production cost + bookstore margin + your royalty. No hidden fees or surprise markups." },
                { title: "Paid Semester-End", text: "Royalties are calculated based on actual student purchases and paid directly to you or your department." },
              ].map((card, idx) => (
                <div key={idx} style={{
                  background: '#f8f9fa',
                  padding: '32px',
                  borderRadius: '12px',
                  borderTop: '4px solid #ff6b00',
                }}>
                  <h4 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>
                    {card.title}
                  </h4>
                  <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>
                    {card.text}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Full Calculator */}
        <section style={{ marginBottom: '80px', padding: '80px 48px', background: '#f8f9fa' }}>
          <div style={{ textAlign: 'center', marginBottom: '48px' }}>
            <h2 style={{ fontSize: '36px', fontWeight: 500, color: '#202124', marginBottom: '16px' }}>
              Run Your Own Numbers
            </h2>
            <p style={{ fontSize: '18px', color: '#5f6368' }}>
              See exactly how pricing breaks down and what you'll earn.
            </p>
          </div>

          <div style={{
            background: 'white',
            border: '2px solid #e8e8e8',
            borderRadius: '24px',
            overflow: 'hidden',
            maxWidth: '1000px',
            margin: '0 auto',
          }}>
            {/* Controls Section */}
            <div style={{
              padding: '48px',
              background: '#f8f9fa',
              borderBottom: '2px solid #e8e8e8',
            }}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                gap: '32px',
              }}>
                <div>
                  <label style={{
                    display: 'block',
                    fontSize: '14px',
                    fontWeight: 600,
                    textTransform: 'uppercase',
                    letterSpacing: '1px',
                    color: '#5f6368',
                    marginBottom: '12px',
                  }}>
                    Format
                  </label>
                  <div style={{ display: 'flex', gap: '12px' }}>
                    <button
                      onClick={() => setFormat('print')}
                      style={{
                        flex: 1,
                        padding: '12px',
                        borderRadius: '8px',
                        fontWeight: 600,
                        fontSize: '15px',
                        border: format === 'print' ? '2px solid #ff6b00' : '2px solid #e0e0e0',
                        background: format === 'print' ? 'rgba(255, 107, 0, 0.1)' : 'white',
                        color: format === 'print' ? '#ff6b00' : '#5f6368',
                        cursor: 'pointer',
                        transition: 'all 0.2s ease',
                      }}
                    >
                      ðŸ“š Print
                    </button>
                    <button
                      onClick={() => setFormat('digital')}
                      style={{
                        flex: 1,
                        padding: '12px',
                        borderRadius: '8px',
                        fontWeight: 600,
                        fontSize: '15px',
                        border: format === 'digital' ? '2px solid #667eea' : '2px solid #e0e0e0',
                        background: format === 'digital' ? 'rgba(102, 126, 234, 0.1)' : 'white',
                        color: format === 'digital' ? '#667eea' : '#5f6368',
                        cursor: 'pointer',
                        transition: 'all 0.2s ease',
                      }}
                    >
                      ðŸ’» Digital
                    </button>
                  </div>
                </div>

                <div>
                  <label style={{
                    display: 'block',
                    fontSize: '14px',
                    fontWeight: 600,
                    textTransform: 'uppercase',
                    letterSpacing: '1px',
                    color: '#5f6368',
                    marginBottom: '12px',
                  }}>
                    Class Size: <span style={{ color: '#202124', fontSize: '18px' }}>{enrollment}</span>
                  </label>
                  <input
                    type="range"
                    min="10"
                    max="500"
                    value={enrollment}
                    onChange={(e) => setEnrollment(Number(e.target.value))}
                    style={{ width: '100%', accentColor: '#ff6b00' }}
                  />
                </div>

                <div>
                  <label style={{
                    display: 'block',
                    fontSize: '14px',
                    fontWeight: 600,
                    textTransform: 'uppercase',
                    letterSpacing: '1px',
                    color: '#5f6368',
                    marginBottom: '12px',
                  }}>
                    Your Royalty: <span style={{ color: '#ff6b00', fontSize: '18px' }}>${royaltyDollars}</span>
                  </label>
                  <input
                    type="range"
                    min="0"
                    max="50"
                    step="1"
                    value={royaltyDollars}
                    onChange={(e) => setRoyaltyDollars(Number(e.target.value))}
                    style={{ width: '100%', accentColor: '#ff6b00' }}
                  />
                </div>
              </div>
            </div>

            {/* Results Section */}
            <div style={{
              padding: '48px',
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
              gap: '48px',
            }}>
              {/* Left: Price Breakdown */}
              <div>
                <h3 style={{
                  fontSize: '14px',
                  fontWeight: 600,
                  textTransform: 'uppercase',
                  letterSpacing: '1px',
                  color: '#5f6368',
                  marginBottom: '24px',
                }}>
                  Student Pays
                </h3>
                <div style={{
                  fontSize: '56px',
                  fontWeight: 700,
                  color: '#202124',
                  marginBottom: '8px',
                  lineHeight: 1,
                }}>
                  ${studentPrice.toFixed(2)}
                </div>
                <p style={{
                  fontSize: '14px',
                  color: '#5f6368',
                  marginBottom: '32px',
                }}>
                  per coursepack
                </p>

                <div style={{
                  background: '#f8f9fa',
                  padding: '24px',
                  borderRadius: '12px',
                }}>
                  <h4 style={{
                    fontSize: '13px',
                    fontWeight: 600,
                    textTransform: 'uppercase',
                    letterSpacing: '1px',
                    color: '#5f6368',
                    marginBottom: '16px',
                  }}>
                    Price Breakdown
                  </h4>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '15px' }}>
                      <span style={{ color: '#5f6368' }}>Estimated Production Cost</span>
                      <span style={{ fontWeight: 600, color: '#202124' }}>${baseCost.toFixed(2)}</span>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '15px' }}>
                      <span style={{ color: '#5f6368' }}>
                        {format === 'print' ? 'Bookstore Margin (25%)' : 'Platform Fees (40%)'}
                      </span>
                      <span style={{ fontWeight: 600, color: '#202124' }}>${bookstoreMargin.toFixed(2)}</span>
                    </div>
                    <div style={{
                      height: '1px',
                      background: '#e0e0e0',
                      margin: '8px 0',
                    }}></div>
                    <div style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      fontSize: '15px',
                      fontWeight: 600,
                    }}>
                      <span style={{ color: '#ff6b00' }}>Your Royalty</span>
                      <span style={{ color: '#ff6b00' }}>${royaltyDollars.toFixed(2)}</span>
                    </div>
                  </div>
                </div>

                <p style={{
                  fontSize: '13px',
                  color: '#5f6368',
                  marginTop: '16px',
                  fontStyle: 'italic',
                }}>
                  {format === 'print' 
                    ? 'Based on typical 100-150 page coursepack. Actual production costs may vary based on page count, color, and binding.'
                    : 'VitalSource platform fee (20%) + Bookstore margin (20%). Actual costs may vary by institution.'}
                </p>
              </div>

              {/* Right: Your Earnings */}
              <div style={{
                background: 'linear-gradient(135deg, rgba(255, 107, 0, 0.08) 0%, rgba(255, 107, 0, 0.03) 100%)',
                padding: '32px',
                borderRadius: '16px',
                border: '2px solid rgba(255, 107, 0, 0.2)',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
              }}>
                <h3 style={{
                  fontSize: '14px',
                  fontWeight: 600,
                  textTransform: 'uppercase',
                  letterSpacing: '1px',
                  color: '#5f6368',
                  marginBottom: '24px',
                }}>
                  Your Semester Payout
                </h3>
                <div style={{
                  fontSize: '56px',
                  fontWeight: 700,
                  color: '#ff6b00',
                  marginBottom: '8px',
                  lineHeight: 1,
                }}>
                  ${totalProfessorEarnings.toFixed(0)}
                </div>
                <p style={{
                  fontSize: '16px',
                  color: '#5f6368',
                  fontWeight: 500,
                  marginBottom: '32px',
                }}>
                  for {enrollment} students
                </p>

                <div style={{
                  background: 'white',
                  padding: '20px',
                  borderRadius: '12px',
                  marginBottom: '24px',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
                    <span style={{ fontSize: '14px', color: '#5f6368' }}>Per student:</span>
                    <span style={{ fontSize: '14px', fontWeight: 600, color: '#202124' }}>${royaltyDollars.toFixed(2)}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: '14px', color: '#5f6368' }}>Ã— {enrollment} students:</span>
                    <span style={{ fontSize: '14px', fontWeight: 600, color: '#ff6b00' }}>${totalProfessorEarnings.toFixed(2)}</span>
                  </div>
                </div>

                <p style={{
                  fontSize: '14px',
                  color: '#5f6368',
                  lineHeight: 1.6,
                  fontStyle: 'italic',
                }}>
                  Paid directly to you or your department at semester's end.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Economics & Student Cost Impact (Rewritten) */}
        <section style={{ padding: '80px 48px', background: 'white' }}>
          <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
            <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '24px', textAlign: 'center' }}>
              Why Coursepacks Cost Less
            </h2>
            <p style={{ fontSize: '18px', color: '#5f6368', textAlign: 'center', marginBottom: '48px', lineHeight: 1.6 }}>
              Custom publishing inherently costs less than nationally distributed textbooks. Here's why.
            </p>

            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
              gap: '32px',
              marginBottom: '48px',
            }}>
              {[
                {
                  title: 'Lower Overhead',
                  desc: 'We don\'t have the massive infrastructure of national publishers. No sales reps, no marketing campaigns, no corporate overhead to pass on to students.',
                },
                {
                  title: 'Print-on-Demand',
                  desc: 'No warehousing costs. No inventory sitting unsold. We print what\'s needed when it\'s needed, which keeps costs down.',
                },
                {
                  title: 'Digital Distribution',
                  desc: 'For digital formats, distribution is nearly free. Students get instant access, you get updates whenever you want, costs stay low.',
                },
                {
                  title: 'No Bundled Content',
                  desc: 'Students only pay for the chapters and materials you actually assign. No 18-chapter textbook when you only teach 3.',
                },
              ].map((item, idx) => (
                <div key={idx} style={{
                  background: '#f8f9fa',
                  padding: '32px',
                  borderRadius: '12px',
                  borderTop: '4px solid #667eea',
                }}>
                  <h4 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>
                    {item.title}
                  </h4>
                  <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>
                    {item.desc}
                  </p>
                </div>
              ))}
            </div>

            <div style={{
              background: 'linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%)',
              padding: '40px',
              borderRadius: '16px',
              borderLeft: '6px solid #ff6b00',
            }}>
              <h4 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '16px', color: '#202124' }}>
                We Work With You on Fair Pricing
              </h4>
              <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7, marginBottom: '16px' }}>
                You choose your royalty amount. We provide guidance on total pricing to ensure materials remain fair and accessible for students while compensating you appropriately for your work.
              </p>
              <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                We become a second set of eyes, helping you balance student affordability with the value of your intellectual contribution.
              </p>
            </div>
          </div>
        </section>

        {/* Final Hero CTA */}
        <section style={{
          padding: '80px 48px',
          textAlign: 'center',
          background: '#f8f9fa',
        }}>
          <h2 style={{
            fontSize: '48px',
            fontWeight: 500,
            letterSpacing: '-1px',
            lineHeight: 1.2,
            marginBottom: '24px',
            color: '#202124',
          }}>
            Ready to <span style={{ color: '#ff6b00' }}>Protect Your Work</span>?
          </h2>
          <p style={{
            fontSize: '20px',
            color: '#5f6368',
            maxWidth: '800px',
            margin: '0 auto 40px',
            lineHeight: 1.6,
          }}>
            Let's talk about publishing your course materials. We'll walk you through copyright, royalties, and what it takes to formally establish ownership of your intellectual property.
          </p>
          <button
            onClick={() => {
              setCurrentPage('contact');
              window.scrollTo(0, 0);
            }}
            style={{
              background: '#ff6b00',
              color: 'white',
              padding: '16px 40px',
              borderRadius: '24px',
              border: 'none',
              fontSize: '16px',
              fontWeight: 500,
              cursor: 'pointer',
            }}
          >
            Start the Conversation
          </button>
        </section>
      </div>
    );
  };

  // ============================================================================
  // PAGE 3: PRINT & DIGITAL (Renamed from Services - enhanced with fuller content)
  // ============================================================================
  // ============================================================================
  // PAGE 3: PRINT & DIGITAL (Tabbed: Formats | Inclusive Access | Research)
  // ============================================================================
  
  // Accordion component to avoid hook violations
  const AccordionItem = ({ title, detail, color }) => {
    const [expanded, setExpanded] = useState(false);
    return (
      <div style={{
        background: 'white',
        borderRadius: '8px',
        overflow: 'hidden',
      }}>
        <div
          onClick={() => setExpanded(!expanded)}
          style={{
            padding: '16px 20px',
            cursor: 'pointer',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            borderLeft: `4px solid ${color}`,
          }}
        >
          <span style={{ fontSize: '16px', fontWeight: 500, color: '#202124' }}>
            {title}
          </span>
          <span style={{ fontSize: '20px', color: color }}>
            {expanded ? 'âˆ’' : '+'}
          </span>
        </div>
        {expanded && (
          <div style={{ padding: '16px 20px', paddingTop: '0', fontSize: '15px', color: '#5f6368', lineHeight: 1.7 }}>
            {detail}
          </div>
        )}
      </div>
    );
  };

  // Research accordion with complex nested content
  const ResearchAccordion = ({ area }) => {
    const [expanded, setExpanded] = useState(false);
    return (
      <div style={{
        background: 'white',
        border: '2px solid #e8e8e8',
        borderRadius: '12px',
        overflow: 'hidden',
      }}>
        <div
          onClick={() => setExpanded(!expanded)}
          style={{
            padding: '24px 32px',
            cursor: 'pointer',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            background: expanded ? '#f8f9fa' : 'white',
          }}
        >
          <div style={{ flex: 1 }}>
            <h4 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '8px', color: '#202124' }}>
              {area.title}
            </h4>
            <p style={{ fontSize: '15px', color: '#5f6368' }}>
              {area.preview}
            </p>
          </div>
          <span style={{ fontSize: '28px', color: '#ff6b00', marginLeft: '24px' }}>
            {expanded ? 'âˆ’' : '+'}
          </span>
        </div>
        
        {expanded && (
          <div style={{ padding: '32px', paddingTop: '0' }}>
            <div style={{ marginBottom: '24px' }}>
              <h5 style={{ fontSize: '14px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '1px', color: '#5f6368', marginBottom: '16px' }}>
                Key Research:
              </h5>
              {area.research.map((item, ridx) => (
                <div key={ridx} style={{
                  background: '#f8f9fa',
                  padding: '16px',
                  borderRadius: '8px',
                  marginBottom: '12px',
                  borderLeft: '4px solid #667eea',
                }}>
                  <div style={{ fontSize: '14px', fontWeight: 600, color: '#202124', marginBottom: '4px' }}>
                    {item.study}
                  </div>
                  <div style={{ fontSize: '13px', fontStyle: 'italic', color: '#5f6368', marginBottom: '8px' }}>
                    {item.title}
                  </div>
                  <div style={{ fontSize: '14px', color: '#5f6368', lineHeight: 1.6 }}>
                    <strong>Finding:</strong> {item.finding}
                  </div>
                </div>
              ))}
            </div>
            
            <div style={{
              background: 'linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%)',
              padding: '20px',
              borderRadius: '8px',
              borderLeft: '4px solid #ff6b00',
            }}>
              <h5 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '8px', color: '#202124' }}>
                What This Means for Your Course:
              </h5>
              <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>
                {area.implications}
              </p>
            </div>
          </div>
        )}
      </div>
    );
  };

  const PrintDigitalPage = () => {
    const [activeTab, setActiveTab] = useState('formats');

    return (
      <div style={{ padding: '80px 48px', maxWidth: '1200px', margin: '0 auto', minHeight: '100vh' }}>
        <h1 style={{ fontSize: '48px', fontWeight: 500, letterSpacing: '-1.5px', marginBottom: '24px', textAlign: 'center' }}>
          Print & Digital Options
        </h1>
        <p style={{ fontSize: '20px', color: '#5f6368', marginBottom: '64px', maxWidth: '800px', margin: '0 auto 64px', textAlign: 'center' }}>
          Every course is different. We support <span style={{ color: '#ff6b00', fontWeight: 600 }}>the format that fits your classroom</span>.
        </p>

        {/* Tab Navigation - Inlined */}
        <div style={{
          position: 'sticky',
          top: '80px',
          background: 'white',
          zIndex: 10,
          borderBottom: '2px solid #e8e8e8',
          marginBottom: '64px',
          display: 'flex',
          gap: '0',
          justifyContent: 'center',
        }}>
          {[
            { id: 'formats', label: 'Formats' },
            { id: 'inclusive', label: 'Inclusive Access' },
            { id: 'research', label: 'Research' },
          ].map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              style={{
                padding: '16px 40px',
                background: 'transparent',
                border: 'none',
                borderBottom: activeTab === tab.id ? '3px solid #ff6b00' : '3px solid transparent',
                color: activeTab === tab.id ? '#ff6b00' : '#5f6368',
                fontSize: '16px',
                fontWeight: 600,
                cursor: 'pointer',
                transition: 'all 0.2s ease',
                textTransform: 'uppercase',
                letterSpacing: '1px',
              }}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* TAB 1: FORMATS */}
        {activeTab === 'formats' && (
          <div>
            {/* Format Cards */}
            <section style={{ marginBottom: '80px' }}>
              <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '48px' }}>Choose Your Format</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '32px' }}>
                <div style={{
                  background: 'white',
                  border: '2px solid #e8e8e8',
                  borderRadius: '24px',
                  padding: '48px',
                  transition: 'all 0.3s ease',
                }}>
                  <div style={{
                    width: '64px',
                    height: '64px',
                    background: 'linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%)',
                    borderRadius: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginBottom: '24px',
                    fontSize: '32px',
                  }}>
                    ðŸ“š
                  </div>
                  <h3 style={{ fontSize: '28px', fontWeight: 500, marginBottom: '16px' }}>Print Coursepacks</h3>
                  <p style={{ color: '#5f6368', marginBottom: '32px', lineHeight: 1.7, fontSize: '16px' }}>
                    Tactile, reliable, and distraction-free. High-quality bound materials ready for campus bookstore shelves. Students can annotate freely, reference quickly, and study without screen fatigue.
                  </p>
                  <h4 style={{ fontSize: '14px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '1px', color: '#ff6b00', marginBottom: '16px' }}>
                    What's Included
                  </h4>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                    {[
                      'Professional interior layout & formatting',
                      'Custom full-color or B&W covers',
                      'Coil, perfect, or GBC binding options',
                      'Copyright clearance for all materials',
                      'Direct bookstore coordination',
                      'Semester-to-semester updates',
                    ].map((feature, idx) => (
                      <li key={idx} style={{
                        padding: '12px 0',
                        color: '#5f6368',
                        fontSize: '15px',
                        borderBottom: idx < 5 ? '1px solid #f0f0f0' : 'none',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '12px',
                      }}>
                        <span style={{ color: '#ff6b00', fontSize: '18px' }}>âœ“</span> {feature}
                      </li>
                    ))}
                  </ul>
                </div>

                <div style={{
                  background: 'white',
                  border: '2px solid #e8e8e8',
                  borderRadius: '24px',
                  padding: '48px',
                  transition: 'all 0.3s ease',
                }}>
                  <div style={{
                    width: '64px',
                    height: '64px',
                    background: 'linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%)',
                    borderRadius: '16px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginBottom: '24px',
                    fontSize: '32px',
                  }}>
                    ðŸ’»
                  </div>
                  <h3 style={{ fontSize: '28px', fontWeight: 500, marginBottom: '16px' }}>Digital Delivery</h3>
                  <p style={{ color: '#5f6368', marginBottom: '32px', lineHeight: 1.7, fontSize: '16px' }}>
                    Modern and immediate. Day-one access through LMS integration with VitalSource. Students can search across content, access on any device, and use built-in accessibility features.
                  </p>
                  <h4 style={{ fontSize: '14px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '1px', color: '#667eea', marginBottom: '16px' }}>
                    What's Included
                  </h4>
                  <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                    {[
                      'Seamless LMS integration (Canvas, Blackboard, etc.)',
                      'DRM protection for your intellectual property',
                      'Built-in accessibility features (screen readers, etc.)',
                      'Mobile access on any device',
                      'Instant updates without reprinting',
                      'Lower production costs passed to students',
                    ].map((feature, idx) => (
                      <li key={idx} style={{
                        padding: '12px 0',
                        color: '#5f6368',
                        fontSize: '15px',
                        borderBottom: idx < 5 ? '1px solid #f0f0f0' : 'none',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '12px',
                      }}>
                        <span style={{ color: '#667eea', fontSize: '18px' }}>âœ“</span> {feature}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </section>

            {/* An Honest Conversation - Accordion Format */}
            <section style={{ background: '#f8f9fa', padding: '64px 48px', borderRadius: '24px', marginBottom: '80px' }}>
              <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '48px', textAlign: 'center' }}>
                An Honest Conversation
              </h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(450px, 1fr))', gap: '48px' }}>
                {/* Print Side */}
                <div>
                  <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '24px', color: '#202124' }}>The Case for Print</h3>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    {[
                      { title: 'Better comprehension for complex material', detail: 'Research shows students retain more from print when reading analytical or cumulative content. The tactile experience and lack of digital distractions create better encoding.' },
                      { title: 'Reduces screen fatigue and distraction', detail: 'No notifications, no tabs, no email. College students already spend 12+ hours/day on screens. Print creates a focused learning environment.' },
                      { title: 'Works everywhere (no WiFi/device needed)', detail: 'No battery anxiety, no data plans, no platform compatibility issues. A book is a book, whether you\'re on a bus, in a coffee shop, or in a field lab.' },
                      { title: 'Physical annotation aids retention', detail: 'Writing in margins, highlighting text, and flipping back to earlier pages all contribute to active learning and better memory formation.' },
                    ].map((item, idx) => (
                      <AccordionItem key={idx} title={item.title} detail={item.detail} color="#ff6b00" />
                    ))}
                  </div>
                </div>

                {/* Digital Side */}
                <div>
                  <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '24px', color: '#202124' }}>The Case for Digital</h3>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    {[
                      { title: 'Instant access and searchability', detail: 'Students get materials on day one. Need to find a concept? Search across your entire coursepack in seconds. This is invaluable for case-heavy courses or when cross-referencing is essential.' },
                      { title: 'Accessibility tools for diverse learners', detail: 'Screen readers, adjustable fonts, text-to-speech, and high-contrast modes make digital materials more inclusive for students with visual impairments or learning differences.' },
                      { title: 'Lower cost and instant updates', detail: 'Digital production and distribution costs less. You can update content mid-semester if needed. Students pay less, and you maintain control over timeliness.' },
                      { title: 'Cross-referencing across large content sets', detail: 'For courses with 50+ cases or extensive reading lists, digital search and bookmark features help students navigate complex material libraries efficiently.' },
                    ].map((item, idx) => (
                      <AccordionItem key={idx} title={item.title} detail={item.detail} color="#667eea" />
                    ))}
                  </div>
                </div>
              </div>
            </section>

            {/* Our Philosophy */}
            <section style={{ marginBottom: '80px' }}>
              <div style={{ maxWidth: '900px', margin: '0 auto' }}>
                <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '32px' }}>Our Philosophy on Formats</h2>
                <div style={{
                  background: '#f8f9fa',
                  padding: '48px',
                  borderRadius: '24px',
                  borderLeft: '6px solid #ff6b00',
                }}>
                  <p style={{ fontSize: '20px', color: '#202124', lineHeight: 1.7, marginBottom: '24px', fontWeight: 500 }}>
                    We don't have a preferred format. We have a preferred outcome: materials that serve your pedagogy and your students' learning.
                  </p>
                  <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7, marginBottom: '16px' }}>
                    Some courses demand the focus that print provides. Lab manuals where students need both hands free, case studies that require deep annotation, readings where screen fatigue becomes a barrier.
                  </p>
                  <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                    Other courses benefit from digital searchability, instant updates, and accessibility features. Many professors choose both, letting students decide what works best for their learning style and situation.
                  </p>
                </div>
              </div>
            </section>

            {/* Our Recommendations */}
            <section style={{ marginBottom: '80px' }}>
              <div style={{ maxWidth: '900px', margin: '0 auto' }}>
                <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '32px' }}>Our Recommendations</h2>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                {[
                  { course: 'Lab Sciences & Studio Courses', rec: 'Print works best. Students need both hands free for procedures, equipment, or creative work. A physical manual they can splatter, annotate, and reference without unlocking a screen is essential.' },
                  { course: 'Case-Heavy Courses (Law, Business, Medicine)', rec: 'Digital shines here. The ability to search across dozens of cases, cross-reference quickly, and access supplemental materials makes digital the clear winner for case-based learning.' },
                  { course: 'Reading-Heavy Seminars', rec: 'Print often wins. Long-form reading for deep comprehension benefits from the focused, distraction-free environment of physical books. Screen fatigue is real.' },
                  { course: 'Rapidly Changing Fields (Tech, Policy, Current Events)', rec: 'Digital allows semester-to-semester updates without reprinting. When your field moves faster than the publishing cycle, digital flexibility matters.' },
                  { course: 'Courses with Diverse Student Needs', rec: 'Offer both when possible. Students with visual impairments benefit from screen readers. Students in rural areas without reliable internet need print. Maximum flexibility serves maximum students.' },
                ].map((item, idx) => (
                  <div key={idx} style={{
                    background: 'white',
                    padding: '32px',
                    borderRadius: '16px',
                    border: '1px solid #e0e0e0',
                    borderLeft: '4px solid #ff6b00',
                  }}>
                    <h4 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>{item.course}</h4>
                    <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>{item.rec}</p>
                  </div>
                ))}
              </div>
              </div>
            </section>

            {/* Final CTA */}
            <section style={{
              padding: '80px 48px',
              textAlign: 'center',
              background: 'white',
            }}>
              <h2 style={{
                fontSize: '48px',
                fontWeight: 500,
                letterSpacing: '-1px',
                lineHeight: 1.2,
                marginBottom: '24px',
                color: '#202124',
              }}>
                But Here's What <span style={{ color: '#ff6b00' }}>Matters Most</span>
              </h2>
              <p style={{
                fontSize: '20px',
                color: '#5f6368',
                maxWidth: '800px',
                margin: '0 auto 40px',
                lineHeight: 1.6,
              }}>
                The choice is yours. You know your students, your course, and your teaching style better than anyone. We're here to support whatever decision serves your classroom best.
              </p>
              <button
                onClick={() => {
                  setCurrentPage('contact');
                  window.scrollTo(0, 0);
                }}
                style={{
                  background: '#ff6b00',
                  color: 'white',
                  padding: '16px 40px',
                  borderRadius: '24px',
                  border: 'none',
                  fontSize: '16px',
                  fontWeight: 500,
                  cursor: 'pointer',
                }}
              >
                Let's Talk About Your Coursepack
              </button>
            </section>
          </div>
        )}

        {/* TAB 2: INCLUSIVE ACCESS */}
        {activeTab === 'inclusive' && (
          <div>
            {/* How It Works */}
            <section style={{ marginBottom: '80px' }}>
              <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '32px' }}>How Inclusive Access Works</h2>
              <div style={{
                background: '#f8f9fa',
                padding: '48px',
                borderRadius: '16px',
              }}>
                <p style={{ fontSize: '18px', color: '#5f6368', lineHeight: 1.7, marginBottom: '24px' }}>
                  Inclusive Access programs deliver digital course materials directly through your university's Learning Management System (Canvas, Blackboard, Moodle, etc.) on the first day of class.
                </p>
                <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                  Instead of students purchasing materials separately, the cost is added to their tuition bill and spread across financial aid, payment plans, and scholarships. Students can opt out if they prefer, but the default is immediate access for everyone.
                </p>
              </div>
            </section>

            {/* Why It Matters */}
            <section style={{ marginBottom: '80px' }}>
              <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '32px' }}>Why Inclusive Access Matters</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '32px' }}>
                {[
                  {
                    title: 'Day-One Readiness',
                    desc: 'Every student has materials from the first class. No waiting for bookstore lines or shipping delays.',
                  },
                  {
                    title: 'Financial Aid Coverage',
                    desc: 'Course materials become part of the tuition bill, which means they\'re covered by financial aid packages.',
                  },
                  {
                    title: 'Reduced Costs',
                    desc: 'Bulk institutional pricing typically results in lower per-student costs than retail bookstore prices.',
                  },
                ].map((item, idx) => (
                  <div key={idx} style={{
                    background: '#fafafa',
                    border: '2px solid #dadce0',
                    borderRadius: '12px',
                    padding: '32px',
                  }}>
                    <h3 style={{ fontSize: '20px', fontWeight: 500, marginBottom: '12px' }}>{item.title}</h3>
                    <p style={{ color: '#5f6368', fontSize: '15px', lineHeight: 1.6 }}>{item.desc}</p>
                  </div>
                ))}
              </div>
            </section>

            {/* Billing Model */}
            <section style={{ background: '#f8f9fa', padding: '48px', borderRadius: '16px', marginBottom: '80px' }}>
              <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '32px' }}>How Billing Works</h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
                <div>
                  <h4 style={{ fontSize: '20px', fontWeight: 500, marginBottom: '12px' }}>Automatic Enrollment</h4>
                  <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                    Students registered for your course automatically receive access through the LMS. The charge appears on their tuition bill.
                  </p>
                </div>
                <div>
                  <h4 style={{ fontSize: '20px', fontWeight: 500, marginBottom: '12px' }}>Opt-Out Window</h4>
                  <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                    Students have a defined period (typically 1-2 weeks) to opt out if they prefer to source materials elsewhere or already own them.
                  </p>
                </div>
                <div>
                  <h4 style={{ fontSize: '20px', fontWeight: 500, marginBottom: '12px' }}>Financial Aid Integration</h4>
                  <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                    Because the cost is part of tuition, students can use grants, loans, and scholarships to cover course materials. This removes upfront cost barriers.
                  </p>
                </div>
              </div>
            </section>

            {/* Who Benefits */}
            <section style={{ marginBottom: '80px' }}>
              <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '32px' }}>Who Benefits</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '24px' }}>
                {[
                  { who: 'Students', benefit: 'Immediate access, financial aid coverage, lower costs through institutional pricing' },
                  { who: 'Faculty', benefit: 'Day-one readiness, consistent materials across all students, reduced administrative burden' },
                  { who: 'Institutions', benefit: 'Improved student success metrics, streamlined bookstore operations, better retention' },
                ].map((item, idx) => (
                  <div key={idx} style={{
                    background: '#fafafa',
                    padding: '32px',
                    borderRadius: '12px',
                    border: '2px solid #e0e0e0',
                  }}>
                    <h4 style={{ fontSize: '18px', fontWeight: 600, marginBottom: '12px', color: '#ff6b00' }}>{item.who}</h4>
                    <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>{item.benefit}</p>
                  </div>
                ))}
              </div>
            </section>

            {/* IP Protection Note */}
            <section style={{
              padding: '80px 48px',
              textAlign: 'center',
              background: 'white',
            }}>
              <h2 style={{
                fontSize: '48px',
                fontWeight: 500,
                letterSpacing: '-1px',
                lineHeight: 1.2,
                marginBottom: '24px',
                color: '#202124',
              }}>
                Your Intellectual Property <span style={{ color: '#ff6b00' }}>Stays Protected</span>
              </h2>
              <p style={{
                fontSize: '20px',
                color: '#5f6368',
                maxWidth: '900px',
                margin: '0 auto 40px',
                lineHeight: 1.6,
              }}>
                Digital delivery doesn't mean losing control. VitalSource uses DRM protection to prevent unauthorized sharing. You still own the copyright. You still control updates and revisions. Inclusive Access is just a delivery mechanism. Your IP rights remain unchanged.
              </p>
              <button
                onClick={() => {
                  setCurrentPage('contact');
                  window.scrollTo(0, 0);
                }}
                style={{
                  background: '#ff6b00',
                  color: 'white',
                  padding: '16px 40px',
                  borderRadius: '24px',
                  border: 'none',
                  fontSize: '16px',
                  fontWeight: 500,
                  cursor: 'pointer',
                }}
              >
                Explore Inclusive Access Options
              </button>
            </section>
          </div>
        )}

        {/* TAB 3: RESEARCH */}
        {activeTab === 'research' && (
          <div>
            <h2 style={{ fontSize: '40px', marginBottom: '32px' }}>Research Tab - Testing</h2>
            <p style={{ fontSize: '18px', marginBottom: '500px' }}>This is a simplified research tab for testing. Scroll down to see if it still switches.</p>
            <p style={{ fontSize: '18px', marginBottom: '500px' }}>Still scrolling...</p>
            <p style={{ fontSize: '18px', marginBottom: '500px' }}>Keep scrolling...</p>
            <p style={{ fontSize: '18px' }}>End of test content</p>
          </div>
        )}
          <div>
      </div>
    );
  };

  const HowThisWorksPage = () => (
    <div style={{ padding: '80px 48px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1 style={{ fontSize: '48px', fontWeight: 500, letterSpacing: '-1.5px', marginBottom: '24px' }}>
        How This Works
      </h1>
      <p style={{ fontSize: '20px', color: '#5f6368', marginBottom: '64px', maxWidth: '800px' }}>
        From your first email to day-one delivery, here's the <span style={{ color: '#ff6b00', fontWeight: 600 }}>full process</span>.
      </p>

      {/* The Complete Journey */}
      <section style={{ marginBottom: '80px' }}>
        <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '48px' }}>The Complete Journey</h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: '24px',
        }}>
          {[
            { step: '1', title: 'Submit Your Content', desc: 'Upload your Word docs, PDFs, or slides through our portal or email them directly.' },
            { step: '2', title: 'Copyright Assessment', desc: 'We review all materials and identify what needs copyright clearance.' },
            { step: '3', title: 'Layout & Design', desc: 'Professional formatting, custom cover design, and academic styling.' },
            { step: '4', title: 'Your Review', desc: 'You approve the final design before we proceed to production.' },
            { step: '5', title: 'Production', desc: 'Print manufacturing or digital file preparation, depending on your format.' },
            { step: '6', title: 'Delivery', desc: 'Materials arrive at the bookstore or go live in your LMS.' },
            { step: '7', title: 'Student Access', desc: 'Every student has materials ready on day one of class.' },
            { step: '8', title: 'Semester-End', desc: 'Royalty payments issued directly to you or your department.' },
          ].map((item, idx) => (
            <div key={idx} style={{
              background: 'white',
              border: '2px solid #f0f0f0',
              borderRadius: '16px',
              padding: '32px',
              position: 'relative',
              transition: 'all 0.3s ease',
            }}>
              <div style={{
                position: 'absolute',
                top: '-16px',
                left: '24px',
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                background: idx % 2 === 0 ? '#ff6b00' : '#667eea',
                color: 'white',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '18px',
                fontWeight: 700,
              }}>
                {item.step}
              </div>
              <h4 style={{
                fontSize: '20px',
                fontWeight: 600,
                marginTop: '16px',
                marginBottom: '12px',
                color: '#202124',
              }}>
                {item.title}
              </h4>
              <p style={{
                fontSize: '15px',
                color: '#5f6368',
                lineHeight: 1.6,
              }}>
                {item.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Timeline Expectations */}
      <section style={{
        background: 'linear-gradient(to right, rgba(255, 107, 0, 0.05), rgba(102, 126, 234, 0.05))',
        padding: '64px 48px',
        borderRadius: '24px',
        marginBottom: '80px',
      }}>
        <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '32px', textAlign: 'center' }}>
          Timeline Expectations
        </h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
          gap: '32px',
          maxWidth: '900px',
          margin: '0 auto',
        }}>
          {[
            { time: '1-2 weeks', task: 'Copyright clearance & manuscript prep', icon: 'ðŸ“‹' },
            { time: '3-5 days', task: 'Design, layout & your review', icon: 'ðŸŽ¨' },
            { time: '1 week', task: 'Print production or digital setup', icon: 'âš™ï¸' },
            { time: 'Day One', task: 'Students have materials in hand', icon: 'âœ…' },
          ].map((item, idx) => (
            <div key={idx} style={{
              background: 'white',
              padding: '32px',
              borderRadius: '16px',
              textAlign: 'center',
            }}>
              <div style={{ fontSize: '48px', marginBottom: '16px' }}>{item.icon}</div>
              <div style={{
                fontSize: '24px',
                fontWeight: 700,
                color: '#ff6b00',
                marginBottom: '8px',
              }}>
                {item.time}
              </div>
              <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.5 }}>
                {item.task}
              </p>
            </div>
          ))}
        </div>
        <p style={{
          textAlign: 'center',
          marginTop: '48px',
          fontSize: '16px',
          color: '#5f6368',
        }}>
          <strong style={{ color: '#202124' }}>Standard turnaround: 4-6 weeks from submission to delivery</strong>
        </p>
        <div style={{
          marginTop: '32px',
          padding: '32px',
          background: 'white',
          borderRadius: '16px',
          borderLeft: '6px solid #ff6b00',
          maxWidth: '800px',
          margin: '32px auto 0',
        }}>
          <p style={{
            fontSize: '18px',
            color: '#202124',
            lineHeight: 1.7,
            marginBottom: '12px',
          }}>
            <strong>Need it faster?</strong> We can expedite production when deadlines are tight. Rush projects have been turned around in as little as a few days when necessary.
          </p>
          <p style={{
            fontSize: '16px',
            color: '#5f6368',
            lineHeight: 1.7,
            fontStyle: 'italic',
          }}>
            35 years. Zero late deliveries. We've never missed a semester startâ€”and we're not about to start now.
          </p>
        </div>
      </section>

      {/* Full-Service Support */}
      <section style={{ marginBottom: '80px' }}>
        <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '32px' }}>What We Handle for You</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '24px' }}>
          {[
            {
              icon: 'âœï¸',
              title: 'Editorial & Design',
              desc: 'Professional layout, custom covers, and academic formatting that makes your content shine.',
            },
            {
              icon: 'Â©ï¸',
              title: 'Copyright Clearance',
              desc: 'We handle all permissions, pay all fees, and shield you from legal liability.',
            },
            {
              icon: 'ðŸ­',
              title: 'Print Manufacturing',
              desc: 'High-quality printing with binding options: coil, perfect, or GBC.',
            },
            {
              icon: 'ðŸ’»',
              title: 'Digital Publishing',
              desc: 'LMS integration, VitalSource hosting, and DRM protection for your IP.',
            },
            {
              icon: 'ðŸª',
              title: 'Bookstore Relations',
              desc: 'Direct coordination with campus bookstoresâ€”inventory, pricing, delivery.',
            },
            {
              icon: 'ðŸ’°',
              title: 'Royalty Accounting',
              desc: 'Transparent tracking and semester-end payments directly to you.',
            },
          ].map((item, idx) => (
            <div key={idx} style={{
              background: 'white',
              border: '1px solid #e8e8e8',
              borderRadius: '16px',
              padding: '32px',
              transition: 'all 0.3s ease',
            }}>
              <div style={{
                fontSize: '40px',
                marginBottom: '16px',
              }}>
                {item.icon}
              </div>
              <h4 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>
                {item.title}
              </h4>
              <p style={{ fontSize: '15px', color: '#5f6368', lineHeight: 1.6 }}>
                {item.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* What Makes Us Different */}
      <section style={{ marginBottom: '80px' }}>
        <h2 style={{ fontSize: '36px', fontWeight: 500, marginBottom: '48px' }}>What Makes Us Different</h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
          gap: '32px',
        }}>
          {[
            {
              title: 'Direct Professor Support',
              desc: 'You work directly with usâ€”no layers of account managers or bureaucracy. Email or call, and you talk to the people actually doing the work.',
            },
            {
              title: 'No Minimum Orders',
              desc: 'Whether you need 15 copies or 500, we treat your project with the same care and attention.',
            },
            {
              title: '35 Years of Trust',
              desc: 'We\'ve been doing this since 1991. We know academic publishing, we know bookstores, and we know what professors need.',
            },
          ].map((item, idx) => (
            <div key={idx} style={{
              background: '#f8f9fa',
              padding: '40px',
              borderRadius: '16px',
              borderLeft: '6px solid #ff6b00',
            }}>
              <h4 style={{ fontSize: '22px', fontWeight: 600, marginBottom: '16px', color: '#202124' }}>
                {item.title}
              </h4>
              <p style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.7 }}>
                {item.desc}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Final Hero CTA */}
      <section style={{
        padding: '80px 48px',
        textAlign: 'center',
        background: 'white',
      }}>
        <h2 style={{
          fontSize: '48px',
          fontWeight: 500,
          letterSpacing: '-1px',
          lineHeight: 1.2,
          marginBottom: '24px',
          color: '#202124',
        }}>
          Ready to <span style={{ color: '#ff6b00' }}>Get Started</span>?
        </h2>
        <p style={{
          fontSize: '20px',
          color: '#5f6368',
          maxWidth: '800px',
          margin: '0 auto 40px',
          lineHeight: 1.6,
        }}>
          The process is simpler than you think. Let's talk about your coursepack and we'll walk you through every step.
        </p>
        <button
          onClick={() => {
            setCurrentPage('contact');
            window.scrollTo(0, 0);
          }}
          style={{
            background: '#ff6b00',
            color: 'white',
            padding: '16px 40px',
            borderRadius: '24px',
            border: 'none',
            fontSize: '16px',
            fontWeight: 500,
            cursor: 'pointer',
          }}
        >
          Start Your Project
        </button>
      </section>
    </div>
  );

  // ============================================================================
  // PAGE 6: INNOVATION (Existing Claude content - unchanged)
  // ============================================================================
  const InnovationPage = () => (
    <div>
      {/* Hero */}
      <section style={{
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        padding: '120px 48px',
        color: 'white',
        textAlign: 'center',
      }}>
        <h1 style={{ fontSize: '56px', fontWeight: 500, letterSpacing: '-1.5px', marginBottom: '24px' }}>
          Coursepack+ & LAYERS
        </h1>
        <p style={{ fontSize: '24px', opacity: 0.95, maxWidth: '900px', margin: '0 auto' }}>
          What if the same tools that help you publish coursepacks could also help you <span style={{ color: '#ff6b00', fontWeight: 600 }}>design better courses</span>?
        </p>
      </section>

      {/* The Problem */}
      <section style={{ padding: '80px 48px', maxWidth: '1000px', margin: '0 auto' }}>
        <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '32px' }}>The Engagement Crisis</h2>
        <div style={{ background: '#f8f9fa', padding: '48px', borderRadius: '16px', marginBottom: '48px' }}>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368', marginBottom: '24px' }}>
            Professors everywhere are facing the same challenge: students are disengaged, distracted, and struggling to connect with traditional academic materials.
          </p>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368' }}>
            It's not about "dumbing things down." It's about meeting students where they areâ€”without sacrificing rigor or depth.
          </p>
        </div>
      </section>

      {/* The Vision */}
      <section style={{ background: '#f8f9fa', padding: '80px 48px' }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto' }}>
          <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '32px' }}>Introducing Coursepack+</h2>
          <p style={{ fontSize: '20px', lineHeight: 1.7, color: '#5f6368', marginBottom: '48px' }}>
            A conversational AI brainstorming partner that helps faculty innovate their coursesâ€”without forcing them into cookie-cutter EdTech platforms.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmin(300px, 1fr))', gap: '32px' }}>
            {[
              {
                title: 'Brainstorm Course Innovations',
                desc: 'Explore new ways to present material, engage students, and assess learningâ€”tailored to your discipline and teaching style.',
              },
              {
                title: 'Design Multimodal Materials',
                desc: 'From interactive timelines to podcast scripts, create materials that meet Gen Z where they are.',
              },
              {
                title: 'Keep Your Academic Freedom',
                desc: 'You own the ideas. You control the pedagogy. We just help you articulate and execute your vision.',
              },
            ].map((item, idx) => (
              <div key={idx} style={{
                background: 'white',
                padding: '32px',
                borderRadius: '12px',
                border: '1px solid #dadce0',
              }}>
                <h3 style={{ fontSize: '22px', fontWeight: 500, marginBottom: '16px' }}>{item.title}</h3>
                <p style={{ color: '#5f6368', fontSize: '16px', lineHeight: 1.6 }}>{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* LAYERS Framework */}
      <section style={{ padding: '80px 48px', maxWidth: '1000px', margin: '0 auto' }}>
        <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '24px' }}>Built on LAYERS</h2>
        <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368', marginBottom: '48px' }}>
          LAYERS is our philosophy for human-AI collaboration. It ensures that AI enhances your expertiseâ€”never replaces it.
        </p>

        <div style={{
          background: '#f8f9fa',
          padding: '48px',
          borderRadius: '16px',
        }}>
          <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '24px', color: '#202124' }}>
            Core Principles
          </h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
            {[
              { title: 'Language as Foundation', desc: 'Clear communication between human and AI creates better outcomes' },
              { title: 'Augmentation, Not Replacement', desc: 'AI expands what\'s possible without diminishing human expertise' },
              { title: 'Human Agency First', desc: 'You stay in control of decisions, direction, and final output' },
              { title: 'Iterative Collaboration', desc: 'Multiple rounds of refinement build toward the best solution' },
              { title: 'Transparency Throughout', desc: 'No black boxesâ€”understand how and why AI makes suggestions' },
            ].map((item, idx) => (
              <div key={idx} style={{
                background: 'white',
                padding: '24px',
                borderRadius: '12px',
                borderLeft: '4px solid #667eea',
              }}>
                <h4 style={{ fontSize: '18px', fontWeight: 500, marginBottom: '8px' }}>{item.title}</h4>
                <p style={{ color: '#5f6368', fontSize: '15px', lineHeight: 1.6 }}>{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Current Status */}
      <section style={{ background: '#fff3cd', padding: '80px 48px' }}>
        <div style={{ maxWidth: '1000px', margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ fontSize: '40px', fontWeight: 500, marginBottom: '24px' }}>Currently in Development</h2>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368', marginBottom: '32px' }}>
            We're building Coursepack+ with a small group of faculty partners. If you're interested in shaping the future of course design tools, we'd love to hear from you.
          </p>
          <button
            onClick={() => setCurrentPage('contact')}
            style={{
              background: '#ff6b00',
              color: 'white',
              padding: '14px 36px',
              borderRadius: '24px',
              border: 'none',
              fontSize: '16px',
              fontWeight: 500,
              cursor: 'pointer',
            }}
          >
            Join the Waitlist
          </button>
        </div>
      </section>
    </div>
  );

  // ============================================================================
  // PAGE 7: MANIFESTO (Renamed from About - existing Claude content)
  // ============================================================================
  const ManifestoPage = () => (
    <div style={{ padding: '80px 48px', maxWidth: '1000px', margin: '0 auto' }}>
      <h1 style={{ fontSize: '48px', fontWeight: 500, letterSpacing: '-1.5px', marginBottom: '24px' }}>
        Manifesto
      </h1>
      <p style={{ fontSize: '20px', color: '#5f6368', marginBottom: '64px', maxWidth: '800px' }}>
        A 35-year family business built on trust, expertise, and a deep respect for academic work.
      </p>

      {/* Origin Story */}
      <section style={{ marginBottom: '80px' }}>
        <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '24px' }}>Our Story</h2>
        <div style={{ background: '#f8f9fa', padding: '48px', borderRadius: '16px' }}>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368', marginBottom: '24px' }}>
            In 1991, founder Lee Daniels launched PennText from his college dorm room with nothing but a Lotus 123 spreadsheet and a belief that professors deserved better publishing options.
          </p>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368', marginBottom: '24px' }}>
            Decades before Amazon disrupted textbook publishing, we were already helping faculty maintain control of their intellectual property while lowering costs for students.
          </p>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368' }}>
            Today, we're still family-owned, still focused on faculty needs, and still committed to the principles that guided us from day one: trust, transparency, and academic freedom.
          </p>
        </div>
      </section>

      {/* Values */}
      <section style={{ marginBottom: '80px' }}>
        <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '32px' }}>What Makes Us Different</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '24px' }}>
          {[
            { title: 'Faculty First', desc: 'Your expertise, your vision, your rights. We exist to support your workâ€”not profit from it.' },
            { title: 'Intellectual Property Rights Matter', desc: 'You should own what you create. This isn\'t radicalâ€”it\'s basic respect.' },
            { title: 'Students Deserve Fair Prices', desc: 'Education is expensive enough. Course materials shouldn\'t break the bank.' },
            { title: 'Innovation Without Disruption', desc: 'New tools should enhance teaching, not force-fit it into corporate platforms.' },
          ].map((value, idx) => (
            <div key={idx} style={{
              background: 'white',
              border: '1px solid #dadce0',
              borderRadius: '12px',
              padding: '32px',
            }}>
              <h3 style={{ fontSize: '20px', fontWeight: 500, marginBottom: '12px' }}>{value.title}</h3>
              <p style={{ color: '#5f6368', fontSize: '15px', lineHeight: 1.6 }}>{value.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Philosophy */}
      <section style={{ marginBottom: '80px' }}>
        <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '24px' }}>Our Philosophy</h2>
        <div style={{ background: '#f8f9fa', padding: '48px', borderRadius: '16px' }}>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368', marginBottom: '24px' }}>
            We believe that technology should serve education, not the other way around. AI and digital tools can enhance teachingâ€”but only when they're built around pedagogical goals rather than corporate metrics.
          </p>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368' }}>
            This means respecting faculty expertise, protecting intellectual property, maintaining academic freedom, and keeping student costs reasonable. These aren't competing prioritiesâ€”they're the foundation of everything we do.
          </p>
        </div>
      </section>

      {/* Team */}
      <section style={{ marginBottom: '80px' }}>
        <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '24px' }}>Leadership</h2>
        <div style={{ background: '#f8f9fa', padding: '48px', borderRadius: '16px' }}>
          <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '16px' }}>Lee Daniels, Founder</h3>
          <p style={{ fontSize: '16px', lineHeight: 1.7, color: '#5f6368', marginBottom: '16px' }}>
            Lee brings over three decades of academic publishing experience, a background in communications and psychology, and a deep commitment to protecting faculty rights.
          </p>
          <p style={{ fontSize: '16px', lineHeight: 1.7, color: '#5f6368' }}>
            Before founding PennText, Lee launched a textbook marketplace from his dorm room in 1991â€”long before online education became mainstream. He's been thinking about how technology can serve education (not the other way around) ever since.
          </p>
        </div>
      </section>

      {/* Location */}
      <section>
        <h2 style={{ fontSize: '32px', fontWeight: 500, marginBottom: '24px' }}>Where We're Based</h2>
        <div style={{ background: '#f8f9fa', padding: '48px', borderRadius: '16px' }}>
          <p style={{ fontSize: '18px', lineHeight: 1.7, color: '#5f6368' }}>
            We operate from Downingtown, Pennsylvania, serving universities and colleges across the Mid-Atlantic and beyond. Our local roots keep us grounded in the real needs of faculty and students, not abstract market trends.
          </p>
        </div>
      </section>
    </div>
  );

  // ============================================================================
  // PAGE 8: CASE STUDIES (Renamed from Case Study - existing Claude content)
  // ============================================================================
  // ============================================================================
  // VIDEO TOPICS BANK - Admin/Content Planning Page
  // ============================================================================
  const VideoTopicsPage = () => (
    <div style={{ padding: '80px 48px', maxWidth: '1400px', margin: '0 auto', background: '#f8f9fa', minHeight: '100vh' }}>
      <div style={{ marginBottom: '48px' }}>
        <h1 style={{ fontSize: '48px', fontWeight: 500, letterSpacing: '-1.5px', marginBottom: '16px' }}>
          Video Topic Bank
        </h1>
        <p style={{ fontSize: '18px', color: '#5f6368', lineHeight: 1.6 }}>
          Social media content ideas from the Maria conversation. Each topic funnels to a specific page on the site.
        </p>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
        {[
          {
            title: 'Your Coursepack IS Your Curriculum',
            hook: 'Publishing your curriculum isn\'t optional anymore',
            points: [
              'The mismatch between syllabus and textbook',
              'Students buying 18 chapters but only using 3',
              'How coursepacks eliminate that waste',
              'Control = respect for both you and students',
            ],
            funnelTo: 'Homepage / Curriculum Banner',
            emotional: 'Empowerment + Frustration with waste',
          },
          {
            title: 'The Frozen Dinner Professor',
            hook: 'Students can tell when you don\'t care about your materials',
            points: [
              'Disorganized syllabus = immediate red flag',
              'Expensive textbook you only use 3 chapters from = "this prof doesn\'t care"',
              'Frozen dinner vs. chef-crafted dish analogy',
              'Brand positioning and authority in the classroom',
            ],
            funnelTo: 'Why Build a Coursepack / Brand section',
            emotional: 'Pride + Professional credibility',
          },
          {
            title: 'Is AI Going to Take Your Lectures?',
            hook: 'If you don\'t publish it, who owns it?',
            points: [
              'Institutions claiming ownership of classroom content',
              'AI models trained on professor lectures',
              'LMS platforms beholden to institutions, not faculty',
              'Publishing = copyright protection',
            ],
            funnelTo: 'Royalties & IP Page / IP Protection section',
            emotional: 'Fear + Urgency',
          },
          {
            title: 'Why Textbooks Are Puzzles (And Students Hate Puzzles)',
            hook: 'Gen Z expects clarity, not exploration',
            points: [
              'Textbook = 500 pages of "figure it out"',
              'Good for PhD students, bad for undergrads',
              'Gen Z learning: YouTube-style, step-by-step, clear',
              'Coursepack = focused craft, not puzzle',
            ],
            funnelTo: 'What We Publish / Layering Content section',
            emotional: 'Frustration with student engagement',
          },
          {
            title: 'You Don\'t Have to Write a Whole Book',
            hook: 'Start with one chapter. Add more each semester.',
            points: [
              'Modular approach to publishing',
              'Chapter 1 this year, Chapter 2 next year',
              'Layering content over time',
              'Eventually = your full textbook, your way',
            ],
            funnelTo: 'What We Publish / Your Original Textbook card',
            emotional: 'Relief + Permission to start small',
          },
          {
            title: 'The Professor Marketplace Is Coming',
            hook: 'What if you could sell your chapter to other professors?',
            points: [
              'Content marketplace vision',
              'Professors competing on quality, not just price',
              'Built-in peer review through adoption',
              'Royalties from other faculty using your content',
            ],
            funnelTo: 'Innovation Page / Future vision',
            emotional: 'Excitement + Financial opportunity',
          },
          {
            title: 'Nobody Taught You How to Do This',
            hook: 'Most professors never get an orientation on course materials',
            points: [
              'Adjuncts thrown in with no training',
              'Expected to "just know" how publishing works',
              'Two audiences: experts who know + beginners who don\'t',
              'We meet you wherever you are',
            ],
            funnelTo: 'How to Build a Coursepack section',
            emotional: 'Validation + Support',
          },
          {
            title: 'What "Layering Content" Actually Means',
            hook: 'You\'re not writing from scratch. You\'re compiling the best sources.',
            points: [
              'Chapter from Book A + Article from Journal B + Your lecture notes',
              'We handle copyright clearance and licensing',
              'Think of it as curating, not creating',
              'Your expertise = how you layer it together',
            ],
            funnelTo: 'Layering Content Explainer section',
            emotional: 'Clarity + Relief (it\'s easier than they think)',
          },
          {
            title: 'We\'ve Never Missed a Semester Start',
            hook: '35 years. Zero late deliveries.',
            points: [
              'Rush service available when needed',
              'Turn projects around in days if necessary',
              'Direct professor support, no bureaucracy',
              'Reliability you can stake your reputation on',
            ],
            funnelTo: 'How This Works Page / Timeline section',
            emotional: 'Trust + Reliability',
          },
          {
            title: 'Students Only Pay for What They Use',
            hook: 'Why should they buy 18 chapters if you only teach 3?',
            points: [
              'Respect student budgets',
              'Custom = lower costs',
              'No bundled content waste',
              'Direct correlation: what you teach = what they buy',
            ],
            funnelTo: 'Homepage / Student Costs section',
            emotional: 'Fairness + Student advocacy',
          },
          {
            title: 'Print vs. Digital: An Honest Conversation',
            hook: 'The right format depends on your course, not our preference',
            points: [
              'Print for labs, focus, tangible learning',
              'Digital for searchability, updates, accessibility',
              'We support both. You decide.',
              'Format choice = pedagogical choice',
            ],
            funnelTo: 'Print & Digital Page',
            emotional: 'Respect for faculty autonomy',
          },
          {
            title: 'Your Intellectual Property Is Your Legacy',
            hook: 'Protect it. Formalize it. Own it.',
            points: [
              'Publishing = legal protection',
              'Your teaching philosophy, formalized',
              'Not just a job. A legacy.',
              'What will you leave behind?',
            ],
            funnelTo: 'Royalties & IP Page',
            emotional: 'Legacy + Long-term thinking',
          },
        ].map((topic, idx) => (
          <div key={idx} style={{
            background: 'white',
            padding: '32px',
            borderRadius: '16px',
            border: '2px solid #e8e8e8',
          }}>
            <div style={{ display: 'flex', gap: '32px' }}>
              <div style={{
                minWidth: '48px',
                height: '48px',
                borderRadius: '50%',
                background: idx % 2 === 0 ? '#ff6b00' : '#667eea',
                color: 'white',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '20px',
                fontWeight: 700,
                flexShrink: 0,
              }}>
                {idx + 1}
              </div>
              <div style={{ flex: 1 }}>
                <h3 style={{ fontSize: '24px', fontWeight: 600, marginBottom: '8px', color: '#202124' }}>
                  {topic.title}
                </h3>
                <p style={{ 
                  fontSize: '16px', 
                  color: '#ff6b00', 
                  fontStyle: 'italic',
                  marginBottom: '16px',
                  fontWeight: 500,
                }}>
                  "{topic.hook}"
                </p>
                
                <div style={{ marginBottom: '16px' }}>
                  <strong style={{ fontSize: '14px', color: '#5f6368', textTransform: 'uppercase', letterSpacing: '1px' }}>
                    Key Talking Points:
                  </strong>
                  <ul style={{ 
                    marginTop: '8px',
                    paddingLeft: '20px',
                    color: '#5f6368',
                    fontSize: '15px',
                    lineHeight: 1.8,
                  }}>
                    {topic.points.map((point, pidx) => (
                      <li key={pidx}>{point}</li>
                    ))}
                  </ul>
                </div>

                <div style={{ 
                  display: 'grid',
                  gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
                  gap: '16px',
                  marginTop: '20px',
                  paddingTop: '20px',
                  borderTop: '1px solid #f0f0f0',
                }}>
                  <div>
                    <div style={{ fontSize: '12px', color: '#5f6368', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '4px' }}>
                      Funnels To:
                    </div>
                    <div style={{ fontSize: '14px', color: '#202124', fontWeight: 500 }}>
                      {topic.funnelTo}
                    </div>
                  </div>
                  <div>
                    <div style={{ fontSize: '12px', color: '#5f6368', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '4px' }}>
                      Emotional Hook:
                    </div>
                    <div style={{ fontSize: '14px', color: '#667eea', fontWeight: 500 }}>
                      {topic.emotional}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Quick Access Instructions */}
      <div style={{
        marginTop: '64px',
        padding: '32px',
        background: 'linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%)',
        borderRadius: '16px',
        borderLeft: '6px solid #ff6b00',
      }}>
        <h3 style={{ fontSize: '20px', fontWeight: 600, marginBottom: '12px', color: '#202124' }}>
          How to Use This Bank
        </h3>
        <ul style={{ fontSize: '16px', color: '#5f6368', lineHeight: 1.8, paddingLeft: '20px' }}>
          <li>Pick a topic that feels timely or relevant to your current content calendar</li>
          <li>Record a 60-90 second video using the hook and talking points</li>
          <li>Post to social media with a link to the corresponding page</li>
          <li>Track which topics drive the most engagement and double down</li>
        </ul>
      </div>
    </div>
  );

  // ============================================================================
  // CONTACT PAGE (Unchanged from original)
  // ============================================================================
  const ContactPage = () => (
    <div style={{ padding: '80px 48px', maxWidth: '800px', margin: '0 auto' }}>
      <h1 style={{ fontSize: '48px', fontWeight: 500, letterSpacing: '-1.5px', marginBottom: '24px' }}>
        Let's Talk
      </h1>
      <p style={{ fontSize: '20px', color: '#5f6368', marginBottom: '64px' }}>
        Whether you're ready to start a coursepack project or just exploring options, we're here to help.
      </p>

      {/* Contact Form Placeholder */}
      <div style={{ background: '#f8f9fa', padding: '48px', borderRadius: '16px', marginBottom: '48px' }}>
        <h2 style={{ fontSize: '28px', fontWeight: 500, marginBottom: '32px' }}>Get in Touch</h2>
        
        <div style={{ marginBottom: '24px' }}>
          <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>Name</label>
          <input
            type="text"
            style={{
              width: '100%',
              padding: '12px',
              borderRadius: '8px',
              border: '1px solid #dadce0',
              fontSize: '15px',
            }}
            placeholder="Dr. Jane Smith"
          />
        </div>

        <div style={{ marginBottom: '24px' }}>
          <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>Email</label>
          <input
            type="email"
            style={{
              width: '100%',
              padding: '12px',
              borderRadius: '8px',
              border: '1px solid #dadce0',
              fontSize: '15px',
            }}
            placeholder="jane.smith@university.edu"
          />
        </div>

        <div style={{ marginBottom: '24px' }}>
          <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>Institution</label>
          <input
            type="text"
            style={{
              width: '100%',
              padding: '12px',
              borderRadius: '8px',
              border: '1px solid #dadce0',
              fontSize: '15px',
            }}
            placeholder="University Name"
          />
        </div>

        <div style={{ marginBottom: '24px' }}>
          <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>I'm interested in...</label>
          <select
            style={{
              width: '100%',
              padding: '12px',
              borderRadius: '8px',
              border: '1px solid #dadce0',
              fontSize: '15px',
            }}
          >
            <option>Publishing a coursepack</option>
            <option>Developing an original textbook</option>
            <option>Joining the Coursepack+ waitlist</option>
            <option>General inquiry</option>
          </select>
        </div>

        <div style={{ marginBottom: '32px' }}>
          <label style={{ display: 'block', marginBottom: '8px', fontSize: '14px', fontWeight: 500 }}>Tell us about your project</label>
          <textarea
            style={{
              width: '100%',
              padding: '12px',
              borderRadius: '8px',
              border: '1px solid #dadce0',
              fontSize: '15px',
              minHeight: '120px',
              fontFamily: 'inherit',
            }}
            placeholder="What are you working on? What do you need help with?"
          />
        </div>

        <button
          style={{
            background: '#ff6b00',
            color: 'white',
            padding: '14px 36px',
            borderRadius: '24px',
            border: 'none',
            fontSize: '16px',
            fontWeight: 500,
            cursor: 'pointer',
            width: '100%',
          }}
        >
          Send Message
        </button>
      </div>

      {/* Direct Contact */}
      <div style={{ textAlign: 'center' }}>
        <h3 style={{ fontSize: '24px', fontWeight: 500, marginBottom: '16px' }}>Prefer to call or email?</h3>
        <p style={{ fontSize: '16px', color: '#5f6368', marginBottom: '8px' }}>
          ðŸ“§ info@penntext.com
        </p>
        <p style={{ fontSize: '16px', color: '#5f6368' }}>
          ðŸ“ Downingtown, Pennsylvania
        </p>
      </div>
    </div>
  );

  // ============================================================================
  // RENDER LOGIC
  // ============================================================================
  const renderPage = () => {
    switch (currentPage) {
      case 'home': return <HomePage />;
      case 'royalties': return <RoyaltiesIPPage />;
      case 'formats': return <PrintDigitalPage />;
      case 'howthisworks': return <HowThisWorksPage />;
      case 'innovation': return <InnovationPage />;
      case 'manifesto': return <ManifestoPage />;
      case 'contact': return <ContactPage />;
      case 'videotopics': return <VideoTopicsPage />;
      default: return <HomePage />;
    }
  };

  return (
    <div style={{
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      color: '#202124',
      minHeight: '100vh',
    }}>
      <Header />
      {renderPage()}
      
      {/* Footer */}
      <footer style={{
        background: '#202124',
        color: 'white',
        padding: '48px',
        textAlign: 'center',
      }}>
        <p style={{ opacity: 0.7, fontSize: '14px' }}>PennText Academic Publishing | Downingtown, Pennsylvania</p>
        <p style={{ opacity: 0.7, fontSize: '14px', marginTop: '8px' }}>Â© 2024 PennText. All rights reserved.</p>
        <button
          onClick={() => {
            setCurrentPage('videotopics');
            window.scrollTo(0, 0);
          }}
          style={{
            marginTop: '16px',
            background: 'transparent',
            border: '1px solid rgba(255,255,255,0.3)',
            color: 'rgba(255,255,255,0.5)',
            padding: '8px 16px',
            borderRadius: '4px',
            fontSize: '12px',
            cursor: 'pointer',
            fontFamily: 'monospace',
          }}
        >
          [Admin: Video Topics]
        </button>
      </footer>
    </div>
  );
}
