<?php

use App\Models\LandingPage;

class LandingPageSeeder extends \Hyperf\Database\Seeders\Seeder
{
    public function run(): void
    {
        foreach ($this->templates() as $tpl) {
            $existing = LandingPage::where('title', $tpl['title'])->first();
            if ($existing) {
                $existing->update([
                    'html_content' => $tpl['html_content'],
                    'description' => $tpl['description'],
                ]);
            } else {
                LandingPage::create([
                    'title' => $tpl['title'],
                    'html_content' => $tpl['html_content'],
                    'description' => $tpl['description'],
                    'is_active' => false,
                ]);
            }
        }
    }

    private function templates(): array
    {
        return [
            [
                'title' => 'Bigkis Inc | Bisigco',
                'description' => 'National agricultural cooperative landing page — Bigkis Inc & Bisigco (Philippines).',
                'html_content' => $this->bigkisTemplate(),
            ],
            [
                'title' => 'Bigkis Inc | Bisigco v2',
                'description' => 'Modern, dynamic, and premium landing page for Bigkis Inc & Bisigco.',
                'html_content' => $this->bigkisTemplateV2(),
            ],
        ];
    }

    private function bigkisTemplate(): string
    {
        return <<<'HTML'
<section style="background: linear-gradient(135deg, #0038a8 0%, #0a4dbd 50%, #ce1126 100%); color: #fff; padding: 80px 20px; text-align: center; position: relative; overflow: hidden;">
  <div style="position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(252,209,22,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12) 0%, transparent 50%);"></div>
  <div style="position: relative; max-width: 1100px; margin: 0 auto;">
    <div style="display: flex; justify-content: center; align-items: center; gap: 24px; margin-bottom: 24px;">
      <img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_logo.jpg" alt="Bigkis Inc Logo" style="width: 180px; height: 180px; border-radius: 50%; background: #fff; padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); object-fit: cover;">
      <div style="width: 3px; height: 120px; background: rgba(252,209,22,0.8); border-radius: 2px;"></div>
      <img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bisigco.png" alt="Bisigco Logo" style="width: 180px; height: 180px; border-radius: 50%; background: #fff; padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); object-fit: cover;">
    </div>
    <div style="display: inline-block; background: rgba(252,209,22,0.95); color: #0038a8; padding: 6px 18px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px;">Est. 2022 &middot; Philippines</div>
    <h1 style="font-size: 3.25rem; font-weight: 900; margin-bottom: 12px; line-height: 1.05; text-shadow: 0 4px 20px rgba(0,0,0,0.3);">BIGKIS INC <span style="opacity: 0.85;">|</span> BISIGCO</h1>
    <p style="font-size: 1.35rem; font-weight: 700; color: #fcd116; margin-bottom: 8px; letter-spacing: 0.05em;">Bigkis Bayanihang Masa &middot; Sincere Advocacy &middot; Responsible Action</p>
    <p style="font-size: 1.1rem; max-width: 760px; margin: 0 auto 36px; opacity: 0.95; line-height: 1.6;">A national agricultural cooperative uniting <strong style="color: #fcd116;">over 1 million members worldwide</strong> &mdash; empowering Filipino farmers, growers, and communities through unity, livelihood, and shared prosperity.</p>
    <div style="display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;">
      <a href="/login" style="display: inline-block; background: #fcd116; color: #0038a8; padding: 16px 42px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(252,209,22,0.45);">Become a Member</a>
      <a href="#about" style="display: inline-block; background: rgba(255,255,255,0.15); color: #fff; padding: 16px 42px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; border: 2px solid rgba(255,255,255,0.4); backdrop-filter: blur(8px);">Learn More</a>
    </div>
  </div>
</section>

<section style="background: #fff; padding: 30px 20px; border-bottom: 4px solid #fcd116;">
  <div style="max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; text-align: center;">
    <div><div style="font-size: 2.4rem; font-weight: 900; color: #0038a8;">1M+</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Members Worldwide</div></div>
    <div><div style="font-size: 2.4rem; font-weight: 900; color: #ce1126;">81</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Provinces Reached</div></div>
    <div><div style="font-size: 2.4rem; font-weight: 900; color: #0a8a3e;">100%</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Filipino-Led</div></div>
    <div><div style="font-size: 2.4rem; font-weight: 900; color: #b8860b;">2022</div><div style="font-size: 0.9rem; color: #555; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;">Year Established</div></div>
  </div>
</section>

<section id="about" style="padding: 80px 20px; background: linear-gradient(180deg, #f7faff 0%, #fff 100%);">
  <div style="max-width: 1100px; margin: 0 auto;">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center;">
      <div>
        <div style="display: inline-block; color: #ce1126; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px;">About the Cooperative</div>
        <h2 style="font-size: 2.4rem; font-weight: 900; color: #0038a8; margin-bottom: 18px; line-height: 1.15;">Unity in Action. Livelihood for All.</h2>
        <p style="font-size: 1.05rem; line-height: 1.75; color: #333; margin-bottom: 16px;"><strong>Bigkis Inc</strong> (Bigkis Bayanihang Masa, Sincere Advocacy, Responsible Action Incorporated) is a nationwide cooperative movement built on the Filipino spirit of <em>bayanihan</em> &mdash; collective effort for the common good.</p>
        <p style="font-size: 1.05rem; line-height: 1.75; color: #333; margin-bottom: 16px;">Together with <strong>BISIGCO</strong> (Bigkis Agri-Livelihood &amp; Growers Cooperative), we provide farmers, fisherfolk, and growers with access to markets, fair pricing, capacity-building, and dignified livelihood opportunities.</p>
        <p style="font-size: 1.05rem; line-height: 1.75; color: #333;">From rice paddies in Luzon to upland farms in Mindanao, our members stand united &mdash; feeding the nation and uplifting their families.</p>
      </div>
      <div style="text-align: center;">
        <img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_bisigco.jpg" alt="Bigkis Inc and Bisigco — Unity in Action, Livelihood for All" style="width: 100%; max-width: 520px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,56,168,0.25);">
      </div>
    </div>
  </div>
</section>

<section style="padding: 80px 20px; background: #fff;">
  <div style="max-width: 1100px; margin: 0 auto;">
    <div style="text-align: center; margin-bottom: 48px;">
      <div style="display: inline-block; color: #0a8a3e; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px;">Our Programs</div>
      <h2 style="font-size: 2.2rem; font-weight: 900; color: #0038a8; margin: 0;">What We Do for Our Members</h2>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px;">
      <div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #0038a8;">
        <div style="font-size: 2.8rem; margin-bottom: 14px;">🌾</div>
        <h3 style="font-weight: 800; color: #0038a8; margin-bottom: 10px; font-size: 1.2rem;">Agri-Livelihood</h3>
        <p style="color: #555; line-height: 1.65; margin: 0;">Farm inputs, training, and market access for rice, corn, vegetables, livestock, and high-value crops.</p>
      </div>
      <div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #ce1126;">
        <div style="font-size: 2.8rem; margin-bottom: 14px;">🤝</div>
        <h3 style="font-weight: 800; color: #ce1126; margin-bottom: 10px; font-size: 1.2rem;">Bayanihan Network</h3>
        <p style="color: #555; line-height: 1.65; margin: 0;">A nationwide grassroots network connecting members across barangays, municipalities, and provinces.</p>
      </div>
      <div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #fcd116;">
        <div style="font-size: 2.8rem; margin-bottom: 14px;">💰</div>
        <h3 style="font-weight: 800; color: #b8860b; margin-bottom: 10px; font-size: 1.2rem;">Fair Trade Marketplace</h3>
        <p style="color: #555; line-height: 1.65; margin: 0;">Direct-to-consumer selling that removes middlemen and ensures fair prices for growers.</p>
      </div>
      <div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #0a8a3e;">
        <div style="font-size: 2.8rem; margin-bottom: 14px;">📚</div>
        <h3 style="font-weight: 800; color: #0a8a3e; margin-bottom: 10px; font-size: 1.2rem;">Capacity Building</h3>
        <p style="color: #555; line-height: 1.65; margin: 0;">Skills training, financial literacy, and modern farming workshops for sustainable growth.</p>
      </div>
      <div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #6f42c1;">
        <div style="font-size: 2.8rem; margin-bottom: 14px;">🛡️</div>
        <h3 style="font-weight: 800; color: #6f42c1; margin-bottom: 10px; font-size: 1.2rem;">Member Protection</h3>
        <p style="color: #555; line-height: 1.65; margin: 0;">Cooperative insurance, mutual aid, and advocacy for farmers' rights at every level of government.</p>
      </div>
      <div style="background: #fff; padding: 36px 28px; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,56,168,0.08); border-top: 5px solid #17a2b8;">
        <div style="font-size: 2.8rem; margin-bottom: 14px;">🌏</div>
        <h3 style="font-weight: 800; color: #17a2b8; margin-bottom: 10px; font-size: 1.2rem;">Global OFW Bridge</h3>
        <p style="color: #555; line-height: 1.65; margin: 0;">Connecting overseas Filipinos with cooperative ventures back home &mdash; investment with impact.</p>
      </div>
    </div>
  </div>
</section>

<section style="padding: 80px 20px; background: linear-gradient(135deg, #0038a8 0%, #0a4dbd 100%); color: #fff;">
  <div style="max-width: 1000px; margin: 0 auto; text-align: center;">
    <div style="font-size: 4rem; line-height: 1; opacity: 0.4; margin-bottom: -10px;">&ldquo;</div>
    <p style="font-size: 1.5rem; font-weight: 600; line-height: 1.5; max-width: 800px; margin: 0 auto 28px; font-style: italic;">When Filipinos stand together &mdash; farmer beside farmer, neighbor beside neighbor &mdash; no challenge is too great. This is the spirit of <span style="color: #fcd116;">Bigkis</span>.</p>
    <div style="width: 60px; height: 3px; background: #fcd116; margin: 0 auto 16px;"></div>
    <div style="font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; opacity: 0.9;">&mdash; The Bigkis Inc Movement</div>
  </div>
</section>

<section style="padding: 80px 20px; background: #fcd116; text-align: center;">
  <div style="max-width: 800px; margin: 0 auto;">
    <h2 style="font-size: 2.4rem; font-weight: 900; color: #0038a8; margin-bottom: 14px;">Join the Movement</h2>
    <p style="font-size: 1.15rem; color: #1a1a2e; margin-bottom: 32px; line-height: 1.6;">Become part of a million-strong cooperative reshaping Philippine agriculture &mdash; one bayanihan at a time.</p>
    <div style="display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;">
      <a href="/login" style="display: inline-block; background: #0038a8; color: #fff; padding: 16px 44px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(0,56,168,0.35);">Member Login / Sign Up</a>
      <a href="/login" style="display: inline-block; background: #ce1126; color: #fff; padding: 16px 44px; border-radius: 50px; font-weight: 800; text-decoration: none; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(206,17,38,0.35);">Apply for Membership</a>
    </div>
  </div>
</section>

<footer style="background: #1a1a2e; color: #b8c0d0; padding: 48px 20px 28px;">
  <div style="max-width: 1100px; margin: 0 auto;">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; margin-bottom: 32px;">
      <div>
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 14px;">
          <div style="display: flex; gap: 8px;">
            <img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_logo.jpg" alt="Bigkis Inc" style="width: 56px; height: 56px; border-radius: 50%; background: #fff; padding: 4px;">
            <img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bisigco.png" alt="Bisigco" style="width: 56px; height: 56px; border-radius: 50%; background: #fff; padding: 4px;">
          </div>
          <div>
            <div style="font-weight: 900; color: #fff; font-size: 1.05rem;">BIGKIS INC</div>
            <div style="font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fcd116;">Est. 2022</div>
          </div>
        </div>
        <p style="font-size: 0.9rem; line-height: 1.6; margin: 0;">Bigkis Bayanihang Masa, Sincere Advocacy, Responsible Action Incorporated &mdash; a national agricultural cooperative serving Filipino farmers and communities.</p>
      </div>
      <div>
        <div style="font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; margin-bottom: 12px;">Cooperative</div>
        <div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem;">
          <a href="#about" style="color: #b8c0d0; text-decoration: none;">About Bigkis</a>
          <a href="#" style="color: #b8c0d0; text-decoration: none;">BISIGCO Programs</a>
          <a href="#" style="color: #b8c0d0; text-decoration: none;">Membership</a>
          <a href="#" style="color: #b8c0d0; text-decoration: none;">Governance</a>
        </div>
      </div>
      <div>
        <div style="font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; margin-bottom: 12px;">Connect</div>
        <div style="display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem;">
          <span>📍 Republic of the Philippines</span>
          <span>✉️ info@bigkis.ph</span>
          <span>📞 Member Hotline</span>
        </div>
      </div>
    </div>
    <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; font-size: 0.85rem;">
      &copy; 2026 Bigkis Inc &amp; BISIGCO &mdash; Unity in Action. Livelihood for All. 🇵🇭
    </div>
  </div>
</footer>
HTML;
    }

    private function bigkisTemplateV2(): string
    {
        return <<<'HTML'
<div class="v2-landing">
<style>
  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&display=swap');
  
  .v2-landing {
    font-family: 'Outfit', sans-serif;
    color: #1e293b;
    line-height: 1.6;
    overflow-x: hidden;
    background-color: #f8fafc;
  }

  .v2-landing * {
    box-sizing: border-box;
  }

  .v2-hero {
    position: relative;
    padding: 160px 20px 200px;
    background: #0f172a;
    color: #fff;
    text-align: center;
    overflow: hidden;
  }
  
  .v2-hero::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(0,56,168,0.5) 0%, transparent 40%),
                radial-gradient(circle at 70% 70%, rgba(206,17,38,0.4) 0%, transparent 40%);
    animation: v2-rotateBg 25s linear infinite;
    z-index: 0;
  }

  @keyframes v2-rotateBg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .v2-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .v2-glass-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 8px 24px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fcd116;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  }

  .v2-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin-bottom: 10px;
  }

  .v2-logo-wrap {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #fff;
    padding: 6px;
    box-shadow: 0 0 30px rgba(252,209,22,0.2);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
    cursor: pointer;
  }

  .v2-logo-wrap:hover {
    transform: translateY(-10px) scale(1.08);
    box-shadow: 0 20px 40px rgba(252,209,22,0.5);
  }

  .v2-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .v2-divider {
    width: 3px;
    height: 60px;
    background: #fcd116;
    border-radius: 4px;
    box-shadow: 0 0 15px #fcd116;
  }

  .v2-title {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: -2px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
  }

  .v2-subtitle {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fcd116;
    margin: 0;
    letter-spacing: 2px;
  }

  .v2-desc {
    font-size: 1.25rem;
    color: #e2e8f0;
    max-width: 750px;
    font-weight: 300;
    line-height: 1.8;
    margin: 0;
  }

  .v2-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
  }

  .v2-btn-primary {
    background: #fcd116;
    color: #0038a8;
    padding: 18px 48px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(252,209,22,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .v2-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(252,209,22,0.6);
    background: #fff;
  }

  .v2-btn-secondary {
    background: transparent;
    color: #fff;
    padding: 16px 46px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .v2-btn-secondary:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    transform: translateY(-5px);
  }

  .v2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: -100px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 10;
  }

  .v2-stat-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    border-bottom: 6px solid #0038a8;
  }

  .v2-stat-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
  }

  .v2-stat-val {
    font-size: 3.5rem;
    font-weight: 900;
    color: #0038a8;
    margin-bottom: 8px;
    line-height: 1;
  }

  .v2-stat-label {
    font-size: 1rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .v2-stat-card:nth-child(2) { border-color: #ce1126; }
  .v2-stat-card:nth-child(2) .v2-stat-val { color: #ce1126; }
  
  .v2-stat-card:nth-child(3) { border-color: #10b981; }
  .v2-stat-card:nth-child(3) .v2-stat-val { color: #10b981; }
  
  .v2-stat-card:nth-child(4) { border-color: #f59e0b; }
  .v2-stat-card:nth-child(4) .v2-stat-val { color: #f59e0b; }

  .v2-section {
    padding: 120px 20px;
  }

  .v2-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .v2-header {
    text-align: center;
    margin-bottom: 70px;
  }

  .v2-tag {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(0,56,168,0.08);
    color: #0038a8;
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
  }

  .v2-h2 {
    font-size: 3.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
  }

  .v2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
  }

  .v2-card {
    background: #fff;
    border-radius: 30px;
    padding: 48px 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  .v2-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0,56,168,0.05) 0%, transparent 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .v2-card:hover {
    transform: translateY(-20px);
    box-shadow: 0 30px 60px rgba(0,56,168,0.1);
  }

  .v2-card:hover::before {
    opacity: 1;
  }

  .v2-icon {
    width: 80px;
    height: 80px;
    background: #f8fafc;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.4s ease;
  }

  .v2-card:hover .v2-icon {
    transform: scale(1.1) rotate(5deg);
  }

  .v2-card-title {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 16px;
    color: #0f172a;
  }

  .v2-card-desc {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0;
  }

  .v2-cta {
    background: linear-gradient(135deg, #0038a8 0%, #1e3a8a 100%);
    padding: 120px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    border-radius: 40px;
    margin: 0 20px 100px;
    overflow: hidden;
  }

  .v2-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="20" stroke="rgba(255,255,255,0.05)" stroke-width="1.5" fill="none"/></svg>') 0 0 / 60px 60px;
  }

  .v2-cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
  }

  .v2-cta-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 24px;
  }

  .v2-cta-desc {
    font-size: 1.3rem;
    color: #bfdbfe;
    margin-bottom: 40px;
    line-height: 1.6;
  }

  @media (max-width: 768px) {
    .v2-title { font-size: 3.2rem; }
    .v2-subtitle { font-size: 1.2rem; }
    .v2-hero { padding: 120px 20px 160px; }
    .v2-h2 { font-size: 2.5rem; }
    .v2-cta-title { font-size: 2.5rem; }
    .v2-logos { flex-direction: column; gap: 20px; }
    .v2-divider { width: 60px; height: 3px; }
  }
</style>

<header class="v2-hero">
  <div class="v2-hero-content">
    <div class="v2-glass-badge">
      <span style="font-size:1.2rem">🌟</span> Premium Design Interface
    </div>
    
    <div class="v2-logos">
      <div class="v2-logo-wrap">
        <img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bigkis_logo.jpg" alt="Bigkis Inc">
      </div>
      <div class="v2-divider"></div>
      <div class="v2-logo-wrap">
        <img src="https://cdn.jsdelivr.net/gh/telemagnadon/publicforCDN@latest/assets/bisigco.png" alt="Bisigco">
      </div>
    </div>

    <div>
      <h1 class="v2-title">Bigkis <span style="opacity:0.5;font-weight:300;">|</span> Bisigco</h1>
      <h2 class="v2-subtitle">Sincere Advocacy &middot; Responsible Action</h2>
    </div>

    <p class="v2-desc">
      A revolutionary national agricultural cooperative uniting millions across the Philippines. We empower farmers, elevate communities, and build a sustainable future through genuine <strong>bayanihan</strong>.
    </p>

    <div class="v2-actions">
      <a href="/login" class="v2-btn-primary">Get Started Now</a>
      <a href="#explore" class="v2-btn-secondary">Explore Programs</a>
    </div>
  </div>
</header>

<section class="v2-stats">
  <div class="v2-stat-card">
    <div class="v2-stat-val">1M+</div>
    <div class="v2-stat-label">Active Members</div>
  </div>
  <div class="v2-stat-card">
    <div class="v2-stat-val">81</div>
    <div class="v2-stat-label">Provinces Reached</div>
  </div>
  <div class="v2-stat-card">
    <div class="v2-stat-val">100%</div>
    <div class="v2-stat-label">Filipino-Led</div>
  </div>
  <div class="v2-stat-card">
    <div class="v2-stat-val">2022</div>
    <div class="v2-stat-label">Est. Year</div>
  </div>
</section>

<section id="explore" class="v2-section" style="background: #fff;">
  <div class="v2-container">
    <div class="v2-header">
      <div class="v2-tag">Impact & Programs</div>
      <h2 class="v2-h2">Empowering Growth</h2>
    </div>

    <div class="v2-grid">
      <div class="v2-card">
        <div class="v2-icon" style="color: #0038a8;">🌾</div>
        <h3 class="v2-card-title">Agri-Livelihood</h3>
        <p class="v2-card-desc">State-of-the-art farm inputs, comprehensive training, and exclusive market access to elevate local agriculture.</p>
      </div>

      <div class="v2-card">
        <div class="v2-icon" style="color: #ce1126;">🤝</div>
        <h3 class="v2-card-title">Bayanihan Network</h3>
        <p class="v2-card-desc">A highly connected grassroots infrastructure linking members from barangays to provincial hubs seamlessly.</p>
      </div>

      <div class="v2-card">
        <div class="v2-icon" style="color: #f59e0b;">💰</div>
        <h3 class="v2-card-title">Fair Trade Hub</h3>
        <p class="v2-card-desc">An optimized direct-to-consumer marketplace eliminating middlemen to maximize grower profitability.</p>
      </div>

      <div class="v2-card">
        <div class="v2-icon" style="color: #10b981;">📚</div>
        <h3 class="v2-card-title">Capacity Mastery</h3>
        <p class="v2-card-desc">Advanced skill acquisition, robust financial literacy, and modern agronomy workshops.</p>
      </div>

      <div class="v2-card">
        <div class="v2-icon" style="color: #8b5cf6;">🛡️</div>
        <h3 class="v2-card-title">Member Protection</h3>
        <p class="v2-card-desc">Comprehensive cooperative insurance, mutual aid funds, and unwavering advocacy for farmers' rights.</p>
      </div>

      <div class="v2-card">
        <div class="v2-icon" style="color: #0ea5e9;">🌏</div>
        <h3 class="v2-card-title">Global OFW Bridge</h3>
        <p class="v2-card-desc">Strategic investment channels for overseas Filipinos to fund and grow domestic cooperative ventures.</p>
      </div>
    </div>
  </div>
</section>

<div class="v2-container">
  <div class="v2-cta">
    <div class="v2-cta-content">
      <h2 class="v2-cta-title">Ready to Make an Impact?</h2>
      <p class="v2-cta-desc">Join our million-strong movement. Transform agriculture, secure your livelihood, and uplift the nation with Bigkis and Bisigco.</p>
      <a href="/login" class="v2-btn-primary" style="background: #fff; color: #0038a8; box-shadow: 0 10px 30px rgba(255,255,255,0.3);">Become a Member</a>
    </div>
  </div>
</div>

</div>
HTML;
    }
}
