/* DOODEE — site.jsx — root + section components */ const { useState, useEffect, useRef } = React; const { COPY, LINKS, LINE_OA } = window.DOODEE; /* ---------- helpers ---------- */ function useScrolled(threshold = 40) { const [s, setS] = useState(false); useEffect(() => { const f = () => setS(window.scrollY > threshold); f(); window.addEventListener("scroll", f, { passive: true }); return () => window.removeEventListener("scroll", f); }, [threshold]); return s; } function Reveal({ children, delay = 0, as = "div", className = "", style = {} }) { const Tag = as; const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); } function GoldStars({ count = 5 }) { return ( ); } /* Service scenes — each card leads with an evocative illustrated banner */ function SvcScene({ name }) { const svgProps = { viewBox: "0 0 240 140", preserveAspectRatio: "xMidYMid slice", "aria-hidden": true, className: "svc-scene__svg" }; // shared backdrop: purple gradient + soft star field, used inside each scene const Defs = () => ( ); const Backdrop = () => ( {/* star field */} ); // 4-point spark used in several scenes const Spark = ({ cx, cy, s = 4, opacity = 1 }) => ( ); const scenes = { /* NEW: Love Reading — outlined heart with inner glow + stars */ love: ( ), /* NEW: When Will I Meet Love — two dotted paths converging to a heart */ meetlove: ( {/* path origin dots */} {/* meeting heart */} ), /* NEW: Ex Return — hourglass with falling stars */ ex: ( {/* sand top (depleting) */} {/* sand bottom (growing) */} {/* falling grain */} ), /* NEW: Marriage Timing — calendar page with rings on a marked date */ wedding: ( {/* tiny calendar grid dots */} {Array.from({length:4}).map((_,r)=>( Array.from({length:6}).map((_,c)=>( )) ))} {/* highlighted date box */} {/* interlocking rings on the date */} ), /* 1. Marriage — interlocking rings with a spark at the seam */ marriage: ( ), /* 2. Baby — lotus blossom with rising stars */ baby: ( {/* lotus */} {/* base waterline */} {/* outer petals */} {/* middle petals */} {/* bud */} {/* rising stars */} ), /* 3. Business — shopfront with a hanging sign */ biz: ( {/* awning peak */} {/* facade walls */} {/* door */} {/* side windows */} {/* hanging sign */} {/* star on sign */} ), /* 4. Career — mountain peaks with rising sun and dotted ascent */ career: ( {/* sun */} {/* mountain back */} {/* mountain front (snow ridges) */} {/* dotted path */} ), /* 5. Auspicious Timing — calendar page with a starred date */ timing: ( {/* binding rings */} {/* page */} {/* heading line */} {/* grid */} {/* highlighted date — the auspicious day */} ), /* 6. Lucky Phone — phone with floating auspicious digits */ phone: ( {/* digit on screen */} 9 {/* floating digits */} 8 6 3 ), /* 7. Feng Shui — bagua compass over a house */ fengshui: ( {/* house */} {/* bagua */} {/* taiji center */} {/* trigram ticks */} ), /* 8. Birthday Year — zodiac / 12-month wheel with sun */ year: ( {/* outer wheel */} {/* 12 month ticks */} {Array.from({length:12}).map((_,i)=>{ const a = (i / 12) * Math.PI * 2 - Math.PI / 2; const x1 = Math.cos(a) * 34, y1 = Math.sin(a) * 34; const x2 = Math.cos(a) * 42, y2 = Math.sin(a) * 42; return ; })} {/* dots at outer ring */} {Array.from({length:12}).map((_,i)=>{ const a = (i / 12) * Math.PI * 2 - Math.PI / 2; const x = Math.cos(a) * 46, y = Math.sin(a) * 46; return ; })} {/* sun face center */} {/* sun rays */} {Array.from({length:8}).map((_,i)=>{ const a = (i / 8) * Math.PI * 2; const x1 = Math.cos(a) * 14, y1 = Math.sin(a) * 14; const x2 = Math.cos(a) * 18, y2 = Math.sin(a) * 18; return ; })} ), }; return
{scenes[name] || scenes.marriage}
; } /* ---------- nav ---------- */ function Nav({ lang, setLang, t }) { const scrolled = useScrolled(40); const [open, setOpen] = useState(false); return ( ); } /* ---------- hero ---------- */ function Hero({ lang, t }) { const h1Cls = "h1 " + (lang === "th" ? "h1--th" : "h1--en"); return (
{t.hero.eyebrow} {t.hero.h1[0]} {t.hero.h1[1]} {t.hero.tagline} {t.hero.tagline_sub} {t.hero.sub} {t.hero.cta} {t.hero.trust}
ป้าหมอดูดี — DOODEE
{t.hero.caption}
); } /* ---------- trust band ---------- */ function TrustBand({ t }) { return (
{t.trust.map((item, i) => ( {item} {i < t.trust.length - 1 && ·} ))}
); } /* ---------- about ---------- */ function About({ t }) { return (
{t.about.caption}
{t.about.caption_sub}
{t.about.eyebrow} {t.about.h2_a} {t.about.h2_b}
{t.about.body.map((p, i) => ( {p} ))}
{t.about.pull} {t.about.where}
); } /* ---------- why accurate ---------- */ function Accurate({ t }) { return (
{t.accurate.eyebrow} {t.accurate.h2_a} {t.accurate.h2_b} {t.accurate.sub}
{t.accurate.pillars.map((p, i) => (
{p.glyph}

{p.title}

{p.sub}
{p.src_label}
{p.src}
{p.spec_label}
{p.spec}
{p.acc}
 ))}
{t.accurate.closing}
{t.accurate.strip.map((s, i) => ( {s} {i < t.accurate.strip.length - 1 && ·} ))}
); } /* Comparison marks — custom svg, no emoji */ function Mark({ type }) { if (type === "yes") return ( ); if (type === "part") return ( ); return ( ); } function Compare({ t }) { const c = t.compare; return (
{c.eyebrow} {c.h2_a} {c.h2_b} {c.sub} {/* DESKTOP scorecard */}
{/* Header row */}
{c.legend.yes} {c.legend.part} {c.legend.no}
{c.cols.map(col => (
{col.name}
{col.tag}
{col.score}
))}
{/* Rows */} {c.rows.map((row, i) => (
{String(i + 1).padStart(2, "0")}
{row.label}
{row.note}
{c.cols.map(col => (
{row.vals[col.id]}
))}
))}
{/* Floating DOODEE crown over its column */} {/* MOBILE stacked competitor cards */}
{c.cols.map(col => (
{col.name}
{col.tag}
{col.score}
    {c.rows.map((row, i) => (
  • {row.label} {row.vals[col.id]}
    • ))}
))}
{c.punch}
); } /* ---------- pricing ---------- */ function Pricing({ t }) { return (
{t.pricing.eyebrow} {t.pricing.h2} {t.pricing.sub}
{t.pricing.tiers.map((tier, i) => ( {tier.popular &&
{t.pricing.popular_badge}
}
{tier.name}
{tier.sub}
{tier.price} {t.pricing.per}
    {tier.features.map((f, j) => (
  • ✓{f}
    • ))}
{tier.cta} ))}
); } /* ---------- premium services ---------- */ function Services({ t }) { return (
{t.services.eyebrow} {t.services.h2_a} {t.services.h2_b} {t.services.sub}
{t.services.items.map((s, i) => (

{s.name}

{s.en}

{s.desc}

{s.price}
{s.time}
{t.services.cta}
))}
{t.services.strip.map((s, i) => ( {s} {i < t.services.strip.length - 1 && ·} ))}
); } /* ---------- how it works ---------- */ function HowItWorks({ t }) { return (
{t.how.h2}
{t.how.steps.map((s, i) => (
{s.n}

{s.t}

{s.d}

{i < t.how.steps.length - 1 && } ))}
{t.how.cta}
{t.how.cta_sub}
); } /* ---------- testimonials ---------- */ function Testimonials({ t }) { return (
{t.testimonials.eyebrow} {t.testimonials.h2}
{t.testimonials.items.map((it, i) => (
{it.quote}
— {it.attr}
 ))}
{t.testimonials.strip}
); } /* ---------- FAQ accordion ---------- */ function FaqRow({ q, a, idx, open, setOpen }) { const ref = useRef(null); const isOpen = open === idx; return (
{a}
); } function Faq({ t }) { const [open, setOpen] = useState(0); return (
{t.faq.eyebrow} {t.faq.h2}
{t.faq.items.map((it, i) => ( ))}
{t.faq.foot} {t.faq.foot_cta}
); } /* ---------- finale ---------- */ function Finale({ t }) { return (
{t.finale.h2_a} {t.finale.h2_b} {t.finale.sub} {t.finale.cta} {t.finale.cta_sub}
); } /* ---------- footer ---------- */ function Footer({ t }) { return ( ); } /* ---------- root ---------- */ function App() { const [lang, setLang] = useState(() => { try { return localStorage.getItem("doodee_lang") || "th"; } catch (_) { return "th"; } }); useEffect(() => { try { localStorage.setItem("doodee_lang", lang); } catch (_) {} document.documentElement.lang = lang === "th" ? "th" : "en"; document.documentElement.setAttribute("data-lang", lang); }, [lang]); const t = COPY[lang]; return (