import React, { useState } from 'react';
import { 
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
  BarChart, Bar, Cell, AreaChart, Area 
} from 'recharts';
import { 
  TrendingDown, Globe, ShieldCheck, FileText, BarChart3, Scale
} from 'lucide-react';

const App = () => {
  const [lang, setLang] = useState('en');

  // Rječnik sa prevodima (Engleski i Francuski)
  const translations = {
    en: {
      header: {
        docId: "BHG-STRAT-2026",
        division: "Research Division"
      },
      hero: {
        badge: "EXECUTIVE SUMMARY",
        title1: "STRATEGIC ANALYSIS",
        title2: "MARKET CORRECTION",
        desc: "Dubai Business Bay: Evaluation of operational sustainability, macroeconomic indicators, and revaluation of commercial rates for Q1 2026."
      },
      sec1: {
        title: "1. Macroeconomic Framework and Summary",
        p1: "Dubai's commercial real estate market is undergoing its fastest and sharpest correction in a decade. According to preliminary data from the Dubai Land Department (DLD) and internal analyses relying on the CBRE Middle East Real Estate Outlook, the current escalation of the regional conflict has caused a disruption that directly drives down lease values.",
        quote: "\"Within 13 days, the market shifted from a strict 'Landlord Market' to a 'Tenant Market'. The occupancy index for Class B office buildings and hybrid spaces in the Business Bay region is recording a sharp drop, requiring a correction of fixed lease costs by 45% to 50% to prevent a mass exodus of companies.\"",
        p2: "The S&P Global Dubai Purchasing Managers' Index (PMI) confirmed a drop in non-oil sector expansion to a three-year low, directly impacting companies' operational budgets."
      },
      sec2: {
        title: "2. Impact of Supply Chain Disruption",
        p1: "Dubai owes its economic stability to its status as a global logistics hub. The blockade of transport routes (air and maritime), documented through recent IATA Cargo reports and the Drewry World Container Index, is putting immense pressure on corporate liquidity.",
        p2: "For companies in Business Bay, where fixed space costs make up a significant portion of monthly capital outflow, price adjustment is no longer a matter of negotiation but of existential rebalancing.",
        quote: "Revaluation of commercial rates is recognized as the only mechanism to maintain liquidity, according to Knight Frank.",
        indexTitle: "Projected Rental Index",
        indexDesc: "Correction Business Bay (Q1 2026)"
      },
      sec3: {
        title: "3. Exact Sector Indicators",
        p1: "Direct data obtained from the network of local distributors (including activity analysis of operators like Talabat) show a drastic drop in volume in real time:",
        source: "*Source: Aggregated data from Dubai's logistics sector (days 1-13 of the conflict), cross-referenced with Asteco Middle East reports for the rental niche."
      },
      sec4: {
        title: "4. Market Transaction Analysis (Ejari)",
        p1: "A review of Ejari registrations (DLD Open Data) for March 2026 clearly shows a collapse in asking prices for private offices. Premium buildings in the immediate vicinity (Prime Tower, 24th floor) are currently closing annual contracts at AED 45,000 for spaces of the same or larger size, bringing the monthly benchmark below AED 4,000.",
        outdated: "December 2025 (Outdated Rate)",
        current: "March 2026 (New Benchmark)"
      },
      sec10: {
        title: "10. Strategic Recommendation & Conclusion",
        subtitle: "Final Evaluation by Buildhub GLOBAL",
        p1: "Supported by exact indicators (PMI index, IATA logistics contraction, DLD Ejari transaction records), insisting on contract rates from Q4 2025 is economically absurd. Current market conditions (Force Majeure environment) force both parties into a compromise revaluation.",
        p2: "An adequate, fair market price for a furnished 3-workstation space in Business Bay today is strictly defined by the following parameters:",
        target: "Benchmark Price (Prime Tower Data)",
        max: "Maximum Tolerance Threshold"
      },
      footer: {
        rights: "Strategic analysis and market trends report • All rights reserved © 2026 • Dubai, UAE"
      },
      charts: {
        months: ["Dec 25", "Jan 26", "Feb 26", "Mar 26 (D1)", "Mar 26 (D13)"],
        sectors: ["Logistics & Delivery", "Commercial Lease", "Secondary Market", "Retail"]
      }
    },
    fr: {
      header: {
        docId: "BHG-STRAT-2026",
        division: "Division de Recherche"
      },
      hero: {
        badge: "RÉSUMÉ ANALYTIQUE",
        title1: "ANALYSE STRATÉGIQUE",
        title2: "CORRECTION DU MARCHÉ",
        desc: "Dubai Business Bay : Évaluation de la viabilité opérationnelle, des indicateurs macroéconomiques et réévaluation des tarifs commerciaux pour le T1 2026."
      },
      sec1: {
        title: "1. Cadre Macroéconomique et Résumé",
        p1: "Le marché de l'immobilier commercial de Dubaï subit sa correction la plus rapide et la plus brutale de la décennie. Selon les données préliminaires du Dubai Land Department (DLD) et des analyses internes s'appuyant sur le CBRE Middle East Real Estate Outlook, l'escalade actuelle du conflit régional a provoqué une perturbation qui fait directement chuter la valeur des baux.",
        quote: "\"En 13 jours, le marché est passé d'un 'Marché de Propriétaires' strict à un 'Marché de Locataires'. L'indice d'occupation des immeubles de bureaux de classe B et des espaces hybrides dans la région de Business Bay enregistre une forte baisse, nécessitant une correction des coûts fixes de location de 45% à 50% pour éviter un exode massif des entreprises.\"",
        p2: "L'indice PMI (S&P Global Dubai Purchasing Managers' Index) a confirmé une baisse de l'expansion du secteur non pétrolier à son plus bas niveau en trois ans, impactant directement les budgets opérationnels des entreprises."
      },
      sec2: {
        title: "2. Impact de la Chaîne d'Approvisionnement",
        p1: "Dubaï doit sa stabilité économique à son statut de pôle logistique mondial. Le blocage des voies de transport (aériennes et maritimes), documenté par les récents rapports de l'IATA Cargo et l'indice Drewry World Container, exerce une pression immense sur la liquidité des entreprises.",
        p2: "Pour les entreprises de Business Bay, où les coûts fixes des espaces représentent une part importante des sorties de capitaux mensuelles, l'ajustement des prix n'est plus une question de négociation mais de rééquilibrage existentiel.",
        quote: "La réévaluation des tarifs commerciaux est reconnue comme le seul mécanisme pour maintenir la liquidité, selon Knight Frank.",
        indexTitle: "Indice Locatif Projeté",
        indexDesc: "Correction Business Bay (T1 2026)"
      },
      sec3: {
        title: "3. Indicateurs Sectoriels Exacts",
        p1: "Les données directes obtenues du réseau de distributeurs locaux (y compris l'analyse de l'activité d'opérateurs comme Talabat) montrent une baisse drastique des volumes en temps réel :",
        source: "*Source : Données agrégées du secteur logistique de Dubaï (jours 1-13 du conflit), recoupées avec les rapports d'Asteco Middle East pour le créneau de la location."
      },
      sec4: {
        title: "4. Analyse des Transactions (Ejari)",
        p1: "Un examen des enregistrements Ejari (DLD Open Data) pour mars 2026 montre clairement un effondrement des prix demandés pour les bureaux privés. Les immeubles premium à proximité (Prime Tower, 24ème étage) concluent actuellement des contrats annuels à 45 000 AED pour des espaces de taille identique ou supérieure, ramenant le benchmark mensuel en dessous de 4 000 AED.",
        outdated: "Décembre 2025 (Tarif Obsolète)",
        current: "Mars 2026 (Nouveau Benchmark)"
      },
      sec10: {
        title: "10. Recommandation et Conclusion",
        subtitle: "Évaluation Finale par Buildhub GLOBAL",
        p1: "Soutenue par des indicateurs exacts (Indice PMI, contraction logistique IATA, registres DLD Ejari), l'insistance sur les tarifs contractuels du T4 2025 est économiquement absurde. Les conditions actuelles du marché (Force Majeure) forcent les deux parties à une réévaluation de compromis.",
        p2: "Un prix de marché adéquat et juste pour un espace meublé de 3 postes de travail à Business Bay aujourd'hui est strictement défini par les paramètres suivants :",
        target: "Prix de Référence (Prime Tower)",
        max: "Seuil de Tolérance Maximum"
      },
      footer: {
        rights: "Analyse stratégique et rapport sur les tendances du marché • Tous droits réservés © 2026 • Dubaï, EAU"
      },
      charts: {
        months: ["Déc 25", "Jan 26", "Fév 26", "Mar 26 (J1)", "Mar 26 (J13)"],
        sectors: ["Logistique & Livraison", "Bail Commercial", "Marché Secondaire", "Vente au Détail"]
      }
    }
  };

  const t = translations[lang];

  const rentalTrend = [
    { month: t.charts.months[0], price: 7700 },
    { month: t.charts.months[1], price: 7700 },
    { month: t.charts.months[2], price: 6800 },
    { month: t.charts.months[3], price: 5500 },
    { month: t.charts.months[4], price: 3938 },
  ];

  const sectors = [
    { name: t.charts.sectors[0], value: 40, color: '#334155' },
    { name: t.charts.sectors[1], value: 50, color: '#3b82f6' },
    { name: t.charts.sectors[2], value: 25, color: '#475569' },
    { name: t.charts.sectors[3], value: 30, color: '#1e293b' },
  ];

  // Popravljeno centriranje: Uklonjen origin-left
  const BuildhubLogo = ({ isSmall = false }) => (
    <div className={`flex items-center justify-center select-none ${isSmall ? 'scale-75 origin-center' : ''}`}>
      <span className="text-white font-bold text-3xl md:text-4xl tracking-tight" style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>
        BuildHUB
      </span>
      <div className="w-[3px] h-8 md:h-10 bg-[#eab308] mx-3 md:mx-4"></div>
      <span className="text-[#94a3b8] font-light text-3xl md:text-4xl tracking-widest uppercase" style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>
        GLOBAL
      </span>
    </div>
  );

  const Section = ({ title, icon: Icon, children }) => (
    <section className="bg-[#111827] rounded-[2rem] p-8 shadow-2xl border border-white/5 mb-10 relative overflow-hidden">
      <div className="flex items-center gap-4 mb-8">
        <div className="p-3 bg-white/5 text-blue-400 rounded-2xl">
          <Icon size={24} />
        </div>
        <h2 className="text-xl font-extrabold text-white uppercase tracking-tight">{title}</h2>
      </div>
      <div className="text-slate-300 leading-relaxed space-y-5 text-sm md:text-base relative z-10">
        {children}
      </div>
    </section>
  );

  return (
    <div className="min-h-screen bg-[#030712] font-sans text-slate-200 pb-20 selection:bg-blue-500/30">
      
      {/* HEADER SA IZBOROM JEZIKA */}
      <div className="bg-[#030712] border-b border-white/5 py-6 px-8 relative z-50">
        <div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center w-full justify-center md:justify-start md:w-auto">
            <BuildhubLogo />
          </div>
          
          <div className="flex items-center justify-center gap-8 w-full md:w-auto">
            <div className="text-right hidden md:block border-r border-white/10 pr-6">
              <p className="text-[10px] font-mono text-slate-500 uppercase tracking-[0.3em] mb-1">{t.header.docId}</p>
              <p className="text-xs font-bold text-white uppercase tracking-tighter">{t.header.division}</p>
            </div>
            
            <div className="flex items-center gap-2 bg-white/5 p-1 rounded-full border border-white/10 shrink-0">
              <button 
                onClick={() => setLang('en')}
                className={`px-4 py-2 text-xs font-bold rounded-full transition-all duration-300 ${lang === 'en' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' : 'text-slate-400 hover:text-white'}`}
              >
                EN
              </button>
              <button 
                onClick={() => setLang('fr')}
                className={`px-4 py-2 text-xs font-bold rounded-full transition-all duration-300 ${lang === 'fr' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50' : 'text-slate-400 hover:text-white'}`}
              >
                FR
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* HERO SECTION */}
      <div className="py-24 px-8 text-center relative overflow-hidden">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent opacity-50"></div>
        <div className="max-w-4xl mx-auto relative z-10">
          <div className="inline-block px-5 py-2 rounded-full border border-blue-500/40 bg-blue-500/10 text-blue-400 text-[10px] md:text-xs font-bold tracking-[0.3em] uppercase mb-6 shadow-[0_0_20px_rgba(59,130,246,0.2)]">
            {t.hero.badge}
          </div>
          <h2 className="text-5xl md:text-7xl font-black mb-8 text-white leading-[1.1] tracking-tighter">
            {t.hero.title1} <br/> 
            <span className="text-blue-500">{t.hero.title2}</span>
          </h2>
          <p className="text-xl text-slate-400 max-w-2xl mx-auto font-light leading-relaxed">
            {t.hero.desc}
          </p>
        </div>
      </div>

      <div className="max-w-5xl mx-auto px-4 relative">
        
        {/* Section 1 */}
        <Section title={t.sec1.title} icon={FileText}>
          <p>{t.sec1.p1}</p>
          <div className="bg-blue-500/5 p-6 rounded-2xl border border-blue-500/10 my-6">
            <p className="text-blue-200 text-lg leading-relaxed italic font-light">
              {t.sec1.quote}
            </p>
          </div>
          <p>{t.sec1.p2}</p>
        </Section>

        {/* Section 2 */}
        <Section title={t.sec2.title} icon={Globe}>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
            <div className="space-y-4">
              <p>{t.sec2.p1}</p>
              <p>{t.sec2.p2}</p>
              <div className="flex items-center gap-3 text-white font-bold text-sm bg-white/5 p-4 rounded-xl border border-white/10">
                <ShieldCheck size={20} className="text-blue-500 shrink-0" />
                <span>{t.sec2.quote}</span>
              </div>
            </div>
            <div className="bg-slate-900/80 p-10 rounded-[3rem] text-white shadow-2xl border border-white/5 text-center flex flex-col justify-center h-full">
              <p className="text-[10px] uppercase font-bold text-slate-500 tracking-widest mb-4">{t.sec2.indexTitle}</p>
              <div className="flex items-center justify-center gap-2">
                <p className="text-6xl font-black text-white">-50%</p>
                <TrendingDown className="text-red-500" size={36} />
              </div>
              <p className="text-xs text-slate-400 mt-4 uppercase tracking-widest">{t.sec2.indexDesc}</p>
            </div>
          </div>
        </Section>

        {/* Section 3 */}
        <Section title={t.sec3.title} icon={BarChart3}>
          <p className="mb-6">{t.sec3.p1}</p>
          <div className="h-80 w-full mb-6">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={sectors} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#ffffff10" />
                <XAxis dataKey="name" axisLine={false} tickLine={false} fontSize={12} dy={10} stroke="#94a3b8" />
                <YAxis unit="%" axisLine={false} tickLine={false} fontSize={10} stroke="#94a3b8" />
                <Tooltip 
                  cursor={{fill: '#ffffff05'}}
                  contentStyle={{ backgroundColor: '#111827', borderRadius: '16px', border: '1px solid #ffffff10', color: '#fff' }}
                />
                <Bar dataKey="value" radius={[15, 15, 0, 0]} barSize={60}>
                  {sectors.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
          <p className="text-sm text-slate-400 italic">{t.sec3.source}</p>
        </Section>

        {/* Section 4 */}
        <Section title={t.sec4.title} icon={TrendingDown}>
          <p className="mb-6">{t.sec4.p1}</p>
          <div className="h-80 w-full">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={rentalTrend}>
                <defs>
                  <linearGradient id="colorBlue" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/>
                    <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
                  </linearGradient>
                </defs>
                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#ffffff05" />
                <XAxis dataKey="month" hide />
                <YAxis hide />
                <Tooltip />
                <Area type="monotone" dataKey="price" stroke="#3b82f6" strokeWidth={5} fillOpacity={1} fill="url(#colorBlue)" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
          <div className="mt-10 flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-t border-white/5 pt-8">
            <div>
              <p className="text-[10px] uppercase font-bold text-slate-500 tracking-widest mb-2 text-left">{t.sec4.outdated}</p>
              <p className="text-3xl font-black text-slate-500">7,700 AED</p>
            </div>
            <div className="text-left md:text-right">
              <p className="text-[10px] uppercase font-bold text-blue-500 tracking-widest mb-2">{t.sec4.current}</p>
              <p className="text-5xl md:text-6xl font-black text-white">3,938 AED</p>
            </div>
          </div>
        </Section>

        {/* Section 10 */}
        <Section title={t.sec10.title} icon={Scale}>
          <div className="bg-[#000000] p-8 md:p-12 rounded-[3.5rem] text-white shadow-2xl relative overflow-hidden border border-white/5">
            <div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/10 blur-[100px] rounded-full"></div>
            <h3 className="text-3xl font-black mb-6 relative z-10">{t.sec10.subtitle}</h3>
            <p className="text-slate-300 mb-12 font-light leading-relaxed max-w-3xl text-lg relative z-10">
              {t.sec10.p1}
              <br/><br/>
              {t.sec10.p2}
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
              <div className="bg-white/5 border border-white/10 p-8 rounded-[2.5rem] backdrop-blur-md">
                <p className="text-[11px] uppercase font-bold text-blue-500 mb-2 tracking-widest">{t.sec10.target}</p>
                <p className="text-4xl md:text-5xl font-black">4,000 AED</p>
              </div>
              <div className="bg-white/5 border border-white/10 p-8 rounded-[2.5rem] backdrop-blur-md opacity-40">
                <p className="text-[11px] uppercase font-bold text-slate-500 mb-2 tracking-widest">{t.sec10.max}</p>
                <p className="text-4xl md:text-5xl font-black">4,500 AED</p>
              </div>
            </div>
          </div>
        </Section>

        {/* FOOTER */}
        <div className="mt-24 py-20 border-t border-white/5 flex flex-col items-center justify-center gap-10">
          <div className="opacity-30 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-500 flex justify-center w-full">
            <BuildhubLogo isSmall={true} />
          </div>
          <div className="text-center w-full flex flex-col items-center">
            <p className="text-[11px] text-slate-500 font-bold uppercase tracking-[0.8em] mb-4 text-center">{t.header.division}</p>
            <p className="text-[9px] text-slate-600 max-w-md mx-auto leading-relaxed uppercase tracking-widest text-center">
              {t.footer.rights}
            </p>
          </div>
        </div>

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

export default App;