// app.jsx — Ashkon Group Real Estate · Luxury Redesign
// Single-page experience. Original design — not a recreation of any branded UI.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "still",
  "listings": "uniform",
  "density": "regular",
  "type": "cormorant-inter",
  "background": "matte",
  "palette": "yellow",
  "paper": "dark"
} /*EDITMODE-END*/;

// ───────────────────────────────────────────────────────────────────────────
// Scroll-reveal helper. Uses IntersectionObserver; once visible we add a class
// and stop observing so we don't replay reveals on scroll-up.
// ───────────────────────────────────────────────────────────────────────────
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('[data-reveal]');
    if (!('IntersectionObserver' in window)) {
      els.forEach((e) => e.classList.add('is-in'));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {
          en.target.classList.add('is-in');
          io.unobserve(en.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

// ───────────────────────────────────────────────────────────────────────────
// Sticky nav: shrinks + gains chrome after the hero leaves the viewport.
// ───────────────────────────────────────────────────────────────────────────
function useScrolled(threshold = 80) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > threshold);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [threshold]);
  return scrolled;
}

function Monogram() {
  // Stylized "AB" monogram for Ashkon Babaee — interlocked serif initials in a circle
  return (
    <svg width="40" height="40" viewBox="0 0 40 40" aria-hidden="true" className="monogram">
      <circle cx="20" cy="20" r="19" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.4" />
      <circle cx="20" cy="20" r="16" fill="none" stroke="currentColor" strokeWidth="0.4" opacity="0.25" />
      {/* A */}
      <path d="M9 28 L15.5 11 L22 28 M11.6 22 H19.4" fill="none" stroke="currentColor" strokeWidth="0.85" strokeLinecap="round" strokeLinejoin="round" />
      {/* B - overlapping */}
      <path d="M22 11 H27 Q31 11 31 14.5 Q31 18 27 18.5 Q31.5 19 31.5 23 Q31.5 28 26.5 28 H22 Z M22 18.5 H27" fill="none" stroke="currentColor" strokeWidth="0.85" strokeLinecap="round" strokeLinejoin="round" />
      {/* center jewel */}
      <circle cx="20" cy="20" r="0.6" fill="currentColor" />
    </svg>);

}

function Nav() {
  const scrolled = useScrolled(80);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const close = () => setMenuOpen(false);
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem('ashkon-theme') || 'dark'; } catch (e) { return 'dark'; }
  });
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('ashkon-theme', theme); } catch (e) {}
  }, [theme]);
  const toggleTheme = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
  return (
    <header className={`nav ${scrolled ? 'is-scrolled' : ''} ${menuOpen ? 'menu-open' : ''}`}>
      <div className="nav-utility">
        <button
          className="theme-toggle"
          onClick={toggleTheme}
          aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
          {theme === 'dark' ? (
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.4">
              <circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19" strokeLinecap="round" />
            </svg>
          ) : (
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" strokeLinejoin="round" />
            </svg>
          )}
        </button>
        <button
          className="nav-burger"
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(o => !o)}>
          <span /><span /><span />
        </button>
      </div>
      <div className="nav-inner">
        <a href="#top" className="brand" onClick={close}>
          <img className="brand-logo" src={theme === 'light' ? 'assets/images-from-live/logo-gold-light.png' : IMG['logo']} alt="Ashkon Babaee Group" />
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="#collection">Listings</a>
          <a href="#about">About</a>
          <a href="#voices">Clients</a>
          <a href="#consult">Contact</a>
        </nav>
        <div className="nav-right">
          <button
            className="theme-toggle theme-toggle-desktop"
            onClick={toggleTheme}
            aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}>
            {theme === 'dark' ? (
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.4">
                <circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19" strokeLinecap="round" />
              </svg>
            ) : (
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" strokeLinejoin="round" />
              </svg>
            )}
          </button>
          <div className="nav-contact">
            <a href="tel:9492939955" className="nav-cta" aria-label="Call 949 293 9955">
              <span className="nav-cta-full">949 · 293 · 9955</span>
              <span className="nav-cta-short">Call or Text</span>
              <i aria-hidden="true">→</i>
            </a>
            <span className="nav-dre">DRE #02048293</span>
          </div>
        </div>
      </div>
      <div className="nav-drawer" aria-hidden={!menuOpen}>
        <a href="#collection" onClick={close}>Listings</a>
        <a href="#about" onClick={close}>About</a>
        <a href="#voices" onClick={close}>Clients</a>
        <a href="#consult" onClick={close}>Contact</a>
      </div>
    </header>);

}

// ───────────────────────────────────────────────────────────────────────────
// Hero — three variants
// ───────────────────────────────────────────────────────────────────────────
function HeroStill() {
  return (
    <section className="hero hero-still" data-screen-label="01 Hero · Still">
      <div className="hero-bg" aria-hidden="true">
        <video
          className="hero-video"
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          poster="assets/video/ashkon-hero-poster.jpg?v=3">
          <source src="assets/video/ashkon-hero.mp4?v=3" type="video/mp4" />
        </video>
        <div className="hero-vignette" />
      </div>
      <div className="hero-grid">
        <h1 className="hero-h1" data-reveal>
          <span className="line">The most</span>
          <span className="line"><em>beautiful</em> stretch</span>
          <span className="line">of <em>California.</em></span>
        </h1>
        <div className="hero-foot" data-reveal>
          <p className="hero-lede">
            Experienced &amp; uncompromising representation for luxury homes
            across Newport Coast, Laguna Niguel &amp; the OC coastline.
          </p>
          <div className="hero-actions">
            <a href="#collection" className="btn btn-gold">Purchase Your Home</a>
            <a href="#consult" className="btn btn-ghost">Sell Your Home</a>
          </div>
        </div>
      </div>
      <div className="hero-marquee" aria-hidden="true">
        <div className="marquee-track">
          {Array.from({ length: 2 }).map((_, k) =>
          <div className="marquee-row" key={k}>
              <span>Newport Coast</span><i>✦</i>
              <span>Pelican Crest</span><i>✦</i>
              <span>Laguna Niguel</span><i>✦</i>
              <span>San Juan Capistrano</span><i>✦</i>
              <span>Coto de Caza</span><i>✦</i>
              <span>San Clemente</span><i>✦</i>
              <span>La Quinta</span><i>✦</i>
              <span>Irvine</span><i>✦</i>
              <span>Costa Mesa</span><i>✦</i>
              <span>Santa Ana</span><i>✦</i>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function HeroSplit() {
  return (
    <section className="hero hero-split" data-screen-label="01 Hero · Split">
      <div className="split-grid">
        <div className="split-left">
          <span className="eyebrow" data-reveal>
            <i className="dot" /> Featured · 31 Seawatch · Newport Coast
          </span>
          <h1 className="hero-h1 hero-h1-split" data-reveal>
            A house is shelter.<br />
            <em>A coastline</em><br />
            is a <em>position.</em>
          </h1>
          <p className="hero-lede" data-reveal>
            Ashkon Babaee specializes in selling and marketing
            iconic properties to a network of high net-worth clients —
            uncompromising professionalism, full digital reach,
            results in days, not months.
          </p>
          <div className="hero-actions" data-reveal>
            <a href="#collection" className="btn btn-gold">View Listings</a>
            <a href="#consult" className="btn btn-ghost">Private Consultation</a>
          </div>
          <dl className="hero-stats" data-reveal>
            <div><dt>Avg Days on Market</dt><dd>VI</dd></div>
            <div><dt>Over Asking</dt><dd>$305K<sup>+</sup></dd></div>
            <div><dt>Five-Star Reviews</dt><dd>100%</dd></div>
          </dl>
        </div>
        <div className="split-right" data-reveal>
          <PlaceholderArt label="HERO · 31 SEAWATCH / NEWPORT COAST" tone="portrait" src={IMG['seawatch-hero']} />
          <div className="split-tag">
            <span className="cap">Asking</span>
            <strong>$12,588,888</strong>
          </div>
        </div>
      </div>
    </section>);

}

function HeroEditorial() {
  return (
    <section className="hero hero-editorial" data-screen-label="01 Hero · Editorial">
      <div className="ed-top">
        <span className="cap">Vol. XXIV · No. 02</span>
        <span className="cap">The Spring Collection · 2026</span>
        <span className="cap">№ 0001</span>
      </div>
      <h1 className="hero-h1 hero-h1-ed" data-reveal>
        <span className="line">The Pacific</span>
        <span className="line"><em>Coast</em>, by</span>
        <span className="line">appointment.</span>
      </h1>
      <div className="ed-grid">
        <div className="ed-fig ed-fig-1" data-reveal>
          <PlaceholderArt label="PELICAN CREST · 11 SHORERIDGE" tone="square" src={IMG['pelican-crest']} />
          <span className="cap">i. Pelican Crest</span>
        </div>
        <div className="ed-copy" data-reveal>
          <p className="hero-lede">
            A small portfolio of OC residences, each shown in person
            by Ashkon Babaee. From Newport Coast to San Juan Capistrano —
            Pacific-facing, privately listed, available to qualified buyers.
          </p>
          <a href="#collection" className="btn btn-gold">View the Collection</a>
        </div>
        <div className="ed-fig ed-fig-2" data-reveal>
          <PlaceholderArt label="SEAWATCH · DETAIL" tone="tall" src={IMG['detail-brass']} />
          <span className="cap">ii. Seawatch · No. 28</span>
        </div>
        <div className="ed-fig ed-fig-3" data-reveal>
          <PlaceholderArt label="LAGUNA NIGUEL · HORIZON" tone="wide" src={IMG['laguna-horizon']} />
          <span className="cap">iii. Laguna Niguel, 6:42pm</span>
        </div>
      </div>
    </section>);

}

function Hero({ variant }) {
  if (variant === 'split') return <HeroSplit />;
  if (variant === 'editorial') return <HeroEditorial />;
  return <HeroStill />;
}

// ───────────────────────────────────────────────────────────────────────────
// Imagery — pulled from the live ashkongroup.com site (assets/images-from-live).
// ───────────────────────────────────────────────────────────────────────────
const IMG = {
  // Hero · Spanish-style luxury estate (Ashkon listing)
  'hero-malabar': 'assets/images-from-live/ashkon-hero-update-1.webp',
  // Featured property (split hero) — Brownsbury drone shot
  'seawatch-hero': 'assets/images-from-live/brownsbury-drone.webp',
  // Editorial figs
  'pelican-crest': 'assets/images-from-live/sundial-26.webp',
  'detail-brass': 'assets/images-from-live/sundial-23.webp',
  'laguna-horizon': 'assets/images-from-live/property-040.webp',
  // Listings — real MLS images from Rover IDX
  'p1': 'assets/images-from-live/mls-mountain-view.webp',   // 81935 Mountain View · La Quinta
  'p2': 'assets/images-from-live/mls-jenet.webp',           // 13692 Jenet · Santa Ana
  'p3': 'assets/images-from-live/mls-manera-ventosa.webp',  // 1415 Manera Ventosa · San Clemente
  'p4': 'assets/images-from-live/mls-junipero.webp',        // 913 Junipero · Costa Mesa
  'p5': 'assets/images-from-live/mls-gentle-breeze.webp',   // 1 Gentle Breeze · Newport Coast (rental)
  'p6': 'assets/images-from-live/sundial-23.webp',           // 61 Gingerwood · Irvine (no MLS image yet — placeholder)
  // Additional listing imagery available
  'p7': 'assets/images-from-live/listing-02.webp',
  'p8': 'assets/images-from-live/listing-03.webp',
  'p9': 'assets/images-from-live/listing-04.webp',
  'p10': 'assets/images-from-live/listing-05.webp',
  'p11': 'assets/images-from-live/listing-06.webp',
  // About — Ashkon's actual headshot from the live site
  'about-portrait': 'assets/images-from-live/Ashkon-Profile-2.webp',
  // Consult bg — luxury home exterior
  'consult-bg': 'assets/images-from-live/brownsbury-drone-large.webp',
  // Brand assets
  'logo': 'assets/images-from-live/logo-gold-v2.png',
  'signature': 'assets/images-from-live/signature.jpg'
};

function PlaceholderArt({ label, tone = 'square', src }) {
  return (
    <div className={`ph ph-${tone}`} role="img" aria-label={label}>
      {src ?
      <img className="ph-img" src={src} alt={label} loading="lazy" /> :

      <div className="ph-fallback" aria-hidden="true" />
      }
      <div className="ph-tint" aria-hidden="true" />
      <span className="ph-corner tl">┌</span>
      <span className="ph-corner tr">┐</span>
      <span className="ph-corner bl">└</span>
      <span className="ph-corner br">┘</span>
      <span className="ph-label">{label}</span>
    </div>);

}

// ───────────────────────────────────────────────────────────────────────────
// Featured Properties
// ───────────────────────────────────────────────────────────────────────────
// Real active listings from the Ashkon Group IDX/MLS feed (live as of session date)
const PROPERTIES = [
{
  id: 'p1',
  name: '81935 Mountain View',
  sub: 'La Quinta · CA 92253',
  price: '$3,989,000',
  beds: 6, baths: 7, sqft: '5,227',
  tag: 'For Sale',
  label: 'LISTING 01 · MOUNTAIN VIEW / LA QUINTA',
  tone: 'square'
},
{
  id: 'p2',
  name: '13692 Jenet',
  sub: 'Santa Ana · CA 92705',
  price: '$2,699,999',
  beds: 4, baths: 3, sqft: '3,640',
  tag: 'For Sale',
  label: 'LISTING 02 · JENET / SANTA ANA',
  tone: 'square'
},
{
  id: 'p3',
  name: '1415 Manera Ventosa',
  sub: 'San Clemente · CA 92673',
  price: '$2,199,000',
  beds: 5, baths: 4, sqft: '2,946',
  tag: 'For Sale',
  label: 'LISTING 03 · MANERA VENTOSA / SAN CLEMENTE',
  tone: 'square'
},
{
  id: 'p4',
  name: '913 Junipero',
  sub: 'Costa Mesa · CA 92626',
  price: '$1,795,000',
  beds: 4, baths: 2, sqft: '1,600',
  tag: 'For Sale',
  label: 'LISTING 04 · JUNIPERO / COSTA MESA',
  tone: 'square'
},
{
  id: 'p5',
  name: '1 Gentle Breeze',
  sub: 'Newport Coast · CA 92657',
  price: '$12,800 / mo',
  beds: 3, baths: 3, sqft: '2,812',
  tag: 'For Lease',
  label: 'LISTING 05 · GENTLE BREEZE / NEWPORT COAST',
  tone: 'square'
},
{
  id: 'p6',
  name: '61 Gingerwood',
  sub: 'Irvine · CA 92603',
  price: '$4,500 / mo',
  beds: 2, baths: 2, sqft: '1,622',
  tag: 'For Lease',
  label: 'LISTING 06 · GINGERWOOD / IRVINE',
  tone: 'square'
}];

// Past notable sales — for the "Recently Sold" gallery strip
const PAST_SALES = [
{ id: 'g1', name: '30732 Hunt Club Drive', sub: 'San Juan Capistrano', img: 'assets/images-from-live/listing-07.webp' },
{ id: 'g2', name: '28595 Jaeger Drive', sub: 'Laguna Niguel', img: 'assets/images-from-live/listing-08.webp' },
{ id: 'g3', name: '5 Wayside', sub: 'Newport Coast', img: 'assets/images-from-live/listing-09.webp' },
{ id: 'g4', name: '9 Rue Delacroix', sub: 'Coto de Caza', img: 'assets/images-from-live/listing-10.webp' },
{ id: 'g5', name: '28 Seawatch', sub: 'Newport Coast', img: 'assets/images-from-live/listing-11.webp' },
{ id: 'g6', name: '11 Shoreridge', sub: 'Pelican Crest · Newport Coast', img: 'assets/images-from-live/property-040.webp' }];


function PropertyCard({ p, big = false }) {
  return (
    <a href="#" className={`card ${big ? 'card-big' : ''}`} data-reveal>
      <div className="card-img">
        <PlaceholderArt label={p.label} tone={p.tone} src={IMG[p.id]} />
        <span className="card-tag">{p.tag}</span>
        <span className="card-num">№ {p.id.replace('p', '0')}</span>
      </div>
      <div className="card-body">
        <div className="card-head">
          <h3 className="card-name">{p.name}</h3>
          <span className="card-price">{p.price}</span>
        </div>
        <p className="card-sub">{p.sub}</p>
        <ul className="card-specs">
          <li><span>{p.beds}</span> Bed</li>
          <li className="sep" aria-hidden="true">·</li>
          <li><span>{p.baths}</span> Bath</li>
          <li className="sep" aria-hidden="true">·</li>
          <li><span>{p.sqft}</span> Sq Ft</li>
        </ul>
        <span className="card-arrow" aria-hidden="true">View Residence →</span>
      </div>
    </a>);

}

function CollectionEditorial() {
  // Asymmetric editorial: 12-col grid with hand-tuned spans
  return (
    <div className="grid-editorial">
      <div className="ge-1"><PropertyCard p={PROPERTIES[0]} big /></div>
      <div className="ge-2"><PropertyCard p={PROPERTIES[1]} /></div>
      <div className="ge-3"><PropertyCard p={PROPERTIES[2]} /></div>
      <div className="ge-4"><PropertyCard p={PROPERTIES[3]} /></div>
      <div className="ge-5"><PropertyCard p={PROPERTIES[4]} /></div>
      <div className="ge-6"><PropertyCard p={PROPERTIES[5]} big /></div>
    </div>);

}

function CollectionUniform() {
  return (
    <div className="grid-uniform">
      {PROPERTIES.map((p) =>
      <div key={p.id}><PropertyCard p={p} /></div>
      )}
    </div>);

}

function CollectionStacked() {
  return (
    <div className="grid-stacked">
      {PROPERTIES.map((p, i) =>
      <article key={p.id} className={`row ${i % 2 ? 'row-r' : 'row-l'}`} data-reveal>
          <div className="row-fig">
            <PlaceholderArt label={p.label} tone={i % 3 === 0 ? 'wide' : 'square'} src={IMG[p.id]} />
            <span className="card-num">№ {p.id.replace('p', '0')}</span>
          </div>
          <div className="row-body">
            <span className="cap">{p.tag}</span>
            <h3 className="row-name">{p.name}</h3>
            <p className="row-sub">{p.sub}</p>
            <ul className="card-specs">
              <li><span>{p.beds}</span> Bed</li>
              <li className="sep">·</li>
              <li><span>{p.baths}</span> Bath</li>
              <li className="sep">·</li>
              <li><span>{p.sqft}</span> Sq Ft</li>
            </ul>
            <div className="row-foot">
              <span className="row-price">{p.price}</span>
              <a href="#" className="btn btn-ghost btn-sm">View Residence</a>
            </div>
          </div>
        </article>
      )}
    </div>);

}

function Collection({ variant }) {
  return (
    <section id="collection" className="section section-collection" data-screen-label="02 Collection">
      <div className="section-head" data-reveal>
        <div className="head-l">
          <span className="eyebrow"><i className="rule" />Our Listings</span>
          <h2 className="h2">Currently Represented.</h2>
        </div>
        <p className="head-r">
          Live listings from the Ashkon Babaee Group portfolio across
          Orange County. Each shown in person, by appointment.
          Sourced directly from the California Regional MLS.
        </p>
      </div>
      {variant === 'uniform' && <CollectionUniform />}
      {variant === 'stacked' && <CollectionStacked />}
      {variant === 'editorial' && <CollectionEditorial />}
      <div className="section-foot" data-reveal>
        <span className="cap">Active inventory · Sourced from California Regional MLS</span>
        <a href="https://ashkongroup.com/our-listings/" target="_blank" rel="noopener" className="btn btn-ghost">View All Listings →</a>
      </div>
    </section>);

}

// ───────────────────────────────────────────────────────────────────────────
// Recently Sold — past wins gallery (social proof)
// ───────────────────────────────────────────────────────────────────────────
function PastSales() {
  return (
    <section id="past-sales" className="section section-past" data-screen-label="02b Recently Sold">
      <div className="section-head" data-reveal>
        <div className="head-l">
          <span className="eyebrow"><i className="rule" />Recently Sold</span>
          <h2 className="h2">A record of <em>results.</em></h2>
        </div>
        <p className="head-r">
          A selection of properties recently represented by the Babaee Group — from
          Pelican Crest to Coto de Caza. Each closed on strong terms for our clients,
          often above asking and ahead of schedule.
        </p>
      </div>
      <div className="past-grid" data-reveal>
        {PAST_SALES.map((s) =>
          <figure key={s.id} className="past-tile">
            <div className="past-img">
              <img src={s.img} alt={s.name} loading="lazy" />
              <span className="past-stamp">SOLD</span>
            </div>
            <figcaption>
              <span className="past-name">{s.name}</span>
              <span className="past-sub">{s.sub}</span>
            </figcaption>
          </figure>
        )}
      </div>
    </section>);
}

// ───────────────────────────────────────────────────────────────────────────
// About / Brand Story
// ───────────────────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" className="section section-about" data-screen-label="03 About">
      <div className="about-grid about-grid-team">
        <div className="about-fig about-fig-team" data-reveal>
          <img className="about-img" src="assets/images-from-live/babaee-couple.webp" alt="Ashkon &amp; Maryam Babaee" loading="lazy" />
          <span className="cap about-cap">Ashkon &amp; Maryam Babaee · Orange County</span>
        </div>
        <div className="about-copy">
          <span className="eyebrow" data-reveal><i className="rule" />The Babaee Group</span>
          <h2 className="h2 about-h2" data-reveal>
            Selling iconic homes to a <em>trusted</em> network.
          </h2>
          <div className="about-body" data-reveal style={{ fontFamily: "Fraunces" }}>
            <p>
              For Ashkon and Maryam Babaee, real estate is more than a
              transaction &mdash; it&rsquo;s a deeply personal craft.
              Together they bring heart and hustle to every relationship,
              guiding clients through what is often the most important
              decision of their lives with care, communication, and
              unwavering attention to detail.
            </p>
            <p>
              <strong>Ashkon</strong>, founder and President of the
              Babaee Group, specializes in marketing iconic properties
              along the Orange County coastline. His combination of
              uncompromising professionalism and a sharp digital strategy
              consistently delivers top-dollar results for sellers and
              opens private doors for buyers.
            </p>
            <p>
              <strong>Maryam</strong>, a UCI-trained pharmaceutical
              scientist turned luxury agent, brings a rare blend of
              analytical rigor and warmth to the partnership. Her deep
              understanding of Orange County&rsquo;s coastal neighborhoods
              gives clients a strategic edge &mdash; and her instinct
              for people turns every transaction into a relationship.
            </p>
            <p className="about-sig">&mdash; Ashkon &amp; Maryam Babaee</p>
          </div>
        </div>
      </div>
    </section>);

}

// ───────────────────────────────────────────────────────────────────────────
// Testimonials
// ───────────────────────────────────────────────────────────────────────────
// Real client testimonials — adapted from Zillow reviews on the live site
const VOICES = [
{
  quote: "Ashkon Group sold my home in 6 days. I would give them 10 stars if I could. They made me feel like a VIP — best service, hardworking, and honest. Goes the extra mile for everything.",
  name: 'Samira M.',
  role: 'Seller · Orange County'
},
{
  quote: "Ashkon sold our home in 4 days for $305,000 over asking. He always showed up extremely well dressed, professional and kind — a great negotiator and a trusted agent.",
  name: 'Anthony A.',
  role: 'Seller · South OC'
},
{
  quote: "He is a gentleman in every aspect — knowledge, style and accuracy stand above all. His responsiveness was incredible; if he didn't pick up, he called back within five minutes.",
  name: 'Maria V.',
  role: 'Seller · Newport Coast'
}];


function Voices() {
  return (
    <section id="voices" className="section section-voices" data-screen-label="04 Voices">
      <div className="section-head" data-reveal>
        <div className="head-l">
          <span className="eyebrow"><i className="rule" />Our Happy Clients</span>
          <h2 className="h2">Five stars, in their <em>own</em> words.</h2>
        </div>
        <p className="head-r">
          Verified Zillow reviews from buyers and sellers
          across Orange County &mdash; over a decade of
          consistent, five-star service.
        </p>
      </div>
      <div className="voices-grid">
        {VOICES.map((v, i) =>
        <figure key={i} className="voice" data-reveal>
            <span className="voice-quote-mark" aria-hidden="true">“</span>
            <blockquote className="voice-quote">{v.quote}</blockquote>
            <figcaption className="voice-cap">
              <span className="voice-rule" />
              <strong>{v.name}</strong>
              <span>{v.role}</span>
            </figcaption>
          </figure>
        )}
      </div>
    </section>);

}

// ───────────────────────────────────────────────────────────────────────────
// Consultation CTA
// ───────────────────────────────────────────────────────────────────────────
function Consult() {
  const [interest, setInterest] = React.useState('buy');
  return (
    <section id="consult" className="section section-consult" data-screen-label="05 Consultation">
      <div className="consult-bg" aria-hidden="true">
        <PlaceholderArt label="STILL · COASTAL CALIFORNIA" tone="hero" src={IMG['consult-bg']} />
        <div className="hero-vignette" />
      </div>
      <div className="consult-inner">
        <div className="consult-l" data-reveal>
          <span className="eyebrow"><i className="dot" />Let's Connect</span>
          <h2 className="h2 consult-h2">
            Start the <em>conversation.</em>
          </h2>
          <p className="consult-lede">
            Whether you're buying, selling, or just exploring what's possible
            in the Orange County market, Ashkon and Maryam will respond
            personally within twenty-four hours.
          </p>
          <ul className="consult-list">
            <li><span className="rule" />Free, no-obligation consultation</li>
            <li><span className="rule" />By appointment, in person or by phone</li>
            <li><span className="rule" />Direct access — no gatekeepers</li>
          </ul>
          <div className="consult-contact">
            <div><span className="cap">Office</span><strong>Orange County, California</strong></div>
            <div><span className="cap">Direct</span><strong>949 · 293 · 9955</strong></div>
            <div><span className="cap">DRE №</span><strong>02048293</strong></div>
          </div>
        </div>
        <form className="consult-form" data-reveal onSubmit={(e) => e.preventDefault()}>
          <div className="form-head">
            <span className="cap">Form 01 · Private inquiry</span>
            <span className="form-no">№ 0142</span>
          </div>
          <label className="field">
            <span>Full name</span>
            <input type="text" placeholder="—" />
          </label>
          <div className="field-row">
            <label className="field">
              <span>Email</span>
              <input type="email" placeholder="—" />
            </label>
            <label className="field">
              <span>Telephone</span>
              <input type="tel" placeholder="—" />
            </label>
          </div>
          <div className="field">
            <span>Your interest</span>
            <div className="seg">
              {[
              { v: 'buy', l: 'Acquire' },
              { v: 'sell', l: 'Place a residence' },
              { v: 'both', l: 'Both' }].
              map((o) =>
              <button type="button" key={o.v} data-on={interest === o.v ? '1' : '0'}
              onClick={() => setInterest(o.v)}>{o.l}</button>
              )}
            </div>
          </div>
          <label className="field">
            <span>A note (optional)</span>
            <textarea rows="3" placeholder="—" />
          </label>
          <button type="submit" className="btn btn-gold btn-block">
            Request Consultation <i aria-hidden="true">→</i>
          </button>
          <p className="form-foot cap">
            Your information stays private — we never share or sell your details.
          </p>
        </form>
      </div>
    </section>);

}

// ───────────────────────────────────────────────────────────────────────────
// Footer
// ───────────────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer" data-screen-label="06 Footer">
      <div className="foot-top">
        <a href="#top" className="brand brand-foot">
          <img className="brand-logo brand-logo-foot logo-dark-only" src={IMG['logo']} alt="Ashkon Babaee Group" />
          <img className="brand-logo brand-logo-foot logo-light-only" src="assets/images-from-live/logo-gold-light.png" alt="Ashkon Babaee Group" />
        </a>
        <p className="foot-credo">
          Serving the most beautiful stretch of land in California &mdash;
          based in Orange County, working nationwide.
        </p>
      </div>
      <div className="foot-cols">
        <div className="foot-col">
          <span className="cap">Group</span>
          <a href="#about">About Us</a>
          <a href="#collection">Our Listings</a>
          <a href="#voices">Reviews</a>
          <a href="#consult">Contact Us</a>
        </div>
        <div className="foot-col">
          <span className="cap">Representation</span>
          <a href="#consult">Buy a Home</a>
          <a href="#consult">Sell a Home</a>
          <a href="#consult">Off-Market Listings</a>
          <a href="#consult">Property Valuation</a>
        </div>
        <div className="foot-col">
          <span className="cap">Office</span>
          <span>Based in California</span>
          <span>Working nationwide</span>
          <a href="tel:9492939955">949 · 293 · 9955</a>
          <span>DRE №02048293</span>
        </div>
        <div className="foot-col">
          <span className="cap">Social</span>
          <a href="https://www.instagram.com/ashkonbabaee/">Instagram</a>
          <a href="https://www.youtube.com/@ashkonbabaee/">YouTube</a>
          <a href="https://www.facebook.com/ashkon.babaee">Facebook</a>
          <a href="https://www.linkedin.com/in/ashkon-babaee-916810112">LinkedIn</a>
        </div>
      </div>
      <div className="foot-rule" />
      <div className="foot-bottom">
        <span className="cap">© 2026 Ashkon Babaee Group · DRE №02048293 · DRE №02141254</span>
        <span className="cap">Equal Housing Opportunity · All rights reserved</span>
        <span className="cap">Designed &amp; Developed by <a href="https://dvsondigital.com" target="_blank" rel="noopener">DVSON Digital Solutions</a></span>
      </div>
    </footer>);

}

// ───────────────────────────────────────────────────────────────────────────
// Tweaks
// ───────────────────────────────────────────────────────────────────────────
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks · Ashkon">
      <TweakSection label="Hero" />
      <TweakRadio label="Variant" value={t.hero}
      options={[{ value: 'still', label: 'Still' }, { value: 'split', label: 'Split' }, { value: 'editorial', label: 'Editorial' }]}
      onChange={(v) => setTweak('hero', v)} />

      <TweakSection label="Listings" />
      <TweakRadio label="Layout" value={t.listings}
      options={[{ value: 'editorial', label: 'Editorial' }, { value: 'uniform', label: 'Uniform' }, { value: 'stacked', label: 'Stacked' }]}
      onChange={(v) => setTweak('listings', v)} />

      <TweakSection label="Atmosphere" />
      <TweakRadio label="Paper" value={t.paper}
      options={[{ value: 'dark', label: 'Matte' }, { value: 'midnight', label: 'Midnight' }, { value: 'charcoal', label: 'Charcoal' }]}
      onChange={(v) => setTweak('paper', v)} />
      <TweakRadio label="Accent" value={t.palette}
      options={[{ value: 'yellow', label: 'Gold' }, { value: 'champagne', label: 'Champagne' }, { value: 'bronze', label: 'Bronze' }, { value: 'ivory', label: 'Ivory' }]}
      onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="System" />
      <TweakSelect label="Type" value={t.type}
      options={[
      { value: 'cormorant-inter', label: 'Cormorant + Inter' },
      { value: 'fraunces-grotesk', label: 'Fraunces + Space Grotesk' },
      { value: 'serif-only', label: 'All serif (Cormorant + EB Garamond)' },
      { value: 'sans-only', label: 'Sans only (Inter Display)' }]
      }
      onChange={(v) => setTweak('type', v)} />
      <TweakRadio label="Density" value={t.density}
      options={[{ value: 'compact', label: 'Compact' }, { value: 'regular', label: 'Still' }, { value: 'airy', label: 'Still' }]}
      onChange={(v) => setTweak('density', v)} />
    </TweaksPanel>);

}

// ───────────────────────────────────────────────────────────────────────────
// App
// ───────────────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.paper = t.paper;
    r.dataset.palette = t.palette;
    r.dataset.density = t.density;
    r.dataset.type = t.type;
  }, [t.paper, t.palette, t.density, t.type]);

  return (
    <div id="top" className="page">
      <Nav />
      <main>
        <Hero variant={t.hero} />
        <About />
        <Collection variant={t.listings} />
        <PastSales />
        <Voices />
        <Consult />
      </main>
      <Footer />
      <TweaksUI t={t} setTweak={setTweak} />
    </div>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);