// Isometric CSS villa illustration — Ktima Panagiotopoulou-inspired
// Whitewashed stone + glass walls overlooking the Gulf of Patras

const Villa = () => {
  return (
    <div className="villa-stage">
      <div className="villa-sky">
        <div className="sun" />
        <div className="cloud cloud-1" />
        <div className="cloud cloud-2" />
      </div>

      {/* Sea horizon */}
      <div className="sea">
        <div className="sea-shimmer" />
      </div>

      {/* Distant hills */}
      <div className="hill hill-far" />
      <div className="hill hill-mid" />

      {/* Isometric scene */}
      <div className="iso-scene">
        {/* Cypress trees back */}
        <div className="cypress cypress-1"><div className="cypress-shadow" /></div>
        <div className="cypress cypress-2"><div className="cypress-shadow" /></div>

        {/* Vineyard rows */}
        <div className="vineyard">
          {[...Array(7)].map((_, i) => <div key={i} className="vine-row" style={{ animationDelay: `${i * 0.1}s` }} />)}
        </div>

        {/* Villa main */}
        <div className="villa">
          {/* Stone base */}
          <div className="villa-base">
            <div className="face face-front" />
            <div className="face face-side" />
            <div className="face face-top" />
          </div>

          {/* Glass wing */}
          <div className="villa-glass">
            <div className="face glass-front">
              <div className="mullion" />
              <div className="mullion" />
              <div className="mullion" />
              <div className="glass-reflection" />
            </div>
            <div className="face glass-side" />
            <div className="face glass-top" />
          </div>

          {/* Upper white block */}
          <div className="villa-upper">
            <div className="face face-front" />
            <div className="face face-side" />
            <div className="face face-top" />
            <div className="window-cut w1" />
            <div className="window-cut w2" />
          </div>

          {/* Pergola */}
          <div className="pergola">
            <div className="pergola-beam" />
            <div className="pergola-beam" />
            <div className="pergola-beam" />
            <div className="pergola-beam" />
          </div>

          {/* Pool */}
          <div className="pool">
            <div className="pool-water" />
          </div>
        </div>

        {/* Olive trees */}
        <div className="olive olive-1" />
        <div className="olive olive-2" />
        <div className="olive olive-3" />

        {/* Path stones */}
        <div className="path">
          {[...Array(5)].map((_, i) => <div key={i} className="stone" />)}
        </div>

        {/* Ground */}
        <div className="ground" />
      </div>
    </div>
  );
};

window.Villa = Villa;