[V0_FILE]typescriptreact:file="components/supplier-carousel.tsx" isMerged="true" "use client" export default function SupplierCarousel() { const suppliers = [ "British Gas", "EDF Energy", "E.ON", "Octopus Energy", "SSE", "Scottish Power", "Npower", "Utility Warehouse", "Good Energy", "Shell Energy", ] return (

We work with leading UK energy suppliers

{[...suppliers, ...suppliers].map((supplier, index) => (

{supplier}

))}

) } [V0_FILE]typescriptreact:file="app/api/contact/route.tsx" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const body = await request.json() const { name, email, phone, businessType, message } = body const emailHtml = `

New Contact Form Submission

Name: ${name}

Email: ${email}

Phone: ${phone}

Business Type: ${businessType}

Message:

${message.replace(/\n/g, "
")}

New Complaint Submission

Name: ${name}

Email: ${email}

Issue Type: ${issueType}

Priority: ${priority}

Description:

${description.replace(/\n/g, "
")}

` await fetch(`${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/api/send-email`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ to: "info@greenenergyconnectsltd.co.uk", subject: `New Complaint from ${name} - ${priority} Priority`, html: emailHtml, }), }) return NextResponse.json({ success: true, message: "Complaint submitted successfully", referenceId: `COMP-${Date.now()}`, }) } catch (error) { console.error("[v0] Complaints form error:", error) return NextResponse.json({ error: "Failed to process request" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/energy-calculator.tsx" isMerged="true" 'use client' import { useState } from 'react' import { X } from 'lucide-react' interface CalculatorModalProps { isOpen: boolean onClose: () => void } export function EnergyCalculator({ isOpen, onClose }: CalculatorModalProps) { const [annualSpend, setAnnualSpend] = useState('') const [businessType, setBusinessType] = useState('small-business') const [submitted, setSubmitted] = useState(false) const calculateSavings = () => { if (!annualSpend) return null const spend = parseFloat(annualSpend) // Conservative estimate: 20% average savings const savings = spend * 0.20 const newCost = spend - savings return { savings, newCost } } const result = calculateSavings() const handleReset = () => { setAnnualSpend('') setBusinessType('small-business') setSubmitted(false) } if (!isOpen) return null return (

Energy Savings Calculator

{!submitted ? (

{ e.preventDefault() setSubmitted(true) }}>

Annual Energy Spend (£) setAnnualSpend(e.target.value)} placeholder="e.g., 10000" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-green-600" required />

Business Type

) : (

Estimated Annual Savings

£{result?.savings.toLocaleString('en-GB', { maximumFractionDigits: 0 })}

Based on your annual spend of £{parseFloat(annualSpend).toLocaleString('en-GB', { maximumFractionDigits: 0 })}

New Estimated Annual Cost

£{result?.newCost.toLocaleString('en-GB', { maximumFractionDigits: 0 })}

These are estimated savings based on typical market conditions. Actual savings may vary.

)}

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function About() { return (

{/* Hero Section */}

Our Story: From Struggle to Success

The journey of how four determined individuals transformed their struggles into a mission to help UK businesses save on energy costs

{/* The Beginning Section */}

The Beginning: A Shared Struggle

In 2022, four friends - Muhammad Waqar Haider, Mohammed Ali, Kabeer Singh, and Adam Hassan - were working as sole traders, each struggling to make ends meet in their respective businesses. The rising energy costs were crushing small businesses across the UK, including their own.

Muhammad, running a small consultancy, watched his energy bills triple. Mohammed's family business was on the verge of closure due to unaffordable energy contracts. Kabeer Singh saw his sales commissions disappear as clients couldn't afford services. Adam was overwhelmed handling complaints from frustrated customers facing similar energy crises.

"We realized we weren't alone in this struggle," says Muhammad. "Every small business owner we knew was fighting the same battle against energy suppliers who seemed to care more about profits than people."

2022

Started as sole traders

300%

Energy cost increase

Friends united

Shared mission

{/* The Turning Point */}

The Turning Point

When desperation met determination, a solution was born

💡

The Realization

"We discovered that energy suppliers were offering different rates to different businesses for the same service. There was no transparency, and small businesses were being overcharged."

🎯

The Decision

"We decided to pool our skills - Muhammad's business acumen, Mohammed's operations expertise, Kabeer's sales experience, and Adam's customer service excellence."

❤️

The Mission

"We committed to helping other businesses avoid the struggles we faced. No hidden fees, complete transparency, and genuine care for every client's success."

{/* Incorporation Section */}

March 25, 2025

Green Energy Connects Ltd is Born

After three years of working as sole traders and helping businesses informally, we officially incorporated to serve you better

Why We Incorporated

•
Greater Protection: Limited company status provides better protection for our clients and their data
•
Professional Recognition: ADR membership and regulatory compliance as a registered company
•
Expanded Services: Ability to offer more comprehensive energy solutions and partnerships
•
Future Growth: Planning to expand into water contracts and card machine solutions

500+

Businesses helped as sole traders

£50,000+

Saved for clients in 2024 alone

{/* Team Section */}

Meet the Team Behind Your Success

Four friends who turned their struggles into your savings

Muhammad Waqar Haider

Director

3+ years experience

Business Strategy

ADR Member

Mohammed Ali

Manager

3+ years experience

Operations Management

Team Leadership

Kabeer Singh

Sales Agent

2+ years experience

Business Development

Energy Consultation

Adam Hassan

Complaints Lead

2+ years experience

Customer Excellence

Client Advocacy

{/* Values Section */}

Our Values Born from Experience

Every value we hold comes from the struggles we've overcome

Complete Transparency

We've been where you are. No hidden fees, no surprise charges. You pay nothing - suppliers pay us.

SME Focus

Small businesses, charities, and individuals are our priority. We understand your challenges because we've lived them.

Genuine Care

Every client's success is personal to us. Your savings are our success, your satisfaction is our mission.

{/* CTA Section */}

Let Our Story Become Your Success Story

We've walked in your shoes. Now let us help you walk towards significant energy savings.

Get Your Free Quote View Our Services

) } [V0_FILE]typescriptreact:file="app/achievements/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function Achievements() { return (

Our Achievements

Track record of success and client satisfaction

500+

Clients Served

Businesses and individuals across the UK

£50k+

Annual Savings

£50K+ in 2024 alone

Years Experience

Combined team expertise since 2022

96%

Client Satisfaction

Consistently high ratings and retention

1,200+

Contracts Negotiated

200+ in 2024

85%

Average Savings

15-30% typical cost reduction

) } [V0_FILE]typescriptreact:file="app/services/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function Services() { return (

Our Services

100% FREE - No upfront fees. We're paid by suppliers, so you don't pay anything.

Energy Consultancy

Expert guidance on energy procurement strategies tailored to your business needs.

Energy usage analysis
Market trend insights
Cost optimization strategies
100% FREE consultation

Contract Negotiation

Secure the best possible rates with major UK energy suppliers.

Supplier rate comparison
Contract terms negotiation
Flexible payment terms
100% FREE service

Risk Management

Protect against energy price volatility with strategic planning.

Price volatility protection
Contract duration optimization
Market hedging strategies
100% FREE guidance

Best Contract Sourcing

Find the absolute best energy deals tailored to your specific requirements.

Comprehensive market search
Custom requirements matching
Best deal guarantee
100% FREE service

Coming Soon

▪

Water Contract Management

▪

Card Machine Solutions

) } [V0_FILE]typescriptreact:file="app/testimonials/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" export default function Testimonials() { const testimonials = [ { name: "John Smith", company: "Tech Solutions Ltd", rating: 5, text: "Green Energy Connects saved us over £8,000 annually. Excellent service!", }, { name: "Emily Davis", company: "Retail Plus", rating: 5, text: "Professional team, transparent process, and amazing savings. Highly recommended!", }, { name: "Michael Brown", company: "Manufacturing Pro", rating: 5, text: "They negotiated terms I never thought possible. Outstanding results!", }, { name: "Sarah Wilson", company: "Education Plus", rating: 5, text: "Zero fees, maximum savings. This is how energy brokerage should work.", }, ] return (

Client Testimonials

What our happy clients say about us

{testimonials.map((testimonial) => (

{[...Array(testimonial.rating)].map((_, i) => ( ★ ))}

"{testimonial.text}"

{testimonial.name}

{testimonial.company}

))}

) } [V0_FILE]typescriptreact:file="app/work-with-us/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" export default function WorkWithUs() { return (

Work With Us

Join our team or become a partner

Full-Time Partnership

Join our growing team as a full-time energy broker or consultant.

Competitive salary package
Commission structure
Professional development
Health insurance benefits
Flexible working options

Apply Now

Affiliate Partnership

Refer clients and earn attractive commissions on each successful deal.

Generous commission rates
Marketing support
Dedicated account manager
Monthly payouts
No upfront costs

Become Affiliate

Why Partner With Us?

Industry Leadership

We're at the forefront of energy brokerage in the UK

Proven Success

500+ clients and counting with exceptional satisfaction rates

Growth Opportunity

Join a rapidly expanding company with significant market potential

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" export default function Contact() { const [formData, setFormData] = useState({ name: "", email: "", phone: "", businessType: "", message: "", }) const [submitted, setSubmitted] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { const response = await fetch("/api/contact", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) if (response.ok) { setSubmitted(true) setFormData({ name: "", email: "", phone: "", businessType: "", message: "" }) setTimeout(() => setSubmitted(false), 3000) } } catch (error) { console.error("Error submitting form:", error) } } return (

Contact Us

Phone

+44 (0) 2081502243

Mon-Fri: 9:00 AM - 6:00 PM

Email

info@greenenergyconnectsltd.co.uk

Response within 2 hours

Office

9 Maydeb Court

Whalebone Lane South

Romford, England, RM6 6HR

By appointment only

Emergency Support

24/7 for existing clients only

+44 (0) 2081502243

Send us a Message

{submitted && (

Thank you! We'll be in touch within 2 hours.

)}

Name setFormData({ ...formData, name: e.target.value })} className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-900" />

Email setFormData({ ...formData, email: e.target.value })} className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-900" />

Phone setFormData({ ...formData, phone: e.target.value })} className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-900" />

Business Type

Message

setFormData({ ...formData, message: e.target.value })}
                    rows={4}
                    className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-900"
                  />
                </div>

<button
                  type="submit"
                  className="w-full bg-blue-900 text-white py-3 rounded-lg font-bold hover:bg-blue-800"
                >
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { Phone, Mail, MapPin } from "lucide-react"

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-white py-12">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
          <div>
            <h3 className="text-lg font-bold mb-4">Contact Info</h3>
            <div className="space-y-3">
              <div className="flex items-start gap-2">
                <Phone size={20} className="mt-1 flex-shrink-0" />
                <span>+44 (0) 2081502243</span>
              </div>
              <div className="flex items-start gap-2">
                <Mail size={20} className="mt-1 flex-shrink-0" />
                <a href="mailto:info@greenenergyconnectsltd.co.uk" className="hover:text-green-400">
                  info@greenenergyconnectsltd.co.uk
                </a>
              </div>
              <div className="flex items-start gap-2">
                <MapPin size={20} className="mt-1 flex-shrink-0" />
                <div>
                  <p>9 Maydeb Court</p>
                  <p>Whalebone Lane South</p>
                  <p>Romford, England, RM6 6HR</p>
                </div>
              </div>
            </div>
          </div>

<div>
            <h3 className="text-lg font-bold mb-4">Hours</h3>
            <div className="space-y-2">
              <p>Mon-Fri: 9:00 AM - 6:00 PM</p>
              <p>By appointment only</p>
              <p className="text-green-400 mt-4">Emergency Support 24/7 for existing clients</p>
            </div>
          </div>

<div>
            <h3 className="text-lg font-bold mb-4">Quick Links</h3>
            <div className="space-y-2">
              <Link href="/about" className="block hover:text-green-400">
                About Us
              </Link>
              <Link href="/services" className="block hover:text-green-400">
                Services
              </Link>
              <Link href="/complaints" className="block hover:text-green-400">
                Complaints
              </Link>
              <Link href="/privacy" className="block hover:text-green-400">
                Privacy Policy
              </Link>
            </div>
          </div>
        </div>

<div className="border-t border-gray-700 pt-8 text-center">
          <p className="mb-4">Company Registration: GB4523108</p>
          <p className="text-sm text-gray-400">
            © 2025 Green Energy Connects Ltd. All rights reserved. Member of ADR Scheme.
          </p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/api/send-email/route.tsx" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import nodemailer from "nodemailer"

const transporter = nodemailer.createTransport({
  host: process.env.EMAIL_HOST,
  port: Number.parseInt(process.env.EMAIL_PORT || "587"),
  secure: process.env.EMAIL_SECURE === "true",
  auth: {
    user: process.env.EMAIL_USER,
    pass: process.env.EMAIL_PASSWORD,
  },
})

export async function POST(request: NextRequest) {
  try {
    const body = await request.json()
    const { to, subject, html } = body

if (!process.env.EMAIL_HOST || !process.env.EMAIL_USER || !process.env.EMAIL_PASSWORD) {
      console.warn("[v0] Email service not configured. Form data logged instead:")
      console.log(body)
      return NextResponse.json({
        success: true,
        message: "Email service not configured - data logged to console",
      })
    }

await transporter.sendMail({
      from: process.env.EMAIL_FROM || process.env.EMAIL_USER,
      to,
      subject,
      html,
    })

return NextResponse.json({ success: true, message: "Email sent successfully" })
  } catch (error) {
    console.error("[v0] Email sending error:", error)
    return NextResponse.json({ error: "Failed to send email" }, { status: 500 })
  }
}
[V0_FILE]json:file="package.json" isEdit="true" isQuickEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.35",
    "next-themes": "^0.4.6",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76",
    "tw-animate-css": "1.4.0",
    "nodemailer": "7.0.10"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/nodemailer": "^6.4.15",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "typescript": "^5"
  }
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  /* Professional Navy Blue Theme */
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0 0);
  --primary: oklch(0.3 0.1 250);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.45 0.12 250);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.9 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.7 0.15 85);
  --accent-foreground: oklch(0.15 0 0);
  --destructive: oklch(0.6 0.25 30);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.92 0 0);
  --input: oklch(0.96 0 0);
  --ring: oklch(0.3 0.1 250);
  --chart-1: oklch(0.3 0.1 250);
  --chart-2: oklch(0.45 0.12 250);
  --chart-3: oklch(0.7 0.15 85);
  --chart-4: oklch(0.6 0.1 60);
  --chart-5: oklch(0.5 0.08 200);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.12 0 0);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.18 0 0);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.18 0 0);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.65 0.2 15);
  --primary-foreground: oklch(0.12 0 0);
  --secondary: oklch(0.6 0.18 120);
  --secondary-foreground: oklch(0.12 0 0);
  --muted: oklch(0.3 0 0);
  --muted-foreground: oklch(0.7 0 0);
  --accent: oklch(0.8 0.22 50);
  --accent-foreground: oklch(0.12 0 0);
  --destructive: oklch(0.6 0.25 30);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.3 0 0);
  --input: oklch(0.22 0 0);
  --ring: oklch(0.65 0.2 15);
  --chart-1: oklch(0.65 0.2 15);
  --chart-2: oklch(0.6 0.18 120);
  --chart-3: oklch(0.8 0.22 50);
  --chart-4: oklch(0.7 0.1 60);
  --chart-5: oklch(0.7 0.08 200);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Ultra HD smooth scrolling and rendering */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  transform: translateZ(0);
  backface-visibility: hidden;
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Shield, Award, Lock, Users, Zap, FileText, ShieldIcon, TrendingUp } from "lucide-react"
import { EnergyCalculator } from "@/components/energy-calculator"

export default function Home() {
  const [showCalculator, setShowCalculator] = useState(false)

return (
    <>
      <main className="min-h-screen">
        {/* Hero Section */}
        <section className="bg-gradient-to-br from-blue-900 via-blue-800 to-slate-900 py-24 relative overflow-hidden">
          <div className="container mx-auto px-4 text-center relative z-10">
            <div className="mb-4 inline-block bg-blue-700/50 text-white px-6 py-2 rounded-full text-sm font-medium border border-blue-500/30">
              Trusted UK Energy Broker Since 2022
            </div>

<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 max-w-3xl mx-auto">
              Reduce Your Business Energy Costs
            </h1>
            <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
              Expert energy consultancy, contract negotiation, and market analysis. We help UK businesses secure the best energy deals with zero customer fees.
            </p>
            <div className="flex gap-4 justify-center flex-wrap">
              <Link
                href="/contact"
                className="bg-amber-500 text-slate-900 px-8 py-3 rounded-lg font-semibold hover:bg-amber-400 transition transform hover:scale-105"
              >
                Get Free Quote
              </Link>
              <Link
                href="/services"
                className="bg-transparent text-white border-2 border-white/50 px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition"
              >
                Our Services
              </Link>
            </div>
          </div>
        </section>

{/* Trust Badges */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-4 text-slate-900">Trusted & Regulated</h2>
            <p className="text-center text-slate-600 mb-12">Fully compliant with UK energy regulations</p>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
                  <Shield className="text-blue-900" size={32} />
                </div>
                <h3 className="font-bold text-lg mb-2">Ofgem Regulated</h3>
                <p className="text-slate-600">Fully compliant with UK energy regulations</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
                  <Award className="text-blue-900" size={32} />
                </div>
                <h3 className="font-bold text-lg mb-2">ADR Member</h3>
                <p className="text-slate-600">Alternative Dispute Resolution certified</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 mx-auto bg-amber-100 rounded-full flex items-center justify-center mb-4">
                  <Lock className="text-amber-700" size={32} />
                </div>
                <h3 className="font-bold text-lg mb-2">Data Protected</h3>
                <p className="text-slate-600">GDPR compliant data handling</p>
              </div>
              <div className="text-center">
                <div className="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center mb-4">
                  <Users className="text-blue-900" size={32} />
                </div>
                <h3 className="font-bold text-lg mb-2">673+ Clients</h3>
                <p className="text-slate-600">Trusted by businesses across UK</p>
              </div>
            </div>
          </div>
        </section>

{/* Core Services */}
        <section className="py-16 bg-slate-50">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-4 text-slate-900">Our Core Services</h2>
            <p className="text-center text-slate-600 mb-12">
              Comprehensive energy solutions tailored to your specific needs and market conditions.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition border-t-4 border-blue-900">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <Zap className="text-blue-900" size={24} />
                </div>
                <h3 className="text-lg font-bold mb-3 text-slate-900">Energy Consultancy</h3>
                <p className="text-slate-600">
                  Expert advice on energy procurement strategies, market trends, and cost optimization for your business.
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition border-t-4 border-blue-700">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <FileText className="text-blue-900" size={24} />
                </div>
                <h3 className="text-lg font-bold mb-3 text-slate-900">Contract Negotiation</h3>
                <p className="text-slate-600">
                  Professional negotiation services to secure the most competitive energy contracts and terms.
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition border-t-4 border-amber-500">
                <div className="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4">
                  <ShieldIcon className="text-amber-700" size={24} />
                </div>
                <h3 className="text-lg font-bold mb-3 text-slate-900">Risk Management</h3>
                <p className="text-slate-600">
                  Comprehensive risk assessment and mitigation strategies to protect against market volatility.
                </p>
              </div>
              <div className="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition border-t-4 border-blue-900">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                  <TrendingUp className="text-blue-900" size={24} />
                </div>
                <h3 className="text-lg font-bold mb-3 text-slate-900">Market Insights</h3>
                <p className="text-slate-600">
                  Real-time market analysis and forecasting to help you make informed energy decisions.
                </p>
              </div>
            </div>
          </div>
        </section>

{/* Energy Calculator */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-3xl font-bold mb-4 text-slate-900">Energy Savings Calculator</h2>
            <p className="text-slate-600 mb-12 max-w-2xl mx-auto">
              Get an estimate of how much you could save on your energy bills with our expert negotiation
            </p>
            <div className="max-w-md mx-auto bg-gradient-to-br from-blue-50 to-slate-100 p-8 rounded-lg border border-blue-200">
              <h3 className="text-xl font-bold mb-6 text-slate-900">Calculate Your Potential Savings</h3>
              <p className="text-slate-600 mb-6">Enter your business details to see estimated annual savings</p>
              <button
                onClick={() => setShowCalculator(true)}
                className="w-full bg-blue-900 text-white py-3 rounded-lg font-semibold hover:bg-blue-800 transition"
              >
                Launch Calculator
              </button>
            </div>
          </div>
        </section>

{/* Stats Section */}
        <section className="py-16 bg-blue-900 text-white">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-4">Proven Track Record</h2>
            <p className="text-center mb-12 text-blue-200">
              Our results speak for themselves. Here is what we have achieved for our clients.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div className="bg-white/10 p-8 rounded-lg text-center backdrop-blur">
                <p className="text-4xl font-bold mb-2">673+</p>
                <p className="font-semibold mb-2">Businesses Served</p>
                <p className="text-sm text-blue-200">SMEs, small businesses, and charities</p>
              </div>
              <div className="bg-white/10 p-8 rounded-lg text-center backdrop-blur">
                <p className="text-4xl font-bold mb-2">3+</p>
                <p className="font-semibold mb-2">Years Experience</p>
                <p className="text-sm text-blue-200">In energy markets</p>
              </div>
              <div className="bg-white/10 p-8 rounded-lg text-center backdrop-blur">
                <p className="text-4xl font-bold mb-2">98%</p>
                <p className="font-semibold mb-2">Positive Feedback Rate</p>
                <p className="text-sm text-blue-200">Client satisfaction</p>
              </div>
              <div className="bg-white/10 p-8 rounded-lg text-center backdrop-blur">
                <p className="text-4xl font-bold mb-2">£0</p>
                <p className="font-semibold mb-2">Customer Fees</p>
                <p className="text-sm text-blue-200">We are paid by suppliers</p>
              </div>
            </div>
          </div>
        </section>

{/* Testimonials Preview */}
        <section className="py-16 bg-slate-50">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-4 text-slate-900">What Our Clients Say</h2>
            <p className="text-center text-slate-600 mb-12">
              Do not just take our word for it. Here is what our satisfied clients have to say.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-white p-8 rounded-lg shadow-sm border-l-4 border-blue-900">
                <p className="text-slate-600 mb-4 italic">
                  "Saved us over £50,000 annually on our energy costs. Their market expertise is unmatched."
                </p>
                <p className="font-semibold text-slate-900">Sarah Johnson</p>
                <p className="text-slate-600 text-sm">Manufacturing Ltd</p>
              </div>
              <div className="bg-white p-8 rounded-lg shadow-sm border-l-4 border-amber-500">
                <p className="text-slate-600 mb-4 italic">
                  "Professional service and excellent results. They made the complex energy market simple to understand."
                </p>
                <p className="font-semibold text-slate-900">David Chen</p>
                <p className="text-slate-600 text-sm">Retail Chain</p>
              </div>
              <div className="bg-white p-8 rounded-lg shadow-sm border-l-4 border-blue-900">
                <p className="text-slate-600 mb-4 italic">
                  "As a growing business, their flexible approach and competitive rates were exactly what we needed."
                </p>
                <p className="font-semibold text-slate-900">Emma Williams</p>
                <p className="text-slate-600 text-sm">Tech Startup</p>
              </div>
            </div>
          </div>
        </section>

{/* FAQ Section */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center mb-12 text-slate-900">Frequently Asked Questions</h2>
            <div className="max-w-3xl mx-auto space-y-4">
              {[
                {
                  q: "How much does your service cost?",
                  a: "Our services are completely free to customers. We are paid commission by energy suppliers when we successfully place you with them.",
                },
                {
                  q: "How much can I save on my energy bills?",
                  a: "Savings vary by business, but our clients typically save 15-30% on their energy costs through better contracts and terms.",
                },
                {
                  q: "How long does the switching process take?",
                  a: "Typically 2-6 weeks depending on your current contract terms and the supplier's processing time.",
                },
                {
                  q: "Do I need to change my meter or equipment?",
                  a: "In most cases, no. Your existing meter and equipment will continue to work with new suppliers.",
                },
                {
                  q: "What if I am not happy with my new supplier?",
                  a: "We ensure exit clauses protect your interests. We are here to support you throughout the contract period.",
                },
                {
                  q: "Can you help with both gas and electricity?",
                  a: "Yes, we negotiate contracts for both gas and electricity supplies.",
                },
              ].map((item, index) => (
                <details
                  key={index}
                  className="bg-slate-50 p-6 rounded-lg cursor-pointer group border border-slate-200"
                >
                  <summary className="font-semibold text-slate-900 flex justify-between items-center">
                    {item.q}
                    <span className="text-blue-900 group-open:rotate-180 transition">▼</span>
                  </summary>
                  <p className="text-slate-600 mt-4">{item.a}</p>
                </details>
              ))}
            </div>
          </div>
        </section>

{/* CTA Section */}
        <section className="py-16 bg-blue-900 text-white">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-4xl font-bold mb-4">Ready to Reduce Your Energy Costs?</h2>
            <p className="text-xl mb-8 max-w-2xl mx-auto text-blue-200">
              Get a free consultation and discover how much you could save on your energy bills. No obligation, no fees.
            </p>
            <div className="flex gap-4 justify-center flex-wrap">
              <Link
                href="/contact"
                className="bg-amber-500 text-slate-900 px-8 py-3 rounded-lg font-semibold hover:bg-amber-400 transition"
              >
                Get Free Quote Now
              </Link>
              <Link
                href="/about"
                className="bg-transparent text-white border-2 border-white/50 px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition"
              >
                Learn More
              </Link>
            </div>
          </div>
        </section>
      </main>

<EnergyCalculator isOpen={showCalculator} onClose={() => setShowCalculator(false)} />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import Navigation from "@/components/navigation"
import Footer from "@/components/footer"
import SupplierCarousel from "@/components/supplier-carousel"

export const metadata: Metadata = {
  title: "Green Energy Connects Ltd - Energy Broker UK",
  description:
    "Leading UK energy broker providing contract negotiation, risk management, and energy consultancy for businesses and individuals.",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased ${GeistSans.variable} ${GeistMono.variable}`}>
        <Navigation />
        {children}
        <SupplierCarousel />
        <Footer />
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/complaints/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Mail, Phone, MapPin, Clock, FileText, AlertCircle, CheckCircle, ExternalLink } from "lucide-react"

export default function ComplaintHandling() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    accountNumber: "",
    complaintType: "",
    priority: "Medium",
    details: "",
    desiredResolution: "",
  })
  const [submitted, setSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      const response = await fetch("/api/complaints", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      })
      if (response.ok) {
        setSubmitted(true)
        setFormData({
          name: "",
          email: "",
          phone: "",
          accountNumber: "",
          complaintType: "",
          priority: "Medium",
          details: "",
          desiredResolution: "",
        })
      }
    } catch (error) {
      console.error("Error submitting form:", error)
    }
  }

return (
    <main className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-900 to-blue-800 text-white py-16">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Complaint Handling</h1>
          <p className="text-xl text-blue-100 max-w-2xl">
            We are committed to resolving your concerns quickly and fairly. Your feedback helps us improve our services.
          </p>
        </div>
      </section>

<div className="container mx-auto px-4 py-12">
        {/* Our Commitment */}
        <div className="bg-white rounded-xl shadow-md p-8 mb-12">
          <h2 className="text-2xl font-bold text-blue-900 mb-6">Our Commitment to You</h2>
          <div className="grid md:grid-cols-3 gap-6">
            <div className="flex items-start gap-4">
              <div className="bg-blue-100 p-3 rounded-full">
                <Clock className="w-6 h-6 text-blue-900" />
              </div>
              <div>
                <h3 className="font-bold mb-1">Quick Response</h3>
                <p className="text-gray-600 text-sm">We acknowledge all complaints within 24 hours of receipt</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="bg-blue-100 p-3 rounded-full">
                <FileText className="w-6 h-6 text-blue-900" />
              </div>
              <div>
                <h3 className="font-bold mb-1">Thorough Investigation</h3>
                <p className="text-gray-600 text-sm">We investigate every complaint fully and fairly</p>
              </div>
            </div>
            <div className="flex items-start gap-4">
              <div className="bg-blue-100 p-3 rounded-full">
                <CheckCircle className="w-6 h-6 text-blue-900" />
              </div>
              <div>
                <h3 className="font-bold mb-1">Fair Resolution</h3>
                <p className="text-gray-600 text-sm">We aim to resolve complaints within 8 weeks</p>
              </div>
            </div>
          </div>
        </div>

<div className="grid lg:grid-cols-3 gap-8">
          {/* Contact Methods */}
          <div className="lg:col-span-1 space-y-6">
            <div className="bg-white rounded-xl shadow-md p-6">
              <h2 className="text-xl font-bold text-blue-900 mb-4">Contact Us</h2>
              <div className="space-y-4">
                <div className="flex items-start gap-3">
                  <Mail className="w-5 h-5 text-blue-900 mt-1" />
                  <div>
                    <p className="font-semibold">Email</p>
                    <a
                      href="mailto:info@greenenergyconnectsltd.co.uk"
                      className="text-blue-600 hover:underline text-sm"
                    >
                      info@greenenergyconnectsltd.co.uk
                    </a>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Phone className="w-5 h-5 text-blue-900 mt-1" />
                  <div>
                    <p className="font-semibold">Phone</p>
                    <p className="text-gray-600 text-sm">+44 (0) 2081502243</p>
                    <p className="text-gray-500 text-xs">Mon-Fri: 9am - 6pm</p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <MapPin className="w-5 h-5 text-blue-900 mt-1" />
                  <div>
                    <p className="font-semibold">Address</p>
                    <p className="text-gray-600 text-sm">
                      9 Maydeb Court, Whalebone Lane South,
                      <br />
                      Romford, England, RM6 6HR
                    </p>
                  </div>
                </div>
              </div>
            </div>

{/* Complaint Procedure */}
            <div className="bg-white rounded-xl shadow-md p-6">
              <h2 className="text-xl font-bold text-blue-900 mb-4">Our Complaint Procedure</h2>
              <ol className="space-y-4">
                <li className="flex gap-3">
                  <span className="bg-blue-900 text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                    1
                  </span>
                  <div>
                    <p className="font-semibold">Submit Your Complaint</p>
                    <p className="text-gray-600 text-sm">Use the form, email, or call us directly</p>
                  </div>
                </li>
                <li className="flex gap-3">
                  <span className="bg-blue-900 text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                    2
                  </span>
                  <div>
                    <p className="font-semibold">Acknowledgement</p>
                    <p className="text-gray-600 text-sm">We confirm receipt within 24 hours with a reference number</p>
                  </div>
                </li>
                <li className="flex gap-3">
                  <span className="bg-blue-900 text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                    3
                  </span>
                  <div>
                    <p className="font-semibold">Investigation</p>
                    <p className="text-gray-600 text-sm">We thoroughly investigate your concerns</p>
                  </div>
                </li>
                <li className="flex gap-3">
                  <span className="bg-blue-900 text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0">
                    4
                  </span>
                  <div>
                    <p className="font-semibold">Resolution</p>
                    <p className="text-gray-600 text-sm">We provide a final response within 8 weeks</p>
                  </div>
                </li>
              </ol>
            </div>

{/* Official Resolution */}
            <div className="bg-amber-50 rounded-xl shadow-md p-6 border border-amber-200">
              <div className="flex items-center gap-2 mb-4">
                <AlertCircle className="w-5 h-5 text-amber-600" />
                <h2 className="text-xl font-bold text-amber-800">Not Satisfied?</h2>
              </div>
              <p className="text-gray-700 text-sm mb-4">
                If you are not satisfied with our response or if we have not resolved your complaint within 8 weeks, you
                have the right to refer your complaint to an Alternative Dispute Resolution (ADR) scheme.
              </p>
              <div className="space-y-3">
                <div className="bg-white p-4 rounded-lg">
                  <h3 className="font-bold text-sm mb-1">Energy Ombudsman</h3>
                  <p className="text-gray-600 text-xs mb-2">
                    Free, independent service for unresolved energy complaints
                  </p>
                  <a
                    href="https://www.energyombudsman.org"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600 hover:underline text-sm flex items-center gap-1"
                  >
                    www.energyombudsman.org <ExternalLink className="w-3 h-3" />
                  </a>
                  <p className="text-gray-500 text-xs mt-1">Phone: 0330 440 1624</p>
                </div>
                <div className="bg-white p-4 rounded-lg">
                  <h3 className="font-bold text-sm mb-1">Citizens Advice</h3>
                  <p className="text-gray-600 text-xs mb-2">Free advice on consumer rights and complaints</p>
                  <a
                    href="https://www.citizensadvice.org.uk"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600 hover:underline text-sm flex items-center gap-1"
                  >
                    www.citizensadvice.org.uk <ExternalLink className="w-3 h-3" />
                  </a>
                  <p className="text-gray-500 text-xs mt-1">Phone: 0808 223 1133</p>
                </div>
                <div className="bg-white p-4 rounded-lg">
                  <h3 className="font-bold text-sm mb-1">Ofgem</h3>
                  <p className="text-gray-600 text-xs mb-2">UK energy regulator for serious concerns</p>
                  <a
                    href="https://www.ofgem.gov.uk"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600 hover:underline text-sm flex items-center gap-1"
                  >
                    www.ofgem.gov.uk <ExternalLink className="w-3 h-3" />
                  </a>
                </div>
              </div>
            </div>
          </div>

{/* Complaint Form */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-xl shadow-md p-8">
              <h2 className="text-2xl font-bold text-blue-900 mb-6">Submit a Complaint</h2>

{submitted ? (
                <div className="bg-green-50 border border-green-200 rounded-lg p-6 text-center">
                  <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
                  <h3 className="text-xl font-bold text-green-800 mb-2">Complaint Submitted Successfully</h3>
                  <p className="text-gray-600 mb-4">
                    Thank you for contacting us. We will acknowledge your complaint within 24 hours and provide you with
                    a reference number via email.
                  </p>
                  <button
                    onClick={() => setSubmitted(false)}
                    className="bg-blue-900 text-white px-6 py-2 rounded-lg hover:bg-blue-800"
                  >
                    Submit Another Complaint
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-semibold mb-2">
                        Full Name <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="text"
                        required
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Your full name"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold mb-2">
                        Email Address <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="email"
                        required
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="your@email.com"
                      />
                    </div>
                  </div>

<div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-semibold mb-2">
                        Phone Number <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="tel"
                        required
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="+44 (0) 000 000 0000"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold mb-2">Account/Reference Number</label>
                      <input
                        type="text"
                        value={formData.accountNumber}
                        onChange={(e) => setFormData({ ...formData, accountNumber: e.target.value })}
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="If applicable"
                      />
                    </div>
                  </div>

<div className="grid md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-semibold mb-2">
                        Complaint Type <span className="text-red-500">*</span>
                      </label>
                      <select
                        required
                        value={formData.complaintType}
                        onChange={(e) => setFormData({ ...formData, complaintType: e.target.value })}
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      >
                        <option value="">Select complaint type...</option>
                        <option value="Service Quality">Service Quality</option>
                        <option value="Billing Issue">Billing Issue</option>
                        <option value="Contract Dispute">Contract Dispute</option>
                        <option value="Communication">Communication</option>
                        <option value="Staff Conduct">Staff Conduct</option>
                        <option value="Supplier Issue">Supplier Issue</option>
                        <option value="Switching Process">Switching Process</option>
                        <option value="Other">Other</option>
                      </select>
                    </div>
                    <div>
                      <label className="block text-sm font-semibold mb-2">Priority Level</label>
                      <select
                        value={formData.priority}
                        onChange={(e) => setFormData({ ...formData, priority: e.target.value })}
                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      >
                        <option value="Low">Low - General feedback</option>
                        <option value="Medium">Medium - Needs attention</option>
                        <option value="High">High - Urgent matter</option>
                      </select>
                    </div>
                  </div>

<div>
                    <label className="block text-sm font-semibold mb-2">
                      Complaint Details <span className="text-red-500">*</span>
                    </label>
                    <textarea
                      required
                      value={formData.details}
                      onChange={(e) => setFormData({ ...formData, details: e.target.value })}
                      rows={5}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="Please describe your complaint in detail, including dates, names, and any relevant information..."
                    />
                  </div>

<div>
                    <label className="block text-sm font-semibold mb-2">Desired Resolution</label>
                    <textarea
                      value={formData.desiredResolution}
                      onChange={(e) => setFormData({ ...formData, desiredResolution: e.target.value })}
                      rows={3}
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      placeholder="What outcome would you like to see? (optional)"
                    />
                  </div>

<div className="bg-gray-50 p-4 rounded-lg">
                    <p className="text-sm text-gray-600">
                      <strong>Privacy Notice:</strong> Your information will be processed in accordance with GDPR and
                      used solely for handling your complaint. We will not share your details with third parties without
                      your consent.
                    </p>
                  </div>

<button
                    type="submit"
                    className="w-full bg-blue-900 text-white py-4 rounded-lg font-bold hover:bg-blue-800 transition"
                  >
                    Submit Complaint
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>

{/* Company Registration */}
        <div className="mt-12 text-center text-gray-500 text-sm">
          <p>Green Energy Connects Ltd | Company Registration: 16258022</p>
          <p>Registered Address: 9 Maydeb Court, Whalebone Lane South, Romford, England, RM6 6HR</p>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true"
"use client"

import Link from "next/link"
import { useState } from "react"
import { Menu, X } from "lucide-react"

export default function Navigation() {
  const [isOpen, setIsOpen] = useState(false)

return (
    <nav className="bg-white shadow-md sticky top-0 z-50">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-green-600 rounded-lg flex items-center justify-center">
            <span className="text-white font-bold">GEC</span>
          </div>
          <Link href="/" className="text-xl font-bold text-green-700">
            Green Energy Connects Ltd
          </Link>
        </div>

<button onClick={() => setIsOpen(!isOpen)} className="md:hidden">
          {isOpen ? <X size={24} /> : <Menu size={24} />}
        </button>

<div
          className={`absolute md:static top-16 left-0 right-0 bg-white md:bg-transparent md:flex gap-6 ${isOpen ? "flex flex-col p-4" : "hidden"}`}
        >
          <Link href="/" className="hover:text-green-600 transition">
            Home
          </Link>
          <Link href="/about" className="hover:text-green-600 transition">
            About
          </Link>
          <Link href="/services" className="hover:text-green-600 transition">
            Services
          </Link>
          <Link href="/team" className="hover:text-green-600 transition">
            Team
          </Link>
          <Link href="/achievements" className="hover:text-green-600 transition">
            Achievements
          </Link>
          <Link href="/testimonials" className="hover:text-green-600 transition">
            Testimonials
          </Link>
          <Link href="/complaints" className="hover:text-green-600 transition">
            Complaints
          </Link>
          <Link href="/work-with-us" className="hover:text-green-600 transition">
            Work With Us
          </Link>
          <Link href="/contact" className="hover:text-green-600 transition">
            Contact
          </Link>
        </div>
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/team/page.tsx" isMerged="true"
import { Star, Award, Shield, Users, Phone, Mail } from "lucide-react"
import Image from "next/image"

export default function Team() {
  const teamMembers = [
    {
      name: "Muhammad Waqar Haider",
      role: "Director",
      description: "15+ years of energy market expertise and leadership. Founding member who transformed the vision into reality.",
      rating: 4.9,
      reviews: 156,
      specialties: ["Strategic Planning", "Market Analysis", "Team Leadership"],
      image: "/muhammad-waqar-haider-headshot.jpg",
    },
    {
      name: "Mohammed Ali",
      role: "Manager",
      description: "Specialist in contract negotiation and supplier relationships with exceptional client retention rate.",
      rating: 4.8,
      reviews: 124,
      specialties: ["Contract Negotiation", "Supplier Relations", "Operations"],
      image: "/haseebullah-headshot.jpg",
    },
    {
      name: "Kabeer Singh",
      role: "Sales Agent",
      description: "Expert in client acquisition and relationship management. Known for personalized energy solutions.",
      rating: 4.9,
      reviews: 98,
      specialties: ["Client Acquisition", "Energy Solutions", "Customer Care"],
      image: "/kabeer-singh-professional-headshot.jpg",
    },
    {
      name: "Adam Hassan",
      role: "Complaints Lead",
      description: "Dedicated to customer satisfaction and swift issue resolution with 96% satisfaction rate.",
      rating: 4.7,
      reviews: 87,
      specialties: ["Complaint Resolution", "Customer Service", "Quality Assurance"],
      image: "/adam-hassan-headshot.jpg",
    },
    {
      name: "Sarah Johnson",
      role: "Energy Consultant",
      description: "Specialist in renewable energy solutions and sustainability practices for eco-conscious businesses.",
      rating: 4.8,
      reviews: 72,
      specialties: ["Renewable Energy", "Sustainability", "Green Solutions"],
      image: "/professional-woman-headshot.jpg",
    },
    {
      name: "James Wilson",
      role: "Contract Specialist",
      description: "Expert in complex contract terms and negotiations ensuring clients get the best possible deals.",
      rating: 4.9,
      reviews: 103,
      specialties: ["Contract Analysis", "Legal Terms", "Deal Structuring"],
      image: "/james-wilson-headshot.jpg",
    },
    {
      name: "David Chen",
      role: "Market Analyst",
      description: "Specialist in energy market trends and forecasting helping clients make informed decisions.",
      rating: 4.8,
      reviews: 65,
      specialties: ["Market Research", "Price Forecasting", "Data Analysis"],
      image: "/david-chen-headshot.jpg",
    },
  ]

const renderStars = (rating: number) => {
    const fullStars = Math.floor(rating)
    const hasHalfStar = rating % 1 >= 0.5
    const stars = []

for (let i = 0; i < 5; i++) {
      if (i < fullStars) {
        stars.push(<Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />)
      } else if (i === fullStars && hasHalfStar) {
        stars.push(<Star key={i} className="w-4 h-4 fill-amber-400/50 text-amber-400" />)
      } else {
        stars.push(<Star key={i} className="w-4 h-4 text-gray-300" />)
      }
    }
    return stars
  }

return (
    <main className="min-h-screen py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        {/* Header Section */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-blue-900/10 text-blue-900 px-4 py-2 rounded-full text-sm font-medium mb-4">
            <Users className="w-4 h-4" />
            Our Expert Team
          </div>
          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-blue-900">Meet the Experts</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Dedicated professionals committed to securing the best energy deals for your business
          </p>
        </div>

{/* Team Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
          <div className="bg-white p-6 rounded-xl shadow-sm text-center">
            <div className="text-3xl font-bold text-blue-900">7</div>
            <div className="text-gray-600 text-sm">Team Members</div>
          </div>
          <div className="bg-white p-6 rounded-xl shadow-sm text-center">
            <div className="text-3xl font-bold text-blue-900">50+</div>
            <div className="text-gray-600 text-sm">Years Combined Experience</div>
          </div>
          <div className="bg-white p-6 rounded-xl shadow-sm text-center">
            <div className="text-3xl font-bold text-blue-900">4.8</div>
            <div className="text-gray-600 text-sm">Average Rating</div>
          </div>
          <div className="bg-white p-6 rounded-xl shadow-sm text-center">
            <div className="text-3xl font-bold text-blue-900">705</div>
            <div className="text-gray-600 text-sm">Total Reviews</div>
          </div>
        </div>

{/* Team Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {teamMembers.map((member) => (
            <div
              key={member.name}
              className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden group"
            >
              {/* Profile Image with Logo Badge */}
              <div className="relative">
                <div className="h-56 bg-gradient-to-br from-blue-900 to-blue-700 relative overflow-hidden">
                  <Image
                    src={member.image}
                    alt={member.name}
                    fill
                    className="object-cover object-top opacity-90 group-hover:scale-105 transition-transform duration-500"
                  />
                  {/* Company Logo Badge */}
                  <div className="absolute top-3 left-3 bg-white/95 backdrop-blur-sm rounded-lg px-3 py-1.5 shadow-md flex items-center gap-2">
                    <div className="w-6 h-6 bg-gradient-to-br from-blue-900 to-blue-700 rounded flex items-center justify-center">
                      <span className="text-white font-bold text-xs">GE</span>
                    </div>
                    <span className="text-xs font-semibold text-blue-900">Green Energy</span>
                  </div>
                  {/* Verified Badge */}
                  <div className="absolute top-3 right-3 bg-green-500 text-white rounded-full p-1.5 shadow-md">
                    <Shield className="w-4 h-4" />
                  </div>
                </div>
              </div>

{/* Content */}
              <div className="p-6">
                <div className="flex items-start justify-between mb-2">
                  <div>
                    <h3 className="text-xl font-bold text-gray-900">{member.name}</h3>
                    <p className="text-blue-900 font-semibold">{member.role}</p>
                  </div>
                  {member.role === "Director" && (
                    <div className="bg-amber-100 text-amber-700 p-1.5 rounded-lg">
                      <Award className="w-5 h-5" />
                    </div>
                  )}
                </div>

{/* Rating */}
                <div className="flex items-center gap-2 mb-3">
                  <div className="flex">{renderStars(member.rating)}</div>
                  <span className="font-bold text-gray-900">{member.rating}</span>
                  <span className="text-gray-500 text-sm">({member.reviews} reviews)</span>
                </div>

<p className="text-gray-600 text-sm mb-4">{member.description}</p>

{/* Specialties */}
                <div className="flex flex-wrap gap-2 mb-4">
                  {member.specialties.map((specialty) => (
                    <span
                      key={specialty}
                      className="bg-blue-50 text-blue-900 px-2 py-1 rounded-md text-xs font-medium"
                    >
                      {specialty}
                    </span>
                  ))}
                </div>

{/* Contact */}
                <div className="border-t pt-4 flex justify-between items-center">
                  <a
                    href="tel:+442081502243"
                    className="flex items-center gap-1 text-gray-600 hover:text-blue-900 transition text-sm"
                  >
                    <Phone className="w-4 h-4" />
                    Contact
                  </a>
                  <a
                    href="mailto:info@greenenergyconnectsltd.co.uk"
                    className="flex items-center gap-1 text-gray-600 hover:text-blue-900 transition text-sm"
                  >
                    <Mail className="w-4 h-4" />
                    Email
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* CTA Section */}
        <div className="mt-16 bg-gradient-to-r from-blue-900 to-blue-800 rounded-2xl p-8 md:p-12 text-center text-white">
          <h2 className="text-2xl md:text-3xl font-bold mb-4">Ready to Work With Our Expert Team?</h2>
          <p className="text-blue-100 mb-6 max-w-xl mx-auto">
            Get in touch today for a free consultation and discover how we can reduce your energy costs.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="/contact"
              className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition"
            >
              Contact Us
            </a>
            <a
              href="tel:+442081502243"
              className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white/10 transition"
            >
              Call +44 (0) 208 150 2243
            </a>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]jpg:file="public/muhammad-waqar-haider-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/muhammad-waqar-haider-headshot-gTY7XYI3TVb7l83PzA1z3mvOQdkUar.jpg" isMerged="true"
[V0_FILE]jpg:file="public/haseebullah-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/haseebullah-headshot-lZsv8Kz0WDYJRoy0KLZ6xMRfWt0iwr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/kabeer-singh-professional-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/kabeer-singh-professional-headshot-MZPwhQ4tMY7obcGzkhhJyCwk0wSdYQ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/adam-hassan-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/adam-hassan-headshot-VLxtloA8OnJNAHQGX1GtqhBNBYsJ9E.jpg" isMerged="true"
[V0_FILE]jpg:file="public/professional-woman-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-headshot-SnjJNhf7zTveilpVtHgn5Hi9RKU98s.jpg" isMerged="true"
[V0_FILE]jpg:file="public/james-wilson-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/james-wilson-headshot-zdRCdhwo69NDfMf1qWQQzc0MYnmThD.jpg" isMerged="true"
[V0_FILE]jpg:file="public/david-chen-headshot.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/david-chen-headshot-wGawvdzXhCYYwhXbY8Ew5vbfk5ZLYk.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hero-energy-business.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero-energy-business-JVxTRP9I2eXBukRUkxc0H8dt8XIMeM.jpg"
[V0_FILE]jpg:file="public/business-meeting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/business-meeting-9TrF2dhcRNqvtpHWXQLiv9H85rOZGr.jpg"
[V0_FILE]jpg:file="public/energy-infrastructure.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/energy-infrastructure-9LvFYsuIPZnmNojBihnI1Y7gyF3QKA.jpg"
[V0_FILE]jpg:file="public/modern-office.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-office-zMvwIpFOlMzU6BJrfw8ED803U1l74H.jpg"
[V0_FILE]jpg:file="public/business-handshake.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/business-handshake-RDjUytTtqZCEzKYH94OQgz26AdXlbB.jpg"
[V0_FILE]jpg:file="public/energy-analytics.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/energy-analytics-RLQwjYvI48IeaiePo75bN4TAXCMn3l.jpg"</article></body></html>