Gedal Notes

By

zachgedal

Published on

in

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review: The Coming Wave - Interactive Analysis</title>
    https://cdn.tailwindcss.com
    https://cdn.jsdelivr.net/npm/chart.js
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fdfbf7; /* Warm neutral background */
            color: #2d3748;
        }
        h1, h2, h3, h4, .serif-font {
            font-family: 'Merriweather', serif;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 350px;
            max-height: 400px;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .active-tab {
            border-bottom: 2px solid #4a5568;
            color: #1a202c;
            font-weight: 600;
        }
        .inactive-tab {
            color: #718096;
        }
        .wave-gradient {
            background: linear-gradient(135deg, #e2e8f0 0%, #fdfbf7 100%);
        }
    </style>
    <!-- Chosen Palette: Warm Academics - Sand (#fdfbf7), Slate (#2d3748), Sage (#84a98c), Muted Clay (#d68c85) -->
    <!-- Application Structure Plan: 
         1. Hero Section: Blog-style header with review metadata (Zach, MBA student, Date).
         2. Executive Summary: High-level verdict and context (BUS 600).
         3. The Review Analysis Dashboard: 
            - Radar Chart: Visualizing the "Strongest Attributes" (Double-edged discussion, Accessibility, etc.).
            - Line Chart: Conceptualizing "The Coming Wave" vs Historical Trends mentioned.
         4. Key Themes Explorer: Interactive cards detailing specific insights (Historical Context, Tech Trends, Society).
         5. The Verdict: Final synthesis and recommendation.
    -->
    <!-- Visualization & Content Choices:
         - Radar Chart: To quantify the qualitative praise in the review (Accessibility, Credibility, Context, Caution).
         - Line Chart: To illustrate the "Historical Context" mentioned (Printing Press -> Industrial Rev -> AI).
         - Interactive Cards: To break down the text blocks into digestible "Insights".
         - NO SVG/Mermaid: All visuals via CSS or Chart.js.
    -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
</head>
<body class="antialiased">

    <!-- Navigation / Header -->
    <header class="w-full bg-white border-b border-stone-200 sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="h-8 w-8 bg-slate-800 rounded-full flex items-center justify-center text-white font-bold serif-font">Z</div>
                <span class="text-lg font-semibold tracking-tight text-slate-800">Zach's MBA Reviews</span>
            </div>
            <nav class="hidden md:flex space-x-8 text-sm font-medium text-slate-600">
                <a href="#" class="hover:text-slate-900 transition-colors">Home</a>
                <a href="#" class="text-slate-900">Current Review</a>
                <a href="#" class="hover:text-slate-900 transition-colors">Reading List</a>
                <a href="#" class="hover:text-slate-900 transition-colors">About</a>
            </nav>
        </div>
    </header>

    <!-- Main Content Container -->
    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12">

        <!-- Hero Section: The Book & Verdict -->
        <section class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
            <div class="md:col-span-8 space-y-4">
                <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-stone-100 text-stone-600 text-xs uppercase tracking-wide font-semibold">
                    <span>BUS 600 Assignment</span>
                    <span>&bull;</span>
                    <span>Feb 08, 2026</span>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-slate-900 leading-tight serif-font">
                    The Coming Wave: AI, Power, and Our Future
                </h1>
                <h2 class="text-xl text-slate-600 italic">by Mustafa Suleyman</h2>
                <p class="text-lg text-slate-700 leading-relaxed pt-2">
                    An insightful exploration of the "double-edged" nature of technology. A mix of wise caution and optimism from a DeepMind co-founder, providing essential context for understanding how AI fits into the history of human innovation.
                </p>
                <div class="flex items-center space-x-4 pt-4">
                    <div class="flex text-yellow-500 text-2xl">
                        ★ ★ ★ ★ ☆
                    </div>
                    <span class="text-sm text-slate-500 font-medium">(Shelved as "Liked it")</span>
                </div>
            </div>
            <!-- Interactive Book Card -->
            <div class="md:col-span-4 bg-white p-6 rounded-lg shadow-lg border border-stone-200 text-center card-hover">
                <div class="w-32 h-48 bg-slate-800 mx-auto shadow-md flex flex-col justify-center items-center text-white p-2 mb-4">
                    <span class="text-xs uppercase tracking-widest text-slate-400">Mustafa Suleyman</span>
                    <span class="font-bold serif-font text-xl mt-2 leading-none">The<br>Coming<br>Wave</span>
                </div>
                <button onclick="scrollToAnalysis()" class="w-full py-2 px-4 bg-slate-800 text-white rounded hover:bg-slate-700 transition-colors text-sm font-medium">
                    View Analysis
                </button>
                <div class="mt-4 text-xs text-left text-slate-500 space-y-1">
                    <p><strong>Reader:</strong> Zach (MBA Student)</p>
                    <p><strong>Context:</strong> Required Reading</p>
                    <p><strong>Status:</strong> Finished</p>
                </div>
            </div>
        </section>

        <hr class="border-stone-200">

        <!-- Section 1: The Reviewer's Lens (Radar Chart) -->
        <section id="analysis-section" class="space-y-6">
            <div class="max-w-2xl">
                <h3 class="text-2xl font-bold text-slate-800 serif-font">Reviewer's Assessment Criteria</h3>
                <p class="text-slate-600 mt-2">
                    In this section, we break down the key strengths of the book identified in the review. The chart below quantifies the reviewer's emphasis on specific attributes, such as the author's ability to make complex trends accessible and the balanced "double-edged" perspective presented.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-white p-6 rounded-xl border border-stone-200 shadow-sm">
                <!-- Textual Breakdown -->
                <div class="space-y-6">
                    <div>
                        <h4 class="font-bold text-slate-800 flex items-center">
                            <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                            Accessibility (High)
                        </h4>
                        <p class="text-sm text-slate-600 mt-1">
                            "The author discusses technology trends in a way that the average reader can understand... keeps the reader intelligent and insightful."
                        </p>
                    </div>
                    <div>
                        <h4 class="font-bold text-slate-800 flex items-center">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                            Balance & Caution (Very High)
                        </h4>
                        <p class="text-sm text-slate-600 mt-1">
                            "A wise caution... discusses the double-edged quality of technology... positives, negatives, and all shades in between."
                        </p>
                    </div>
                    <div>
                        <h4 class="font-bold text-slate-800 flex items-center">
                            <span class="w-2 h-2 bg-red-400 rounded-full mr-2"></span>
                            Credibility (High)
                        </h4>
                        <p class="text-sm text-slate-600 mt-1">
                            "Credentials as a co-founder of a technology company give him credibility."
                        </p>
                    </div>
                </div>

                <!-- Chart Container -->
                <div class="flex flex-col items-center justify-center">
                    <div class="chart-container">
                        <canvas id="attributesChart"></canvas>
                    </div>
                    <p class="text-xs text-center text-slate-400 mt-2">Relative strength of book attributes based on Zach's review.</p>
                </div>
            </div>
        </section>

        <!-- Section 2: Historical Context & The Wave (Line Chart) -->
        <section class="space-y-6">
            <div class="max-w-3xl">
                <h3 class="text-2xl font-bold text-slate-800 serif-font">The Historical Perspective</h3>
                <p class="text-slate-600 mt-2">
                    The review highlights the author's use of historical context to ground the hype. Suleyman compares the "Coming Wave" of AI to monumental shifts like the Printing Press and the Industrial Revolution. The interactive chart below conceptualizes this comparison of disruptive impact over time.
                </p>
            </div>

            <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm">
                <!-- Tabs for Interaction -->
                <div class="flex space-x-6 border-b border-stone-100 mb-6">
                    <button id="tab-chart" class="pb-2 text-sm font-medium active-tab focus:outline-none" onclick="switchView('chart')">Visualizing Impact</button>
                    <button id="tab-details" class="pb-2 text-sm font-medium inactive-tab focus:outline-none" onclick="switchView('details')">Reviewer's Take</button>
                </div>

                <!-- View 1: Chart -->
                <div id="view-chart" class="w-full">
                    <div class="chart-container">
                        <canvas id="historyChart"></canvas>
                    </div>
                    <div class="mt-4 flex justify-center space-x-6 text-xs text-slate-500">
                        <span class="flex items-center"><span class="w-3 h-3 bg-gray-300 rounded-full mr-1"></span> Printing Press</span>
                        <span class="flex items-center"><span class="w-3 h-3 bg-gray-500 rounded-full mr-1"></span> Industrial Rev.</span>
                        <span class="flex items-center"><span class="w-3 h-3 bg-indigo-600 rounded-full mr-1"></span> The Coming Wave (AI)</span>
                    </div>
                </div>

                <!-- View 2: Text Details -->
                <div id="view-details" class="hidden space-y-4">
                    <div class="bg-stone-50 p-4 rounded-lg border-l-4 border-indigo-500">
                        <h4 class="font-bold text-slate-800">Review Insight:</h4>
                        <p class="text-slate-700 mt-1 italic">"The author aids the reader... by placing concepts in historical context and comparing them to events such as the invention of the printing press and the Industrial Revolution."</p>
                    </div>
                    <p class="text-slate-600">
                        This historical grounding is cited as a key tool for managing "hype." By looking backward, the author allows business students (like Zach) to understand the magnitude of the current shift without falling into pure speculation.
                    </p>
                </div>
            </div>
        </section>

        <!-- Section 3: The Double-Edged Sword (Interactive Feature) -->
        <section class="space-y-6">
            <div class="max-w-3xl">
                <h3 class="text-2xl font-bold text-slate-800 serif-font">The Core Argument: A Double-Edged Sword</h3>
                <p class="text-slate-600 mt-2">
                    Identified as the "strongest attribute" of the book, the duality of technology is central to the review. Explore the opposing forces described by toggling the perspectives below.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Positive Edge -->
                <div class="group relative overflow-hidden rounded-xl bg-white border border-stone-200 shadow-sm hover:shadow-md transition-all cursor-pointer" onclick="highlightSword('good')">
                    <div class="absolute top-0 left-0 w-1 h-full bg-green-500 transition-all group-hover:w-2"></div>
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-slate-800 mb-2">Technological Optimism</h4>
                        <p class="text-slate-600 text-sm">Directed for the "good of the world." The author maintains an optimistic tone despite the risks, suggesting agency in how we shape the future.</p>
                        <div class="mt-4 pt-4 border-t border-stone-100 hidden group-hover:block animate-fade-in">
                            <span class="text-xs font-bold text-green-600 uppercase">Key Review Point</span>
                            <p class="text-xs text-slate-500 mt-1">"He discusses the negative aspects of technology in an optimistic manner."</p>
                        </div>
                    </div>
                </div>

                <!-- Negative Edge -->
                <div class="group relative overflow-hidden rounded-xl bg-white border border-stone-200 shadow-sm hover:shadow-md transition-all cursor-pointer" onclick="highlightSword('bad')">
                    <div class="absolute top-0 left-0 w-1 h-full bg-red-400 transition-all group-hover:w-2"></div>
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-slate-800 mb-2">Inherent Risks</h4>
                        <p class="text-slate-600 text-sm">The "Coming Wave" brings immense power that requires containment. Unchecked, the same tools for good can destabilize society.</p>
                        <div class="mt-4 pt-4 border-t border-stone-100 hidden group-hover:block animate-fade-in">
                            <span class="text-xs font-bold text-red-500 uppercase">Key Review Point</span>
                            <p class="text-xs text-slate-500 mt-1">"Discusses the double-edged quality of technology... and the ways in which society affects trends."</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Dynamic Reaction Text -->
            <div id="sword-reaction" class="bg-indigo-50 text-indigo-900 p-4 rounded-lg text-center text-sm hidden transition-all">
                <!-- Content injected via JS -->
            </div>
        </section>

        <!-- Final Recommendation -->
        <section class="bg-slate-800 rounded-2xl p-8 md:p-12 text-center text-white relative overflow-hidden">
            <div class="relative z-10 max-w-2xl mx-auto space-y-6">
                <h3 class="text-2xl md:text-3xl font-bold serif-font">Who Should Read This?</h3>
                <p class="text-slate-300 text-lg">
                    "Very informative for anyone in the business world who wishes to understand the ways in which technology trends interact with society and vice versa."
                </p>
                <div class="flex flex-wrap justify-center gap-3">
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-medium border border-slate-600">MBA Students</span>
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-medium border border-slate-600">Business Leaders</span>
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-medium border border-slate-600">Tech Optimists</span>
                </div>
            </div>
            <!-- Decorative circle -->
            <div class="absolute -top-24 -right-24 w-64 h-64 bg-slate-700 rounded-full opacity-50 blur-3xl"></div>
            <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-slate-700 rounded-full opacity-50 blur-3xl"></div>
        </section>

    </main>

    <footer class="bg-white border-t border-stone-200 mt-12 py-8">
        <div class="max-w-6xl mx-auto px-4 text-center text-slate-400 text-sm">
            <p>&copy; 2026 Zach's Reviews. Based on the BUS 600 Assignment.</p>
            <p class="mt-2 text-xs">Generated for educational purposes.</p>
        </div>
    </footer>

    <script>
        // --- Interaction Logic ---

        // Smooth Scroll
        function scrollToAnalysis() {
            document.getElementById('analysis-section').scrollIntoView({ behavior: 'smooth' });
        }

        // View Switcher for Historical Context Section
        function switchView(viewName) {
            const chartDiv = document.getElementById('view-chart');
            const detailsDiv = document.getElementById('view-details');
            const chartTab = document.getElementById('tab-chart');
            const detailsTab = document.getElementById('tab-details');

            if (viewName === 'chart') {
                chartDiv.classList.remove('hidden');
                detailsDiv.classList.add('hidden');
                chartTab.classList.add('active-tab');
                chartTab.classList.remove('inactive-tab');
                detailsTab.classList.add('inactive-tab');
                detailsTab.classList.remove('active-tab');
            } else {
                chartDiv.classList.add('hidden');
                detailsDiv.classList.remove('hidden');
                chartTab.classList.remove('active-tab');
                chartTab.classList.add('inactive-tab');
                detailsTab.classList.remove('inactive-tab');
                detailsTab.classList.add('active-tab');
            }
        }

        // Sword Interaction Logic
        function highlightSword(side) {
            const reactionBox = document.getElementById('sword-reaction');
            reactionBox.classList.remove('hidden');
            
            if (side === 'good') {
                reactionBox.innerHTML = `
                    <strong>The Optimistic View:</strong> Suleyman argues that with "wise caution," we can harness AI to solve critical global challenges like healthcare and energy.
                `;
                reactionBox.className = "bg-green-50 text-green-900 p-4 rounded-lg text-center text-sm transition-all border border-green-100";
            } else {
                reactionBox.innerHTML = `
                    <strong>The Risk View:</strong> Without "containment," the democratization of power could lead to instability. The review notes this balance is the book's strongest attribute.
                `;
                reactionBox.className = "bg-red-50 text-red-900 p-4 rounded-lg text-center text-sm transition-all border border-red-100";
            }
        }

        // --- Chart.js Implementations ---

        // 1. Radar Chart: Attributes
        const ctxAttributes = document.getElementById('attributesChart').getContext('2d');
        const attributesChart = new Chart(ctxAttributes, {
            type: 'radar',
            data: {
                labels: ['Historical Context', 'Optimism', 'Accessibility', 'Credibility', 'Caution'],
                datasets: [{
                    label: 'Review Emphasis',
                    data: [8, 7, 9, 8, 10], // Mock scores based on review text intensity
                    fill: true,
                    backgroundColor: 'rgba(99, 102, 241, 0.2)',
                    borderColor: 'rgb(99, 102, 241)',
                    pointBackgroundColor: 'rgb(99, 102, 241)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(99, 102, 241)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    r: {
                        angleLines: { color: '#e5e7eb' },
                        grid: { color: '#e5e7eb' },
                        pointLabels: {
                            font: { size: 12, family: "'Inter', sans-serif" },
                            color: '#4b5563'
                        },
                        suggestedMin: 0,
                        suggestedMax: 10,
                        ticks: { display: false } // Hide numbers for cleaner look
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw + '/10 Strength';
                            }
                        }
                    }
                }
            }
        });

        // 2. Line Chart: Historical Context
        // Conceptual representation of "Impact/Disruption" over time
        const ctxHistory = document.getElementById('historyChart').getContext('2d');
        const historyChart = new Chart(ctxHistory, {
            type: 'line',
            data: {
                labels: ['1400', '1500', '1600', '1700', '1800', '1900', '2000', '2025', '2035'],
                datasets: [
                    {
                        label: 'Printing Press Era',
                        data: [1, 20, 25, 30, 35, 40, 45, 45, 45],
                        borderColor: '#cbd5e1',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    },
                    {
                        label: 'Industrial Revolution',
                        data: [null, null, null, null, 10, 50, 80, 85, 90],
                        borderColor: '#64748b',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    },
                    {
                        label: 'The Coming Wave (AI)',
                        data: [null, null, null, null, null, null, 10, 60, 95], // Steeper curve
                        borderColor: '#4f46e5',
                        borderWidth: 3,
                        tension: 0.4,
                        pointBackgroundColor: '#4f46e5'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        display: false, // Conceptual chart, no y-axis needed
                        title: { display: true, text: 'Societal Impact / Disruption' }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { color: '#94a3b8' }
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                }
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review: The Coming Wave - Interactive Analysis</title>
    https://cdn.tailwindcss.com
    https://cdn.jsdelivr.net/npm/chart.js
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fdfbf7; /* Warm neutral background */
            color: #2d3748;
        }
        h1, h2, h3, h4, .serif-font {
            font-family: 'Merriweather', serif;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 350px;
            max-height: 400px;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .active-tab {
            border-bottom: 2px solid #4a5568;
            color: #1a202c;
            font-weight: 600;
        }
        .inactive-tab {
            color: #718096;
        }
        .wave-gradient {
            background: linear-gradient(135deg, #e2e8f0 0%, #fdfbf7 100%);
        }
    </style>
    <!-- Chosen Palette: Warm Academics - Sand (#fdfbf7), Slate (#2d3748), Sage (#84a98c), Muted Clay (#d68c85) -->
    <!-- Application Structure Plan: 
         1. Hero Section: Blog-style header with review metadata (Zach, MBA student, Date).
         2. Executive Summary: High-level verdict and context (BUS 600).
         3. The Review Analysis Dashboard: 
            - Radar Chart: Visualizing the "Strongest Attributes" (Double-edged discussion, Accessibility, etc.).
            - Line Chart: Conceptualizing "The Coming Wave" vs Historical Trends mentioned.
         4. Key Themes Explorer: Interactive cards detailing specific insights (Historical Context, Tech Trends, Society).
         5. The Verdict: Final synthesis and recommendation.
    -->
    <!-- Visualization & Content Choices:
         - Radar Chart: To quantify the qualitative praise in the review (Accessibility, Credibility, Context, Caution).
         - Line Chart: To illustrate the "Historical Context" mentioned (Printing Press -> Industrial Rev -> AI).
         - Interactive Cards: To break down the text blocks into digestible "Insights".
         - NO SVG/Mermaid: All visuals via CSS or Chart.js.
    -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
</head>
<body class="antialiased">

    <!-- Navigation / Header -->
    <header class="w-full bg-white border-b border-stone-200 sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="h-8 w-8 bg-slate-800 rounded-full flex items-center justify-center text-white font-bold serif-font">Z</div>
                <span class="text-lg font-semibold tracking-tight text-slate-800">Zach's MBA Reviews</span>
            </div>
            <nav class="hidden md:flex space-x-8 text-sm font-medium text-slate-600">
                <a href="#" class="hover:text-slate-900 transition-colors">Home</a>
                <a href="#" class="text-slate-900">Current Review</a>
                <a href="#" class="hover:text-slate-900 transition-colors">Reading List</a>
                <a href="#" class="hover:text-slate-900 transition-colors">About</a>
            </nav>
        </div>
    </header>

    <!-- Main Content Container -->
    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-12">

        <!-- Hero Section: The Book & Verdict -->
        <section class="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
            <div class="md:col-span-8 space-y-4">
                <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-stone-100 text-stone-600 text-xs uppercase tracking-wide font-semibold">
                    <span>BUS 600 Assignment</span>
                    <span>&bull;</span>
                    <span>Feb 08, 2026</span>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold text-slate-900 leading-tight serif-font">
                    The Coming Wave: AI, Power, and Our Future
                </h1>
                <h2 class="text-xl text-slate-600 italic">by Mustafa Suleyman</h2>
                <p class="text-lg text-slate-700 leading-relaxed pt-2">
                    An insightful exploration of the "double-edged" nature of technology. A mix of wise caution and optimism from a DeepMind co-founder, providing essential context for understanding how AI fits into the history of human innovation.
                </p>
                <div class="flex items-center space-x-4 pt-4">
                    <div class="flex text-yellow-500 text-2xl">
                        ★ ★ ★ ★ ☆
                    </div>
                    <span class="text-sm text-slate-500 font-medium">(Shelved as "Liked it")</span>
                </div>
            </div>
            <!-- Interactive Book Card -->
            <div class="md:col-span-4 bg-white p-6 rounded-lg shadow-lg border border-stone-200 text-center card-hover">
                <div class="w-32 h-48 bg-slate-800 mx-auto shadow-md flex flex-col justify-center items-center text-white p-2 mb-4">
                    <span class="text-xs uppercase tracking-widest text-slate-400">Mustafa Suleyman</span>
                    <span class="font-bold serif-font text-xl mt-2 leading-none">The<br>Coming<br>Wave</span>
                </div>
                <button onclick="scrollToAnalysis()" class="w-full py-2 px-4 bg-slate-800 text-white rounded hover:bg-slate-700 transition-colors text-sm font-medium">
                    View Analysis
                </button>
                <div class="mt-4 text-xs text-left text-slate-500 space-y-1">
                    <p><strong>Reader:</strong> Zach (MBA Student)</p>
                    <p><strong>Context:</strong> Required Reading</p>
                    <p><strong>Status:</strong> Finished</p>
                </div>
            </div>
        </section>

        <hr class="border-stone-200">

        <!-- Section 1: The Reviewer's Lens (Radar Chart) -->
        <section id="analysis-section" class="space-y-6">
            <div class="max-w-2xl">
                <h3 class="text-2xl font-bold text-slate-800 serif-font">Reviewer's Assessment Criteria</h3>
                <p class="text-slate-600 mt-2">
                    In this section, we break down the key strengths of the book identified in the review. The chart below quantifies the reviewer's emphasis on specific attributes, such as the author's ability to make complex trends accessible and the balanced "double-edged" perspective presented.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-white p-6 rounded-xl border border-stone-200 shadow-sm">
                <!-- Textual Breakdown -->
                <div class="space-y-6">
                    <div>
                        <h4 class="font-bold text-slate-800 flex items-center">
                            <span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
                            Accessibility (High)
                        </h4>
                        <p class="text-sm text-slate-600 mt-1">
                            "The author discusses technology trends in a way that the average reader can understand... keeps the reader intelligent and insightful."
                        </p>
                    </div>
                    <div>
                        <h4 class="font-bold text-slate-800 flex items-center">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
                            Balance & Caution (Very High)
                        </h4>
                        <p class="text-sm text-slate-600 mt-1">
                            "A wise caution... discusses the double-edged quality of technology... positives, negatives, and all shades in between."
                        </p>
                    </div>
                    <div>
                        <h4 class="font-bold text-slate-800 flex items-center">
                            <span class="w-2 h-2 bg-red-400 rounded-full mr-2"></span>
                            Credibility (High)
                        </h4>
                        <p class="text-sm text-slate-600 mt-1">
                            "Credentials as a co-founder of a technology company give him credibility."
                        </p>
                    </div>
                </div>

                <!-- Chart Container -->
                <div class="flex flex-col items-center justify-center">
                    <div class="chart-container">
                        <canvas id="attributesChart"></canvas>
                    </div>
                    <p class="text-xs text-center text-slate-400 mt-2">Relative strength of book attributes based on Zach's review.</p>
                </div>
            </div>
        </section>

        <!-- Section 2: Historical Context & The Wave (Line Chart) -->
        <section class="space-y-6">
            <div class="max-w-3xl">
                <h3 class="text-2xl font-bold text-slate-800 serif-font">The Historical Perspective</h3>
                <p class="text-slate-600 mt-2">
                    The review highlights the author's use of historical context to ground the hype. Suleyman compares the "Coming Wave" of AI to monumental shifts like the Printing Press and the Industrial Revolution. The interactive chart below conceptualizes this comparison of disruptive impact over time.
                </p>
            </div>

            <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm">
                <!-- Tabs for Interaction -->
                <div class="flex space-x-6 border-b border-stone-100 mb-6">
                    <button id="tab-chart" class="pb-2 text-sm font-medium active-tab focus:outline-none" onclick="switchView('chart')">Visualizing Impact</button>
                    <button id="tab-details" class="pb-2 text-sm font-medium inactive-tab focus:outline-none" onclick="switchView('details')">Reviewer's Take</button>
                </div>

                <!-- View 1: Chart -->
                <div id="view-chart" class="w-full">
                    <div class="chart-container">
                        <canvas id="historyChart"></canvas>
                    </div>
                    <div class="mt-4 flex justify-center space-x-6 text-xs text-slate-500">
                        <span class="flex items-center"><span class="w-3 h-3 bg-gray-300 rounded-full mr-1"></span> Printing Press</span>
                        <span class="flex items-center"><span class="w-3 h-3 bg-gray-500 rounded-full mr-1"></span> Industrial Rev.</span>
                        <span class="flex items-center"><span class="w-3 h-3 bg-indigo-600 rounded-full mr-1"></span> The Coming Wave (AI)</span>
                    </div>
                </div>

                <!-- View 2: Text Details -->
                <div id="view-details" class="hidden space-y-4">
                    <div class="bg-stone-50 p-4 rounded-lg border-l-4 border-indigo-500">
                        <h4 class="font-bold text-slate-800">Review Insight:</h4>
                        <p class="text-slate-700 mt-1 italic">"The author aids the reader... by placing concepts in historical context and comparing them to events such as the invention of the printing press and the Industrial Revolution."</p>
                    </div>
                    <p class="text-slate-600">
                        This historical grounding is cited as a key tool for managing "hype." By looking backward, the author allows business students (like Zach) to understand the magnitude of the current shift without falling into pure speculation.
                    </p>
                </div>
            </div>
        </section>

        <!-- Section 3: The Double-Edged Sword (Interactive Feature) -->
        <section class="space-y-6">
            <div class="max-w-3xl">
                <h3 class="text-2xl font-bold text-slate-800 serif-font">The Core Argument: A Double-Edged Sword</h3>
                <p class="text-slate-600 mt-2">
                    Identified as the "strongest attribute" of the book, the duality of technology is central to the review. Explore the opposing forces described by toggling the perspectives below.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Positive Edge -->
                <div class="group relative overflow-hidden rounded-xl bg-white border border-stone-200 shadow-sm hover:shadow-md transition-all cursor-pointer" onclick="highlightSword('good')">
                    <div class="absolute top-0 left-0 w-1 h-full bg-green-500 transition-all group-hover:w-2"></div>
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-slate-800 mb-2">Technological Optimism</h4>
                        <p class="text-slate-600 text-sm">Directed for the "good of the world." The author maintains an optimistic tone despite the risks, suggesting agency in how we shape the future.</p>
                        <div class="mt-4 pt-4 border-t border-stone-100 hidden group-hover:block animate-fade-in">
                            <span class="text-xs font-bold text-green-600 uppercase">Key Review Point</span>
                            <p class="text-xs text-slate-500 mt-1">"He discusses the negative aspects of technology in an optimistic manner."</p>
                        </div>
                    </div>
                </div>

                <!-- Negative Edge -->
                <div class="group relative overflow-hidden rounded-xl bg-white border border-stone-200 shadow-sm hover:shadow-md transition-all cursor-pointer" onclick="highlightSword('bad')">
                    <div class="absolute top-0 left-0 w-1 h-full bg-red-400 transition-all group-hover:w-2"></div>
                    <div class="p-6">
                        <h4 class="text-lg font-bold text-slate-800 mb-2">Inherent Risks</h4>
                        <p class="text-slate-600 text-sm">The "Coming Wave" brings immense power that requires containment. Unchecked, the same tools for good can destabilize society.</p>
                        <div class="mt-4 pt-4 border-t border-stone-100 hidden group-hover:block animate-fade-in">
                            <span class="text-xs font-bold text-red-500 uppercase">Key Review Point</span>
                            <p class="text-xs text-slate-500 mt-1">"Discusses the double-edged quality of technology... and the ways in which society affects trends."</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Dynamic Reaction Text -->
            <div id="sword-reaction" class="bg-indigo-50 text-indigo-900 p-4 rounded-lg text-center text-sm hidden transition-all">
                <!-- Content injected via JS -->
            </div>
        </section>

        <!-- Final Recommendation -->
        <section class="bg-slate-800 rounded-2xl p-8 md:p-12 text-center text-white relative overflow-hidden">
            <div class="relative z-10 max-w-2xl mx-auto space-y-6">
                <h3 class="text-2xl md:text-3xl font-bold serif-font">Who Should Read This?</h3>
                <p class="text-slate-300 text-lg">
                    "Very informative for anyone in the business world who wishes to understand the ways in which technology trends interact with society and vice versa."
                </p>
                <div class="flex flex-wrap justify-center gap-3">
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-medium border border-slate-600">MBA Students</span>
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-medium border border-slate-600">Business Leaders</span>
                    <span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-medium border border-slate-600">Tech Optimists</span>
                </div>
            </div>
            <!-- Decorative circle -->
            <div class="absolute -top-24 -right-24 w-64 h-64 bg-slate-700 rounded-full opacity-50 blur-3xl"></div>
            <div class="absolute -bottom-24 -left-24 w-64 h-64 bg-slate-700 rounded-full opacity-50 blur-3xl"></div>
        </section>

    </main>

    <footer class="bg-white border-t border-stone-200 mt-12 py-8">
        <div class="max-w-6xl mx-auto px-4 text-center text-slate-400 text-sm">
            <p>&copy; 2026 Zach's Reviews. Based on the BUS 600 Assignment.</p>
            <p class="mt-2 text-xs">Generated for educational purposes.</p>
        </div>
    </footer>

    <script>
        // --- Interaction Logic ---

        // Smooth Scroll
        function scrollToAnalysis() {
            document.getElementById('analysis-section').scrollIntoView({ behavior: 'smooth' });
        }

        // View Switcher for Historical Context Section
        function switchView(viewName) {
            const chartDiv = document.getElementById('view-chart');
            const detailsDiv = document.getElementById('view-details');
            const chartTab = document.getElementById('tab-chart');
            const detailsTab = document.getElementById('tab-details');

            if (viewName === 'chart') {
                chartDiv.classList.remove('hidden');
                detailsDiv.classList.add('hidden');
                chartTab.classList.add('active-tab');
                chartTab.classList.remove('inactive-tab');
                detailsTab.classList.add('inactive-tab');
                detailsTab.classList.remove('active-tab');
            } else {
                chartDiv.classList.add('hidden');
                detailsDiv.classList.remove('hidden');
                chartTab.classList.remove('active-tab');
                chartTab.classList.add('inactive-tab');
                detailsTab.classList.remove('inactive-tab');
                detailsTab.classList.add('active-tab');
            }
        }

        // Sword Interaction Logic
        function highlightSword(side) {
            const reactionBox = document.getElementById('sword-reaction');
            reactionBox.classList.remove('hidden');
            
            if (side === 'good') {
                reactionBox.innerHTML = `
                    <strong>The Optimistic View:</strong> Suleyman argues that with "wise caution," we can harness AI to solve critical global challenges like healthcare and energy.
                `;
                reactionBox.className = "bg-green-50 text-green-900 p-4 rounded-lg text-center text-sm transition-all border border-green-100";
            } else {
                reactionBox.innerHTML = `
                    <strong>The Risk View:</strong> Without "containment," the democratization of power could lead to instability. The review notes this balance is the book's strongest attribute.
                `;
                reactionBox.className = "bg-red-50 text-red-900 p-4 rounded-lg text-center text-sm transition-all border border-red-100";
            }
        }

        // --- Chart.js Implementations ---

        // 1. Radar Chart: Attributes
        const ctxAttributes = document.getElementById('attributesChart').getContext('2d');
        const attributesChart = new Chart(ctxAttributes, {
            type: 'radar',
            data: {
                labels: ['Historical Context', 'Optimism', 'Accessibility', 'Credibility', 'Caution'],
                datasets: [{
                    label: 'Review Emphasis',
                    data: [8, 7, 9, 8, 10], // Mock scores based on review text intensity
                    fill: true,
                    backgroundColor: 'rgba(99, 102, 241, 0.2)',
                    borderColor: 'rgb(99, 102, 241)',
                    pointBackgroundColor: 'rgb(99, 102, 241)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgb(99, 102, 241)'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    r: {
                        angleLines: { color: '#e5e7eb' },
                        grid: { color: '#e5e7eb' },
                        pointLabels: {
                            font: { size: 12, family: "'Inter', sans-serif" },
                            color: '#4b5563'
                        },
                        suggestedMin: 0,
                        suggestedMax: 10,
                        ticks: { display: false } // Hide numbers for cleaner look
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw + '/10 Strength';
                            }
                        }
                    }
                }
            }
        });

        // 2. Line Chart: Historical Context
        // Conceptual representation of "Impact/Disruption" over time
        const ctxHistory = document.getElementById('historyChart').getContext('2d');
        const historyChart = new Chart(ctxHistory, {
            type: 'line',
            data: {
                labels: ['1400', '1500', '1600', '1700', '1800', '1900', '2000', '2025', '2035'],
                datasets: [
                    {
                        label: 'Printing Press Era',
                        data: [1, 20, 25, 30, 35, 40, 45, 45, 45],
                        borderColor: '#cbd5e1',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    },
                    {
                        label: 'Industrial Revolution',
                        data: [null, null, null, null, 10, 50, 80, 85, 90],
                        borderColor: '#64748b',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    },
                    {
                        label: 'The Coming Wave (AI)',
                        data: [null, null, null, null, null, null, 10, 60, 95], // Steeper curve
                        borderColor: '#4f46e5',
                        borderWidth: 3,
                        tension: 0.4,
                        pointBackgroundColor: '#4f46e5'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        display: false, // Conceptual chart, no y-axis needed
                        title: { display: true, text: 'Societal Impact / Disruption' }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { color: '#94a3b8' }
                    }
                },
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                }
            }
        });
    </script>
</body>
</html>

Read Next:

Hey there, fellow investor!

About Me

Whether you’re here to uncover hidden dividend gems, level up your investing skills, or stay in the loop with the latest market events, you’ve landed in the right spot. This blog dives into the coolest corners of the universe—from practical investing tips to in-depth dividend stock reviews. So grab your portfolio, hit that follow button, and let’s conquer the world of investing together! 🚀

As an investor and lifelong student of finance, I’m passionate about demystifying the world of investing. I started this blog to explore everything from dividend investing and wealth management to broader personal finance education, always with an eye toward long-term value and continuous learning. For me, clarity is key—I love breaking down complex financial concepts into digestible insights that anyone can understand.

My goal is to be a trustworthy, approachable guide on your financial journey. I strive to be both professional and personable, sharing well-researched insights alongside personal anecdotes to show you who I am and why I care. I maintain a conversational yet informed tone because learning about finance should be engaging, not intimidating. That means demystifying the jargon without sacrificing depth or nuance, giving you insights that are both accessible and meaningful.

Above all, I never stop learning—Charlie Munger once said “the game is to keep learning”, and I take that to heart. My curiosity drives me to continually explore new strategies and ideas, so I can bring you fresh insights and time-tested principles that help you invest smarter for the long run. Ultimately, I’m committed to sharing high-quality insights and making smart investing accessible to everyone.

Tags

BDX Company Overview dell NYSE: WM WasteManagement WM