.elementor-16 .elementor-element.elementor-element-ecd2ee7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-16 .elementor-element.elementor-element-539ea322{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-3%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:5%;--padding-bottom:5%;--padding-left:7%;--padding-right:7%;}.elementor-16 .elementor-element.elementor-element-539ea322:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-539ea322 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5d83fc0 );}.elementor-16 .elementor-element.elementor-element-561d11b6.elementor-element{--align-self:center;}.elementor-16 .elementor-element.elementor-element-561d11b6{text-align:center;}.elementor-16 .elementor-element.elementor-element-561d11b6 .elementor-heading-title{font-family:"Simonetta", Sans-serif;font-weight:700;color:var( --e-global-color-text );}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-16 .elementor-element.elementor-element-d6f060e.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-16 .elementor-element.elementor-element-d6f060e .elementor-main-swiper{height:291px;width:53%;}.elementor-16 .elementor-element.elementor-element-d6f060e .elementor-main-swiper .swiper-slide{border-radius:17px;}.elementor-16 .elementor-element.elementor-element-d6f060e .elementor-swiper-button{font-size:20px;}.elementor-16 .elementor-element.elementor-element-282379e3{text-align:center;}.elementor-16 .elementor-element.elementor-element-282379e3 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:18px;font-weight:500;color:var( --e-global-color-text );}.elementor-16 .elementor-element.elementor-element-60de1295{text-align:center;}.elementor-16 .elementor-element.elementor-element-60de1295 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:var( --e-global-color-text );}.elementor-16 .elementor-element.elementor-element-2d72f3e4{--display:flex;border-style:solid;--border-style:solid;border-color:#FFFFFF17;--border-color:#FFFFFF17;--border-radius:20px 20px 20px 20px;--margin-top:0%;--margin-bottom:0%;--margin-left:15%;--margin-right:15%;--padding-top:2%;--padding-bottom:2%;--padding-left:2%;--padding-right:2%;}.elementor-16 .elementor-element.elementor-element-2d72f3e4:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-2d72f3e4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAFAFA12;}.elementor-16 .elementor-element.elementor-element-2d72f3e4.e-con{--align-self:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-16 .elementor-element.elementor-element-349d7595{font-family:"Roboto", Sans-serif;font-weight:400;}.elementor-16 .elementor-element.elementor-element-1f9934{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5%;--padding-bottom:10%;--padding-left:0%;--padding-right:0%;}.elementor-16 .elementor-element.elementor-element-42908b4d{text-align:center;}.elementor-16 .elementor-element.elementor-element-42908b4d .elementor-heading-title{font-family:"Bree Serif", Sans-serif;font-weight:600;color:var( --e-global-color-primary );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-16 .elementor-element.elementor-element-536963f{--display:flex;}.elementor-16 .elementor-element.elementor-element-536963f:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-536963f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-5334e07{padding:15px 15px 15px 15px;color:var( --e-global-color-5d83fc0 );}.elementor-16 .elementor-element.elementor-element-9333e12{--display:flex;}.elementor-16 .elementor-element.elementor-element-9333e12:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-9333e12 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-19ad676{padding:15px 15px 15px 15px;color:var( --e-global-color-5d83fc0 );}.elementor-16 .elementor-element.elementor-element-774ab11{--display:flex;}.elementor-16 .elementor-element.elementor-element-774ab11:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-774ab11 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-8cdf3e9{padding:15px 15px 15px 15px;color:var( --e-global-color-5d83fc0 );}.elementor-16 .elementor-element.elementor-element-8db44b2{--display:flex;}.elementor-16 .elementor-element.elementor-element-8db44b2:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-8db44b2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-bd61555{padding:15px 15px 15px 15px;color:var( --e-global-color-5d83fc0 );}.elementor-16 .elementor-element.elementor-element-21231eb{--display:flex;}.elementor-16 .elementor-element.elementor-element-21231eb:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-21231eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-967cca3{padding:15px 15px 15px 15px;color:var( --e-global-color-5d83fc0 );}.elementor-16 .elementor-element.elementor-element-b2a2d8b{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;width:var( --container-widget-width, 80% );max-width:80%;padding:1px 1px 1px 1px;--container-widget-width:80%;--container-widget-flex-grow:0;--n-tabs-title-gap:7px;--n-tabs-gap:5px;--n-tabs-title-border-radius:20px 20px 20px 20px;--n-tabs-title-padding-top:20px;--n-tabs-title-padding-right:20px;--n-tabs-title-padding-bottom:20px;--n-tabs-title-padding-left:20px;}.elementor-16 .elementor-element.elementor-element-b2a2d8b.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-secondary );}.elementor-16 .elementor-element.elementor-element-b2a2d8b.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-16 .elementor-element.elementor-element-b2a2d8b.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-38bc9ab );}.elementor-16 .elementor-element.elementor-element-b2a2d8b.elementor-element{--align-self:center;}.elementor-16 .elementor-element.elementor-element-b2a2d8b.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-16 .elementor-element.elementor-element-56a853ed{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-16 .elementor-element.elementor-element-56a853ed.elementor-element{--align-self:center;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group.recaptcha_v3-bottomleft, .elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-16 .elementor-element.elementor-element-56a853ed .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-16 .elementor-element.elementor-element-56a853ed .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-16 .elementor-element.elementor-element-56a853ed .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group > label, .elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-subgroup label{color:var( --e-global-color-38bc9ab );}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group > label{font-family:"Montserrat", Sans-serif;font-weight:bold;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-type-html{padding-bottom:0px;color:var( --e-global-color-secondary );font-family:"Montserrat", Sans-serif;font-size:1px;font-weight:500;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group .elementor-field{color:var( --e-global-color-5d83fc0 );}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group .elementor-field, .elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-subgroup label{font-family:"Montserrat", Sans-serif;font-weight:600;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-button{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-16 .elementor-element.elementor-element-56a853ed .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-38bc9ab );color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-button[type="submit"]{background-color:var( --e-global-color-38bc9ab );color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-button[type="submit"] svg *{fill:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-56a853ed .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-16 .elementor-element.elementor-element-56a853ed .e-form__buttons__wrapper__button-next:hover{background-color:var( --e-global-color-5d83fc0 );color:var( --e-global-color-text );}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-button[type="submit"]:hover{background-color:var( --e-global-color-5d83fc0 );color:var( --e-global-color-text );}.elementor-16 .elementor-element.elementor-element-56a853ed .elementor-button[type="submit"]:hover svg *{fill:var( --e-global-color-text );}.elementor-16 .elementor-element.elementor-element-56a853ed .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-16 .elementor-element.elementor-element-7edd31d3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-16 .elementor-element.elementor-element-7edd31d3:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-7edd31d3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8c66b82 );}.elementor-16 .elementor-element.elementor-element-56aca6b{text-align:center;color:var( --e-global-color-38bc9ab );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-16 .elementor-element.elementor-element-10677e58 .elementor-button{background-color:var( --e-global-color-38bc9ab );border-radius:10px 10px 10px 10px;}.elementor-16 .elementor-element.elementor-element-10677e58 .elementor-button:hover, .elementor-16 .elementor-element.elementor-element-10677e58 .elementor-button:focus{background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-16 .elementor-element.elementor-element-2d72f3e4{--width:80%;}.elementor-16 .elementor-element.elementor-element-1f9934{--content-width:90%;}}@media(max-width:1024px){.elementor-16 .elementor-element.elementor-element-539ea322{--margin-top:-5%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-16 .elementor-element.elementor-element-d6f060e.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-16 .elementor-element.elementor-element-539ea322{--margin-top:-10%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;}.elementor-16 .elementor-element.elementor-element-561d11b6 .elementor-heading-title{font-size:30px;}.elementor-16 .elementor-element.elementor-element-d6f060e.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-16 .elementor-element.elementor-element-282379e3 .elementor-heading-title{font-size:18px;}.elementor-16 .elementor-element.elementor-element-2d72f3e4{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:2%;--margin-bottom:2%;--margin-left:2%;--margin-right:2%;}.elementor-16 .elementor-element.elementor-element-349d7595{font-size:16px;}.elementor-16 .elementor-element.elementor-element-42908b4d .elementor-heading-title{font-size:24px;}.elementor-16 .elementor-element.elementor-element-56a853ed{padding:3% 5% 03% 5%;}}/* Start custom CSS for heading, class: .elementor-element-eec4615 */import React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
  Mountain,
  Home as HomeIcon,
  Car,
  Star,
  Calendar,
  Users,
  CheckCircle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';

const HomePage = () => {
  const packages = [
    {
      title: 'Full Day Orangutan Trek',
      description: 'Encounter wild 
     orangutans in their natural habitat with expert guides.',
      image: 'https://images.unsplash.com/photo-1601692295435-64a44476d584',
      duration: '8 hours',
      price: 'from $45',
    },
    {
      title: '2-Day Jungle Adventure',
      description: 'Immersive jungle experience with camping under the stars.',
      image: 'https://images.unsplash.com/photo-1601692295435-64a44476d584',
      duration: '2 days',
      price: 'from $95',
    },
    {
      title: '3-Day Rainforest Explorer',
      description: 'Deep jungle trek with wildlife encounters and waterfall visits.',
      image: 'https://images.unsplash.com/photo-1601692295435-64a44476d584',
      duration: '3 days',
      price: 'from $145',
    },
  ];

  const accommodations = [
    {
      name: 'Riverside Eco-Lodge',
      description: 'Comfortable bungalows with river views and modern amenities',
      features: ['River View', 'Restaurant', 'WiFi'],
    },
    {
      name: 'Jungle Cabins',
      description: 'Traditional bamboo cabins immersed in nature',
      features: ['Eco-Friendly', 'Garden', 'Private Bathroom'],
    },
    {
      name: 'Deluxe Cottages',
      description: 'Premium accommodations with exceptional comfort',
      features: ['Air Conditioning', 'Balcony', 'Premium Bedding'],
    },
  ];

  const testimonials = [
    {
      name: 'Sarah Johnson',
      country: 'Australia',
      rating: 5,
      text: 'Absolutely incredible experience! Seeing orangutans in the wild was a dream come true. The guides were knowledgeable and the eco-lodge was perfect.',
    },
    {
      name: 'Michael Chen',
      country: 'Singapore',
      rating: 5,
      text: 'Best adventure tour I have ever done. The jungle trek was challenging but rewarding, and the team made sure we were safe and comfortable throughout.',
    },
    {
      name: 'Emma Williams',
      country: 'UK',
      rating: 5,
      text: 'Tiger Malay Sumatra provided an unforgettable experience. From pickup to drop-off, everything was professionally organized. Highly recommended!',
    },
  ];

  return (
    <>
      <Helmet>
        <title>Tiger Malay Sumatra - Bukit Lawang Jungle Trekking & Eco-Lodging</title>
        <meta
          name="description"
          content="Experience authentic jungle trekking and eco-lodging in Bukit Lawang, Sumatra. Encounter wild orangutans and explore pristine rainforests with expert guides."
        />
      </Helmet>

      <div className="min-h-screen">
        {/* Hero Section */}
        <section className="relative h-screen flex items-center justify-center overflow-hidden">
          <div className="absolute inset-0 z-0">
            <img
              src="https://images.unsplash.com/photo-1693069492053-b3f20ed986a2"
              alt="Bukit Lawang jungle landscape"
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 hero-overlay" />
          </div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="relative z-10 text-center text-white px-4 max-w-4xl mx-auto"
          >
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"
            >
              Explore Bukit Lawang with Tiger Malay Sumatra
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="text-xl md:text-2xl mb-8 text-white/90"
            >
              Authentic jungle trekking and eco-lodging experiences
            </motion.p>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              <Link to="/shop">
                <Button className="btn-jungle text-lg px-10 py-6 h-auto">
                  <Mountain className="mr-2 h-6 w-6" />
                  Explore Packages
                </Button>
              </Link>
            </motion.div>
          </motion.div>
        </section>

        {/* Featured Packages Section */}
        <section className="section-padding bg-gray-50" id="packages">
          <div className="container-custom">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center mb-12"
            >
              <h2 className="text-jungle-dark mb-4">Featured Trekking Packages</h2>
              <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                Choose from our carefully curated jungle adventures, designed to give you the best
                wildlife encounters and rainforest experiences.
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {packages.map((pkg, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className="bg-white rounded-2xl shadow-lg overflow-hidden card-hover"
                >
                  <div className="relative h-64">
                    <img
                      src={pkg.image}
                      alt={pkg.title}
                      className="w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                    <div className="absolute bottom-4 left-4 right-4">
                      <span className="bg-jungle-medium text-white text-sm font-semibold px-3 py-1 rounded-full">
                        {pkg.duration}
                      </span>
                    </div>
                  </div>
                  <div className="p-6">
                    <h3 className="text-jungle-dark mb-2">{pkg.title}</h3>
                    <p className="text-gray-600 mb-4">{pkg.description}</p>
                    <div className="flex items-center justify-between">
                      <span className="text-2xl font-bold text-jungle-medium">{pkg.price}</span>
                      <Link to="/shop">
                        <Button className="btn-jungle-outline">View Details</Button>
                      </Link>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Accommodations Section */}
        <section className="section-padding jungle-gradient text-white" id="accommodations">
          <div className="container-custom">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center mb-12"
            >
              <h2 className="mb-4">Eco-Friendly Accommodations</h2>
              <p className="text-white/90 text-lg max-w-2xl mx-auto">
                Stay in comfort while minimizing your environmental impact. Our eco-lodges blend
                seamlessly with the natural surroundings.
              </p>
            </motion.div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
              <motion.div
                initial={{ opacity: 0, x: -30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="rounded-2xl overflow-hidden shadow-2xl"
              >
                <img
                  src="https://images.unsplash.com/photo-1568402102889-8307563f757f"
                  alt="Eco-lodge accommodations in Bukit Lawang"
                  className="w-full h-full object-cover"
                />
              </motion.div>

              <motion.div
                initial={{ opacity: 0, x: 30 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="space-y-6"
              >
                {accommodations.map((acc, index) => (
                  <div key={index} className="glass-card p-6 rounded-xl">
                    <div className="flex items-start gap-4">
                      <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center flex-shrink-0">
                        <HomeIcon className="h-6 w-6" />
                      </div>
                      <div className="flex-grow">
                        <h3 className="text-xl font-bold mb-2">{acc.name}</h3>
                        <p className="text-white/80 mb-3">{acc.description}</p>
                        <div className="flex flex-wrap gap-2">
                          {acc.features.map((feature, idx) => (
                            <span
                              key={idx}
                              className="bg-white/20 text-sm px-3 py-1 rounded-full"
                            >
                              {feature}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </motion.div>
            </div>
          </div>
        </section>

        {/* Services Section */}
        <section className="section-padding bg-white">
          <div className="container-custom">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center mb-12"
            >
              <h2 className="text-jungle-dark mb-4">Additional Services</h2>
              <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                We provide comprehensive travel services to make your journey seamless from start
                to finish.
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="bg-gradient-to-br from-jungle-light to-jungle-medium text-white p-8 rounded-2xl shadow-lg card-hover text-center"
              >
                <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Car className="h-8 w-8" />
                </div>
                <h3 className="text-2xl font-bold mb-3">Airport Pickup</h3>
                <p className="text-white/90 mb-4">
                  Comfortable transfer from Medan Airport to Bukit Lawang
                </p>
                <Link to="/shop">
                  <Button variant="outline" className="border-white text-white hover:bg-white hover:text-jungle-medium">
                    Book Transfer
                  </Button>
                </Link>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="bg-gradient-to-br from-jungle-medium to-jungle-dark text-white p-8 rounded-2xl shadow-lg card-hover text-center"
              >
                <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Users className="h-8 w-8" />
                </div>
                <h3 className="text-2xl font-bold mb-3">Expert Guides</h3>
                <p className="text-white/90 mb-4">
                  Professional local guides with extensive jungle knowledge
                </p>
                <Link to="/shop">
                  <Button variant="outline" className="border-white text-white hover:bg-white hover:text-jungle-medium">
                    Learn More
                  </Button>
                </Link>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="bg-gradient-to-br from-jungle-dark to-jungle-medium text-white p-8 rounded-2xl shadow-lg card-hover text-center"
              >
                <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Calendar className="h-8 w-8" />
                </div>
                <h3 className="text-2xl font-bold mb-3">Custom Tours</h3>
                <p className="text-white/90 mb-4">
                  Tailored itineraries to match your preferences and schedule
                </p>
                <Link to="/shop">
                  <Button variant="outline" className="border-white text-white hover:bg-white hover:text-jungle-medium">
                    Customize
                  </Button>
                </Link>
              </motion.div>
            </div>
          </div>
        </section>

        {/* Testimonials Section */}
        <section className="section-padding bg-gray-50">
          <div className="container-custom">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="text-center mb-12"
            >
              <h2 className="text-jungle-dark mb-4">What Our Guests Say</h2>
              <p className="text-gray-600 text-lg max-w-2xl mx-auto">
                Read reviews from travelers who have experienced the magic of Bukit Lawang with us.
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {testimonials.map((testimonial, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className="bg-white p-6 rounded-2xl shadow-lg"
                >
                  <div className="flex gap-1 mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="h-5 w-5 fill-yellow-400 text-yellow-400" />
                    ))}
                  </div>
                  <p className="text-gray-700 mb-4 italic">"{testimonial.text}"</p>
                  <div className="border-t border-gray-200 pt-4">
                    <p className="font-bold text-jungle-dark">{testimonial.name}</p>
                    <p className="text-sm text-gray-600">{testimonial.country}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Booking Information Section */}
        <section className="section-padding jungle-gradient text-white" id="contact">
          <div className="container-custom">
            <div className="max-w-3xl mx-auto text-center">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
              >
                <h2 className="mb-6">Ready to Start Your Adventure?</h2>
                <p className="text-white/90 text-lg mb-8">
                  Book your unforgettable jungle experience today. Our team is ready to help you
                  plan the perfect trip to Bukit Lawang.
                </p>

                <div className="glass-card p-8 rounded-2xl mb-8">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                    <div>
                      <CheckCircle className="h-8 w-8 mx-auto mb-2" />
                      <p className="font-semibold">Easy Booking</p>
                      <p className="text-sm text-white/80">Simple online reservation</p>
                    </div>
                    <div>
                      <CheckCircle className="h-8 w-8 mx-auto mb-2" />
                      <p className="font-semibold">Best Price</p>
                      <p className="text-sm text-white/80">Competitive rates guaranteed</p>
                    </div>
                    <div>
                      <CheckCircle className="h-8 w-8 mx-auto mb-2" />
                      <p className="font-semibold">24/7 Support</p>
                      <p className="text-sm text-white/80">Always here to help</p>
                    </div>
                  </div>
                </div>

                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Link to="/shop">
                    <Button className="bg-white text-jungle-dark hover:bg-gray-100 font-semibold py-6 px-10 text-lg h-auto">
                      Browse All Packages
                    </Button>
                  </Link>
                  <Button
                    onClick={() => window.location.href = 'mailto:info@tigermalaysumatra.com'}
                    variant="outline"
                    className="border-2 border-white text-white hover:bg-white hover:text-jungle-dark font-semibold py-6 px-10 text-lg h-auto"
                  >
                    Contact Us
                  </Button>
                </div>
              </motion.div>
            </div>
          </div>
        </section>
      </div>
    </>
  );
};

export default HomePage;/* End custom CSS */