"use client"

import React, { useState } from "react"
import Joyride, { Step } from "react-joyride"

const steps: Step[] = [
{
target: ".step-1",
content: "This is the main dashboard.",
},
{
target: ".step-2",
content: "Here you can see your recent activity.",
},
{
target: ".step-3",
content: "Click here to create a new item.",
},
]

const FirstVisitTour = () => {
const [run, setRun] = useState(false)

const handleStartTour = () => {
setRun(true)
}

return (
<div>
<button onClick={handleStartTour} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Start Tour
</button>
<Joyride
steps={steps}
run={run}
continuous
showProgress
showSkipButton
callback={({ status }) => {
if (status === "finished" || status === "skipped") {
setRun(false)
}
}}
/>
</div>
)
}

export default FirstVisitTour

components/tour-guide.js

@@ -0,0 +1,165 @@
+class TourGuide extends HTMLElement {
+  constructor() {
+    super();
+    this.steps = [
+      {
+        target: '.step-1',
+        content: 'This is the main dashboard.',
+      },
+      {
+        target: '.step-2',
+        content: 'Here you can see your recent activity.',
+      },
+      {
+        target: '.step-3',
+        content: 'Click here to create a new item.',
+      }
+    ];
+    this.currentStep = 0;
+    this.isRunning = false;
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.innerHTML = `
+      <style>
+        .tour-button {
+          background: #3b82f6;
+          color: white;
+          font-weight: 600;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          cursor: pointer;
+          transition: background 0.2s;
+          border: none;
+        }
+        .tour-button:hover {
+          background: #2563eb;
+        }
+        .tour-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0,0,0,0.5);
+          z-index: 9998;
+        }
+        .tour-tooltip {
+          position: absolute;
+          background: white;
+          border-radius: 0.5rem;
+          padding: 1rem;
+          max-width: 300px;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          z-index: 9999;
+        }
+        .tour-footer {
+          display: flex;
+          justify-content: space-between;
+          margin-top: 1rem;
+        }
+        .tour-button-small {
+          padding: 0.25rem 0.5rem;
+          font-size: 0.875rem;
+        }
+        .tour-progress {
+          font-size: 0.875rem;
+          color: #6b7280;
+        }
+      </style>
+      <button class="tour-button">Start Tour</button>
+    `;
+  }
+
+  setupEventListeners() {
+    this.querySelector('.tour-button').addEventListener('click', () => this.startTour());
+  }
+
+  startTour() {
+    this.isRunning = true;
+    this.currentStep = 0;
+    this.showStep();
+  }
+
+  showStep() {
+    // Remove any existing tooltips
+    this.removeTooltips();
+
+    const step = this.steps[this.currentStep];
+    const targetElement = document.querySelector(step.target);
+
+    if (!targetElement) {
+      console.warn(`Target element not found: ${step.target}`);
+      this.nextStep();
+      return;
+    }
+
+    // Create overlay
+    const overlay = document.createElement('div');
+    overlay.className = 'tour-overlay';
+    document.body.appendChild(overlay);
+
+    // Position tooltip
+    const rect = targetElement.getBoundingClientRect();
+    const tooltip = document.createElement('div');
+    tooltip.className = 'tour-tooltip';
+    tooltip.style.top = `${rect.bottom + window.scrollY + 10}px`;
+    tooltip.style.left = `${rect.left + window.scrollX}px`;
+
+    tooltip.innerHTML = `
+      <div>${step.content}</div>
+      <div class="tour-footer">
+        <span class="tour-progress">${this.currentStep + 1}/${this.steps.length}</span>
+        <div>
+          <button class="tour-button-small skip-button">Skip</button>
+          <button class="tour-button-small next-button">${this.currentStep === this.steps.length - 1 ? 'Finish' : 'Next'}</button>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(tooltip);
+
+    // Highlight target
+    targetElement.style.boxShadow = '0 0 0 3px rgba(59, 130, 246, 0.5)';
+    targetElement.style.position = 'relative';
+    targetElement.style.zIndex = '10000';
+
+    // Add event listeners
+    tooltip.querySelector('.next-button').addEventListener('click', () => this.nextStep());
+    tooltip.querySelector('.skip-button').addEventListener('click', () => this.endTour());
+  }
+
+  nextStep() {
+    this.currentStep++;
+    if (this.currentStep < this.steps.length) {
+      this.showStep();
+    } else {
+      this.endTour();
+    }
+  }
+
+  endTour() {
+    this.isRunning = false;
+    this.removeTooltips();
+    // Remove highlights
+    this.steps.forEach(step => {
+      const element = document.querySelector(step.target);
+      if (element) {
+        element.style.boxShadow = '';
+        element.style.zIndex = '';
+      }
+    });
+  }
+
+  removeTooltips() {
+    const tooltips = document.querySelectorAll('.tour-tooltip, .tour-overlay');
+    tooltips.forEach(tooltip => tooltip.remove());
+  }
+}
+
+customElements.define('tour-guide', TourGuide);

index.html

@@ -13,14 +13,16 @@
     <script src="components/power-capacity-chart.js"></script>
     <script src="components/interactive-chart.js"></script>
     <script src="components/efficiency-chart.js"></script>
+    <script src="components/tour-guide.js"></script>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <div class="container mx-auto px-4 py-12">
         <header class="mb-12 text-center">
             <h1 class="text-4xl font-bold text-gray-900 mb-2">ROI Visionary</h1>
             <p class="text-xl text-gray-600">Solar Investment Payback Predictor</p>
+            <tour-guide></tour-guide>
         </header>
-        <nav class="flex justify-center mb-8">
+<nav class="flex justify-center mb-8">
             <ul class="flex space-x-4">
                 <li><a href="index.html" class="px-4 py-2 rounded-md hover:bg-gray-100">Home</a></li>
                 <li><a href="technical-sheets.html" class="px-4 py-2 rounded-md hover:bg-gray-100">Technical Sheets</a></li>
@@ -30,8 +32,8 @@
 
         <main class="max-w-4xl mx-auto">
             <div class="grid md:grid-cols-2 gap-8 mb-8">
-<div class="bg-white p-6 rounded-xl shadow-md">
-                    <h2 class="text-2xl font-semibold mb-4 text-gray-800">Investment Parameters</h2>
+                <div class="bg-white p-6 rounded-xl shadow-md step-1">
+<h2 class="text-2xl font-semibold mb-4 text-gray-800">Investment Parameters</h2>
                     <div class="space-y-4">
                         <div>
                             <label class="block text-sm font-medium text-gray-700 mb-1">Initial Investment (R$)</label>
@@ -48,14 +50,13 @@
                             <input type="number" id="yearsToShow" value="25" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                         </div>
-                        <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-200">
-                            Calculate ROI
+                        <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-200 step-3">
+Calculate ROI
                         </button>
                     </div>
                 </div>
-
-                <div class="bg-white p-6 rounded-xl shadow-md">
-                    <h2 class="text-2xl font-semibold mb-4 text-gray-800">Quick Summary</h2>
+                <div class="bg-white p-6 rounded-xl shadow-md step-2">
+<h2 class="text-2xl font-semibold mb-4 text-gray-800">Quick Summary</h2>
                     <div class="space-y-4">
                         <div class="flex justify-between items-center">
                             <span class="text-gray-600">Payback Period</span>