import React, { useState, useRef, useEffect } from 'react';
import { Camera, Upload, Leaf, Share2, Minus, Plus, X, Loader2, Utensils, Zap, Clock, Flame, ChevronRight } from 'lucide-react';

// --- API Helper ---
const apiKey = ""; // Set by environment

const generateRecipes = async (mode, input, isVegetarian) => {
  const promptText = `
    You are Chef Whiskers, a helpful cat chef assistant.
    ${mode === 'image' 
      ? "Identify the food or ingredients in this image." 
      : `The user has these ingredients: ${input}.`}
    
    Generate 3 distinct recipes based on this input.
    Constraint 1: At least one recipe MUST be "No-Oven" (stovetop, raw, microwave, etc.) and very easy.
    Constraint 2: ${isVegetarian ? "ALL recipes must be VEGETARIAN." : "Suggest a mix, but prioritize the input ingredients."}
    
    Return ONLY a valid JSON array of objects with this structure:
    [
      {
        "id": "unique_id",
        "title": "Recipe Title",
        "description": "A short, appetizing description.",
        "difficulty": "Easy",
        "calories": "550 kcal",
        "time": "20 mins",
        "ingredients": [
          {"item": "Flour", "amount": 2, "unit": "cups"},
          {"item": "Sugar", "amount": 1, "unit": "tbsp"}
        ],
        "steps": ["Step 1 description", "Step 2 description"]
      }
    ]
  `;

  try {
    const payload = {
      contents: [],
      generationConfig: {
        responseMimeType: "application/json"
      }
    };

    if (mode === 'image') {
      payload.contents = [{
        parts: [
          { text: promptText },
          { inlineData: { mimeType: "image/jpeg", data: input.split(',')[1] } }
        ]
      }];
    } else {
      payload.contents = [{ parts: [{ text: promptText }] }];
    }

    const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });

    const result = await response.json();
    const text = result.candidates?.[0]?.content?.parts?.[0]?.text;

    if (!text) {
        throw new Error("No data returned from Chef Whiskers.");
    }

    // Robust JSON extraction: Find the array brackets to ignore any potential whitespace/markdown
    const startIndex = text.indexOf('[');
    const endIndex = text.lastIndexOf(']');
    
    if (startIndex !== -1 && endIndex !== -1) {
        const jsonString = text.substring(startIndex, endIndex + 1);
        return JSON.parse(jsonString);
    } else {
        // Fallback for non-array responses (though prompt requests array)
        return JSON.parse(text);
    }

  } catch (error) {
    console.error("API Error:", error);
    throw new Error("Meow! I couldn't cook up a response. Please try again.");
  }
};

// --- Components ---

const BlackCatLogo = () => (
  <svg viewBox="0 0 200 200" className="h-16 w-16 drop-shadow-md transform hover:scale-105 transition-transform duration-300">
    {/* Black Head */}
    <circle cx="100" cy="110" r="70" fill="#1f2937" />
    
    {/* Ears */}
    <path d="M40 60 L30 10 L90 50 Z" fill="#1f2937" />
    <path d="M160 60 L170 10 L110 50 Z" fill="#1f2937" />
    
    {/* Inner Ears */}
    <path d="M45 55 L40 25 L80 50 Z" fill="#4b5563" />
    <path d="M155 55 L160 25 L120 50 Z" fill="#4b5563" />

    {/* Eyes */}
    <ellipse cx="70" cy="100" rx="18" ry="22" fill="#ffffff" />
    <ellipse cx="130" cy="100" rx="18" ry="22" fill="#ffffff" />
    
    {/* Pupils (Teal) */}
    <circle cx="70" cy="100" r="10" fill="#14b8a6" />
    <circle cx="130" cy="100" r="10" fill="#14b8a6" />
    
    {/* Eye Shine */}
    <circle cx="75" cy="95" r="4" fill="white" />
    <circle cx="135" cy="95" r="4" fill="white" />

    {/* Nose */}
    <path d="M94 125 L106 125 L100 132 Z" fill="#14b8a6" />

    {/* Whiskers */}
    <path d="M30 115 L50 120 M30 125 L50 125 M30 135 L50 130" stroke="#9ca3af" strokeWidth="2" strokeLinecap="round" />
    <path d="M170 115 L150 120 M170 125 L150 125 M170 135 L150 130" stroke="#9ca3af" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

const Header = () => (
  <header className="bg-white shadow-sm sticky top-0 z-50 border-b border-teal-100">
    <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
      <div className="flex items-center space-x-3">
        <BlackCatLogo />
        <div className="border-l-2 border-teal-400 pl-3">
          <h1 className="text-2xl font-black text-gray-800 tracking-tight leading-none">Chef Whiskers</h1>
          <p className="text-xs text-teal-600 font-bold uppercase tracking-widest mt-0.5">Your Purr-sonal Sous Chef</p>
        </div>
      </div>
      <div className="hidden sm:flex items-center space-x-2 text-sm text-gray-400 font-medium">
        <span className="w-2 h-2 rounded-full bg-teal-400 animate-pulse"></span>
        <span>Ready to cook!</span>
      </div>
    </div>
  </header>
);

const RecipeCard = ({ recipe }) => {
  const [servings, setServings] = useState(2); 

  const handleShare = async () => {
    const text = `Check out this recipe for ${recipe.title} I found on Chef Whiskers!\n\n${recipe.description}`;
    if (navigator.share) {
      try {
        await navigator.share({ title: recipe.title, text: text });
      } catch (err) {
        console.log('Share canceled');
      }
    } else {
      navigator.clipboard.writeText(text);
      alert('Recipe copied to clipboard!');
    }
  };

  const scaleAmount = (amount) => {
    if (!amount) return "";
    const scaled = (amount / 2) * servings; 
    return Number.isInteger(scaled) ? scaled : scaled.toFixed(1);
  };

  // Modern difficulty badge styles
  const difficultyColor = 
    recipe.difficulty === "Easy" ? "text-green-700 bg-green-100" :
    recipe.difficulty === "Medium" ? "text-orange-700 bg-orange-100" : 
    "text-red-700 bg-red-100";

  return (
    <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden hover:shadow-lg transition-all duration-300 flex flex-col h-full">
      <div className="p-6 flex-1 flex flex-col">
        {/* Header Section */}
        <div className="flex justify-between items-start mb-3 gap-3">
          <h3 className="text-lg font-extrabold text-slate-900 leading-snug">{recipe.title}</h3>
          <span className={`px-2 py-1 text-[10px] font-bold rounded uppercase tracking-wider whitespace-nowrap ${difficultyColor}`}>
            {recipe.difficulty || "Easy"}
          </span>
        </div>

        <p className="text-slate-600 text-sm mb-6 leading-relaxed">
          {recipe.description}
        </p>
        
        {/* Metadata Grid - Matches the "Neat" reference image */}
        <div className="flex items-center justify-between mb-8 pb-6 border-b border-slate-100">
           <div className="flex items-center gap-4 text-xs font-bold text-slate-500 uppercase tracking-wide">
               <div className="flex items-center text-teal-600">
                  <Clock size={16} className="mr-1.5" />
                  <span>{recipe.time}</span>
               </div>
               {recipe.calories && (
                 <div className="flex items-center text-rose-500">
                    <Flame size={16} className="mr-1.5" />
                    <span>{recipe.calories}</span>
                 </div>
               )}
           </div>

            {/* Servings Control */}
            <div className="flex items-center bg-slate-50 rounded-lg border border-slate-200 px-1 py-0.5">
              <button onClick={() => setServings(Math.max(1, servings - 1))} className="p-1 hover:text-teal-600 text-slate-400"><Minus size={14} /></button>
              <span className="mx-2 text-xs font-bold text-slate-700 w-4 text-center">{servings}</span>
              <button onClick={() => setServings(servings + 1)} className="p-1 hover:text-teal-600 text-slate-400"><Plus size={14} /></button>
            </div>
        </div>

        {/* Ingredients Section */}
        <div className="mb-8">
          <h4 className="flex items-center text-xs font-bold text-slate-900 uppercase tracking-widest mb-4">
            <span className="text-teal-500 text-lg mr-2">•</span> Ingredients
          </h4>
          <ul className="space-y-2">
            {recipe.ingredients.map((ing, idx) => (
              <li key={idx} className="text-sm text-slate-700 flex items-start leading-snug">
                <span className="text-slate-300 mr-2 mt-1.5 text-[6px]">•</span>
                <span>
                   {scaleAmount(ing.amount)} {ing.unit} {ing.item}
                </span>
              </li>
            ))}
          </ul>
        </div>

        {/* Instructions Section */}
        <div className="flex-1">
          <h4 className="flex items-center text-xs font-bold text-slate-900 uppercase tracking-widest mb-4">
            <span className="text-teal-500 text-lg mr-2">•</span> Instructions
          </h4>
          <div className="space-y-4">
            {recipe.steps.map((step, idx) => (
              <div key={idx} className="flex text-sm text-slate-600 group">
                <span className="font-bold text-teal-500 mr-3 w-4 flex-shrink-0">{idx + 1}.</span>
                <p className="leading-relaxed">{step}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
      
      {/* Footer */}
      <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end">
        <button 
          onClick={handleShare}
          className="flex items-center space-x-2 text-slate-500 hover:text-teal-600 text-xs font-bold uppercase tracking-wide transition-colors"
        >
          <Share2 size={14} />
          <span>Share Recipe</span>
        </button>
      </div>
    </div>
  );
};

// --- Main App Component ---

export default function App() {
  const [activeTab, setActiveTab] = useState('photo'); // 'photo' or 'fridge'
  const [isVegetarian, setIsVegetarian] = useState(false);
  const [ingredientsInput, setIngredientsInput] = useState('');
  const [imagePreview, setImagePreview] = useState(null);
  const [recipes, setRecipes] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [cameraActive, setCameraActive] = useState(false);
  
  const videoRef = useRef(null);
  const fileInputRef = useRef(null);

  // Camera handling
  const startCamera = async () => {
    try {
      setCameraActive(true);
      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
      if (videoRef.current) {
        videoRef.current.srcObject = stream;
      }
    } catch (err) {
      setError("Unable to access camera. Please upload a file instead.");
      setCameraActive(false);
    }
  };

  const stopCamera = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      videoRef.current.srcObject.getTracks().forEach(track => track.stop());
    }
    setCameraActive(false);
  };

  const capturePhoto = () => {
    if (!videoRef.current) return;
    const canvas = document.createElement('canvas');
    canvas.width = videoRef.current.videoWidth;
    canvas.height = videoRef.current.videoHeight;
    canvas.getContext('2d').drawImage(videoRef.current, 0, 0);
    const dataUrl = canvas.toDataURL('image/jpeg');
    setImagePreview(dataUrl);
    stopCamera();
  };

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => setImagePreview(reader.result);
      reader.readAsDataURL(file);
    }
  };

  const handleSubmit = async () => {
    if (activeTab === 'photo' && !imagePreview) {
      setError("Please take a photo or upload an image first!");
      return;
    }
    if (activeTab === 'fridge' && !ingredientsInput.trim()) {
      setError("Please enter some ingredients!");
      return;
    }

    setLoading(true);
    setError(null);
    setRecipes([]);

    try {
      const input = activeTab === 'photo' ? imagePreview : ingredientsInput;
      const result = await generateRecipes(activeTab === 'image' ? 'image' : (activeTab === 'photo' ? 'image' : 'text'), input, isVegetarian);
      setRecipes(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const clearAll = () => {
    setImagePreview(null);
    setIngredientsInput('');
    setRecipes([]);
    setError(null);
    stopCamera();
  };

  return (
    <div className="min-h-screen bg-slate-100 font-sans text-slate-800 pb-12">
      <Header />

      <main className="max-w-5xl mx-auto px-4 py-8">
        
        {/* Main Input Card */}
        <div className="bg-white rounded-3xl shadow-xl shadow-slate-200/60 overflow-hidden mb-12 max-w-3xl mx-auto border border-white">
          
          {/* Mode Switcher */}
          <div className="flex p-2 bg-slate-50 gap-2">
            <button
              onClick={() => { setActiveTab('photo'); clearAll(); }}
              className={`flex-1 py-3 px-4 rounded-xl text-sm font-bold flex justify-center items-center space-x-2 transition-all ${
                activeTab === 'photo' 
                  ? 'bg-white text-teal-600 shadow-md ring-1 ring-slate-100' 
                  : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
              }`}
            >
              <Camera size={18} />
              <span>Snap Food</span>
            </button>
            <button
              onClick={() => { setActiveTab('fridge'); clearAll(); }}
              className={`flex-1 py-3 px-4 rounded-xl text-sm font-bold flex justify-center items-center space-x-2 transition-all ${
                activeTab === 'fridge' 
                  ? 'bg-white text-teal-600 shadow-md ring-1 ring-slate-100' 
                  : 'text-slate-400 hover:text-slate-600 hover:bg-slate-100'
              }`}
            >
              <Utensils size={18} />
              <span>Pantry Mode</span>
            </button>
          </div>

          <div className="p-8">
            
            {/* Vegetarian Toggle - Styled as a pill */}
            <div className="flex justify-end mb-6">
               <button
                onClick={() => setIsVegetarian(!isVegetarian)}
                className={`group relative inline-flex items-center h-8 rounded-full transition-all duration-300 focus:outline-none ${
                    isVegetarian ? 'bg-teal-600 pr-9 pl-3' : 'bg-slate-200 pr-3 pl-9'
                }`}
               >
                 <span className={`absolute top-1 left-1 bg-white w-6 h-6 rounded-full shadow-sm transition-all duration-300 transform ${
                     isVegetarian ? 'translate-x-[calc(100%+12px)]' : 'translate-x-0'
                 } flex items-center justify-center text-teal-600`}>
                    {isVegetarian && <Leaf size={12} />}
                 </span>
                 <span className={`text-xs font-bold uppercase tracking-wider ${
                     isVegetarian ? 'text-white' : 'text-slate-500'
                 }`}>
                     Vegetarian
                 </span>
               </button>
            </div>

            {/* Photo Mode UI */}
            {activeTab === 'photo' && (
              <div className="space-y-4">
                {!imagePreview && !cameraActive && (
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <button 
                      onClick={startCamera}
                      className="h-40 border-2 border-dashed border-slate-200 rounded-2xl flex flex-col items-center justify-center text-slate-400 hover:border-teal-400 hover:text-teal-600 hover:bg-teal-50/30 transition-all group"
                    >
                      <div className="bg-white p-4 rounded-full shadow-sm mb-3 group-hover:scale-110 transition-transform ring-1 ring-slate-100">
                        <Camera size={28} className="text-teal-500" />
                      </div>
                      <span className="font-bold text-sm">Open Camera</span>
                    </button>
                    <button 
                      onClick={() => fileInputRef.current?.click()}
                      className="h-40 border-2 border-dashed border-slate-200 rounded-2xl flex flex-col items-center justify-center text-slate-400 hover:border-teal-400 hover:text-teal-600 hover:bg-teal-50/30 transition-all group"
                    >
                      <div className="bg-white p-4 rounded-full shadow-sm mb-3 group-hover:scale-110 transition-transform ring-1 ring-slate-100">
                        <Upload size={28} className="text-teal-500" />
                      </div>
                      <span className="font-bold text-sm">Upload Photo</span>
                    </button>
                    <input 
                      type="file" 
                      accept="image/*" 
                      className="hidden" 
                      ref={fileInputRef} 
                      onChange={handleFileUpload} 
                    />
                  </div>
                )}

                {cameraActive && (
                  <div className="relative bg-black rounded-2xl overflow-hidden aspect-video shadow-lg">
                    <video ref={videoRef} autoPlay playsInline className="w-full h-full object-cover" />
                    <button 
                      onClick={capturePhoto}
                      className="absolute bottom-6 left-1/2 transform -translate-x-1/2 bg-white rounded-full p-1.5 shadow-xl hover:scale-105 transition-transform"
                    >
                      <div className="w-14 h-14 rounded-full border-4 border-teal-500 bg-teal-100"></div>
                    </button>
                    <button 
                      onClick={stopCamera}
                      className="absolute top-4 right-4 bg-black/50 text-white p-2 rounded-full backdrop-blur-sm hover:bg-black/70"
                    >
                      <X size={20} />
                    </button>
                  </div>
                )}

                {imagePreview && (
                  <div className="relative rounded-2xl overflow-hidden border border-slate-200 bg-slate-50 shadow-inner">
                    <img src={imagePreview} alt="Preview" className="w-full max-h-80 object-contain mx-auto" />
                    <button 
                      onClick={clearAll}
                      className="absolute top-3 right-3 bg-white text-slate-700 p-2 rounded-full shadow-md hover:bg-slate-100 transition-colors"
                    >
                      <X size={18} />
                    </button>
                  </div>
                )}
              </div>
            )}

            {/* Fridge Mode UI */}
            {activeTab === 'fridge' && (
              <div>
                <label className="block text-sm font-bold text-slate-700 mb-3 uppercase tracking-wide flex items-center">
                    <span className="w-1.5 h-1.5 rounded-full bg-teal-500 mr-2"></span>
                    What's in your pantry?
                </label>
                <textarea
                  value={ingredientsInput}
                  onChange={(e) => setIngredientsInput(e.target.value)}
                  placeholder="e.g., 2 eggs, half an onion, some cheddar cheese, stale bread..."
                  className="w-full p-4 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-teal-100 focus:border-teal-400 transition-all min-h-[140px] bg-slate-50 text-slate-700 placeholder:text-slate-400 resize-none"
                />
              </div>
            )}

            {/* Action Button */}
            <div className="mt-8 pt-6 border-t border-slate-100">
              <button
                onClick={handleSubmit}
                disabled={loading || (activeTab === 'photo' && !imagePreview) || (activeTab === 'fridge' && !ingredientsInput)}
                className={`w-full py-4 rounded-xl font-black text-lg text-white shadow-xl shadow-teal-200/50 flex items-center justify-center space-x-3 transition-all transform hover:-translate-y-1 active:translate-y-0 ${
                  loading 
                    ? 'bg-teal-300 cursor-not-allowed' 
                    : 'bg-gradient-to-r from-teal-500 to-emerald-500 hover:shadow-teal-300/50'
                }`}
              >
                {loading ? (
                  <>
                    <Loader2 size={24} className="animate-spin" />
                    <span>Asking Chef Whiskers...</span>
                  </>
                ) : (
                  <>
                    <Zap size={24} fill="currentColor" />
                    <span>Generate Recipes</span>
                  </>
                )}
              </button>
            </div>
            
            {error && (
              <div className="mt-6 p-4 bg-rose-50 text-rose-600 rounded-xl text-sm font-medium text-center border border-rose-100 animate-pulse">
                {error}
              </div>
            )}
          </div>
        </div>

        {/* Results Section */}
        {recipes.length > 0 && (
          <div className="animate-fade-in-up">
            <h2 className="text-2xl font-black text-slate-800 mb-8 flex items-center justify-center">
              <span className="bg-teal-100 p-2 rounded-lg mr-3 text-teal-700">
                <Utensils size={24} />
              </span>
              Here's what I cooked up!
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {recipes.map((recipe, idx) => (
                <RecipeCard key={idx} recipe={recipe} />
              ))}
            </div>
          </div>
        )}

        {/* Empty State / Welcome */}
        {recipes.length === 0 && !loading && !imagePreview && ingredientsInput === '' && (
          <div className="text-center py-12 opacity-60">
            <p className="text-sm font-bold text-slate-400 uppercase tracking-widest">Awaiting Ingredients</p>
          </div>
        )}
      </main>
    </div>
  );
}
<!-- PageDrop Unified FAB Widget -->
<link rel="stylesheet" href="https://pagedrop.io/fab-widget.css?v=6">


<!-- Like Prompt Popup (shown after 10s for Explore content) -->
<div id="pagedrop-like-prompt">
  <div id="pagedrop-like-prompt-content">
    <button id="pagedrop-like-prompt-close" aria-label="Close">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"/>
        <line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
    <div id="pagedrop-like-prompt-icon">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
      </svg>
    </div>
    <p id="pagedrop-like-prompt-text">Enjoying this? A quick like helps keep it online longer.</p>
  </div>
  <div id="pagedrop-like-prompt-arrow"></div>
</div>


<!-- Expiration Warning Popup (only shown for content expiring soon) -->
<div id="pagedrop-expiry-popup">
  <div id="pagedrop-expiry-popup-content">
    <div id="pagedrop-expiry-popup-icon">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="12,6 12,12 16,14"/>
      </svg>
    </div>
    <h3 id="pagedrop-expiry-popup-title">Content Expiring Soon</h3>
    <p id="pagedrop-expiry-popup-desc">
      This content will be deleted in less than 24 hours. If you like it, you can extend its lifetime to keep it available.
    </p>
    <div id="pagedrop-expiry-popup-actions">
      <button class="pagedrop-popup-btn pagedrop-popup-btn-secondary" id="pagedrop-expiry-dismiss">
        Dismiss
      </button>
      <button class="pagedrop-popup-btn pagedrop-popup-btn-primary" id="pagedrop-expiry-extend">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14m-7-7h14"/>
        </svg>
        Extend Lifetime
      </button>
    </div>
  </div>
</div>

<div id="pagedrop-fab-container">
  <!-- Expanded Panel (appears above pill on hover/click) -->
  <div id="pagedrop-fab-expanded">
    
    <div class="pagedrop-fab-row">
      <span class="pagedrop-fab-label"><span id="pagedrop-like-count-expanded">0</span> likes</span>
      <button id="pagedrop-like-btn" class="pagedrop-fab-btn pagedrop-fab-btn-like">
        <svg id="pagedrop-like-icon-btn" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
        </svg>
        <span id="pagedrop-like-text">Like</span>
      </button>
    </div>
    
    <div class="pagedrop-fab-row pagedrop-fab-row-info">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pagedrop-fab-row-icon">
        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
      <span class="pagedrop-fab-label"><span id="pagedrop-view-count-expanded">1</span> view</span>
    </div>
    <div class="pagedrop-fab-row">
      <span class="pagedrop-fab-label">8 days left</span>
      <button id="pagedrop-extend-btn" class="pagedrop-fab-btn pagedrop-fab-btn-extend">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 5v14m-7-7h14"/>
        </svg>
        Extend
      </button>
    </div>
    <div class="pagedrop-fab-cta">
      Like what you see? <a href="https://pagedrop.io" target="_blank" rel="noopener">Create your own</a>
    </div>
    <div class="pagedrop-fab-report">
      <a href="#" id="pagedrop-report-btn">Report this content</a>
    </div>
  </div>

  <!-- Collapsed Pill (always visible) -->
  <div id="pagedrop-fab-pill" class="">
    <a href="https://pagedrop.io" target="_blank" rel="noopener" class="pagedrop-fab-logo" title="Hosted on PageDrop" onclick="event.stopPropagation();">
      <img src="https://pagedrop.io/icon.png" alt="PageDrop" />
    </a>
    <div class="pagedrop-fab-divider"></div>
    <div id="pagedrop-fab-views" class="pagedrop-fab-views" title="1 views">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
        <circle cx="12" cy="12" r="3"/>
      </svg>
      <span id="pagedrop-view-count-pill">1</span>
    </div>
    <div class="pagedrop-fab-divider"></div>
    
    <div class="pagedrop-fab-likes" id="pagedrop-likes-display">
      <svg id="pagedrop-like-icon-pill" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>
      </svg>
      <span id="pagedrop-like-count-pill">0</span>
    </div>
    <div class="pagedrop-fab-divider"></div>
    
    <div class="pagedrop-fab-days ">
      
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <polyline points="12,6 12,12 16,14"/>
      </svg>
      
      <span>8d</span>
    </div>
  </div>
</div>

<script src="https://pagedrop.io/fab-widget.js" data-slug="tropical-prata-yjdg" data-base-url="https://pagedrop.io" data-is-explore="true" data-days-remaining="8" data-view-count="1" defer></script>