'use client'
import Link from 'next/link'
import { useState } from "react"

export default function Section1() {
    const [isTab, setIsTab] = useState(1);

    const handleTab = (i) => {
        setIsTab(i);
    };
    return (
        <>

            <div className="pricing-plan-section-area-data sp4">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-7 m-auto">
                            <div className="pricingplan head4 text-center space-margin60">
                                <h5>Sponsor</h5>
                                <div className="space18" />
                                <h2 className="text-anime-style-3">Sponsorship Opportunities</h2>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xl-3 col-md-6" data-aos="fade-up" data-aos-duration={800}>
                            <div className="pricing-boxarea box1">
                                <div className="ticket-box pb-1">
                                    <p>EVENT SPONSOR < br />
                                        DESCRIPTION</p>
                                    <div className="space24" />
                                    <div className="progress">
                                        <div className="progress-inner" style={{ width: '100%' }} />
                                    </div>
                                    <div className="space14 " />
                                    <p className='text-start'>Announcement during event (verbal)</p>
                                    <div className="space14" />
                                    <p className='text-start'>Logo poster in email communications</p>
                                    <div className="space14" />
                                    <p className='text-start pb-1'>Standing banners display at the event (6 Ft Height X 2 Ft Width)</p>
                                    {/* <div className="space24" /> */}
                                </div>
                            </div>
                        </div>
                        <div className="col-xl-3 col-md-6" data-aos="fade-up" data-aos-duration={1000}>
                            <div className="pricing-boxarea box2">
                                <div className="ticket-box">
                                    <p>Platinum</p>
                                    <h5>$1000</h5>
                                    <div className="space24" />
                                    <div className="progress">
                                        <div className="progress-inner" style={{ width: '100%' }} />
                                    </div>
                                    <div className="space14 " />
                                    <p>X</p>
                                    <div className="space14 " />
                                    <div className="space14" />
                                    <p>X</p>
                                    <div className="space14 " />
                                    <div className="space14" />
                                    <p>4 Banners Maximum</p>
                                    <div className="space24" />
                                    <div className="space24" />
                                </div>
                            </div>
                        </div>
                        <div className="col-xl-3 col-md-6" data-aos="fade-up" data-aos-duration={1000}>
                            <div className="pricing-boxarea box2">
                                <div className="ticket-box">
                                    <p>Gold</p>
                                    <h5>$500</h5>
                                    <div className="space24" />
                                    <div className="progress">
                                        <div className="progress-inner" style={{ width: '50%' }} />
                                    </div>
                                    <div className="space14 " />
                                    <p>X</p>
                                    <div className="space14 " />
                                    <div className="space14" />
                                    <p>X</p>
                                    <div className="space14 " />
                                    <div className="space14" />
                                    <p>2 Banners Maximum</p>
                                    <div className="space24" />
                                    <div className="space24" />
                                </div>
                            </div>
                        </div>

                        <div className="col-xl-3 col-md-6" data-aos="fade-up" data-aos-duration={1000}>
                            <div className="pricing-boxarea box2">
                                <div className="ticket-box">
                                    <p>Silver</p>
                                    <h5>$250</h5>
                                    <div className="space24" />
                                    <div className="progress">
                                        <div className="progress-inner" style={{ width: '25%' }} />
                                    </div>
                                    <div className="space14 " />
                                    <p>X</p>
                                    <div className="space14 " />
                                    <div className="space14" />
                                    <p>X</p>
                                    <div className="space14 " />
                                    <div className="space14" />
                                    <p>1 Banners Maximum</p>
                                    <div className="space24" />
                                    <div className="space24" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="about6-section-area">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-6">
                            <div className="h-100 w-100">
                                <div className="row h-100">
                                    <div className="avia_codeblock" itemProp="text">
                                        <div
                                            style={{
                                                position: 'relative',
                                                overflow: 'hidden',
                                                height: '400px', 
                                                width: '100%',
                                            }}
                                        >
                                            <iframe
                                                title="Donation form powered by Zeffy"
                                                style={{
                                                    position: "relative",
                                                    width: "100%",
                                                    height: "100%",
                                                    overflow: "hidden",
                                                    paddingTop: "0px",
                                                }}
                                                src="https://www.zeffy.com/embed/donation-form/9e033a78-4b6d-4252-b617-f178f955e7eb"
                                                allowPaymentRequest
                                                allowTransparency
                                                scrolling="no"
                                                frameBorder="0"
                                            ></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="col-lg-6">
                            <div className="about6-header heading9">
                                <div className="img right-img">
                                    <img src="/assets/img/online/sponsor-ship/sponsor-1.webp" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>

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