/*
Theme Name: LumaPro
Theme URI: https://seueditor.com
Author: Seu Nome
Author URI: https://seueditor.com
Description: Tema profissional e minimalista para editor freelance de vídeo
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: video-editor-pro
Tags: dark, portfolio, one-page, custom-colors, editor-style
*/

/* ===================================
   CSS Variables / Design System
   =================================== */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

@layer base {
  :root {
    --background: 0 0% 4%;
    --foreground: 0 0% 95%;

    --card: 0 0% 7%;
    --card-foreground: 0 0% 95%;

    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 95%;

    --primary: 38 92% 50%;
    --primary-foreground: 0 0% 4%;

    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 95%;

    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 60%;

    --accent: 38 92% 50%;
    --accent-foreground: 0 0% 4%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 0 0% 18%;
    --input: 0 0% 15%;
    --ring: 38 92% 50%;

    --radius: 0.75rem;

    /* Custom design tokens */
    --gold: 38 92% 50%;
    --gold-light: 38 92% 65%;
    --gold-dark: 38 80% 35%;
    --surface-elevated: 0 0% 10%;
    --text-dim: 0 0% 50%;

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, hsl(38, 92%, 50%), hsl(28, 85%, 45%));
    --gradient-dark: linear-gradient(180deg, hsl(0, 0%, 4%), hsl(0, 0%, 8%));
    --gradient-card: linear-gradient(145deg, hsl(0, 0%, 8%), hsl(0, 0%, 5%));

    /* Shadows */
    --shadow-gold: 0 0 40px hsl(38, 92%, 50%, 0.15);
    --shadow-elevated: 0 25px 50px -12px hsl(0, 0%, 0%, 0.5);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 0 0% 4%;
    --foreground: 0 0% 95%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-gold);
  }

  .glass {
    @apply bg-card/80 backdrop-blur-xl border border-border/50;
  }

  .glow-gold {
    box-shadow: var(--shadow-gold);
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
  }

  .animate-fade-in-delay {
    animation: fadeIn 0.8s ease-out 0.3s forwards;
    opacity: 0;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.btn-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--primary)) 0%,
    hsl(var(--gold-light)) 50%,
    hsl(var(--primary)) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

}

/* ===================================
   Base Styles
   =================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: hsl(var(--primary));
}

img {
  max-width: 100%;
  height: auto;
}

/* ===================================
   Utility Classes
   =================================== */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

.text-gradient {
  background: linear-gradient(135deg, hsl(var(--gold-400)), hsl(var(--gold-600)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass {
  background: hsla(var(--card), 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid hsla(var(--border), 0.5);
}

.glow-gold {
  box-shadow: 0 0 30px hsla(var(--gold-500), 0.3);
}

/* ===================================
   Buttons
   =================================== */
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/25 hover:shadow-primary/40 hover:scale-[1.02]",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-border bg-transparent hover:bg-secondary hover:text-secondary-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-secondary hover:text-secondary-foreground",
        link: "text-primary underline-offset-4 hover:underline",
        hero: "bg-primary text-primary-foreground font-bold tracking-wide hover:bg-primary/90 shadow-xl shadow-primary/30 hover:shadow-primary/50 hover:scale-[1.03] transition-all duration-300",
        shimmer: "btn-shimmer text-primary-foreground font-bold tracking-wide shadow-xl shadow-primary/30 hover:shadow-primary/50 hover:scale-[1.03] transition-all duration-300",
        glass: "glass text-foreground hover:bg-card/90 border-border/50",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-12 px-8 text-base",
        xl: "h-14 px-10 text-lg",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
  },
);
Button.displayName = "Button";

export { Button, buttonVariants };


/* ===================================
   Navigation
   =================================== */
import * as React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority";
import { ChevronDown } from "lucide-react";

import { cn } from "@/lib/utils";

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
    {...props}
  >
    {children}
    <NavigationMenuViewport />
  </NavigationMenuPrimitive.Root>
));
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
    {...props}
  />
));
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;

const NavigationMenuItem = NavigationMenuPrimitive.Item;

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
);

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    className={cn(navigationMenuTriggerStyle(), "group", className)}
    {...props}
  >
    {children}{" "}
    <ChevronDown
      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
));
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    className={cn(
      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
      className,
    )}
    {...props}
  />
));
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;

const NavigationMenuLink = NavigationMenuPrimitive.Link;

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className={cn("absolute left-0 top-full flex justify-center")}>
    <NavigationMenuPrimitive.Viewport
      className={cn(
        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
        className,
      )}
      ref={ref}
      {...props}
    />
  </div>
));
NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    className={cn(
      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
      className,
    )}
    {...props}
  >
    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
  </NavigationMenuPrimitive.Indicator>
));
NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

export {
  navigationMenuTriggerStyle,
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
};


/* ===================================
   Hero Section
   =================================== */
import { Button } from "@/components/ui/button";
import { ArrowDown, Play } from "lucide-react";
import heroBg from "@/assets/hero-bg.jpg";

const HeroSection = () => {
  const scrollToContact = () => {
    document.getElementById("contato")?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image with Overlay */}
      <div className="absolute inset-0">
        <img
          src={heroBg}
          alt="Video editing workspace"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/60 to-background" />
        <div className="absolute inset-0 bg-gradient-to-r from-background via-transparent to-background/50" />
      </div>

      {/* Animated Particles */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {[...Array(20)].map((_, i) => (
          <div
            key={i}
            className="absolute w-1 h-1 bg-primary/30 rounded-full animate-float"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 5}s`,
              animationDuration: `${4 + Math.random() * 4}s`,
            }}
          />
        ))}
      </div>

      <div className="container mx-auto px-4 relative z-10">
        <div className="max-w-4xl mx-auto text-center">
          {/* Badge */}
          <div className="inline-flex items-center gap-2 bg-primary/10 border border-primary/20 rounded-full px-4 py-2 mb-8 animate-fade-up">
            <Play className="w-4 h-4 text-primary" />
            <span className="text-sm text-primary font-medium">Editor Freelance Profissional</span>
          </div>

          {/* Main Heading */}
          <h1 
            className="font-display text-4xl md:text-5xl lg:text-7xl font-bold leading-tight mb-6 animate-fade-up"
            style={{ animationDelay: "0.1s" }}
          >
            Transforme Suas Ideias em{" "}
            <span className="text-gradient">Narrativas Visuais</span>{" "}
            Irresistíveis
          </h1>

          {/* Subtitle */}
          <p 
            className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-fade-up"
            style={{ animationDelay: "0.2s" }}
          >
            Edição de vídeo precisa, criativa e otimizada para engajamento. 
            De clipes raw a masterpieces prontos para viralizar.
          </p>

          {/* CTA Buttons */}
          <div 
            className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 animate-fade-up"
            style={{ animationDelay: "0.3s" }}
          >
            <Button variant="shimmer" size="xl" onClick={scrollToContact}>
              Solicite Orçamento Gratuito
            </Button>
            <Button variant="glass" size="lg" asChild>
              <a href="#portfolio">
                <Play className="w-4 h-4" />
                Ver Portfólio
              </a>
            </Button>
          </div>

          {/* Stats */}
          <div 
            className="grid grid-cols-3 gap-8 max-w-lg mx-auto animate-fade-up"
            style={{ animationDelay: "0.4s" }}
          >
            <div className="text-center">
              <div className="font-display text-3xl md:text-4xl font-bold text-gradient">5+</div>
              <div className="text-sm text-muted-foreground">Anos de Experiência</div>
            </div>
            <div className="text-center">
              <div className="font-display text-3xl md:text-4xl font-bold text-gradient">200+</div>
              <div className="text-sm text-muted-foreground">Projetos Entregues</div>
            </div>
            <div className="text-center">
              <div className="font-display text-3xl md:text-4xl font-bold text-gradient">50M+</div>
              <div className="text-sm text-muted-foreground">Views Geradas</div>
            </div>
          </div>
        </div>
      </div>

      {/* Scroll Indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <ArrowDown className="w-6 h-6 text-muted-foreground" />
      </div>
    </section>
  );
};

export default HeroSection;


/* ===================================
   Section Base
   =================================== */
.section {
  padding: 5rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: hsla(var(--gold-500), 0.1);
  border: 1px solid hsla(var(--gold-500), 0.3);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--gold-400));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.5rem;
  }
}

.section-subtitle {
  color: hsl(var(--muted-foreground));
  max-width: 600px;
  margin: 0 auto;
}

/* ===================================
   About Section
   =================================== */
.about-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr 1.5fr;
  }
}

.about-image {
  position: relative;
}

.about-image img {
  width: 100%;
  border-radius: 1rem;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.about-image::before {
  content: '';
  position: absolute;
  inset: -1rem;
  border: 2px solid hsla(var(--gold-500), 0.3);
  border-radius: 1.5rem;
  z-index: -1;
import { User } from "lucide-react";

const AboutSection = () => {
  return (
    <section id="sobre" className="py-24 px-4 relative">
      <div className="container mx-auto max-w-6xl">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* Image Column */}
          <div className="relative">
            <div className="aspect-[4/5] rounded-2xl bg-gradient-to-br from-card to-secondary overflow-hidden relative group">
              {/* Placeholder for photo upload */}
              <div className="absolute inset-0 flex flex-col items-center justify-center text-muted-foreground">
                <div className="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                  <User className="w-12 h-12 text-primary" />
                </div>
                <p className="text-sm">Sua foto aqui</p>
                <p className="text-xs text-muted-foreground mt-1">(Espaço para upload)</p>
              </div>
              
              {/* Decorative elements */}
              <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-primary/20 rounded-2xl -z-10" />
              <div className="absolute -top-4 -left-4 w-24 h-24 border-2 border-primary/30 rounded-2xl -z-10" />
            </div>

            {/* Experience Badge */}
            <div className="absolute -bottom-6 -right-6 bg-card border border-border rounded-xl p-4 shadow-xl">
              <div className="font-display text-3xl font-bold text-gradient">5+</div>
              <div className="text-sm text-muted-foreground">Anos de<br />Experiência</div>
            </div>
          </div>

          {/* Content Column */}
          <div>
            <span className="text-primary font-medium tracking-wider uppercase text-sm">
              Sobre Mim
            </span>
            <h2 className="font-display text-4xl md:text-5xl font-bold mt-4 mb-6">
              Transformando <span className="text-gradient">Visões</span> em Realidade
            </h2>
            
            <div className="space-y-4 text-muted-foreground text-lg leading-relaxed">
              <p>
                Com <strong className="text-foreground">5+ anos de experiência</strong> em pós-produção, 
                domino ferramentas como <strong className="text-foreground">Adobe Premiere, After Effects 
                e DaVinci Resolve</strong>.
              </p>
              <p>
                Meu foco está em criar <strong className="text-foreground">pacing dinâmico e sound design 
                imersivo</strong> para maximizar retenção e conversões. Cada projeto recebe atenção 
                meticulosa aos detalhes.
              </p>
              <p>
                <strong className="text-primary">Color grading cinematográfico</strong> disponível como 
                extra premium para elevar o mood visual com LUTs customizados e correção HDR — 
                transformando bons vídeos em experiências visuais memoráveis.
              </p>
            </div>

            {/* Tools */}
            <div className="mt-8 pt-8 border-t border-border">
              <p className="text-sm text-muted-foreground mb-4">Ferramentas que domino:</p>
              <div className="flex flex-wrap gap-3">
                {["Adobe Premiere Pro", "After Effects", "DaVinci Resolve", "Final Cut Pro", "Audition"].map((tool) => (
                  <span
                    key={tool}
                    className="px-4 py-2 bg-secondary rounded-lg text-sm font-medium text-foreground"
                  >
                    {tool}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutSection;
}

/* ===================================
   Services Section
   =================================== */
import { Camera, AudioWaveform, Clapperboard, Check, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { trackColorGradeClick, trackServiceSelect } from "@/lib/analytics";

const services = [
  {
    icon: Camera,
    title: "Edição Básica",
    price: 500,
    unit: "/hora",
    description: "Cortes precisos e transições fluidas para vídeos profissionais",
    features: [
      "Aumente engajamento em 40% com hooks otimizados",
      "Cortes dinâmicos e ritmo envolvente",
      "Transições suaves e profissionais",
      "Entrega em até 48 horas",
    ],
    hasColorGrading: false,
  },
  {
    icon: Clapperboard,
    title: "Edição Avançada",
    price: 800,
    unit: "/hora",
    badge: "Mais Popular",
    description: "VFX, motion graphics e color grading cinematográfico",
    features: [
      "Motion graphics personalizados",
      "VFX e composição avançada",
      "Balanço de cores e grading seletivo",
      "Impacto emocional 2x maior em anúncios",
    ],
    hasColorGrading: true,
    colorGradingPrice: 300,
  },
  {
    icon: AudioWaveform,
    title: "Pacote Completo",
    price: 2000,
    unit: "/projeto",
    description: "Solução completa: edição + áudio + SEO YouTube",
    features: [
      "Edição completa de vídeo",
      "Mixagem e masterização de áudio",
      "Otimização SEO para YouTube",
      "Color grading incluso",
      "Suporte prioritário",
    ],
    hasColorGrading: false,
  },
];

const ServicesSection = () => {
  const handleColorGradingClick = (serviceName: string) => {
    trackColorGradeClick(`service_card_${serviceName}`, 300);
  };

  const handleServiceClick = (serviceName: string, price: number) => {
    trackServiceSelect(serviceName, price);
  };

  return (
    <section id="servicos" className="py-16 md:py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-background via-card/50 to-background" />
      
      <div className="container mx-auto max-w-6xl relative z-10">
        <div className="text-center mb-12 md:mb-16">
          <span className="text-primary font-medium tracking-wider uppercase text-sm">
            Serviços
          </span>
          <h2 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold mt-4 mb-4 md:mb-6">
            Soluções para Cada <span className="text-gradient">Necessidade</span>
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto text-base md:text-lg">
            Do corte básico à produção completa, escolha o pacote ideal para o seu projeto
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
          {services.map((service, index) => (
            <div
              key={index}
              className={`relative group rounded-2xl p-6 md:p-8 transition-all duration-500 hover:-translate-y-2 ${
                service.badge
                  ? "bg-gradient-to-b from-primary/10 to-card border-2 border-primary/30 glow-gold"
                  : "bg-card border border-border hover:border-primary/30"
              }`}
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              {service.badge && (
                <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground text-xs font-bold px-4 py-1 rounded-full">
                  {service.badge}
                </span>
              )}

              <div className="mb-6">
                <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                  <service.icon className="w-6 h-6 md:w-7 md:h-7 text-primary" />
                </div>
                <h3 className="font-display text-lg md:text-xl font-bold mb-2">{service.title}</h3>
                <p className="text-muted-foreground text-sm">{service.description}</p>
              </div>

              <div className="mb-6">
                <span className="font-display text-3xl md:text-4xl font-bold text-gradient">
                  R$ {service.price.toLocaleString('pt-BR')}
                </span>
                <span className="text-muted-foreground">{service.unit}</span>
              </div>

              <ul className="space-y-3 mb-6">
                {service.features.map((feature, i) => (
                  <li key={i} className="flex items-start gap-3 text-sm">
                    <Check className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                    <span className="text-foreground/80">{feature}</span>
                  </li>
                ))}
              </ul>

              {/* Color Grading Upsell with Glow Effect */}
              {service.hasColorGrading && (
                <button
                  onClick={() => handleColorGradingClick(service.title)}
                  className="w-full mb-4 p-3 rounded-xl bg-primary/5 border border-primary/20 flex items-center gap-3 transition-all duration-300 hover:bg-primary/10 hover:border-primary/40 hover:shadow-[0_0_20px_rgba(234,179,8,0.3)] group/upsell"
                >
                  <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center group-hover/upsell:bg-primary/30 transition-colors">
                    <Sparkles className="w-4 h-4 text-primary" />
                  </div>
                  <div className="flex-1 text-left">
                    <p className="text-sm font-medium text-foreground">Color Grading Extra</p>
                    <p className="text-xs text-muted-foreground">+R$ 300 para tons cinematográficos</p>
                  </div>
                </button>
              )}

              <Button
                variant={service.badge ? "hero" : "outline"}
                className="w-full"
                onClick={() => handleServiceClick(service.title, service.price)}
              >
                Solicitar Orçamento
              </Button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ServicesSection;

/* ===================================
   Portfolio Section
   =================================== */
import { useState } from "react";
import { Play, Eye, ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLazyLoad } from "@/hooks/use-lazy-load";

const categories = ["Todos", "Corporativo", "Social Media", "Narrativo", "Color Grading"];

const projects = [
  {
    id: 1,
    title: "Campanha Lançamento Tech",
    category: "Corporativo",
    views: "250K views",
    thumbnail: "https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=600&h=400&fit=crop",
    hasColorGrading: true,
    metric: "100k views em 1 semana",
  },
  {
    id: 2,
    title: "Vlog Creator Series",
    category: "Social Media",
    views: "1.2M views",
    thumbnail: "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=600&h=400&fit=crop",
    hasColorGrading: false,
    metric: "Aumento de 45% em inscritos",
  },
  {
    id: 3,
    title: "Documentário Independente",
    category: "Narrativo",
    views: "500K views",
    thumbnail: "https://images.unsplash.com/photo-1536240478700-b869070f9279?w=600&h=400&fit=crop",
    hasColorGrading: true,
    metric: "Selecionado para 3 festivais",
  },
  {
    id: 4,
    title: "Comercial E-commerce",
    category: "Corporativo",
    views: "800K views",
    thumbnail: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop",
    hasColorGrading: true,
    metric: "+200% conversões",
  },
  {
    id: 5,
    title: "Podcast Visual",
    category: "Social Media",
    views: "350K views",
    thumbnail: "https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=600&h=400&fit=crop",
    hasColorGrading: false,
    metric: "Top 10 Brasil",
  },
  {
    id: 6,
    title: "Curta-Metragem",
    category: "Narrativo",
    views: "180K views",
    thumbnail: "https://images.unsplash.com/photo-1485846234645-a62644f84728?w=600&h=400&fit=crop",
    hasColorGrading: true,
    metric: "Prêmio Melhor Edição",
  },
];

interface ProjectCardProps {
  project: typeof projects[0];
}

const ProjectCard = ({ project }: ProjectCardProps) => {
  const [ref, isVisible] = useLazyLoad<HTMLDivElement>();
  const [imageLoaded, setImageLoaded] = useState(false);

  return (
    <div
      ref={ref}
      className="group relative rounded-2xl overflow-hidden bg-card border border-border hover:border-primary/30 transition-all duration-500"
    >
      {/* Thumbnail */}
      <div className="aspect-video relative overflow-hidden bg-secondary">
        {isVisible && (
          <img
            src={project.thumbnail}
            alt={project.title}
            className={`w-full h-full object-cover transition-all duration-700 group-hover:scale-110 ${
              imageLoaded ? 'opacity-100' : 'opacity-0'
            }`}
            loading="lazy"
            decoding="async"
            onLoad={() => setImageLoaded(true)}
          />
        )}
        {!imageLoaded && isVisible && (
          <div className="absolute inset-0 bg-secondary animate-pulse" />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-card via-transparent to-transparent" />
        
        {/* Play Button Overlay */}
        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <div className="w-14 h-14 md:w-16 md:h-16 rounded-full bg-primary/90 flex items-center justify-center shadow-xl shadow-primary/30">
            <Play className="w-6 h-6 md:w-7 md:h-7 text-primary-foreground ml-1" />
          </div>
        </div>

        {/* Badges */}
        {project.hasColorGrading && (
          <span className="absolute top-3 left-3 md:top-4 md:left-4 bg-primary/90 text-primary-foreground text-xs font-bold px-2 md:px-3 py-1 rounded-full">
            Color Grading
          </span>
        )}
      </div>

      {/* Content */}
      <div className="p-4 md:p-5">
        <div className="flex items-start justify-between gap-3 md:gap-4">
          <div>
            <h3 className="font-display font-bold text-base md:text-lg mb-1 group-hover:text-primary transition-colors">
              {project.title}
            </h3>
            <p className="text-xs md:text-sm text-muted-foreground">{project.category}</p>
          </div>
          <ExternalLink className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0" />
        </div>

        <div className="flex items-center justify-between mt-3 md:mt-4 pt-3 md:pt-4 border-t border-border">
          <div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground">
            <Eye className="w-3 h-3 md:w-4 md:h-4" />
            {project.views}
          </div>
          <span className="text-xs text-primary font-medium">{project.metric}</span>
        </div>
      </div>
    </div>
  );
};

const PortfolioSection = () => {
  const [activeCategory, setActiveCategory] = useState("Todos");

  const filteredProjects = projects.filter((project) => {
    if (activeCategory === "Todos") return true;
    if (activeCategory === "Color Grading") return project.hasColorGrading;
    return project.category === activeCategory;
  });

  return (
    <section id="portfolio" className="py-16 md:py-24 px-4 relative">
      <div className="container mx-auto max-w-6xl">
        <div className="text-center mb-8 md:mb-12">
          <span className="text-primary font-medium tracking-wider uppercase text-sm">
            Portfólio
          </span>
          <h2 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold mt-4 mb-4 md:mb-6">
            Trabalhos em <span className="text-gradient">Destaque</span>
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto text-base md:text-lg">
            Confira alguns dos projetos que transformaram marcas e criadores
          </p>
        </div>

        {/* Category Filter */}
        <div className="flex flex-wrap justify-center gap-2 md:gap-3 mb-8 md:mb-12">
          {categories.map((category) => (
            <button
              key={category}
              onClick={() => setActiveCategory(category)}
              className={`px-4 md:px-5 py-2 rounded-full text-xs md:text-sm font-medium transition-all duration-300 ${
                activeCategory === category
                  ? "bg-primary text-primary-foreground shadow-lg shadow-primary/30"
                  : "bg-secondary text-muted-foreground hover:text-foreground hover:bg-secondary/80"
              }`}
            >
              {category}
            </button>
          ))}
        </div>

        {/* Projects Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
          {filteredProjects.map((project) => (
            <ProjectCard key={project.id} project={project} />
          ))}
        </div>

        <div className="text-center mt-8 md:mt-12">
          <Button variant="outline" size="lg">
            Ver Mais Projetos
          </Button>
        </div>
      </div>
    </section>
  );
};

export default PortfolioSection;


/* ===================================
   Testimonials Section
   =================================== */
import { useState } from "react";
import { ChevronLeft, ChevronRight, Quote, Star } from "lucide-react";

const testimonials = [
  {
    id: 1,
    name: "João Silva",
    role: "CEO, MarcaX",
    avatar: "JS",
    quote: "O color grading extra transformou nosso vídeo em algo completamente profissional. As cores cinematográficas elevaram nossa marca a outro nível. Recomendo demais!",
    rating: 5,
  },
  {
    id: 2,
    name: "Maria Santos",
    role: "YouTuber, 500K+ inscritos",
    avatar: "MS",
    quote: "Minha retenção de vídeos aumentou 40% depois que comecei a trabalhar com ele. O pacing e os hooks são perfeitos para manter a audiência engajada.",
    rating: 5,
  },
  {
    id: 3,
    name: "Pedro Costa",
    role: "Diretor de Marketing, TechCorp",
    avatar: "PC",
    quote: "Entrega rápida, comunicação excelente e qualidade impecável. Nossos anúncios tiveram o dobro de conversões após a edição profissional.",
    rating: 5,
  },
  {
    id: 4,
    name: "Ana Oliveira",
    role: "Influencer Digital",
    avatar: "AO",
    quote: "Trabalho incrível! O sound design imersivo e a edição dinâmica fazem toda diferença nos meus conteúdos. Parceria de longo prazo garantida!",
    rating: 5,
  },
];

const TestimonialsSection = () => {
  const [activeIndex, setActiveIndex] = useState(0);

  const nextTestimonial = () => {
    setActiveIndex((prev) => (prev + 1) % testimonials.length);
  };

  const prevTestimonial = () => {
    setActiveIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length);
  };

  return (
    <section className="py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-background via-card/30 to-background" />
      
      <div className="container mx-auto max-w-4xl relative z-10">
        <div className="text-center mb-16">
          <span className="text-primary font-medium tracking-wider uppercase text-sm">
            Depoimentos
          </span>
          <h2 className="font-display text-4xl md:text-5xl font-bold mt-4 mb-6">
            O Que Dizem Meus <span className="text-gradient">Clientes</span>
          </h2>
        </div>

        {/* Testimonial Carousel */}
        <div className="relative">
          {/* Main Testimonial */}
          <div className="bg-card border border-border rounded-3xl p-8 md:p-12 relative">
            <Quote className="absolute top-8 left-8 w-12 h-12 text-primary/20" />
            
            <div className="relative z-10">
              {/* Stars */}
              <div className="flex gap-1 mb-6">
                {[...Array(testimonials[activeIndex].rating)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 fill-primary text-primary" />
                ))}
              </div>

              {/* Quote */}
              <blockquote className="text-xl md:text-2xl text-foreground leading-relaxed mb-8">
                "{testimonials[activeIndex].quote}"
              </blockquote>

              {/* Author */}
              <div className="flex items-center gap-4">
                <div className="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-lg">
                  {testimonials[activeIndex].avatar}
                </div>
                <div>
                  <div className="font-display font-bold text-lg">
                    {testimonials[activeIndex].name}
                  </div>
                  <div className="text-muted-foreground text-sm">
                    {testimonials[activeIndex].role}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Navigation */}
          <div className="flex items-center justify-center gap-4 mt-8">
            <button
              onClick={prevTestimonial}
              className="w-12 h-12 rounded-full bg-secondary hover:bg-primary/10 transition-colors flex items-center justify-center group"
              aria-label="Depoimento anterior"
            >
              <ChevronLeft className="w-5 h-5 text-muted-foreground group-hover:text-primary" />
            </button>

            {/* Dots */}
            <div className="flex gap-2">
              {testimonials.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setActiveIndex(index)}
                  className={`w-2 h-2 rounded-full transition-all duration-300 ${
                    index === activeIndex
                      ? "w-8 bg-primary"
                      : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
                  }`}
                  aria-label={`Ir para depoimento ${index + 1}`}
                />
              ))}
            </div>

            <button
              onClick={nextTestimonial}
              className="w-12 h-12 rounded-full bg-secondary hover:bg-primary/10 transition-colors flex items-center justify-center group"
              aria-label="Próximo depoimento"
            >
              <ChevronRight className="w-5 h-5 text-muted-foreground group-hover:text-primary" />
            </button>
          </div>
        </div>

        {/* Schema Markup for SEO (hidden) */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "ItemList",
              itemListElement: testimonials.map((t, i) => ({
                "@type": "Review",
                position: i + 1,
                author: {
                  "@type": "Person",
                  name: t.name,
                },
                reviewBody: t.quote,
                reviewRating: {
                  "@type": "Rating",
                  ratingValue: t.rating,
                  bestRating: 5,
                },
              })),
            }),
          }}
        />
      </div>
    </section>
  );
};

export default TestimonialsSection;

}

/* ===================================
   Contact Section
   =================================== */
import { useState, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { ChevronDown, Send, Mail, Calendar, Sparkles, Calculator } from "lucide-react";
import { toast } from "@/hooks/use-toast";
import { trackColorGradeClick, trackFormSubmission } from "@/lib/analytics";

const faqs = [
  {
    question: "O que é color grading extra?",
    answer: "Correção avançada de cores para realce emocional e consistência visual. Inclui LUTs customizados e correção HDR, adicionando R$ 300 ao projeto. Tempo extra estimado: 4-8 horas de trabalho especializado.",
  },
  {
    question: "Qual o prazo médio de entrega?",
    answer: "Depende do projeto. Edições básicas são entregues em 48-72h. Projetos completos levam de 1-2 semanas. Urgências podem ser negociadas com taxa adicional.",
  },
  {
    question: "Você trabalha com revisões?",
    answer: "Sim! Cada projeto inclui 2 rodadas de revisões gratuitas. Revisões adicionais são cobradas por hora.",
  },
  {
    question: "Quais formatos você entrega?",
    answer: "Entrego no formato que você precisar: MP4 para web, ProRes para TV, formatos otimizados para YouTube, Instagram, TikTok, etc.",
  },
];

const projectTypes = [
  { value: "basico", label: "Edição Básica", basePrice: 500 },
  { value: "avancado", label: "Edição Avançada", basePrice: 800 },
  { value: "completo", label: "Pacote Completo", basePrice: 2000 },
  { value: "outro", label: "Outro", basePrice: 0 },
];

const COLOR_GRADING_PRICE = 300;

const ContactSection = () => {
  const [openFaq, setOpenFaq] = useState<number | null>(0);
  const [includeColorGrading, setIncludeColorGrading] = useState(false);
  const [selectedProject, setSelectedProject] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const estimatedPrice = useMemo(() => {
    const project = projectTypes.find(p => p.value === selectedProject);
    if (!project || project.basePrice === 0) return null;
    
    const base = project.basePrice;
    const total = includeColorGrading ? base + COLOR_GRADING_PRICE : base;
    return { base, total, hasColorGrading: includeColorGrading };
  }, [selectedProject, includeColorGrading]);

  const handleColorGradingChange = (checked: boolean) => {
    setIncludeColorGrading(checked);
    if (checked) {
      trackColorGradeClick('contact_form_checkbox', COLOR_GRADING_PRICE);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    trackFormSubmission(selectedProject, includeColorGrading);
    
    setTimeout(() => {
      toast({
        title: "Mensagem enviada!",
        description: "Entrarei em contato em até 24 horas.",
      });
      setIsSubmitting(false);
    }, 1500);
  };

  return (
    <section id="contato" className="py-16 md:py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-background via-primary/5 to-background" />
      
      <div className="container mx-auto max-w-6xl relative z-10">
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16">
          {/* Form Column */}
          <div>
            <span className="text-primary font-medium tracking-wider uppercase text-sm">
              Contato
            </span>
            <h2 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold mt-4 mb-4 md:mb-6">
              Pronto para o Seu{" "}
              <span className="text-gradient">Próximo Hit?</span>
            </h2>
            <p className="text-muted-foreground text-base md:text-lg mb-6 md:mb-8">
              Preencha o formulário e receba um orçamento personalizado em até 24 horas.
            </p>

            <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label htmlFor="name" className="text-sm font-medium text-foreground">
                    Nome
                  </label>
                  <Input
                    id="name"
                    placeholder="Seu nome completo"
                    required
                    className="bg-card border-border focus:border-primary"
                  />
                </div>
                <div className="space-y-2">
                  <label htmlFor="email" className="text-sm font-medium text-foreground">
                    Email
                  </label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="seu@email.com"
                    required
                    className="bg-card border-border focus:border-primary"
                  />
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label htmlFor="project-type" className="text-sm font-medium text-foreground">
                    Tipo de Projeto
                  </label>
                  <select
                    id="project-type"
                    required
                    value={selectedProject}
                    onChange={(e) => setSelectedProject(e.target.value)}
                    className="w-full h-10 px-3 rounded-lg bg-card border border-border text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-colors"
                  >
                    <option value="">Selecione...</option>
                    {projectTypes.map((type) => (
                      <option key={type.value} value={type.value}>
                        {type.label}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="space-y-2">
                  <label htmlFor="deadline" className="text-sm font-medium text-foreground">
                    Prazo Desejado
                  </label>
                  <div className="relative">
                    <Input
                      id="deadline"
                      type="date"
                      className="bg-card border-border focus:border-primary"
                    />
                    <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <label htmlFor="message" className="text-sm font-medium text-foreground">
                  Detalhes do Projeto
                </label>
                <Textarea
                  id="message"
                  placeholder="Descreva seu projeto, objetivos e qualquer informação relevante..."
                  rows={4}
                  className="bg-card border-border focus:border-primary resize-none"
                />
              </div>

              {/* Color Grading Checkbox with Glow */}
              <div 
                className={`flex items-center space-x-3 p-4 rounded-xl border transition-all duration-300 ${
                  includeColorGrading 
                    ? "bg-primary/10 border-primary/40 shadow-[0_0_25px_rgba(234,179,8,0.2)]" 
                    : "bg-primary/5 border-primary/20 hover:border-primary/30 hover:shadow-[0_0_15px_rgba(234,179,8,0.1)]"
                }`}
              >
                <Checkbox
                  id="color-grading"
                  checked={includeColorGrading}
                  onCheckedChange={handleColorGradingChange}
                  className="border-primary data-[state=checked]:bg-primary"
                />
                <div className="flex-1">
                  <label
                    htmlFor="color-grading"
                    className="text-sm font-medium text-foreground cursor-pointer flex items-center gap-2"
                  >
                    <Sparkles className="w-4 h-4 text-primary" />
                    Incluir Color Grading Extra (+R$ {COLOR_GRADING_PRICE})
                  </label>
                  <p className="text-xs text-muted-foreground mt-1">
                    Correção avançada de cores para impacto cinematográfico
                  </p>
                </div>
              </div>

              {/* Dynamic Price Calculator */}
              {estimatedPrice && (
                <div className="p-4 rounded-xl bg-card border border-border">
                  <div className="flex items-center gap-2 mb-3">
                    <Calculator className="w-4 h-4 text-primary" />
                    <span className="text-sm font-medium text-foreground">Estimativa de Preço</span>
                  </div>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between text-muted-foreground">
                      <span>Valor base</span>
                      <span>R$ {estimatedPrice.base.toLocaleString('pt-BR')}</span>
                    </div>
                    {estimatedPrice.hasColorGrading && (
                      <div className="flex justify-between text-primary">
                        <span>Color Grading Extra</span>
                        <span>+ R$ {COLOR_GRADING_PRICE}</span>
                      </div>
                    )}
                    <div className="flex justify-between pt-2 border-t border-border font-bold text-foreground">
                      <span>Total estimado</span>
                      <span className="text-gradient">R$ {estimatedPrice.total.toLocaleString('pt-BR')}</span>
                    </div>
                  </div>
                </div>
              )}

              <Button type="submit" variant="hero" size="xl" className="w-full" disabled={isSubmitting}>
                {isSubmitting ? (
                  "Enviando..."
                ) : (
                  <>
                    <Send className="w-5 h-5" />
                    Inicie o Projeto Agora
                  </>
                )}
              </Button>
            </form>
          </div>

          {/* FAQ Column */}
          <div>
            <h3 className="font-display text-xl md:text-2xl font-bold mb-6 md:mb-8">
              Perguntas Frequentes
            </h3>

            <div className="space-y-3 md:space-y-4">
              {faqs.map((faq, index) => (
                <div
                  key={index}
                  className="bg-card border border-border rounded-xl overflow-hidden"
                >
                  <button
                    onClick={() => setOpenFaq(openFaq === index ? null : index)}
                    className="w-full flex items-center justify-between p-4 md:p-5 text-left hover:bg-secondary/50 transition-colors"
                  >
                    <span className="font-medium text-foreground text-sm md:text-base">{faq.question}</span>
                    <ChevronDown
                      className={`w-5 h-5 text-muted-foreground transition-transform duration-300 flex-shrink-0 ml-2 ${
                        openFaq === index ? "rotate-180" : ""
                      }`}
                    />
                  </button>
                  <div
                    className={`overflow-hidden transition-all duration-300 ${
                      openFaq === index ? "max-h-48" : "max-h-0"
                    }`}
                  >
                    <div className="px-4 md:px-5 pb-4 md:pb-5 text-muted-foreground text-sm">
                      {faq.answer}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Contact Info */}
            <div className="mt-8 md:mt-12 p-4 md:p-6 bg-card border border-border rounded-xl">
              <h4 className="font-display font-bold mb-4">Contato Direto</h4>
              <a
                href="mailto:contato@seueditor.com"
                className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
              >
                <Mail className="w-5 h-5" />
                contato@seueditor.com
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;


/* FAQ */
.faq-section {
  margin-top: 2rem;
}

.faq-item {
  border-bottom: 1px solid hsl(var(--border));
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  cursor: pointer;
  text-align: left;
}

.faq-question:hover {
  color: hsl(var(--primary));
}

.faq-answer {
  padding-bottom: 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.7;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

/* ===================================
   Trust Badges
   =================================== */
import { useState, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { ChevronDown, Send, Mail, Calendar, Sparkles, Calculator } from "lucide-react";
import { toast } from "@/hooks/use-toast";
import { trackColorGradeClick, trackFormSubmission } from "@/lib/analytics";

const faqs = [
  {
    question: "O que é color grading extra?",
    answer: "Correção avançada de cores para realce emocional e consistência visual. Inclui LUTs customizados e correção HDR, adicionando R$ 300 ao projeto. Tempo extra estimado: 4-8 horas de trabalho especializado.",
  },
  {
    question: "Qual o prazo médio de entrega?",
    answer: "Depende do projeto. Edições básicas são entregues em 48-72h. Projetos completos levam de 1-2 semanas. Urgências podem ser negociadas com taxa adicional.",
  },
  {
    question: "Você trabalha com revisões?",
    answer: "Sim! Cada projeto inclui 2 rodadas de revisões gratuitas. Revisões adicionais são cobradas por hora.",
  },
  {
    question: "Quais formatos você entrega?",
    answer: "Entrego no formato que você precisar: MP4 para web, ProRes para TV, formatos otimizados para YouTube, Instagram, TikTok, etc.",
  },
];

const projectTypes = [
  { value: "basico", label: "Edição Básica", basePrice: 500 },
  { value: "avancado", label: "Edição Avançada", basePrice: 800 },
  { value: "completo", label: "Pacote Completo", basePrice: 2000 },
  { value: "outro", label: "Outro", basePrice: 0 },
];

const COLOR_GRADING_PRICE = 300;

const ContactSection = () => {
  const [openFaq, setOpenFaq] = useState<number | null>(0);
  const [includeColorGrading, setIncludeColorGrading] = useState(false);
  const [selectedProject, setSelectedProject] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const estimatedPrice = useMemo(() => {
    const project = projectTypes.find(p => p.value === selectedProject);
    if (!project || project.basePrice === 0) return null;
    
    const base = project.basePrice;
    const total = includeColorGrading ? base + COLOR_GRADING_PRICE : base;
    return { base, total, hasColorGrading: includeColorGrading };
  }, [selectedProject, includeColorGrading]);

  const handleColorGradingChange = (checked: boolean) => {
    setIncludeColorGrading(checked);
    if (checked) {
      trackColorGradeClick('contact_form_checkbox', COLOR_GRADING_PRICE);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    trackFormSubmission(selectedProject, includeColorGrading);
    
    setTimeout(() => {
      toast({
        title: "Mensagem enviada!",
        description: "Entrarei em contato em até 24 horas.",
      });
      setIsSubmitting(false);
    }, 1500);
  };

  return (
    <section id="contato" className="py-16 md:py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-background via-primary/5 to-background" />
      
      <div className="container mx-auto max-w-6xl relative z-10">
        <div className="grid lg:grid-cols-2 gap-8 lg:gap-16">
          {/* Form Column */}
          <div>
            <span className="text-primary font-medium tracking-wider uppercase text-sm">
              Contato
            </span>
            <h2 className="font-display text-3xl md:text-4xl lg:text-5xl font-bold mt-4 mb-4 md:mb-6">
              Pronto para o Seu{" "}
              <span className="text-gradient">Próximo Hit?</span>
            </h2>
            <p className="text-muted-foreground text-base md:text-lg mb-6 md:mb-8">
              Preencha o formulário e receba um orçamento personalizado em até 24 horas.
            </p>

            <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label htmlFor="name" className="text-sm font-medium text-foreground">
                    Nome
                  </label>
                  <Input
                    id="name"
                    placeholder="Seu nome completo"
                    required
                    className="bg-card border-border focus:border-primary"
                  />
                </div>
                <div className="space-y-2">
                  <label htmlFor="email" className="text-sm font-medium text-foreground">
                    Email
                  </label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="seu@email.com"
                    required
                    className="bg-card border-border focus:border-primary"
                  />
                </div>
              </div>

              <div className="grid md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label htmlFor="project-type" className="text-sm font-medium text-foreground">
                    Tipo de Projeto
                  </label>
                  <select
                    id="project-type"
                    required
                    value={selectedProject}
                    onChange={(e) => setSelectedProject(e.target.value)}
                    className="w-full h-10 px-3 rounded-lg bg-card border border-border text-foreground focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-colors"
                  >
                    <option value="">Selecione...</option>
                    {projectTypes.map((type) => (
                      <option key={type.value} value={type.value}>
                        {type.label}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="space-y-2">
                  <label htmlFor="deadline" className="text-sm font-medium text-foreground">
                    Prazo Desejado
                  </label>
                  <div className="relative">
                    <Input
                      id="deadline"
                      type="date"
                      className="bg-card border-border focus:border-primary"
                    />
                    <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                <label htmlFor="message" className="text-sm font-medium text-foreground">
                  Detalhes do Projeto
                </label>
                <Textarea
                  id="message"
                  placeholder="Descreva seu projeto, objetivos e qualquer informação relevante..."
                  rows={4}
                  className="bg-card border-border focus:border-primary resize-none"
                />
              </div>

              {/* Color Grading Checkbox with Glow */}
              <div 
                className={`flex items-center space-x-3 p-4 rounded-xl border transition-all duration-300 ${
                  includeColorGrading 
                    ? "bg-primary/10 border-primary/40 shadow-[0_0_25px_rgba(234,179,8,0.2)]" 
                    : "bg-primary/5 border-primary/20 hover:border-primary/30 hover:shadow-[0_0_15px_rgba(234,179,8,0.1)]"
                }`}
              >
                <Checkbox
                  id="color-grading"
                  checked={includeColorGrading}
                  onCheckedChange={handleColorGradingChange}
                  className="border-primary data-[state=checked]:bg-primary"
                />
                <div className="flex-1">
                  <label
                    htmlFor="color-grading"
                    className="text-sm font-medium text-foreground cursor-pointer flex items-center gap-2"
                  >
                    <Sparkles className="w-4 h-4 text-primary" />
                    Incluir Color Grading Extra (+R$ {COLOR_GRADING_PRICE})
                  </label>
                  <p className="text-xs text-muted-foreground mt-1">
                    Correção avançada de cores para impacto cinematográfico
                  </p>
                </div>
              </div>

              {/* Dynamic Price Calculator */}
              {estimatedPrice && (
                <div className="p-4 rounded-xl bg-card border border-border">
                  <div className="flex items-center gap-2 mb-3">
                    <Calculator className="w-4 h-4 text-primary" />
                    <span className="text-sm font-medium text-foreground">Estimativa de Preço</span>
                  </div>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between text-muted-foreground">
                      <span>Valor base</span>
                      <span>R$ {estimatedPrice.base.toLocaleString('pt-BR')}</span>
                    </div>
                    {estimatedPrice.hasColorGrading && (
                      <div className="flex justify-between text-primary">
                        <span>Color Grading Extra</span>
                        <span>+ R$ {COLOR_GRADING_PRICE}</span>
                      </div>
                    )}
                    <div className="flex justify-between pt-2 border-t border-border font-bold text-foreground">
                      <span>Total estimado</span>
                      <span className="text-gradient">R$ {estimatedPrice.total.toLocaleString('pt-BR')}</span>
                    </div>
                  </div>
                </div>
              )}

              <Button type="submit" variant="hero" size="xl" className="w-full" disabled={isSubmitting}>
                {isSubmitting ? (
                  "Enviando..."
                ) : (
                  <>
                    <Send className="w-5 h-5" />
                    Inicie o Projeto Agora
                  </>
                )}
              </Button>
            </form>
          </div>

          {/* FAQ Column */}
          <div>
            <h3 className="font-display text-xl md:text-2xl font-bold mb-6 md:mb-8">
              Perguntas Frequentes
            </h3>

            <div className="space-y-3 md:space-y-4">
              {faqs.map((faq, index) => (
                <div
                  key={index}
                  className="bg-card border border-border rounded-xl overflow-hidden"
                >
                  <button
                    onClick={() => setOpenFaq(openFaq === index ? null : index)}
                    className="w-full flex items-center justify-between p-4 md:p-5 text-left hover:bg-secondary/50 transition-colors"
                  >
                    <span className="font-medium text-foreground text-sm md:text-base">{faq.question}</span>
                    <ChevronDown
                      className={`w-5 h-5 text-muted-foreground transition-transform duration-300 flex-shrink-0 ml-2 ${
                        openFaq === index ? "rotate-180" : ""
                      }`}
                    />
                  </button>
                  <div
                    className={`overflow-hidden transition-all duration-300 ${
                      openFaq === index ? "max-h-48" : "max-h-0"
                    }`}
                  >
                    <div className="px-4 md:px-5 pb-4 md:pb-5 text-muted-foreground text-sm">
                      {faq.answer}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Contact Info */}
            <div className="mt-8 md:mt-12 p-4 md:p-6 bg-card border border-border rounded-xl">
              <h4 className="font-display font-bold mb-4">Contato Direto</h4>
              <a
                href="mailto:contato@seueditor.com"
                className="flex items-center gap-3 text-muted-foreground hover:text-primary transition-colors"
              >
                <Mail className="w-5 h-5" />
                contato@seueditor.com
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default ContactSection;


/* ===================================
   Footer
   =================================== */
import { Linkedin, Instagram, Mail, Heart, Shield } from "lucide-react";

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="py-8 md:py-12 px-4 border-t border-border">
      <div className="container mx-auto max-w-6xl">
        {/* LGPD Notice */}
        <div className="mb-8 p-4 md:p-6 bg-card/50 border border-border rounded-xl">
          <div className="flex items-start gap-3">
            <Shield className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
            <div>
              <h4 className="font-display font-bold text-sm mb-2">Compromisso com sua Privacidade (LGPD)</h4>
              <p className="text-xs md:text-sm text-muted-foreground leading-relaxed">
                Em conformidade com a Lei Geral de Proteção de Dados (Lei 13.709/2018), seus dados pessoais 
                são coletados apenas para fins de orçamento e comunicação sobre serviços. Não compartilhamos 
                suas informações com terceiros. Você pode solicitar a exclusão de seus dados a qualquer momento 
                através do email contato@seueditor.com.
              </p>
            </div>
          </div>
        </div>

        <div className="flex flex-col md:flex-row items-center justify-between gap-6 md:gap-8">
          {/* Logo/Brand */}
          <div className="text-center md:text-left">
            <div className="font-display text-xl font-bold text-gradient mb-2">
              Editor Freelance
            </div>
            <p className="text-sm text-muted-foreground">
              Transformando ideias em narrativas visuais
            </p>
          </div>

          {/* Social Links */}
          <div className="flex items-center gap-4">
            <a
              href="https://linkedin.com/in/seu-perfil"
              target="_blank"
              rel="noopener noreferrer"
              className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center hover:bg-primary/20 hover:text-primary transition-all duration-300 hover:shadow-[0_0_15px_rgba(234,179,8,0.3)]"
              aria-label="LinkedIn"
            >
              <Linkedin className="w-5 h-5" />
            </a>
            <a
              href="https://instagram.com/seu-perfil"
              target="_blank"
              rel="noopener noreferrer"
              className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center hover:bg-primary/20 hover:text-primary transition-all duration-300 hover:shadow-[0_0_15px_rgba(234,179,8,0.3)]"
              aria-label="Instagram"
            >
              <Instagram className="w-5 h-5" />
            </a>
            <a
              href="mailto:contato@seueditor.com"
              className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center hover:bg-primary/20 hover:text-primary transition-all duration-300 hover:shadow-[0_0_15px_rgba(234,179,8,0.3)]"
              aria-label="Email"
            >
              <Mail className="w-5 h-5" />
            </a>
          </div>

          {/* Copyright & Links */}
          <div className="text-center md:text-right">
            <div className="flex flex-wrap items-center justify-center md:justify-end gap-3 md:gap-4 text-xs md:text-sm text-muted-foreground mb-2">
              <a href="#" className="hover:text-foreground transition-colors">
                Política de Privacidade
              </a>
              <span className="hidden md:inline">•</span>
              <a href="#" className="hover:text-foreground transition-colors">
                Termos de Uso
              </a>
              <span className="hidden md:inline">•</span>
              <a href="#" className="hover:text-foreground transition-colors">
                LGPD
              </a>
            </div>
            <p className="text-xs text-muted-foreground flex items-center justify-center md:justify-end gap-1">
              © {currentYear} Todos os direitos reservados. Feito com{" "}
              <Heart className="w-3 h-3 text-primary" /> no Brasil
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;


/* LGPD Notice */
.lgpd-notice {
  margin-top: 1rem;
  padding: 1rem;
  background: hsla(var(--gold-500), 0.1);
  border: 1px solid hsla(var(--gold-500), 0.3);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.lgpd-notice a {
  color: hsl(var(--gold-400));
  text-decoration: underline;
}

/* ===================================
   Animations
   =================================== */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-up {
  animation: fade-up 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ===================================
   Responsive Utilities
   =================================== */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}