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

// Data structure containing all the updated texts and configurations for Web Design
const highlightsData = [
  {
    id: 'landing',
    title: 'דפי נחיתה',
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-16 h-16">
        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
        <polyline points="14 2 14 8 20 8"></polyline>
        <path d="m9 15 3-3 3 3"></path>
        <path d="M12 12v6"></path>
      </svg>
    ),
    stories: [
      {
        theme: 'orange',
        isIntro: true,
        title: "דפי נחיתה",
        subtitle: "המכונה שמביאה לכם לידים 🚀",
        cta: "מתחילים >>"
      },
      {
        theme: 'dark',
        content: "מה זה בכלל דף נחיתה? 🤔\n\nעמוד אינטרנט בודד וממוקד שמטרתו אחת ויחידה: לגרום לגולש לבצע פעולה (להשאיר פרטים או לקנות).",
        cta: "המשיכו לקרוא >>"
      },
      {
        theme: 'orange',
        content: "למה אתם חייבים אחד? 🎯\n\nכי בניגוד לאתר רגיל עם המון הסחות דעת, דף נחיתה בנוי כמו משפך מדויק שממיר מתעניינים ללקוחות.",
        cta: null
      },
      {
        theme: 'light',
        content: "הנוסחה שלנו בדפי פלוס: ✨\n\nעיצוב מהפנט\n+ קופירייטינג חד\n+ זמני טעינה מהירים\n= מקסימום לידים לעסק שלכם.",
        cta: null
      },
      {
        theme: 'orange',
        content: "אלמנט אמון (Trust) 🤝\n\nהוספת המלצות, סמלים ואבטחה בדף הנחיתה מעלה את אחוזי ההמרה בעשרות אחוזים.",
        cta: null
      },
      {
        theme: 'light',
        content: "מבחני A/B 🧪\n\nדף נחיתה מנצח הוא כזה שנבדק כל הזמן. משנים כותרת, בודקים צבע כפתור - וממקסמים תוצאות.",
        cta: null
      },
      {
        theme: 'dark',
        content: "מוכנים להטיס את הקמפיין שלכם עם דף נחיתה ממיר? 🚀",
        cta: "שלחו לנו הודעה לפרטים ✉️"
      }
    ]
  },
  {
    id: 'website',
    title: 'אתר תדמית',
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-16 h-16">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="2" y1="12" x2="22" y2="12"></line>
        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
      </svg>
    ),
    stories: [
      {
        theme: 'dark',
        isIntro: true,
        title: "אתר תדמית",
        subtitle: "הבית הדיגיטלי של העסק שלכם 🏠",
        cta: "בואו נראה למה >>"
      },
      {
        theme: 'orange',
        content: "אתר תדמית - הבית הדיגיטלי שלכם. 🏠\n\nהמקום שבו לקוחות פוטנציאליים בודקים מי אתם, מה אתם מציעים, ולמה כדאי לסמוך עליכם.",
        cta: null
      },
      {
        theme: 'light',
        content: "איך העסק שלכם נראה ברשת? 💼\n\nאתר מיושן או איטי פוגע באמינות. אתר מודרני משדר סמכותיות, יוקרה ומקצוענות.",
        cta: null
      },
      {
        theme: 'dark',
        content: "מה אנחנו מציעים? 💻\n\nאפיון חכם, עיצוב מותאם אישית (UI/UX), חוויית גלישה חלקה והתאמה מושלמת למובייל.",
        cta: null
      },
      {
        theme: 'light',
        content: "הכנה לקידום בגוגל (SEO) 🔍\n\nאתר יפה זה לא מספיק. אנחנו בונים אתרים עם קוד נקי והיררכיה שגוגל פשוט אוהב לסרוק.",
        cta: null
      },
      {
        theme: 'dark',
        content: "מערכת ניהול נוחה 🛠️\n\nאתם מקבלים שליטה מלאה! הדרכה מסודרת איך לעדכן תוכן, תמונות וטקסטים בקלות ובלי ידע בקוד.",
        cta: null
      },
      {
        theme: 'orange',
        content: "בואו נבנה לכם נכס דיגיטלי שמשאיר רושם ראשוני מנצח. 🏆",
        cta: "דברו איתנו ונתחיל לאפיין 💬"
      }
    ]
  },
  {
    id: 'strategy',
    title: 'אסטרטגיה',
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-16 h-16">
        <path d="M20 7h-3a2 2 0 0 1-2-2V2"></path>
        <path d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"></path>
        <path d="M3 15h6"></path>
        <path d="M3 19h6"></path>
      </svg>
    ),
    stories: [
      {
        theme: 'orange',
        isIntro: true,
        title: "אסטרטגיה",
        subtitle: "בוחרים את הכלי הנכון למשימה ♟️",
        cta: "מתחילים >>"
      },
      {
        theme: 'light',
        content: "אסטרטגיה דיגיטלית נכונה מתחילה בבחירת הכלי הנכון. ♟️\n\nמתי נשתמש בדף נחיתה ומתי נצטרך אתר תדמית שלם?",
        cta: null
      },
      {
        theme: 'dark',
        content: "קמפיין ממומן? רק דף נחיתה! 🎯\n\nכשאתם משלמים על קליקים, אתם רוצים את הגולש ממוקד, בלי תפריטים ובלי הסחות דעת.",
        cta: null
      },
      {
        theme: 'orange',
        content: "בניית מותג לטווח ארוך? אתר תדמית! 🌐\n\nכדי שלקוחות ימצאו אתכם אורגנית ויכירו את כל השירותים שלכם לעומק.",
        cta: null
      },
      {
        theme: 'orange',
        content: "המסע של הלקוח 🗺️\n\nמאיפה הוא מגיע? מה הוא קורא קודם? תכנון מדויק של חווית המשתמש (UX) חוסך נטישות.",
        cta: null
      },
      {
        theme: 'light',
        content: "מחקר מתחרים 🕵️‍♂️\n\nלפני שאנחנו כותבים שורת קוד אחת, אנחנו בודקים מה עובד בתחום שלכם - ועושים את זה טוב יותר.",
        cta: null
      },
      {
        theme: 'dark',
        content: "השילוב המנצח: אתר חזק למותג, ודפי נחיתה נפרדים לכל קמפיין. 🤝",
        cta: "שלחו הודעה לייעוץ מקצועי >>"
      }
    ]
  },
  {
    id: 'tips',
    title: 'טיפים',
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-16 h-16">
        <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.9 1.2 1.5 1.5 2.5"></path>
        <path d="M9 18h6"></path>
        <path d="M10 22h4"></path>
      </svg>
    ),
    stories: [
      {
        theme: 'dark',
        isIntro: true,
        title: "טיפים של אלופים",
        subtitle: "כלים פרקטיים לשדרוג הנכסים שלכם 💡",
        cta: "לגזור ולשמור >>"
      },
      {
        theme: 'dark',
        content: "טיפ זהב #1: מהירות היא הכל. ⚡\n\nגולש ממוצע נוטש דף שלא נטען תוך 3 שניות. ודאו שהאתר שלכם עבר אופטימיזציה לתמונות.",
        cta: null
      },
      {
        theme: 'orange',
        content: "טיפ זהב #2: Mobile First. 📱\n\nמעל 80% מהגולשים מגיעים מהנייד. אם האתר לא נראה שם מושלם - איבדתם אותם.",
        cta: null
      },
      {
        theme: 'light',
        content: "טיפ זהב #3: כפתור ברור (CTA). 🔘\n\nאל תתנו לגולש לנחש מה לעשות. 'השאירו פרטים', 'חייגו עכשיו' - צריך להיות בולט ומזמין.",
        cta: null
      },
      {
        theme: 'orange',
        content: "טיפ זהב #4: פחות זה יותר. 🧹\n\nאל תעמיסו טקסטים ארוכים! השתמשו בכותרות ברורות, נקודות (Bullet points) ורווחים לבנים.",
        cta: null
      },
      {
        theme: 'light',
        content: "טיפ זהב #5: הוכחה חברתית. ⭐\n\nתמיד תשלבו וידאו או תמונות אותנטיות של לקוחות ממליצים. אנשים קונים מאנשים.",
        cta: null
      },
      {
        theme: 'dark',
        content: "רוצים עוד ערך על בניית נכסים דיגיטליים שיעיפו לכם את העסק? 🔔",
        cta: "עקבו אחרינו לעוד טיפים שווים 👇"
      }
    ]
  },
  {
    id: 'organic',
    title: 'נוכחות אורגנית',
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-16 h-16">
        <path d="M18 8c0 4.5-6 11-6 11S6 12.5 6 8a6 6 0 0 1 12 0Z"></path>
        <circle cx="12" cy="8" r="2"></circle>
        <path d="M8.7 15a10 10 0 0 0 6.6 0"></path>
      </svg>
    ),
    stories: [
      {
        theme: 'orange',
        isIntro: true,
        title: "נוכחות אורגנית",
        subtitle: "איך לגרום להם למצוא אתכם בקלות 🌐",
        cta: "החליקו פנימה >>"
      },
      {
        theme: 'dark',
        content: "האם העסק שלך קיים באמת? 🤔\n\nהיום, כרטיס הביקור שלכם מפוזר על פני מספר רשתות. נוכחות אורגנית חזקה בונה אמון.",
        cta: null
      },
      {
        theme: 'orange',
        content: "גוגל לעסקים (GMB) 📍\n\nלקוח מחפש אתכם בגוגל? הוא חייב למצוא פרופיל עסקי מעודכן, שעות פעילות, ביקורות וקישור לאתר.",
        cta: null
      },
      {
        theme: 'light',
        content: "אינסטגרם ופייסבוק 📱\n\nזה לא רק לייקים. פרופיל מסודר, היילייטס מקצועיים ופיד מעודכן מראים שהעסק חי, נושם ורלוונטי.",
        cta: null
      },
      {
        theme: 'dark',
        content: "וואטסאפ ביזנס 💬\n\nכלי ההמרה החזק ביותר! קטלוג מוצרים, תגובות מהירות ומענה אוטומטי שמשדר מקצוענות שיא.",
        cta: null
      },
      {
        theme: 'orange',
        content: "איך הכל מתחבר? 🧩\n\nכל הרשתות האלו חייבות לעבוד בסנכרון מלא ולהפנות תמיד לנכס המרכזי שלכם - אתר התדמית!",
        cta: null
      },
      {
        theme: 'dark',
        content: "רוצים לעשות סדר בנוכחות הדיגיטלית שלכם? 🌐\n\nבואו נבנה לכם אקו-סיסטם שעובד 24/7.",
        cta: "שלחו הודעה לבדיקת נוכחות בחינם 📩"
      }
    ]
  },
  {
    id: 'whyus',
    title: 'למה אנחנו',
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-16 h-16">
        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
      </svg>
    ),
    stories: [
      {
        theme: 'dark',
        isIntro: true,
        title: "למה דפי פלוס?",
        subtitle: "השותפים שלכם להצלחה הדיגיטלית ✨",
        cta: "הנה כמה סיבות >>"
      },
      {
        theme: 'orange',
        content: "למה לבחור דווקא בדפי פלוס? 🧡\n\nכי אנחנו לא רק 'בונים אתרים'. אנחנו בונים נכסים שמביאים תוצאות.",
        cta: null
      },
      {
        theme: 'dark',
        content: "פוקוס מוחלט על המרות. 🎯\n\nהעיצוב שלנו לא רק יפה, הוא מבוסס פסיכולוגיה צרכנית שגורמת לגולש לפעול.",
        cta: null
      },
      {
        theme: 'light',
        content: "יחס אישי וזמינות. 🤝\n\nאצלנו אתם לא עוד מספר. אנחנו מלווים אתכם יד ביד משלב הרעיון ועד שהאתר באוויר.",
        cta: null
      },
      {
        theme: 'orange',
        content: "ליווי גם אחרי העלייה לאוויר 🛡️\n\nסיימנו לבנות? אנחנו עדיין כאן. תמיכה טכנית, עדכונים ותחזוקה שוטפת כדי שתשנו בשקט.",
        cta: null
      },
      {
        theme: 'light',
        content: "שקיפות מלאה מול הלקוח 🔍\n\nאין אותיות קטנות. אתם יודעים בדיוק מה אתם מקבלים, מתי, ומי הבעלים של הנכס (רמז: אתם!).",
        cta: null
      },
      {
        theme: 'dark',
        content: "מוכנים לשדרג את הנוכחות הדיגיטלית שלכם בסטנדרט הגבוה ביותר? ✨",
        cta: "שלחו לנו הודעה עכשיו 🚀"
      }
    ]
  }
];

// Component to render a single IG Story
const StoryCard = ({ story, index, highlight }) => {
  const cardRef = useRef(null);
  const [downloading, setDownloading] = useState(false);

  let bgClass, textClass, elementClass;
  if (story.theme === 'dark') {
    bgClass = 'bg-[#111111]'; textClass = 'text-white'; elementClass = 'bg-[#ff6600]';
  } else if (story.theme === 'orange') {
    bgClass = 'bg-[#ff6600]'; textClass = 'text-white'; elementClass = 'bg-white';
  } else {
    bgClass = 'bg-white'; textClass = 'text-[#111111]'; elementClass = 'bg-[#ff6600]';
  }

  const handleDownload = async () => {
    if (!window.html2canvas) {
      alert("מערכת ההורדות עדיין נטענת, נסה שוב בעוד מספר שניות.");
      return;
    }
    setDownloading(true);
    try {
      const canvas = await window.html2canvas(cardRef.current, { scale: 3, useCORS: true });
      const link = document.createElement('a');
      const suffix = story.isIntro ? '0-intro' : index;
      link.download = `story-${highlight.title}-${suffix}.jpg`;
      link.href = canvas.toDataURL('image/jpeg', 0.9);
      link.click();
    } catch (err) {
      console.error("Error downloading image:", err);
    }
    setDownloading(false);
  };

  return (
    <div className="flex flex-col items-center gap-3">
      {/* The Story Canvas */}
      <div 
        ref={cardRef}
        className={`w-[320px] h-[568px] ${bgClass} ${textClass} relative flex flex-col items-center justify-center p-8 text-center overflow-hidden rounded-md shadow-lg`}
        dir="rtl"
        style={{ fontFamily: "'Heebo', sans-serif" }}
      >
        {/* Top Branding (Hidden on Intro slides for cleaner look, but let's keep it subtle) */}
        {!story.isIntro && (
          <div className="absolute top-8 left-0 right-0 flex justify-center items-center gap-2 opacity-90">
             <div className={`w-6 h-6 rounded-full flex items-center justify-center ${elementClass}`}>
                <span className={`text-[10px] font-bold ${story.theme === 'orange' ? 'text-[#ff6600]' : 'text-white'}`}>+</span>
             </div>
             <span className="font-bold tracking-wide text-sm">דפי פלוס</span>
          </div>
        )}

        {/* Decorative elements */}
        <div className={`absolute -top-20 -right-20 w-40 h-40 rounded-full opacity-10 ${elementClass}`}></div>
        <div className={`absolute -bottom-20 -left-20 w-40 h-40 rounded-full opacity-10 ${elementClass}`}></div>

        {/* --- INTRO SLIDE LAYOUT --- */}
        {story.isIntro ? (
          <div className="z-10 w-full flex flex-col gap-8 items-center justify-center mt-4">
              <div className={`w-24 h-24 mb-4 opacity-90 ${story.theme === 'orange' ? 'text-white' : 'text-[#ff6600]'}`}>
                  {highlight.icon}
              </div>
              <h1 className="text-4xl font-black leading-tight tracking-tight">
                  {story.title}
              </h1>
              <div className={`w-16 h-2 rounded-full ${elementClass}`}></div>
              <p className="text-xl font-medium opacity-90 leading-relaxed px-2 mt-2">
                  {story.subtitle}
              </p>
          </div>
        ) : (
          /* --- REGULAR SLIDE LAYOUT --- */
          <div className="z-10 w-full flex flex-col gap-6 items-center">
              <h2 className="text-2xl font-black leading-tight whitespace-pre-wrap">
                  {story.content}
              </h2>
              <div className={`w-12 h-1.5 rounded-full ${elementClass}`}></div>
          </div>
        )}

        {/* Call to Action */}
        {story.cta && (
          <div className="absolute bottom-16 left-0 right-0 px-8">
             <div className={`w-full py-3.5 rounded-xl font-bold text-sm shadow-xl transition-transform ${story.theme === 'dark' ? 'bg-[#ff6600] text-white' : (story.theme === 'orange' ? 'bg-white text-[#ff6600]' : 'bg-[#111111] text-white')}`}>
                {story.cta}
             </div>
          </div>
        )}
      </div>

      <button 
        onClick={handleDownload}
        disabled={downloading}
        className={`w-full max-w-[320px] py-2 rounded font-bold transition-colors shadow-sm ${story.isIntro ? 'bg-[#ff6600] text-white hover:bg-orange-600' : 'bg-gray-200 text-gray-800 hover:bg-gray-300'}`}
      >
        {downloading ? 'מכין תמונה...' : (story.isIntro ? '🌟 הורד שער להיילייט' : '📥 הורד סטורי')}
      </button>
    </div>
  );
};

// Component to render Highlight Cover
const CoverCard = ({ highlight }) => {
  const cardRef = useRef(null);
  const [downloading, setDownloading] = useState(false);

  const handleDownload = async () => {
    if (!window.html2canvas) return;
    setDownloading(true);
    try {
      const canvas = await window.html2canvas(cardRef.current, { scale: 3, useCORS: true });
      const link = document.createElement('a');
      link.download = `cover-${highlight.title}.jpg`;
      link.href = canvas.toDataURL('image/jpeg', 0.9);
      link.click();
    } catch (err) {
      console.error("Error downloading image:", err);
    }
    setDownloading(false);
  };

  return (
    <div className="flex flex-col items-center gap-3">
      <div className="w-[320px] flex justify-center">
         <div 
          ref={cardRef}
          className="w-48 h-48 bg-[#111111] rounded-full flex items-center justify-center relative overflow-hidden shadow-2xl border-4 border-[#ff6600]"
         >
             <div className="text-[#ff6600]">
                 {highlight.icon}
             </div>
             {/* Subtle internal ring */}
             <div className="absolute inset-2 border-2 border-[#ff6600]/20 rounded-full"></div>
         </div>
      </div>
      <button 
        onClick={handleDownload}
        disabled={downloading}
        className="w-full max-w-[320px] py-3 bg-[#111111] hover:bg-gray-900 text-white border border-[#ff6600] rounded font-bold transition-colors shadow-md"
      >
        {downloading ? 'מכין קאבר...' : '📸 הורד קאבר עגול (לפרופיל)'}
      </button>
    </div>
  );
};

export default function App() {
  const [activeTab, setActiveTab] = useState(highlightsData[0].id);

  // Load html2canvas dynamically & inject font
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
    document.head.appendChild(script);

    const style = document.createElement('style');
    style.innerHTML = `@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;900&display=swap');`;
    document.head.appendChild(style);
  }, []);

  const activeData = highlightsData.find(h => h.id === activeTab);

  return (
    <div className="min-h-screen bg-[#f5f5f5] text-[#111111] font-sans pb-20" dir="rtl" style={{ fontFamily: "'Heebo', sans-serif" }}>
      {/* Header */}
      <header className="bg-[#111111] text-white py-10 px-4 text-center border-b-[8px] border-[#ff6600]">
        <h1 className="text-3xl md:text-4xl font-black mb-3">דפי פלוס - בניית נכסים דיגיטליים</h1>
        <p className="text-gray-300 font-medium">מחולל הסטוריז וההיילייטס - עם שערי פתיחה!</p>
      </header>

      <main className="max-w-6xl mx-auto px-4 mt-10">
        
        {/* Navigation Tabs */}
        <div className="flex flex-wrap justify-center gap-3 mb-12">
          {highlightsData.map(h => (
            <button
              key={h.id}
              onClick={() => setActiveTab(h.id)}
              className={`px-6 py-3 rounded-full font-bold text-sm sm:text-base transition-all ${
                activeTab === h.id 
                  ? 'bg-[#ff6600] text-white shadow-xl scale-105' 
                  : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-100'
              }`}
            >
              {h.title}
            </button>
          ))}
        </div>

        {/* Active Highlight Section */}
        <div className="bg-white rounded-3xl shadow-lg border border-gray-100 p-6 md:p-10">
           
           <div className="mb-12 text-center">
              <h2 className="text-2xl font-black mb-2 text-[#111111]">1. תמונת הקאבר (העיגול בפרופיל)</h2>
              <p className="text-gray-500 mb-6 text-sm">התמונה שתופיע מחוץ להיילייט, בדף הבית של האינסטגרם שלכם.</p>
              <CoverCard highlight={activeData} />
           </div>

           <div className="w-full h-px bg-gray-200 my-10"></div>

           <div className="text-center mb-10">
              <h2 className="text-2xl font-black text-[#111111]">2. תוכן ההיילייט (כולל שער הפתיחה)</h2>
              <p className="text-gray-500 mt-2 font-medium">העלו את "שער הפתיחה" ראשון, ולאחריו את שאר הסטוריז לפי הסדר.</p>
           </div>

           <div className="flex flex-wrap justify-center gap-10">
              {activeData.stories.map((story, idx) => (
                <StoryCard key={idx} story={story} index={idx} highlight={activeData} />
              ))}
           </div>

        </div>
      </main>
    </div>
  );
}