'use client'
import Link from 'next/link'

export default function Section2() {
    return (
        <>

            <div className="about6-section-area">
                <div className="container">

                    {/* Row 1: Left Image, Right Content (Guidelines 1, 2, 3) */}
                    <div className="row align-items-center">
                        <div className="col-lg-6 order-2 order-lg-1">
                            <div className="img">
                                <img src="/assets/img/online/whats-app/section-1.webp" alt="" />
                            </div>
                        </div>
                        <div className="col-lg-6 order-1 order-lg-2 mb-5">
                            <div className="about6-header heading9 space-margin60 mb-4">
                                <p style={{ fontWeight: 'bold' }}>வணக்கம்.</p>
                                <div className="space12" />
                                <h3>WhatsApp Group Policy for the Tamil Cultural Association (Waterloo Region)</h3>
                                <div className='text-start' />
                                <div className="space18" />
                                
                                <p style={{ fontWeight: 'bold' }}>Dear Community Members,</p>
                                <div className="space12" />
                                <p>
                                    We are delighted to have over 700 members in our WhatsApp group, which has been created with the goal of supporting each other, sharing positive experiences, and fostering a sense of belonging within our Tamil community here in the Waterloo region.
                                </p>
                                <div className="space12" />
                                <p>
                                    To maintain the friendly and supportive environment we all enjoy, we request that everyone adheres to the following guidelines:
                                </p>

                                <div className="space24" />

                                <div className="policy-point mb-4">
                                    <h4 className="textured">1. Respectful and Positive Communication</h4>
                                    <div className="space8" />
                                    <ul className="dot-list" style={{ margin: '15px 0' }}>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            This group is a platform for supporting each other, sharing knowledge, and spreading happiness.
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Kindness and respect should guide every conversation. Please be mindful of your words and how they might affect others.
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Negative, offensive, or hurtful comments will not be tolerated. We aim to create an uplifting environment for all members.
                                        </li>
                                    </ul>
                                </div>

                                <div className="policy-point mb-4">
                                    <h4 className="textured">2. No Political or Divisive Content</h4>
                                    <div className="space8" />
                                    <ul className="dot-list" style={{ margin: '15px 0' }}>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Political discussions, controversial opinions, and divisive messages are not allowed in the group. We are here to focus on community building and fostering positive connections, not to engage in political debates.
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            If you wish to share personal political opinions, please do so in private conversations, not in the group.
                                        </li>
                                    </ul>
                                </div>

                                <div className="policy-point mb-4">
                                    <h4 className="textured">3. Relevant Information Only</h4>
                                    <div className="space8" />
                                    <ul className="dot-list" style={{ margin: '15px 0' }}>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Please keep posts relevant to the Tamil community and the purpose of the group. This includes cultural events, local services, helpful resources, and general support.
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Advertisements or promotional content unrelated to the group's mission should be avoided. If you have something valuable to share, please reach out to the group admins for approval before posting. <strong>If you are promoting your own small/established business - please post only on Thursdays. If it is posted on other days it will be deleted.</strong>
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Customers should follow the complaint process with the company they are dealing with. <strong>No open feedback or negative posts against any business or personals.</strong>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="space60" />

                    {/* Row 2: Left Content (Guidelines 4, 5, 6, Benefits, Closing), Right Image */}
                    <div className="row align-items-center">
                        <div className="col-lg-6 mb-5">
                            <div className="about6-header heading9 mb-4">
                                <div className="policy-point mb-4">
                                    <h4 className="textured">4. No Spamming or Forwarding Unverified Information</h4>
                                    <div className="space8" />
                                    <ul className="dot-list" style={{ margin: '15px 0' }}>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            To maintain trust and clarity, please avoid forwarding messages from unknown sources or rumors, especially if they are unverified. Misinformation can create confusion and negativity in the group.
                                        </li>
                                    </ul>
                                </div>

                                <div className="policy-point mb-4">
                                    <h4 className="textured">5. Privacy and Confidentiality</h4>
                                    <div className="space8" />
                                    <ul className="dot-list" style={{ margin: '15px 0' }}>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Respect the privacy of fellow members. Do not share personal information or images without permission.
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Be aware that this group is a space for open communication, but personal details should remain confidential unless explicitly stated otherwise.
                                        </li>
                                    </ul>
                                </div>

                                <div className="policy-point mb-4">
                                    <h4 className="textured">6. Respect Admin’s Authority</h4>
                                    <div className="space8" />
                                    <ul className="dot-list" style={{ margin: '15px 0' }}>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Our group admins are here to ensure the smooth functioning of the group and to uphold the policies. If a message or member violates any of the above rules, admins reserve the right to issue a warning or remove members from the group as necessary.
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            If you feel a message is inappropriate, please report it to an admin instead of engaging directly. This helps maintain a peaceful environment.
                                        </li>
                                        <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                            Admins has rights to delete any inappropriate or office message.
                                        </li>
                                    </ul>
                                </div>

                                <div className="space32" />
                                <h3>Benefits of Being Part of This Group</h3>
                                <div className="space18" />

                                <ul className="dot-list" style={{ margin: '15px 0' }}>
                                    <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                        <strong>Support Network:</strong> This group provides a space to seek and offer help in times of need – whether it's advice, resources, or simply a listening ear.
                                    </li>
                                    <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                        <strong>Cultural Connection:</strong> Stay informed about cultural events, celebrations, and activities that bring our community together.
                                    </li>
                                    <li style={{ fontSize: '18px', fontWeight: '500', color: '#000000cf', lineHeight: '28px', background: 'transparent', padding: '0' }}>
                                        <strong>Positive Environment:</strong> Our goal is to maintain a space where people feel welcomed, valued, and respected. When we all contribute positively, the group becomes a much more enriching place for everyone.
                                    </li>
                                </ul>

                                <div className="space24" />

                                <p>We appreciate your cooperation in following these guidelines, and we thank you for being part of our vibrant and growing community. Together, we can continue to spread happiness, share knowledge, and build a stronger connection among our members.</p>
                                <div className="space12" />
                                <p>If you have any questions or concerns, feel free to reach out to the group admins directly.</p>
                                 <div className="space12" />
                                <p>Thank you!</p>
                                <div className="space12" />
                                <p style={{ fontWeight: 'bold' }}>வாழ்க தமிழ்</p>
                            </div>
                        </div>
                        <div className="col-lg-6">
                            <div className="img">
                                <img src="/assets/img/online/whats-app/section-2.webp" alt="" />
                            </div>
                        </div>
                    </div>

                    {/* Full-width centered Join WhatsApp Button */}
                    <div className="row">
                        <div className="col-12">
                            <a
                                href="https://www.zeffy.com/en-CA/ticketing/f0e92379-696f-4788-bc41-fd38007ed97c"
                                target="_blank"
                                rel="noopener noreferrer"
                                style={{
                                    display: 'inline-flex',
                                    alignItems: 'center',
                                    gap: '14px',
                                    backgroundColor: '#25D366',
                                    color: '#ffffff',
                                    fontFamily: 'inherit',
                                    fontSize: '12px',
                                    fontWeight: '700',
                                    padding: '10px 25px',
                                    borderRadius: '50px',
                                    textDecoration: 'none',
                                    boxShadow: '0 8px 28px rgba(37,211,102,0.40)',
                                    transition: 'all 0.3s ease',
                                    letterSpacing: '0.5px',
                                }}
                                onMouseEnter={e => {
                                    e.currentTarget.style.backgroundColor = '#1ebe5d';
                                    e.currentTarget.style.boxShadow = '0 12px 36px rgba(37,211,102,0.55)';
                                    e.currentTarget.style.transform = 'translateY(-3px)';
                                }}
                                onMouseLeave={e => {
                                    e.currentTarget.style.backgroundColor = '#25D366';
                                    e.currentTarget.style.boxShadow = '0 8px 28px rgba(37,211,102,0.40)';
                                    e.currentTarget.style.transform = 'translateY(0)';
                                }}
                            >
                                {/* Official WhatsApp Icon */}
                                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="white">
                                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                                </svg>
                                Join Our WhatsApp Group
                            </a>
                        </div>
                    </div>

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