// home.jsx — Home page sections for Harjog Solutions

const CAPABILITIES = [
  { num: '01', title: 'Brand Identity',   desc: 'Logos, wordmarks, brand systems and visual language that command attention from launch day onwards.', tags: ['Logo', 'Identity', 'Guidelines'] },
  { num: '02', title: 'Real Estate Marketing', desc: 'Pre-launch campaigns, lead funnels and creative for builders, brokers and townships across Punjab and beyond.', tags: ['Builders', 'Lead Gen', 'Creatives'] },
  { num: '03', title: 'Political Campaigns', desc: 'Door-to-door creative, voter outreach, IVR, video and field collateral for candidates at every level.', tags: ['Outreach', 'IVR', 'Video'] },
  { num: '04', title: 'Performance Marketing', desc: 'Meta, Google and YouTube ads engineered to ship qualified leads — not vanity metrics.', tags: ['Meta', 'Google', 'YouTube'] },
  { num: '05', title: 'Marketing Automation', desc: 'WhatsApp, email and CRM automation. Nurture every lead like it\u2019s your only one, without the headcount.', tags: ['WhatsApp', 'CRM', 'Workflows'] },
  { num: '06', title: 'Content & Production', desc: 'Reels, drone, photography and copy — produced in-house, turned around fast, on-brand every time.', tags: ['Reels', 'Drone', 'Copy'] },
];

const WORK = [
  { slug: 'township-launch',  cat: 'Real Estate',      date: '2025–26', title: 'Ashok Malhotra Group — Digital & Lead Gen', blurb: 'Social media, performance marketing and lead generation for premier Ludhiana real estate properties.', image: 'https://images.unsplash.com/photo-WQ42ypHazNo?w=1200&q=80&auto=format&fit=crop' },
  { slug: 'mla-campaign',     cat: 'Political',         date: '2025',    title: 'Vidhan Sabha Campaign — Punjab', blurb: 'Full creative and outreach engine for a sitting MLA. 4.2L verified voter touchpoints across booths, IVR and WhatsApp.', image: 'https://images.unsplash.com/photo-AXGOhRx0Sko?w=1200&q=80&auto=format&fit=crop' },
  { slug: 'sona-foods',       cat: 'Film & Production', date: '2019',    title: 'Bollywood & Punjabi Film Promos', blurb: 'Edited promos for Bala, Nikka Zaildar 3, Dream Girl, Jabaria Jodi and more for major Bollywood and Punjabi productions.', image: 'https://images.unsplash.com/photo-i0IvwAhhGZM?w=1200&q=80&auto=format&fit=crop' },
  { slug: 'heritage-resorts', cat: 'Social Media',      date: '2023–24', title: 'Socializar — Global Social Campaigns', blurb: 'Social media campaigns for brands across London, Australia, Canada, USA, Dubai and Thailand.', image: 'https://images.unsplash.com/photo-ou_9KZ6BJ-0?w=1200&q=80&auto=format&fit=crop' },
];

const PROCESS = [
  { n: '01', t: 'Listen',  d: 'A working session in our Ludhiana studio (or yours). We figure out what success actually looks like for your business — not what we wish it looked like.' },
  { n: '02', t: 'Plan',    d: 'Scoped roadmap, channel mix, budget split and a measurement plan. We sign off on numbers before anyone makes a creative.' },
  { n: '03', t: 'Ship',    d: 'Two-week sprints. Real creative live in week two, real leads in week four. We adjust spend based on what the data says.' },
  { n: '04', t: 'Scale',   d: 'What works gets more budget; what doesn\u2019t gets cut. Monthly reviews with the founder, weekly updates with the team.' },
];

const TESTIMONIALS = [
  { q: 'Harjog ran our township launch end-to-end. Bookings the first month covered the whole marketing spend.', name: 'Aman Buildwell', av: 'AB' },
  { q: 'Best creative we\'ve had on a campaign. Satnam understood Punjab voters in a way agencies in Delhi never did.', name: 'Vidhan Sabha Campaign', av: 'VS' },
  { q: 'They rebuilt our brand, our packaging, and our funnel. Repeat customer rate is finally where we\'d hoped it would be.', name: 'Sona Foods', av: 'SF' },
  { q: 'Social media campaigns that actually reached our audience across six countries. Real results, not just impressions.', name: 'Socializar', av: 'SZ' },
  { q: 'Our lead cost dropped by more than half within the first month. The team knows what they\'re doing.', name: 'Ashok Malhotra Group', av: 'AM' },
  { q: 'The corporate film and Auto Expo pitch video were delivered on time and exactly to brief.', name: 'MCI India — Mahindra', av: 'MC' },
];

const FAQS = [
  { q: 'Who is Harjog Solutions for?', a: 'Real estate builders and brokers, political candidates and their campaign teams, and growth-stage consumer brands. If you need fast, accountable marketing, we can usually help.' },
  { q: 'Do you work outside Punjab?', a: 'Yes — we run campaigns and brand work across India, with a base in Ludhiana. About 40% of our retainers are out-of-state.' },
  { q: 'What does a typical engagement cost?', a: 'Brand identity projects start around \u20b91.5L. Marketing retainers begin at \u20b975k/month plus ad spend. Political campaigns are scoped per seat — get in touch for a quote.' },
  { q: 'How fast can you start?', a: 'For an active retainer, 5\u20137 working days from contract. For a brand sprint, we can usually open a slot within 2\u20133 weeks.' },
  { q: 'What about automation and CRM?', a: 'We build on tools you already use \u2014 WhatsApp Business, GoHighLevel, Zoho, HubSpot, custom Make/n8n flows. We don\u2019t lock you into proprietary software.' },
  { q: 'Will you sign an NDA?', a: 'Always. We routinely sign mutual NDAs before the first conversation, especially for political and real-estate work.' },
];

function MapBg() {
  return (
    <div className="map-bg" aria-hidden="true">
      <svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <defs>
          <pattern id="oceanWave" x="0" y="0" width="52" height="26" patternUnits="userSpaceOnUse">
            <path d="M0,13 C6.5,5 13,5 19.5,13 C26,21 32.5,21 39,13 C45.5,5 49,5 52,13" strokeWidth="0.55" stroke="#1a0d00" fill="none" />
          </pattern>
        </defs>

        {/* Ocean wave texture */}
        <rect width="1920" height="1080" fill="url(#oceanWave)" />

        {/* Outer decorative double border */}
        <rect x="16" y="16" width="1888" height="1048" stroke="#1a0d00" strokeWidth="1.8" fill="none" />
        <rect x="28" y="28" width="1864" height="1024" stroke="#1a0d00" strokeWidth="0.6" fill="none" />

        {/* Corner cross ornaments */}
        <g stroke="#1a0d00" fill="none">
          <line x1="16" y1="52" x2="52" y2="16" strokeWidth="1.0" />
          <line x1="16" y1="68" x2="68" y2="16" strokeWidth="0.6" />
          <line x1="1904" y1="52" x2="1868" y2="16" strokeWidth="1.0" />
          <line x1="1904" y1="68" x2="1852" y2="16" strokeWidth="0.6" />
          <line x1="16" y1="1028" x2="52" y2="1064" strokeWidth="1.0" />
          <line x1="16" y1="1012" x2="68" y2="1064" strokeWidth="0.6" />
          <line x1="1904" y1="1028" x2="1868" y2="1064" strokeWidth="1.0" />
          <line x1="1904" y1="1012" x2="1852" y2="1064" strokeWidth="0.6" />
        </g>

        {/* Latitude / longitude grid */}
        <g stroke="#1a0d00" fill="none">
          {[200,400,600,800,1000,1200,1400,1600,1800].map(x => (
            <line key={"vg"+x} x1={x} y1="16" x2={x} y2="1064" strokeWidth="0.22" strokeDasharray="4,10" />
          ))}
          {[135,270,405,540,675,810,945].map(y => (
            <line key={"hg"+y} x1="16" y1={y} x2="1904" y2={y} strokeWidth="0.22" strokeDasharray="4,10" />
          ))}
        </g>

        {/* MAIN CONTINENT */}
        <path
          stroke="#1a0d00" strokeWidth="1.6" fill="#1a0d00" fillOpacity="0.055"
          d="M 622,52 C 670,36 744,40 808,58 C 872,76 922,108 962,150 C 1002,192 1024,238 1022,286 C 1020,334 998,374 970,408 C 942,442 906,464 880,494 C 854,524 846,558 852,592 C 858,626 878,654 888,686 C 898,718 892,752 874,780 C 856,808 828,826 806,852 C 784,878 774,908 778,940 C 782,972 800,998 800,1024 C 800,1050 782,1062 758,1060 C 734,1058 708,1040 684,1020 C 660,1000 644,974 636,946 C 628,918 632,890 626,862 C 620,834 602,812 578,792 C 554,772 524,762 506,740 C 488,718 484,688 496,664 C 508,640 534,624 544,598 C 554,572 542,544 520,524 C 498,504 468,496 452,474 C 436,452 434,424 448,400 C 462,376 490,360 504,334 C 518,308 514,278 498,252 C 482,226 454,210 446,184 C 438,158 450,130 470,108 C 490,86 520,72 552,62 C 584,52 602,56 622,52 Z"
        />

        {/* NORTHERN PENINSULA (top right, separate landmass) */}
        <path
          stroke="#1a0d00" strokeWidth="1.4" fill="#1a0d00" fillOpacity="0.055"
          d="M 1008,48 C 1052,32 1112,36 1166,56 C 1220,76 1264,112 1290,158 C 1316,204 1316,256 1296,298 C 1276,340 1238,366 1198,380 C 1158,394 1112,392 1074,376 C 1036,360 1006,330 992,296 C 978,262 984,224 1002,194 C 1020,164 1050,144 1058,116 C 1066,88 1050,58 1008,48 Z"
        />

        {/* WESTERN ISLAND 1 */}
        <path
          stroke="#1a0d00" strokeWidth="1.3" fill="#1a0d00" fillOpacity="0.055"
          d="M 106,90 C 138,72 178,76 204,94 C 230,112 240,144 234,174 C 228,204 206,224 182,230 C 158,236 130,224 116,204 C 102,184 98,156 106,132 C 114,108 106,98 106,90 Z"
        />

        {/* WESTERN ISLAND 2 */}
        <path
          stroke="#1a0d00" strokeWidth="1.2" fill="#1a0d00" fillOpacity="0.055"
          d="M 72,452 C 96,432 132,432 158,450 C 184,468 196,498 190,526 C 184,554 162,572 138,574 C 114,576 92,560 82,536 C 72,512 76,480 72,452 Z"
        />

        {/* WESTERN ISLAND 3 */}
        <path
          stroke="#1a0d00" strokeWidth="1.1" fill="#1a0d00" fillOpacity="0.055"
          d="M 88,730 C 112,714 144,716 166,732 C 188,748 196,776 188,800 C 180,824 158,836 134,834 C 110,832 90,814 84,790 C 78,766 80,748 88,730 Z"
        />

        {/* EASTERN ARCHIPELAGO */}
        <path stroke="#1a0d00" strokeWidth="1.0" fill="#1a0d00" fillOpacity="0.055" d="M 1682,148 C 1702,134 1728,138 1744,154 C 1760,170 1760,196 1746,210 C 1732,224 1708,224 1692,210 C 1676,196 1672,172 1682,148 Z" />
        <path stroke="#1a0d00" strokeWidth="1.0" fill="#1a0d00" fillOpacity="0.055" d="M 1752,248 C 1772,234 1800,238 1814,256 C 1828,274 1824,302 1808,314 C 1792,326 1766,322 1752,306 C 1738,290 1736,266 1752,248 Z" />
        <path stroke="#1a0d00" strokeWidth="1.0" fill="#1a0d00" fillOpacity="0.055" d="M 1712,360 C 1730,346 1756,350 1768,368 C 1780,386 1774,410 1758,420 C 1742,430 1718,424 1706,408 C 1694,392 1694,374 1712,360 Z" />
        <path stroke="#1a0d00" strokeWidth="0.9" fill="#1a0d00" fillOpacity="0.055" d="M 1784,452 C 1802,438 1828,444 1840,462 C 1852,480 1846,506 1830,516 C 1814,526 1788,518 1776,502 C 1764,486 1764,466 1784,452 Z" />
        <path stroke="#1a0d00" strokeWidth="0.9" fill="#1a0d00" fillOpacity="0.055" d="M 1844,562 C 1862,550 1884,556 1894,572 C 1904,588 1898,610 1882,618 C 1866,626 1842,618 1832,602 C 1822,586 1824,574 1844,562 Z" />
        <path stroke="#1a0d00" strokeWidth="0.9" fill="#1a0d00" fillOpacity="0.055" d="M 1660,528 C 1678,516 1700,520 1710,536 C 1720,552 1714,574 1698,582 C 1682,590 1660,582 1650,566 C 1640,550 1642,540 1660,528 Z" />

        {/* SMALL CAPE / ISLAND (lower area) */}
        <path stroke="#1a0d00" strokeWidth="0.9" fill="#1a0d00" fillOpacity="0.055" d="M 822,1020 C 842,1008 868,1012 880,1026 C 892,1040 886,1060 872,1066 C 858,1072 836,1064 826,1050 C 816,1036 808,1030 822,1020 Z" />

        {/* MOUNTAIN RANGE 1 — central spine */}
        <g stroke="#1a0d00" fill="none">
          <path d="M 570,272 L 584,246 L 598,272" strokeWidth="1.0" />
          <path d="M 582,272 L 592,254 L 602,272" strokeWidth="0.8" />
          <path d="M 600,268 L 616,238 L 632,268" strokeWidth="1.0" />
          <path d="M 618,268 L 628,250 L 638,268" strokeWidth="0.8" />
          <path d="M 638,264 L 656,230 L 674,264" strokeWidth="1.1" />
          <path d="M 658,264 L 670,244 L 682,264" strokeWidth="0.8" />
          <path d="M 680,260 L 700,224 L 720,260" strokeWidth="1.1" />
          <path d="M 708,260 L 720,240 L 732,260" strokeWidth="0.8" />
          <path d="M 730,256 L 752,218 L 774,256" strokeWidth="1.2" />
          <path d="M 758,256 L 770,238 L 782,256" strokeWidth="0.8" />
          <path d="M 782,254 L 804,216 L 826,254" strokeWidth="1.1" />
          <path d="M 810,254 L 822,236 L 834,254" strokeWidth="0.8" />
          <path d="M 832,256 L 852,222 L 872,256" strokeWidth="1.0" />
        </g>

        {/* MOUNTAIN RANGE 2 — northern section */}
        <g stroke="#1a0d00" fill="none">
          <path d="M 492,186 L 504,162 L 516,186" strokeWidth="0.9" />
          <path d="M 508,186 L 518,170 L 528,186" strokeWidth="0.7" />
          <path d="M 526,184 L 540,156 L 554,184" strokeWidth="0.95" />
          <path d="M 544,184 L 554,168 L 564,184" strokeWidth="0.7" />
          <path d="M 562,182 L 578,152 L 594,182" strokeWidth="0.95" />
          <path d="M 580,182 L 592,164 L 604,182" strokeWidth="0.7" />
          <path d="M 598,180 L 614,154 L 630,180" strokeWidth="0.9" />
          <path d="M 616,180 L 626,164 L 636,180" strokeWidth="0.7" />
        </g>

        {/* FOREST CLUSTER 1 */}
        <g stroke="#1a0d00" strokeWidth="0.65" fill="#1a0d00" fillOpacity="0.04">
          <circle cx="462" cy="512" r="11" />
          <circle cx="479" cy="503" r="12" />
          <circle cx="497" cy="512" r="11" />
          <circle cx="514" cy="506" r="12" />
          <circle cx="531" cy="512" r="11" />
          <circle cx="470" cy="522" r="10" />
          <circle cx="488" cy="518" r="11" />
          <circle cx="505" cy="522" r="10" />
          <circle cx="522" cy="518" r="11" />
          <circle cx="471" cy="494" r="10" />
          <circle cx="488" cy="490" r="11" />
          <circle cx="505" cy="494" r="10" />
          <circle cx="522" cy="490" r="11" />
          <circle cx="539" cy="494" r="10" />
        </g>

        {/* FOREST CLUSTER 2 */}
        <g stroke="#1a0d00" strokeWidth="0.65" fill="#1a0d00" fillOpacity="0.04">
          <circle cx="730" cy="560" r="11" />
          <circle cx="747" cy="551" r="12" />
          <circle cx="765" cy="560" r="11" />
          <circle cx="782" cy="554" r="12" />
          <circle cx="799" cy="560" r="11" />
          <circle cx="738" cy="570" r="10" />
          <circle cx="755" cy="566" r="11" />
          <circle cx="772" cy="570" r="10" />
          <circle cx="789" cy="566" r="11" />
          <circle cx="738" cy="544" r="10" />
          <circle cx="755" cy="540" r="11" />
          <circle cx="772" cy="544" r="10" />
          <circle cx="789" cy="540" r="11" />
          <circle cx="806" cy="544" r="10" />
        </g>

        {/* FOREST CLUSTER 3 */}
        <g stroke="#1a0d00" strokeWidth="0.65" fill="#1a0d00" fillOpacity="0.04">
          <circle cx="860" cy="732" r="10" />
          <circle cx="875" cy="723" r="11" />
          <circle cx="890" cy="732" r="10" />
          <circle cx="905" cy="726" r="11" />
          <circle cx="920" cy="732" r="10" />
          <circle cx="867" cy="742" r="9" />
          <circle cx="882" cy="738" r="10" />
          <circle cx="897" cy="742" r="9" />
          <circle cx="912" cy="738" r="10" />
          <circle cx="867" cy="716" r="9" />
          <circle cx="882" cy="712" r="10" />
          <circle cx="897" cy="716" r="9" />
          <circle cx="912" cy="712" r="10" />
        </g>

        {/* SAILING SHIP 1 — western ocean */}
        <g stroke="#1a0d00" fill="#1a0d00" fillOpacity="0.08">
          <path d="M 218,402 C 222,412 258,416 300,414 C 342,412 376,406 380,398 C 384,390 360,384 300,384 C 240,384 214,394 218,402 Z" strokeWidth="1.1" />
          <line x1="262" y1="384" x2="262" y2="332" strokeWidth="1.1" stroke="#1a0d00" fill="none" />
          <line x1="310" y1="384" x2="310" y2="316" strokeWidth="1.1" stroke="#1a0d00" fill="none" />
          <line x1="350" y1="384" x2="350" y2="350" strokeWidth="1.1" stroke="#1a0d00" fill="none" />
          <path d="M 262,336 C 238,348 222,362 234,378 C 246,392 256,386 262,384" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <path d="M 310,320 C 278,334 258,354 268,372 C 278,390 294,388 310,384" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <path d="M 310,320 C 334,334 356,354 350,370 C 344,384 350,384 350,384" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <path d="M 350,354 C 364,358 372,366 370,376 C 368,386 352,386 350,384" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <line x1="262" y1="340" x2="310" y2="323" strokeWidth="0.45" stroke="#1a0d00" fill="none" />
          <line x1="310" y1="320" x2="350" y2="352" strokeWidth="0.45" stroke="#1a0d00" fill="none" />
          <path d="M 310,316 L 328,322 L 310,328" fill="#1a0d00" fillOpacity="0.28" strokeWidth="0.5" />
        </g>

        {/* SAILING SHIP 2 — eastern ocean */}
        <g stroke="#1a0d00" fill="#1a0d00" fillOpacity="0.08">
          <path d="M 1378,302 C 1382,312 1418,316 1460,314 C 1502,312 1536,306 1540,298 C 1544,290 1520,284 1460,284 C 1400,284 1374,294 1378,302 Z" strokeWidth="1.1" />
          <line x1="1422" y1="284" x2="1422" y2="232" strokeWidth="1.1" stroke="#1a0d00" fill="none" />
          <line x1="1470" y1="284" x2="1470" y2="216" strokeWidth="1.1" stroke="#1a0d00" fill="none" />
          <line x1="1510" y1="284" x2="1510" y2="250" strokeWidth="1.1" stroke="#1a0d00" fill="none" />
          <path d="M 1422,236 C 1398,248 1382,262 1394,278 C 1406,292 1416,286 1422,284" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <path d="M 1470,220 C 1438,234 1418,254 1428,272 C 1438,290 1454,288 1470,284" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <path d="M 1470,220 C 1494,234 1516,254 1510,270 C 1504,284 1510,284 1510,284" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <path d="M 1510,254 C 1524,258 1532,266 1530,276 C 1528,286 1512,286 1510,284" strokeWidth="0.75" fill="none" stroke="#1a0d00" />
          <line x1="1422" y1="240" x2="1470" y2="223" strokeWidth="0.45" stroke="#1a0d00" fill="none" />
          <line x1="1470" y1="220" x2="1510" y2="252" strokeWidth="0.45" stroke="#1a0d00" fill="none" />
          <path d="M 1470,216 L 1488,222 L 1470,228" fill="#1a0d00" fillOpacity="0.28" strokeWidth="0.5" />
        </g>

        {/* SEA SERPENT — decorative */}
        <g stroke="#1a0d00" fill="#1a0d00" fillOpacity="0.05">
          <path d="M 1510,660 C 1532,648 1554,654 1562,672 C 1570,690 1560,712 1546,722 C 1532,732 1540,752 1558,760 C 1576,768 1580,786 1568,796" strokeWidth="0.85" fill="none" />
          <ellipse cx="1506" cy="656" rx="12" ry="9" strokeWidth="0.85" />
          <path d="M 1494,650 L 1514,648 L 1510,660" strokeWidth="0.7" />
          <path d="M 1568,796 C 1558,804 1552,810 1558,818 C 1564,826 1574,820 1578,814" strokeWidth="0.7" fill="none" />
        </g>

        {/* COMPASS ROSE — lower right */}
        <g stroke="#1a0d00">
          <circle cx="1754" cy="884" r="60" strokeWidth="0.5" fill="none" />
          <circle cx="1754" cy="884" r="50" strokeWidth="0.35" fill="none" />
          <circle cx="1754" cy="884" r="8" strokeWidth="0.6" fill="#1a0d00" fillOpacity="0.08" />
          {/* N arrow (filled) */}
          <path d="M 1754,824 L 1746,868 L 1754,860 L 1762,868 Z" fill="#1a0d00" fillOpacity="0.6" stroke="#1a0d00" strokeWidth="0.6" />
          {/* S arrow */}
          <path d="M 1754,944 L 1746,900 L 1754,908 L 1762,900 Z" fill="#1a0d00" fillOpacity="0.2" stroke="#1a0d00" strokeWidth="0.6" />
          {/* W arrow */}
          <path d="M 1694,884 L 1738,876 L 1730,884 L 1738,892 Z" fill="#1a0d00" fillOpacity="0.2" stroke="#1a0d00" strokeWidth="0.6" />
          {/* E arrow */}
          <path d="M 1814,884 L 1770,876 L 1778,884 L 1770,892 Z" fill="#1a0d00" fillOpacity="0.2" stroke="#1a0d00" strokeWidth="0.6" />
          {/* Diagonal lines */}
          <line x1="1754" y1="834" x2="1786" y2="852" strokeWidth="0.4" fill="none" />
          <line x1="1786" y1="852" x2="1804" y2="884" strokeWidth="0.4" fill="none" />
          <line x1="1804" y1="884" x2="1786" y2="916" strokeWidth="0.4" fill="none" />
          <line x1="1786" y1="916" x2="1754" y2="934" strokeWidth="0.4" fill="none" />
          <line x1="1754" y1="934" x2="1722" y2="916" strokeWidth="0.4" fill="none" />
          <line x1="1722" y1="916" x2="1704" y2="884" strokeWidth="0.4" fill="none" />
          <line x1="1704" y1="884" x2="1722" y2="852" strokeWidth="0.4" fill="none" />
          <line x1="1722" y1="852" x2="1754" y2="834" strokeWidth="0.4" fill="none" />
          {/* Cardinal ticks */}
          <line x1="1754" y1="824" x2="1754" y2="944" strokeWidth="0.3" fill="none" />
          <line x1="1694" y1="884" x2="1814" y2="884" strokeWidth="0.3" fill="none" />
          <text x="1754" y="814" textAnchor="middle" fontFamily="serif" fontSize="15" fill="#1a0d00" fillOpacity="0.75" stroke="none">N</text>
          <text x="1754" y="964" textAnchor="middle" fontFamily="serif" fontSize="13" fill="#1a0d00" fillOpacity="0.55" stroke="none">S</text>
          <text x="1822" y="889" textAnchor="middle" fontFamily="serif" fontSize="13" fill="#1a0d00" fillOpacity="0.55" stroke="none">E</text>
          <text x="1686" y="889" textAnchor="middle" fontFamily="serif" fontSize="13" fill="#1a0d00" fillOpacity="0.55" stroke="none">W</text>
        </g>

        {/* MAP TEXT LABELS */}
        <text x="270" y="330" textAnchor="middle" fontFamily="serif" fontSize="14" fontStyle="italic" fill="#1a0d00" fillOpacity="0.55" stroke="none">Mare Occidentalis</text>
        <text x="280" y="620" textAnchor="middle" fontFamily="serif" fontSize="13" fontStyle="italic" fill="#1a0d00" fillOpacity="0.45" stroke="none">Inner Sea</text>
        <text x="1400" y="175" textAnchor="middle" fontFamily="serif" fontSize="14" fontStyle="italic" fill="#1a0d00" fillOpacity="0.55" stroke="none">Mare Orientalis</text>
        <text x="1400" y="600" textAnchor="middle" fontFamily="serif" fontSize="12" fontStyle="italic" fill="#1a0d00" fillOpacity="0.45" stroke="none">Uncharted Waters</text>
        <text x="680" y="590" textAnchor="middle" fontFamily="serif" fontSize="11" fill="#1a0d00" fillOpacity="0.4" stroke="none" letterSpacing="3">TERRA</text>
        <text x="150" y="342" textAnchor="middle" fontFamily="serif" fontSize="10" fill="#1a0d00" fillOpacity="0.4" stroke="none">The West Isles</text>
        <text x="1090" y="210" textAnchor="middle" fontFamily="serif" fontSize="10" fill="#1a0d00" fillOpacity="0.4" stroke="none">Northern Reach</text>

        {/* SCALE BAR — lower left */}
        <g stroke="#1a0d00" fill="#1a0d00">
          <rect x="78" y="988" width="120" height="7" fillOpacity="0.0" strokeWidth="0.7" />
          <rect x="78" y="988" width="60" height="7" fillOpacity="0.4" stroke="none" />
          <line x1="78" y1="984" x2="78" y2="999" strokeWidth="0.7" fill="none" />
          <line x1="138" y1="984" x2="138" y2="999" strokeWidth="0.7" fill="none" />
          <line x1="198" y1="984" x2="198" y2="999" strokeWidth="0.7" fill="none" />
          <text x="138" y="1012" textAnchor="middle" fontFamily="serif" fontSize="10" fillOpacity="0.5" stroke="none">Scale</text>
        </g>

        {/* COASTAL STIPPLE DOTS along main continent top edge */}
        <g fill="#1a0d00" stroke="none">
          {[630,642,654,666,678,690,702,714,726,738,750,762,774,786,798,810,822].map((x,i) => (
            <circle key={"cs"+i} cx={x} cy={54 + (i % 3) * 4} r={i % 2 === 0 ? 1.4 : 0.9} fillOpacity="0.3" />
          ))}
        </g>

      </svg>
    </div>
  );
}


function ScrollServices({ setRoute }) {
  const SERVICES = [
    { num: '01', slug: 'brand-identity',  name: 'Brand Identity',         sub: 'Logo · Visual Language · Guidelines' },
    { num: '02', slug: 'real-estate',     name: 'Real Estate Marketing',   sub: 'Pre-launch · Lead Funnels · Creatives' },
    { num: '03', slug: 'political',       name: 'Political Campaigns',     sub: 'Outreach · IVR · Field Collateral' },
    { num: '04', slug: 'performance',     name: 'Performance Marketing',   sub: 'Meta · Google · YouTube Ads' },
    { num: '05', slug: 'automation',      name: 'Marketing Automation',    sub: 'WhatsApp · CRM · Workflows' },
    { num: '06', slug: 'content-video',   name: 'Content & Production',    sub: 'Reels · Drone · Photography' },
  ];
  const N = SERVICES.length;

  const sectionRef = React.useRef(null);
  const [activeIdx, setActiveIdx] = React.useState(0);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const scrolled = -rect.top;
      const total = el.offsetHeight - window.innerHeight;
      if (total <= 0) return;
      const p = Math.max(0, Math.min(1, scrolled / total));
      setActiveIdx(Math.min(N - 1, Math.floor(p * N)));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, [N]);

  return (
    <section className="ss-section" ref={sectionRef}>
      <div className="ss-sticky">
        <div className="ss-heading">
          <h2>What we <span className="it">do</span></h2>
        </div>
        <div className="ss-center">
          <ul className="ss-list">
            {SERVICES.map((s, i) => (
              <li key={s.num}
                  className={"ss-item" + (i === activeIdx ? " ss-item--active" : "")}
                  onClick={() => setRoute('service/' + s.slug)}
                  style={{ cursor: 'pointer' }}>
                <div className="ss-item-name">{s.name}</div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}


function AuroraHero({ sub, setRoute }) {
  // Scroll-based parallax and fade-out are now handled by GSAP in animations.jsx
  return (
    <section className="aurora-hero">
      <MapBg />
      <div className="aurora-blobs" aria-hidden="true">
        <div className="aurora-blob b1" />
        <div className="aurora-blob b2" />
        <div className="aurora-blob b3" />
      </div>
      <div className="aurora-content">
        <h1 className="aurora-h1">
          <span className="aurora-ln">LOCAL</span>
          <span className="aurora-ln">ROOTS.
            <span className="aurora-frame" aria-hidden="true"><span className="aurora-frame-inner" /></span>
          </span>
          <span className="aurora-ln">GLOBAL</span>
          <span className="aurora-ln aurora-ln-accent">REACH.</span>
        </h1>
        <p className="aurora-sub">{sub}</p>
        <div className="aurora-cta">
          <button className="aurora-btn-primary" onClick={() => setRoute('contact')}>
            Start a project <Arrow size={14} />
          </button>
          <button className="aurora-btn-ghost" onClick={() => setRoute('work')}>
            See our work
          </button>
        </div>
      </div>
      <div className="aurora-footer">
        <span className="aurora-since">Est. 2017 · Ludhiana, Punjab</span>
        <div className="aurora-scroll-cue">
          <span className="aurora-scroll-line" />
        </div>
      </div>
    </section>
  );
}

function HeroBlock({ headline, sub, layout, setRoute }) {
  if (layout === 'aurora') return <AuroraHero sub={sub} setRoute={setRoute} />;
  // Headline gets an italic accent on a key word — last word by default
  const renderHeadline = (text) => {
    const parts = text.trim().split(/\s+/);
    if (parts.length < 2) return text;
    const last = parts.pop();
    return (<>{parts.join(' ')} <span className="it">{last}</span></>);
  };

  return (
    <section className="hero" data-layout={layout}>
      <div className="hero-grid" aria-hidden="true" />
      <HeroSpotlight />
      <div className="wrap">
        <div className="hero-body">
          {/* MARQUEE VARIANT — kinetic words */}
          {layout === 'marquee' ? (
            <>
              <h1>
                <div className="marquee-row">
                  <span>Branding,</span><span className="it">Marketing,</span><span>Automation,</span>
                  <span>Branding,</span><span className="it">Marketing,</span><span>Automation,</span>
                </div>
                <div className="marquee-row alt">
                  <span>Local Roots,</span><span className="it">Global</span><span>Reach.</span>
                  <span>Local Roots,</span><span className="it">Global</span><span>Reach.</span>
                </div>
              </h1>
              <div className="hero-sub-row">
                <p className="hero-sub" style={{ marginTop: 0 }}>{sub}</p>
                <div className="hero-cta">
                  <button className="btn btn-primary btn-large" onClick={() => setRoute('contact')}>
                    Start a project <Arrow size={14} />
                  </button>
                  <button className="btn btn-ghost btn-large" onClick={() => setRoute('work')}>See our work</button>
                </div>
              </div>
            </>
          ) : (
            <>
              <div className="hero-main">
                <h1>{renderHeadline(headline)}</h1>
                <p className="hero-sub">{sub}</p>
                <div className="hero-cta">
                  <button className="btn btn-primary btn-large" onClick={() => setRoute('contact')}>
                    Start a project <Arrow size={14} />
                  </button>
                  <button className="btn btn-ghost btn-large" onClick={() => setRoute('work')}>
                    See selected work
                  </button>
                </div>
              </div>

              <div className="hero-side">
                <Parallax speed={0.12}>
                  <div className="hero-visual">
                    <img
                      src="https://images.unsplash.com/photo-CXLXekF-6EU?w=1200&q=80&auto=format&fit=crop"
                      alt="Harjog Solutions studio"
                      style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--r-lg)' }}
                    />
                  </div>
                </Parallax>
                <div className="hero-meta">
                  <div className="row"><span>Founded</span><span>2017</span></div>
                  <div className="row"><span>Founder</span><span>Satnam Jandu</span></div>
                  <div className="row"><span>Campaigns delivered</span><span>140+</span></div>
                  <div className="row"><span>Avg. lead-cost reduction</span><span>54%</span></div>
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </section>
  );
}

function Strip() {
  const items = ['Ashok Malhotra Group', 'Aman Buildwell', 'MCI India — Mahindra', 'Socializar', 'Lahori Jeera', 'M3M', 'Omaxe', 'HealthOptim', 'Royal Greens Township', 'Bollywood Film Promos'];
  const doubled = [...items, ...items];
  return (
    <div className="strip" aria-label="Selected clients">
      <div className="strip-row">
        {doubled.map((n, i) => <span key={i} className="strip-item">{n}</span>)}
      </div>
    </div>
  );
}

function Capabilities({ setRoute }) {
  return (
    <section id="capabilities">
      <div className="wrap">
        <Reveal className="sec-head">
          <h2><TypeReveal>What we <span className="it">do</span><br />under one roof.</TypeReveal></h2>
          <p className="lede">
            Branding, marketing and automation — handled by one team that talks to each other. No agencies blaming agencies when a campaign underperforms.
          </p>
        </Reveal>
        <div className="cap-grid">
          {CAPABILITIES.map((c, i) => (
            <Reveal key={c.num} className="cap" delay={i * 60} onClick={() => setRoute('services')}>
              <div className="cap-num">{c.num} / 06</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="cap-tags">{c.tags.map(t => <span key={t} className="cap-tag">{t}</span>)}</div>
              <div className="cap-arrow"><Arrow size={14} /></div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkListItem({ w, i, setRoute }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold: 0, rootMargin: '0px 0px -6% 0px' });
    io.observe(ref.current);
    const fallback = setTimeout(() => setSeen(true), 1400);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
  return (
    <div
      ref={ref}
      className={"wl-item" + (seen ? " in" : "")}
      style={{ transitionDelay: seen ? `${i * 70}ms` : '0ms' }}
      onClick={() => setRoute('case/' + w.slug)}
    >
      <div className="wl-thumb">
        <img src={w.image} alt={w.title} loading="lazy" />
      </div>
      <div className="wl-content">
        <h3 className="wl-title">{w.title}</h3>
        <span className="wl-cat">{w.cat} · {w.date}</span>
      </div>
      <span className="wl-arrow"><Arrow size={20} /></span>
    </div>
  );
}

function Work({ setRoute }) {
  return (
    <section id="work" style={{ padding: 'var(--pad-section) 0' }}>
      <div className="wrap">
        <Reveal className="wl-head">
          <span className="wl-head-label">Selected work</span>
          <span className="wl-head-count">{WORK.length} projects</span>
        </Reveal>
        <div className="wl-border-top" />
        {WORK.map((w, i) => (
          <WorkListItem key={w.slug} w={w} i={i} setRoute={setRoute} />
        ))}
        <div style={{ textAlign: 'center', marginTop: 72 }}>
          <button className="btn btn-ghost btn-large" onClick={() => setRoute('work')}>
            View all work <Arrow size={14} />
          </button>
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="process">
      <div className="wrap">
        <Reveal className="sec-head">
          <h2><TypeReveal>How we <span className="it">work</span></TypeReveal></h2>
          <p className="lede">
            Same four-step approach for every engagement. Predictable for you. Lets us focus our energy on the campaign, not the process.
          </p>
        </Reveal>
        <div className="process-steps">
          {PROCESS.map((s, i) => (
            <Reveal key={s.n} className="step" delay={i * 80}>
              <div className="step-num">{s.n}<span className="dot" /></div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const [idx, setIdx] = React.useState(0);
  const total = TESTIMONIALS.length;
  React.useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % total), 3500);
    return () => clearInterval(id);
  }, [total]);
  const prev = () => setIdx(i => (i - 1 + total) % total);
  const next = () => setIdx(i => (i + 1) % total);
  return (
    <section>
      <div className="wrap">
        <Reveal className="sec-head">
          <h2><TypeReveal>What clients <span className="it">say</span></TypeReveal></h2>
        </Reveal>
        <div className="t-slider">
          <div className="t-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
            {TESTIMONIALS.map((t, i) => (
              <div key={t.name} className="tcard">
                <div className="qmark">&ldquo;</div>
                <div className="quote">{t.q}</div>
                <div className="who">
                  <div className="avatar">{t.av}</div>
                  <div className="name">{t.name}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="t-controls">
            <button className="t-btn" onClick={prev}><Arrow size={14} style={{transform:'rotate(180deg)'}} /></button>
            <div className="t-dots">
              {TESTIMONIALS.map((_, i) => (
                <button key={i} className={"t-dot" + (i === idx ? " on" : "")} onClick={() => setIdx(i)} />
              ))}
            </div>
            <button className="t-btn" onClick={next}><Arrow size={14} /></button>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section>
      <div className="wrap">
        <div className="faq-grid">
          <Reveal>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 0 }}>
              <TypeReveal>Common <span className="it">questions</span><br />we hear.</TypeReveal>
            </h2>
            <p style={{ color: 'var(--muted)', marginTop: 28, fontSize: 16, lineHeight: 1.6, maxWidth: 400 }}>
              Don't see yours? <a onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })}
                 style={{ color: 'var(--accent)', cursor: 'pointer', borderBottom: '1px solid currentColor' }}>Ask directly</a> — Satnam usually replies within a day.
            </p>
          </Reveal>
          <Reveal className="faq-list" delay={150}>
            {FAQS.map((f, i) => (
              <div key={i} className={"faq-item" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <div className="faq-icon">
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
                  </div>
                </div>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function CTA({ setRoute, dark = true }) {
  return (
    <section className="cta-band">
      <div className="wrap">
        <Reveal>
          <h2 style={{ marginTop: 0 }}>
            <TypeReveal>Let's build<br />something <span className="it">that lasts.</span></TypeReveal>
          </h2>
          <p>
            A 20-minute call to scope your project. No pitch deck, no obligation — just a useful conversation about your business.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-large" onClick={() => setRoute('contact')}>
              Book intro call <Arrow size={14} />
            </button>
            <button className="btn btn-ghost btn-large" onClick={() => setRoute('about')}>About the studio</button>
          </div>
        </Reveal>
      </div>
      <div className="wordmark" aria-hidden="true">
        <Parallax speed={0.18}>
          <Reveal>
            <img src="harjog-logo-gold.png" alt="Harjog" />
            <div className="wordmark-tag"><span>Local Roots · Global Reach</span></div>
          </Reveal>
        </Parallax>
      </div>
    </section>
  );
}

function HomePage({ tweaks, setRoute }) {
  return (
    <div className="page">
      <HeroBlock
        headline={tweaks.heroHeadline}
        sub={tweaks.heroSub}
        layout={tweaks.heroLayout}
        setRoute={setRoute}
      />
      <Strip />
      <MetricsTicker />
      <ScrollServices setRoute={setRoute} />
      <Work setRoute={setRoute} />
      <Process />
      <Testimonials />
      <FAQ />
      <CTA setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { HomePage, CTA });
