"use client" import { useEffect, useState } from "react" import Link from "next/link" import { Special_Elite } from "next/font/google" import { Upload } from "lucide-react" import { cn } from "@/lib/utils" const typewriter = Special_Elite({ weight: "400", subsets: ["latin"] }) const navLinks = [ { label: "Discover", href: "#" }, { label: "Pricing", href: "#" }, { label: "FAQs", href: "#" }, ] const prompts = [ "I'm planning a 7-day trip to Japan in October. I love food, hidden cafés and quiet temples away from the crowds.", "Two weeks backpacking through Peru on a budget – Machu Picchu, street food and a few days in the Sacred Valley.", "A long weekend in Rome with my partner. We love history, wine bars and slow mornings.", "Road trip across Rajasthan in winter. Palaces, markets and one night in the desert.", ] // Cycles through prompts: types, pauses, deletes, moves on. function useTypewriter(lines: string[], enabled: boolean) { const [lineIndex, setLineIndex] = useState(0) const [length, setLength] = useState(0) const [deleting, setDeleting] = useState(false) useEffect(() => { if (!enabled) return const line = lines[lineIndex] let delay = deleting ? 18 : 42 if (!deleting && length === line.length) delay = 2400 if (deleting && length === 0) delay = 400 const timeout = setTimeout(() => { if (!deleting && length === line.length) return setDeleting(true) if (deleting && length === 0) { setDeleting(false) setLineIndex((i) => (i + 1) % lines.length) return } setLength((l) => l + (deleting ? -1 : 1)) }, delay) return () => clearTimeout(timeout) }, [enabled, lines, lineIndex, length, deleting]) return lines[lineIndex].slice(0, length) } interface WandorHeroProps { /** Optional illustration to use instead of the built-in SVG landscape. */ illustrationSrc?: string } export default function WandorHero({ illustrationSrc }: WandorHeroProps) { const [value, setValue] = useState("") const [focused, setFocused] = useState(false) const showDemo = !value && !focused const typed = useTypewriter(prompts, showDemo) return (

{/* Sky clouds */} {/* Landscape */} {illustrationSrc ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( )} {/* Paper grain */} {/* Navigation */}

wandor

{/* Hero content */}

Where will you go next?

Tell our AI where you're going and what you love.
We'll create a personalized itinerary for you.

{/* Prompt box */}

e.preventDefault()} className="mt-12 w-full max-w-3xl rounded-[28px] border-2 border-white/80 bg-white/45 p-5 text-left shadow-[0_8px_40px_-12px_rgba(90,60,30,0.25)] backdrop-blur-sm md:p-7" >

setValue(e.target.value)}
              onFocus={() => setFocused(true)}
              onBlur={() => setFocused(false)}
              rows={3}
              aria-label="Describe your trip"
              placeholder={focused ? "Where to, and what do you love?" : ""}
              className="relative z-10 w-full resize-none bg-transparent text-lg leading-relaxed text-[#8a4a24] placeholder:text-[#b08a6c] focus:outline-none md:text-[22px]"
            />
            {showDemo && (
              <p
                aria-hidden
                className="pointer-events-none absolute inset-0 text-lg leading-relaxed text-[#9a5a33] md:text-[22px]"
              >
                {typed}
                <span className="ml-0.5 inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-pulse bg-[#9a5a33]/70" />
              </p>
            )}
          </div>

<div className="mt-4 flex items-center justify-between">
            <button
              type="button"
              aria-label="Upload a file"
              className="flex h-14 w-14 items-center justify-center rounded-full bg-white text-[#2a2622] shadow-[0_2px_12px_rgba(60,40,20,0.12)] transition-colors hover:bg-[#faf6ef]"
            >
              <Upload className="h-5 w-5" />
            </button>
            <button
              type="submit"
              className="rounded-full bg-black px-8 py-4 text-sm font-medium uppercase tracking-wide text-white transition-transform hover:scale-[1.03] md:text-[17px]"
            >
              Plan my trip
            </button>
          </div>
        </form>
      </div>
    </section>
  )
}

/* ------------------------------------------------------------------ */
/* Decorative pieces                                                   */
/* ------------------------------------------------------------------ */

function PaperGrain() {
  return (
    <svg className="pointer-events-none absolute inset-0 z-10 h-full w-full opacity-[0.35] mix-blend-multiply" aria-hidden>
      <filter id="wandor-grain">
        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" />
        <feColorMatrix values="0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0.35 0" />
      </filter>
      <rect width="100%" height="100%" filter="url(#wandor-grain)" />
    </svg>
  )
}

function SketchClouds() {
  const cloud =
    "M20 90 C0 90 0 60 25 58 C22 30 60 20 78 40 C88 12 140 10 150 42 C170 25 205 38 200 62 C230 60 240 90 210 92 Z"
  return (
    <svg
      className="pointer-events-none absolute inset-0 h-full w-full"
      viewBox="0 0 1600 900"
      preserveAspectRatio="xMidYMin slice"
      aria-hidden
    >
      <g fill="#efe3d6" stroke="#dcc8b6" strokeWidth="1.5" opacity="0.8">
        <path d={cloud} transform="translate(-10 250) scale(1.7 1.2)" />
        <path d={cloud} transform="translate(1180 70) scale(1.9 1.1)" opacity="0.55" />
        <path d={cloud} transform="translate(1320 200) scale(1.2 0.8)" opacity="0.5" />
      </g>
      {/* tiny birds */}
      <g fill="none" stroke="#6b5a48" strokeWidth="1.5" strokeLinecap="round">
        <path d="M360 520 q6 -6 12 0 q6 -6 12 0" />
        <path d="M1260 470 q4 -4 8 0 q4 -4 8 0" />
      </g>
    </svg>
  )
}

const ink = "#4a3a2c"

function LandmarkLandscape({ className }: { className?: string }) {
  return (
    <svg
      className={cn("pointer-events-none", className)}
      viewBox="0 0 1600 520"
      preserveAspectRatio="xMidYMax slice"
      aria-hidden
    >
      <defs>
        <pattern id="wandor-hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
          <line x1="0" y1="0" x2="0" y2="6" stroke={ink} strokeWidth="0.8" opacity="0.35" />
        </pattern>
      </defs>

{/* Distant hills */}
      <path d="M0 330 Q200 250 420 300 T820 280 T1200 300 T1600 260 V520 H0 Z" fill="#d9d2bd" />
      <path d="M560 340 Q700 250 860 300 L860 520 H560 Z" fill="#b9b79b" opacity="0.8" />

{/* Central mountains */}
      <path d="M830 470 L930 290 L975 240 L1020 310 L1080 260 L1210 470 Z" fill="#7f8462" stroke={ink} strokeWidth="1.2" />
      <path d="M930 290 L975 240 L1000 285 L960 360 L905 470 L860 470 Z" fill="#4c3d2e" />
      <path d="M1080 260 L1120 330 L1100 470 L1210 470 Z" fill="#5f6547" />
      <path d="M1020 310 L1080 260 L1210 470 H1000 Z" fill="url(#wandor-hatch)" />

{/* Great Wall fortress on a cliff */}
      <path
        d="M0 520 V270 L40 250 L60 200 L140 195 L170 250 L230 290 L290 330 L340 400 L360 520 Z"
        fill="#b3653c"
        stroke={ink}
        strokeWidth="1.2"
      />
      <path d="M0 520 V330 L70 300 L150 330 L210 380 L260 450 L280 520 Z" fill="#94502f" />
      <path d="M0 270 L40 250 L60 200 L140 195 L170 250 L230 290 L290 330 L340 400 L360 520 H0 Z" fill="url(#wandor-hatch)" />
      {/* tower */}
      <rect x="45" y="140" width="95" height="75" fill="#c07447" stroke={ink} strokeWidth="1.2" />
      <path d="M45 140 v-12 h12 v12 h12 v-12 h12 v12 h12 v-12 h12 v12 h12 v-12 h11 v12" fill="#c07447" stroke={ink} strokeWidth="1.2" />
      <path d="M78 215 V180 A15 15 0 0 1 108 180 V215 Z" fill="#4a2616" />
      <rect x="58" y="158" width="10" height="16" fill="#4a2616" />
      <rect x="118" y="158" width="10" height="16" fill="#4a2616" />
      {/* wall snaking down */}
      <path d="M140 215 L230 245 L300 300" fill="none" stroke="#c07447" strokeWidth="14" />
      <path d="M140 207 l8 3 v-6 l8 3 v6 l8 3 v-6 l8 3 v6 l8 3 v-6 l8 3 v6 l8 3 v-6 l8 3" fill="none" stroke={ink} strokeWidth="1" />

{/* Colosseum */}
      <path d="M350 470 V330 Q520 300 700 285 V470 Z" fill="#b8683f" stroke={ink} strokeWidth="1.4" />
      <path d="M350 330 Q520 300 700 285 V300 Q520 316 350 346 Z" fill="#c9804f" stroke={ink} strokeWidth="1" />
      <Arches x={362} y={352} count={13} w={18} h={30} gap={7} />
      <Arches x={362} y={393} count={13} w={18} h={30} gap={7} />
      <Arches x={362} y={434} count={13} w={18} h={30} gap={7} />
      <path d="M350 348 H700 M350 388 H700 M350 429 H700" stroke={ink} strokeWidth="1.4" />
      <path d="M350 330 V470 H700 V285" fill="url(#wandor-hatch)" />
      {/* broken ruin edge */}
      <path d="M640 290 L650 275 L660 288 L672 272 L684 286 L700 270 V285 Z" fill="#b8683f" stroke={ink} strokeWidth="1" />

{/* Chichen Itza pyramid */}
      {[0, 1, 2, 3, 4, 5].map((i) => (
        <rect
          key={i}
          x={712 + i * 12}
          y={452 - i * 26}
          width={196 - i * 24}
          height={26}
          fill={i % 2 ? "#e2d6c1" : "#d6c7ad"}
          stroke={ink}
          strokeWidth="1.1"
        />
      ))}
      <rect x="784" y="296" width="52" height="30" fill="#e2d6c1" stroke={ink} strokeWidth="1.1" />
      <rect x="802" y="306" width="16" height="20" fill="#4a3a2c" />
      <rect x="792" y="326" width="36" height="152" fill="#eee5d6" stroke={ink} strokeWidth="1.1" />
      {Array.from({ length: 22 }, (_, i) => (
        <line key={i} x1="792" x2="828" y1={332 + i * 6.8} y2={332 + i * 6.8} stroke={ink} strokeWidth="0.7" />
      ))}

{/* Taj Mahal */}
      <rect x="1215" y="440" width="345" height="30" fill="#ebe3d4" stroke={ink} strokeWidth="1.2" />
      <rect x="1300" y="352" width="170" height="88" fill="#f1eadc" stroke={ink} strokeWidth="1.2" />
      <path d="M1365 440 V392 Q1385 366 1405 392 V440 Z" fill="#cdbfa6" stroke={ink} strokeWidth="1.1" />
      <path d="M1318 440 V410 Q1330 396 1342 410 V440 Z M1428 440 V410 Q1440 396 1452 410 V440 Z" fill="#d9ccb5" stroke={ink} strokeWidth="1" />
      <path d="M1318 395 V380 Q1330 368 1342 380 V395 Z M1428 395 V380 Q1440 368 1452 380 V395 Z" fill="#d9ccb5" stroke={ink} strokeWidth="1" />
      <rect x="1350" y="340" width="70" height="14" fill="#f1eadc" stroke={ink} strokeWidth="1" />
      <path d="M1338 340 C1325 290 1368 262 1385 250 C1402 262 1445 290 1432 340 Z" fill="#f4eee2" stroke={ink} strokeWidth="1.3" />
      <path d="M1385 250 V222 M1379 232 H1391" stroke={ink} strokeWidth="1.4" />
      <path d="M1360 338 C1355 300 1372 278 1385 268 M1410 338 C1415 300 1398 278 1385 268" fill="none" stroke={ink} strokeWidth="0.6" opacity="0.5" />
      {[1318, 1452].map((cx) => (
        <g key={cx}>
          <rect x={cx - 11} y="336" width="22" height="16" fill="#f1eadc" stroke={ink} strokeWidth="1" />
          <path d={`M${cx - 13} 336 Q${cx} 310 ${cx + 13} 336 Z`} fill="#f4eee2" stroke={ink} strokeWidth="1" />
        </g>
      ))}
      {[1238, 1532].map((mx) => (
        <g key={mx}>
          <rect x={mx - 6} y="300" width="12" height="140" fill="#f1eadc" stroke={ink} strokeWidth="1.1" />
          <path d={`M${mx - 9} 340 H${mx + 9} M${mx - 9} 380 H${mx + 9} M${mx - 9} 300 H${mx + 9}`} stroke={ink} strokeWidth="1.2" />
          <path d={`M${mx - 9} 300 Q${mx} 280 ${mx + 9} 300 Z`} fill="#f4eee2" stroke={ink} strokeWidth="1" />
          <line x1={mx} y1="283" x2={mx} y2="274" stroke={ink} strokeWidth="1.2" />
        </g>
      ))}

{/* Christ the Redeemer on a hill */}
      <path d="M1440 520 Q1520 400 1600 370 V520 Z" fill="#a9ae8c" stroke={ink} strokeWidth="1.2" />
      <g transform="translate(-40 0)">
        <path d="M1536 395 L1540 340 H1574 L1578 395 Z" fill="#8a7a66" stroke={ink} strokeWidth="1.1" />
        <path d="M1546 340 L1543 262 C1540 258 1574 258 1571 262 L1568 340 Z" fill="#e8dcc6" stroke={ink} strokeWidth="1.1" />
        <path d="M1500 262 Q1557 252 1614 262 L1612 272 Q1557 264 1502 272 Z" fill="#e8dcc6" stroke={ink} strokeWidth="1.1" />
        <circle cx="1557" cy="248" r="10" fill="#e8dcc6" stroke={ink} strokeWidth="1.1" />
        <path d="M1552 272 L1550 336 M1562 272 L1564 336" stroke={ink} strokeWidth="0.7" opacity="0.6" />
      </g>

{/* Trees */}
      <Tree x={300} y={318} r={36} fill="#8b8f68" />
      <Tree x={255} y={360} r={26} fill="#6f7552" />
      <Tree x={690} y={380} r={30} fill="#9c9f7a" />
      <Tree x={1175} y={392} r={34} fill="#7f8462" />
      <Cypress x={930} y={440} h={100} fill="#6f7552" />
      <Cypress x={1110} y={430} h={120} fill="#a6603a" />
      <Cypress x={1262} y={440} h={80} fill="#7f8462" />
      <Cypress x={1500} y={448} h={70} fill="#b3653c" />

{/* Foreground ground & path */}
      <path d="M0 470 Q300 440 600 468 T1200 458 T1600 450 V520 H0 Z" fill="#b9ae88" stroke={ink} strokeWidth="1.2" />
      <path d="M0 490 Q200 470 400 500 L400 520 H0 Z" fill="#8a8f68" />
      <path d="M1180 520 Q1260 480 1350 470 Q1420 470 1470 490 L1520 520 Z" fill="#c89663" stroke={ink} strokeWidth="1" />
      <path d="M1320 520 L1370 478 M1340 520 L1390 480 M1360 520 L1405 482 M1380 520 L1420 485" stroke={ink} strokeWidth="1" />

{/* Foreground leaves */}
      <g fill="#4d5236" stroke={ink} strokeWidth="1">
        <path d="M60 520 Q40 470 90 440 Q80 480 70 520 Z" />
        <path d="M110 520 Q120 470 170 455 Q140 490 130 520 Z" />
        <path d="M200 520 Q180 490 230 475 Q220 500 215 520 Z" fill="#6f7552" />
        <path d="M1560 520 Q1540 470 1590 450 Q1580 490 1575 520 Z" />
        <path d="M1520 520 Q1500 480 1545 465 Q1535 495 1535 520 Z" fill="#6f7552" />
      </g>

{/* Sparkle marks */}
      <g stroke={ink} strokeWidth="2" strokeLinecap="round">
        <path d="M270 212 l-10 -6 M290 200 l-2 -12 M310 208 l8 -8" />
        <path d="M1085 225 l-4 -12 M1100 222 l6 -10" />
      </g>
    </svg>
  )
}
</article></body></html>

Wandor Hero